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