From 15d1a40cc942b4a8a18e8879b33b315061372a27 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Mon, 24 Nov 2025 18:26:40 +0800 Subject: [PATCH] no message --- css/signIn.css | 409 ++++++++++++++++++++++++++++++++++++++- css/signIn.less | 485 +++++++++++++++++++++++++++++++++++++++++++++- index.html | 497 ++++++++++++++++++++++++------------------------ js/signIn.js | 231 ++++++++++++++++++++-- signIn.html | 120 ++++++++++-- 5 files changed, 1455 insertions(+), 287 deletions(-) diff --git a/css/signIn.css b/css/signIn.css index cd950f4..ed35469 100644 --- a/css/signIn.css +++ b/css/signIn.css @@ -30,6 +30,10 @@ body { display: flex; align-items: center; } +.flexcolumn { + display: flex; + flex-direction: column; +} .flex1 { flex: 1; } @@ -43,7 +47,6 @@ body { } .signInBox-mask .signInBox { width: 1060px; - height: 658px; background-color: #fff; border-radius: 20px; position: relative; @@ -78,15 +81,21 @@ body { 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; + 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; @@ -109,4 +118,400 @@ body { } .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; + } } diff --git a/css/signIn.less b/css/signIn.less index e7adf9e..f7ac4cf 100644 --- a/css/signIn.less +++ b/css/signIn.less @@ -37,6 +37,11 @@ body { align-items: center; } +.flexcolumn { + display: flex; + flex-direction: column; +} + .flex1 { flex: 1; } @@ -52,7 +57,6 @@ body { .signInBox { width: 1060px; - height: 658px; background-color: #fff; border-radius: 20px; position: relative; @@ -93,15 +97,19 @@ body { } .signInBox-content { + align-items: flex-start; + height: 595px; .left-box { width: 538px; - padding: 20px 30px; + padding: 20px 30px 40px; border-right: 1px dotted #d7d7d7; .content-header { font-size: 15px; color: rgb(85, 85, 85); line-height: 40px; + margin-bottom: 16px; + position: relative; .bi-img { width: 25px; @@ -127,9 +135,482 @@ body { .bi-rule { margin-left: auto; + cursor: pointer; + } + + .outer-ring { + position: absolute; + left: calc(100% + 31px); + top: -21px; + z-index: 1; + width: 522px; + height: 594px; + background-color: rgba(253, 218, 85, 1); + padding: 20px; + border-radius: 0 0 20px 0; + + .rule-box { + background-color: #fff; + -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.0705882352941176); + -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.0705882352941176); + box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.0705882352941176); + border-radius: 20px; + height: 100%; + flex-direction: column; + padding-bottom: 62px; + + .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; + + &::after { + content: ""; + display: block; + position: absolute; + bottom: -4px; + left: 50%; + transform: translateX(-50%); + width: 120px; + height: 22px; + background-color: rgba(253, 238, 183, 1); + border-radius: 219px; + z-index: -1; + } + } + + .rule-list { + flex-direction: column; + margin: 0 23px; + + .rule-item { + .rule-item-icon { + width: 52px; + height: 52px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 20px; + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529); + -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529); + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.117647058823529); + margin-right: 30px; + } + + .rule-item-img { + width: 30px; + height: 36px; + } + + .rule-item-text { + color: #333; + line-height: 28px; + font-size: 16px; + padding: 40px 0; + } + + &:not(:last-of-type) { + .rule-item-text { + border-bottom: 1px dotted #ebebeb; + } + } + } + } + + .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; + } + } + } + } + + .calendar-box { + width: 477px; + height: 479px; + background-color: rgb(251, 251, 251); + border-radius: 12px; + flex-direction: column; + padding: 38px 23px 0; + + .sign-in-text { + color: #555555; + line-height: 28px; + font-size: 14px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + margin-bottom: 21px; + .sign-in-value { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + color: #000000; + margin: 0 5px; + } + } + + .calendar { + margin: 0 0 14px; // 30rpx÷1.5=20px,15rpx÷1.5=10px + flex-wrap: wrap; + + .calendar-item { + width: 40px; // 60rpx÷1.5=40px + height: 40px; // 60rpx÷1.5=40px + border-radius: 50%; + margin-bottom: 10px; // 15rpx÷1.5=10px + font-size: 17px; // 25rpx÷1.5≈17px(四舍五入) + color: #aaaaaa; + position: relative; + box-sizing: border-box; + + // 非第7n个子元素的右边距 + &:not(:nth-child(7n)) { + margin-right: 25px; // 37.5rpx÷1.5=25px + } + + // 过去日期样式 + &.formerly { + background-color: rgba(246, 246, 246, 1); + } + + // 已完成日期样式 + &.already { + background-color: rgba(253, 238, 183, 1); + color: #deae07; + border: none; + + // 已完成状态下的对勾 + .yellow-tick { + width: 14px; // 21rpx÷1.5=14px + height: 14px; // 21rpx÷1.5=14px + display: block; + position: absolute; + top: -2px; // 3rpx÷1.5=2px + right: -2px; // 3rpx÷1.5=2px + } + } + + // 对勾默认隐藏 + .yellow-tick { + display: none; + } + + // 今日日期样式 + &.today { + border: 1px solid rgba(222, 174, 7, 1); // 1rpx÷1.5≈0.67px,取1px更清晰 + color: #deae07; + } + } + } + + .sign-in-btn { + height: 48px; + border-radius: 219px; // 328.5rpx ÷ 1.5 = 219px(精确值) + background-color: rgb(247, 195, 8); + color: #fff; + font-size: 20px; + cursor: pointer; + } + } + } + + .sign-in-box { + margin: 0 15px; + // padding-bottom: 22px; + 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; + + .sign-in-header { + padding: 24px 30px 9px; + font-size: 14px; + line-height: 28px; + + .sign-in-header-value { + font-weight: 650; + color: #000000; + margin: 0 5px; + border-bottom: 1px dotted #ebebeb; + } + } + + .sign-in-list { + .sign-in-item { + padding: 11px 0 0 30px; + + &:not(:last-of-type) { + .sign-in-info { + border-bottom: 1px dotted #ebebeb; + } + } + + .sign-in-index { + color: #aaaaaa; + font-size: 15px; + width: 40px; + } + + .sign-in-avatar { + width: 24px; + height: 24px; + border-radius: 50%; + margin-right: 10px; + } + + .sign-in-info { + padding-bottom: 9px; + + &:not(:last-of-type) { + border-bottom: 1px dotted #ebebeb; + } + + .sign-in-info-left { + flex-direction: column; + } + + .sign-in-name { + color: #555555; + font-size: 14px; + margin-bottom: 3px; + + .sign-in-my { + margin-left: 10px; + width: 20px; + height: 20px; + background-color: rgba(240, 242, 245, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 5px; + font-size: 12px; + color: #7f7f7f; + } + } + + .sign-in-time { + color: #aaaaaa; + font-size: 13px; + } + } + + .sign-in-value { + border-radius: 50%; + margin-right: 20px; + width: 40px; + height: 40px; + background-color: rgb(253, 238, 183); + font-family: PingFangSC-Regular, "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + color: #deae07; + } + } + } + + .sign-in-finish { + font-size: 13px; + color: rgb(215, 215, 215); + padding-top: 10px; + padding-bottom: 10px; + } + + .sign-in-more { + color: #333333; + font-size: 14px; + padding-top: 10px; + padding-bottom: 10px; + cursor: pointer; + + .sign-in-more-icon { + width: 14px; + height: 14px; + margin-left: 6px; + } + } + + .discuss-list-no { + flex-direction: column; + .empty-icon { + width: 101px; + height: 120px; + margin-bottom: 15px; + } + .discuss-list-no-text { + font-size: 12px; + color: #555555; + line-height: 22px; } } } } } + + .succeed-mask { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + + .succeed-box { + width: 263px; + background-color: rgba(0, 0, 0, 0.705882352941177); + border-radius: 43px; + padding-bottom: 29px; + position: relative; + z-index: 1; + animation: succeedShow 0.3s, succeedHide 0.3s; + animation-delay: 0s, 1.8s; + + .succeed-icon { + width: 100px; + height: 100px; + background-color: rgba(251, 247, 233, 1); + border: 1px solid rgba(253, 218, 85, 1); + border-radius: 10px; + -moz-box-shadow: 3px 3px 5px rgba(253, 238, 183, 1); + -webkit-box-shadow: 3px 3px 5px rgba(253, 238, 183, 1); + box-shadow: 3px 3px 5px rgba(253, 238, 183, 1); + flex-direction: column; + position: relative; + margin-top: -48px; + margin-bottom: 31px; + + .succeed-icon-bj { + width: 220px; + height: 211px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: -1; + } + + .succeed-icon-header-dot { + width: 6px; + height: 16px; + background-color: rgba(247, 195, 8, 1); + border-radius: 24px; + position: absolute; + top: -6px; + } + + .succeed-icon-header-dot-left { + left: 20px; + } + + .succeed-icon-header-dot-right { + left: 74px; + } + + .succeed-icon-header { + height: 24px; + background-color: rgba(253, 223, 109, 0.776470588235294); + border-radius: 10px 10px 0 0; + } + + .succeed-icon-dot { + flex-wrap: wrap; + padding-top: 16px; + padding-left: 15px; + + .succeed-icon-dot-item { + width: 10px; + height: 10px; + border-radius: 50%; + background-color: rgba(247, 195, 8, 1); + margin-right: 10px; + margin-bottom: 10px; + } + } + + .yellow-tick-box { + position: absolute; + width: 40px; + height: 40px; + right: -10px; + bottom: -10px; + z-index: 1; + + .yellow-tick-circle { + position: absolute; + left: -5px; + top: -5px; + width: 50px; + height: 50px; + z-index: -1; + } + + .yellow-tick-faint-yellow { + width: 19px; + height: 16px; + } + } + } + + .succeed-award-list { + color: #fff; + font-size: 16px; + line-height: 28px; + + .succeed-award-item { + &:not(:last-of-type) { + margin-bottom: 12px; + } + + .succeed-award-name { + margin-right: 9px; + } + + .succeed-award-value { + height: 22px; + padding: 0 13.5px; + background-color: rgba(246, 246, 246, 1); + 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; + } + } } diff --git a/index.html b/index.html index 1f243f3..9361d2a 100644 --- a/index.html +++ b/index.html @@ -1,283 +1,282 @@ - - +{extend name="forum/base" /} +{block name="link"} + +{/block} - - - - 论坛首页 - - +{block name="main"} +
+ - - - - - - -
- - -
按钮
- - -
-
- - -
-
-
- -
话题
-
-
-
{{ ongoingbj.title }}
-
{{ ongoingbj.description }}
-
-
-
{{ ongoingbj.comments }}
-
人正在讨论
-
-
-
- -
+
+
+
+
{:html_entity_decode($ad['headerbanner'])}
+ +
+ +
+
+
+ +
话题
+
+
+ {{ ongoingbj.title }} + +
+
+
{{ ongoingbj.comments }}
+
人正在讨论
+
+
+
+
-
- -
-
- -
精选
-
- +
-
- - 26Fall祈福,求offer得offer! - -
- +
+
+ +
精选
-
-
-
-
我要发帖
- -
- - - +
+ + {$operation['bbsindexslide']['title']} - -
-
-
-
{{ item.title }}
-
{{ item.subtitle }}
-
- -
微信扫码
-
-
+
+ {foreach :array_slice($operation['bbsindexarticle'],0,4) as $key=>$vo } + + {/foreach}
- -
-
- -
-
-
{{ item["date"] }} {{ item['type'] }}
-
{{ item["content"] }}
-
-
+
+ {foreach :array_slice($operation['bbsindexarticle'],4,8) as $key=>$vo } + + {/foreach}
-
-
- -
- -
论坛版块
-
- -
+ +
+
+ 我要发帖 + -
- -
加载中
-
-
-