A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(签到组件): 重构签到功能并优化样式

Browse Source 
- 添加签到组件到详情页
- 修改签到初始化逻辑，使用SignInComponent代替原有方法
- 优化签到弹窗样式和交互
- 移除调试用的console.log
- 更新资源路径为绝对路径
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-11-25 13:59:12 +08:00
parent aa0723d138
commit 73731fbbba
8 changed files with 555 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
component/sign-in/sign-in.txt
View File

@@ -36,6 +36,7 @@
height: 100%;
z-index: 10005;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.signInBox-mask * {
@@ -146,7 +147,7 @@
top: -21px;
z-index: 1;
width: 522px;
height: 594px;
height: 596px;
background-color: #fdda55;
padding: 20px;
border-radius: 0 0 20px 0;
@@ -331,6 +332,12 @@
cursor: pointer;
}
.signInBox-mask .signInBox .signInBox-content .left-box .calendar-box .sign-in-btn.already {
background-color: #fdeeb7;
color: #deae07;
font-size: 16px;
}
.signInBox-mask .signInBox .signInBox-content .sign-in-box {
margin: 0 15px;
border-radius: 20px;
@@ -356,6 +363,10 @@
border-bottom: 1px dotted #ebebeb;
}
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list {
display: none;
}
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-list .sign-in-item {
padding: 11px 0 0 30px;
}
@@ -429,6 +440,7 @@
color: #d7d7d7;
padding-top: 10px;
padding-bottom: 10px;
display: none;
}
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-more {
@@ -437,6 +449,7 @@
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
display: none;
}
.signInBox-mask .signInBox .signInBox-content .sign-in-box .sign-in-more .sign-in-more-icon {
@@ -447,6 +460,7 @@
.signInBox-mask .signInBox .signInBox-content .sign-in-box .discuss-list-no {
flex-direction: column;
display: none;
}
.signInBox-mask .signInBox .signInBox-content .sign-in-box .discuss-list-no .empty-icon {
@@ -467,6 +481,7 @@
left: 0;
width: 100vw;
height: 100vh;
display: none;
}
.signInBox-mask .succeed-mask .succeed-box {
@@ -572,6 +587,10 @@
line-height: 28px;
}
.signInBox-mask .succeed-mask .succeed-box .succeed-award-list .succeed-award-item {
display: none;
}
.signInBox-mask .succeed-mask .succeed-box .succeed-award-list .succeed-award-item:not(:last-of-type) {
margin-bottom: 12px;
}
@@ -616,14 +635,14 @@
<div class="signInBox-mask flexcenter">
<div class="signInBox">
<div class="signInBox-head">
<img class="header-halo" src="/img/halo-icon.png">
<img class="header-bi" src="/img/coin-icon.png">
<img class="header-cross" src="/img/cross-icon.png">
<img class="header-halo" src="https://app.gter.net/image/gter/commonCom/sign-in/img/halo-icon.png">
<img class="header-bi" src="https://app.gter.net/image/gter/commonCom/sign-in/img/coin-icon.png">
<img class="header-cross" src="https://app.gter.net/image/gter/commonCom/sign-in/img/cross-icon.png">
</div>
<div class="signInBox-content flexflex">
<div class="left-box">
<div class="content-header flexacenter">
<img class="bi-img" src="/img/coin-icon.png">
<img class="bi-img" src="https://app.gter.net/image/gter/commonCom/sign-in/img/coin-icon.png">
<div class="bi-value" data-field="integral">0</div>
<div class="bi-text">寄托币</div>
<div class="bi-rule">签到规则</div>
@@ -638,21 +657,56 @@
</div>
<div class="calendar-box flexflex">
<div class="sign-in-text">本月已签到 <span class="sign-in-value" data-field="signnum">0</span> 天，共领 <span class="sign-in-value" data-field="signreward">0</span> 寄托币</div>
<div class="sign-in-text">本月已签到 <span class="sign-in-value" data-field="signnum">0</span> 天，共领 <span
class="sign-in-value" data-field="signreward">0</span> 寄托币<span class="diligent"
hidden>，次月可获寄托勤务兵勋章</span></div>
<div class="calendar flexflex" data-list="calendar"></div>
<div class="sign-in-btn flexcenter" data-action="sign">立即签到</div>
<!-- <div v-else-if="issign == 1" class="sign-in-btn flexcenter already">今天已签到，明天记得来哦~</div> -->
</div>
</div>
<div class="sign-in-box flex1 flexflex">
<div class="sign-in-header flexflex">今日已签到 <div class="sign-in-header-value" data-field="todaycount">0</div>人</div>
<div class="discuss-list-no flexcenter flex1" hidden>
<img class="empty-icon" src="https://app.gter.net/image/miniApp/offer/empty-icon.png">
<div class="discuss-list-no-text">暂无数据</div>
<div class="sign-in-header flexflex">今日已签到 <div class="sign-in-header-value" data-field="todaycount">0</div>人
</div>
<div class="discuss-list-no flexcenter flex1">
<img class="empty-icon" src="https://app.gter.net/image/gter/commonCom/sign-in/img/empty-icon.png">
<div class="discuss-list-no-text">- 暂无数据 -</div>
</div>
<div class="sign-in-list"></div>
<div class="sign-in-finish flexcenter">- End -</div>
<div class="sign-in-more flexcenter">更多 <img class="sign-in-more-icon"
src="https://app.gter.net/image/gter/commonCom/sign-in/img/arrows-circle-black.png"></div>
</div>
</div>
</div>
<!-- 签到成功 -->
<div class="succeed-mask flexcenter">
<div class="succeed-box flexcenter flexcolumn">
<div class="succeed-icon flexflex">
<img class="succeed-icon-bj" src="https://app.gter.net/image/gter/commonCom/sign-in/img/halo-icon.png">
<div class="succeed-icon-header-dot succeed-icon-header-dot-left"></div>
<div class="succeed-icon-header-dot succeed-icon-header-dot-right"></div>
<div class="succeed-icon-header"></div>
<div class="succeed-icon-dot flexflex">
<div class="succeed-icon-dot-item" v-for="index in 8" :key="index"></div>
</div>
<div class="yellow-tick-box flexcenter">
<img class="yellow-tick-circle" src="https://app.gter.net/image/gter/commonCom/sign-in/img/circle-yellow.svg">
<img class="yellow-tick-faint-yellow" src="https://app.gter.net/image/gter/commonCom/sign-in/img/tick-faint-yellow.svg">
</div>
</div>
<div class="succeed-award-list flexcolumn flexacenter">
<div class="succeed-award-item flexacenter reward" v-if="reward != 0">
<div class="succeed-award-name">随机奖励</div>
<div class="succeed-award-value flexcenter">+{{ reward }}</div>
</div>
<div class="succeed-award-item flexacenter extra_reward" v-if="extra_reward != 0">
<div class="succeed-award-name">额外奖励</div>
<div class="succeed-award-value flexcenter">+{{ extra_reward }}</div>
</div>
<div class="sign-in-list" data-list="users"></div>
<div class="sign-in-finish flexcenter" hidden>- End -</div>
<div class="sign-in-more flexcenter" hidden>更多 <img class="sign-in-more-icon" src="https://app.gter.net/image/miniApp/offer/arrows-circle-black.png"></div>
</div>
</div>
</div>