* { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; word-break: break-word; } a { text-decoration: none; color: unset; } body { background-color: #eef2f5; } .flexflex { display: flex; } .flexcenter { display: flex; justify-content: center; align-items: center; } .flexjcenter { display: flex; justify-content: center; } .flexacenter { display: flex; align-items: center; } .flexcolumn { display: flex; flex-direction: column; } .flex1 { flex: 1; } .signInBox-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10005; } .signInBox-mask .signInBox { width: 1060px; background-color: #fff; border-radius: 20px; position: relative; filter: drop-shadow(0 -5px 0 #f7c308); } .signInBox-mask .signInBox .signInBox-head { position: relative; height: 64px; border-bottom: 1px dotted #d7d7d7; } .signInBox-mask .signInBox .signInBox-head .header-bi { width: 83px; height: 99px; position: absolute; top: -61px; left: 50%; transform: translateX(-50%); } .signInBox-mask .signInBox .signInBox-head .header-halo { width: 160px; height: 154px; position: absolute; top: -89px; left: 50%; transform: translateX(-50%); } .signInBox-mask .signInBox .signInBox-head .header-cross { width: 18px; height: 18px; position: absolute; top: 10px; right: 10px; cursor: pointer; } .signInBox-mask .signInBox .signInBox-content { align-items: flex-start; height: 595px; } .signInBox-mask .signInBox .signInBox-content .left-box { width: 538px; padding: 20px 30px 40px; border-right: 1px dotted #d7d7d7; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header { font-size: 15px; color: #555555; line-height: 40px; margin-bottom: 16px; position: relative; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-img { width: 25px; height: 30px; margin-right: 7px; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-value { font-family: Arial-Black, "Arial Black", sans-serif; font-weight: 900; font-style: normal; font-size: 28px; color: #000000; margin-right: 7px; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-text { font-size: 15px; color: #555555; line-height: normal; margin-top: 8px; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .bi-rule { margin-left: auto; cursor: pointer; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring { position: absolute; left: calc(100% + 31px); top: -21px; z-index: 1; width: 522px; height: 594px; background-color: #fdda55; padding: 20px; border-radius: 0 0 20px 0; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box { background-color: #fff; -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07058824); border-radius: 20px; height: 100%; flex-direction: column; padding-bottom: 62px; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header { font-weight: 650; font-size: 24px; color: #ab8705; text-align: center; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; padding-top: 37px; position: relative; z-index: 1; margin-bottom: 14px; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-header::after { content: ""; display: block; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 120px; height: 22px; background-color: #fdeeb7; border-radius: 219px; z-index: -1; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list { flex-direction: column; margin: 0 23px; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-icon { width: 52px; height: 52px; background-color: #f6f6f6; border: 1px solid #ebebeb; border-radius: 20px; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.11764706); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.11764706); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.11764706); margin-right: 30px; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-img { width: 30px; height: 36px; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item .rule-item-text { color: #333; line-height: 28px; font-size: 16px; padding: 40px 0; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-list .rule-item:not(:last-of-type) .rule-item-text { border-bottom: 1px dotted #ebebeb; } .signInBox-mask .signInBox .signInBox-content .left-box .content-header .outer-ring .rule-box .rule-close { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 15px; color: #555555; text-decoration: underline; margin: 0 auto; line-height: normal; width: max-content; cursor: pointer; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box { width: 477px; height: 479px; background-color: #fbfbfb; border-radius: 12px; flex-direction: column; padding: 38px 23px 0; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-text { color: #555555; line-height: 28px; font-size: 14px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; margin-bottom: 21px; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-text .sign-in-value { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; color: #000000; margin: 0 5px; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar { margin: 0 0 14px; flex-wrap: wrap; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 10px; font-size: 17px; color: #aaaaaa; position: relative; box-sizing: border-box; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item:not(:nth-child(7n)) { margin-right: 25px; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.formerly { background-color: #f6f6f6; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already { background-color: #fdeeb7; color: #deae07; border: none; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.already .yellow-tick { width: 14px; height: 14px; display: block; position: absolute; top: -2px; right: -2px; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item .yellow-tick { display: none; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .calendar .calendar-item.today { border: 1px solid #deae07; color: #deae07; } .signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn { height: 48px; border-radius: 219px; background-color: #f7c308; color: #fff; font-size: 20px; cursor: pointer; } .signInBox-mask .signInBox .signInBox-content .sign-in-box { margin: 0 15px; border-radius: 20px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; color: #555555; font-size: 15px; flex-direction: column; height: inherit; overflow: auto; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header { padding: 24px 30px 9px; font-size: 14px; line-height: 28px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-header .sign-in-header-value { font-weight: 650; color: #000000; margin: 0 5px; border-bottom: 1px dotted #ebebeb; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item { padding: 11px 0 0 30px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item:not(:last-of-type) .sign-in-info { border-bottom: 1px dotted #ebebeb; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-index { color: #aaaaaa; font-size: 15px; width: 40px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-avatar { width: 24px; height: 24px; border-radius: 50%; margin-right: 10px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info { padding-bottom: 9px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info:not(:last-of-type) { border-bottom: 1px dotted #ebebeb; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-info-left { flex-direction: column; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-name { color: #555555; font-size: 14px; margin-bottom: 3px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-name .sign-in-my { margin-left: 10px; width: 20px; height: 20px; background-color: #f0f2f5; border: 1px solid #d7d7d7; border-radius: 5px; font-size: 12px; color: #7f7f7f; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-info .sign-in-time { color: #aaaaaa; font-size: 13px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item .sign-in-value { border-radius: 50%; margin-right: 20px; width: 40px; height: 40px; background-color: #fdeeb7; font-family: PingFangSC-Regular, "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 16px; color: #deae07; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-finish { font-size: 13px; color: #d7d7d7; padding-top: 10px; padding-bottom: 10px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-more { color: #333333; font-size: 14px; padding-top: 10px; padding-bottom: 10px; cursor: pointer; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-more .sign-in-more-icon { width: 14px; height: 14px; margin-left: 6px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .discuss-list-no { flex-direction: column; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .discuss-list-no .empty-icon { width: 101px; height: 120px; margin-bottom: 15px; } .signInBox-mask .signInBox .signInBox-content .sign-in-box .discuss-list-no .discuss-list-no-text { font-size: 12px; color: #555555; line-height: 22px; } .signInBox-mask .succeed-mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } .signInBox-mask .succeed-mask .succeed-box { width: 263px; background-color: rgba(0, 0, 0, 0.70588235); border-radius: 43px; padding-bottom: 29px; position: relative; z-index: 1; animation: succeedShow 0.3s, succeedHide 0.3s; animation-delay: 0s, 1.8s; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon { width: 100px; height: 100px; background-color: #fbf7e9; border: 1px solid #fdda55; border-radius: 10px; -moz-box-shadow: 3px 3px 5px #fdeeb7; -webkit-box-shadow: 3px 3px 5px #fdeeb7; box-shadow: 3px 3px 5px #fdeeb7; flex-direction: column; position: relative; margin-top: -48px; margin-bottom: 31px; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-bj { width: 220px; height: 211px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-header-dot { width: 6px; height: 16px; background-color: #f7c308; border-radius: 24px; position: absolute; top: -6px; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-header-dot-left { left: 20px; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-header-dot-right { left: 74px; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-header { height: 24px; background-color: rgba(253, 223, 109, 0.77647059); border-radius: 10px 10px 0 0; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-dot { flex-wrap: wrap; padding-top: 16px; padding-left: 15px; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .succeed-icon-dot .succeed-icon-dot-item { width: 10px; height: 10px; border-radius: 50%; background-color: #f7c308; margin-right: 10px; margin-bottom: 10px; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .yellow-tick-box { position: absolute; width: 40px; height: 40px; right: -10px; bottom: -10px; z-index: 1; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .yellow-tick-box .yellow-tick-circle { position: absolute; left: -5px; top: -5px; width: 50px; height: 50px; z-index: -1; } .signInBox-mask .succeed-mask .succeed-box .succeed-icon .yellow-tick-box .yellow-tick-faint-yellow { width: 19px; height: 16px; } .signInBox-mask .succeed-mask .succeed-box .succeed-award-list { color: #fff; font-size: 16px; line-height: 28px; } .signInBox-mask .succeed-mask .succeed-box .succeed-award-list .succeed-award-item:not(:last-of-type) { margin-bottom: 12px; } .signInBox-mask .succeed-mask .succeed-box .succeed-award-list .succeed-award-item .succeed-award-name { margin-right: 9px; } .signInBox-mask .succeed-mask .succeed-box .succeed-award-list .succeed-award-item .succeed-award-value { height: 22px; padding: 0 13.5px; background-color: #f6f6f6; border-radius: 20px; font-size: 18px; letter-spacing: 1px; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; color: #deae07; font-weight: 650; } @keyframes succeedShow { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes succeedHide { 0% { transform: scale(1); } 100% { transform: scale(0); display: none; } }