reader/pages/donutLogin/index.wxss

.donutLogin {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background-color: #F0F2F5;
  background-image: url('https://reader-wx.ai160.com/images/reader/v3/donutLogin.png');
  background-repeat: no-repeat;
  background-size: contain;
  color: #000000;
}
.donutLogin .welcomeText {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: 40rpx;
  line-height: 80rpx;
}
.donutLogin .box {
  position: absolute;
  width: 100%;
  bottom: 125rpx;
}
.donutLogin .box .button {
  margin-top: 100rpx;
  width: 500rpx;
  height: 100rpx;
  background: #00B240;
  border-radius: 50rpx;
  font-size: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.donutLogin .box .button .wxIcon {
  width: 68rpx;
  height: 68rpx;
  margin-right: 40rpx;
}
.donutLogin .cgroup {
  margin-top: 230rpx;
}
.donutLogin .cgroup .donutLogin__checkbox-container {
  color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  font-size: 12px;
  margin-top: 12px;
}
.donutLogin .cgroup .donutLogin__checkbox {
  display: none;
}
.donutLogin .cgroup .donutLogin__checkbox-label {
  appearance: none;
  display: inline-block;
  border: 0;
  outline: 0;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
  mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
  color: rgba(0, 0, 0, 0.3);
  width: 1em;
  height: 1em;
  font-size: 17px;
}
.donutLogin .cgroup .donutLogin__checkbox[aria-checked=true] + .donutLogin__checkbox-label,
.donutLogin .cgroup .donutLogin__checkbox-label:checked {
  -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
  mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
  color: #07c160;
}
.donutLogin .cgroup .donutLogin__checkbox-text {
  margin-left: 2px;
}