reader/pages/donutLogin/index.less

.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;
        }
    }
}