123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- .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;
- .welcomeText {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- width: 100%;
- text-align: center;
- font-size: 40rpx;
- line-height: 80rpx;
- }
- .box {
- position: absolute;
- width: 100%;
- bottom: 125rpx;
- .button {
- margin-top: 100rpx;
- width: 500rpx;
- height: 100rpx;
- background: #00B240;
- border-radius: 50rpx;
- font-size: 40rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- .wxIcon {
- width: 68rpx;
- height: 68rpx;
- margin-right: 40rpx;
- }
- }
- }
- .cgroup {
- margin-top: 230rpx;
- .donutLogin__checkbox-container {
- color: rgba(0, 0, 0, 0.3);
- display: flex;
- justify-content: center;
- font-size: 12px;
- margin-top: 12px;
- }
- .donutLogin__checkbox {
- display: none;
- }
- .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__checkbox[aria-checked=true]+.donutLogin__checkbox-label,
- .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__checkbox-text {
- margin-left: 2px;
- }
- }
- }
|