feat(sidebarUserInfo): 用户奖衔样式调整

This commit is contained in:
woody 2025-05-14 09:33:09 +08:00
parent c299b9f54a
commit 9b161e5ab9
1 changed files with 40 additions and 17 deletions

View File

@ -53,7 +53,7 @@
<!--! 用户卡片信息 -->
<div class="awardscard">
<!-- NEW: Awards Sprint Text -->
<div v-if="awards.tarAwardsName" class="awards-progress-summary">
<!-- <div v-if="awards.tarAwardsName" class="awards-progress-summary">
<span class="descriptive-text">当前距离</span>
<span class="highlight-name">
{{ awards.tarAwardsName }}
@ -62,10 +62,29 @@
<span class="highlight-pv">
{{ sprintProgress.achieved }}
</span>
</div>
</div> -->
<div class="user-cards">
<div class="user-cards-left">
<div v-if="awards.tarAwardsName" class="progress-wrapper">
<div class="progress-wrapper__label">奖衔晋升</div>
<div class="sprint-progress-container">
<div
class="sprint-current-progress"
:style="{ width: sprintProgress.percentageString }"
></div>
<div class="sprint-progress-text">
晋升
<span class="target-award-name">{{
awards.tarAwardsName
}}</span>
小区仅需
<span class="achieved-value">{{
sprintProgress.achieved
}}</span>
</div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-wrapper__label">昨日业绩</div>
<div
@ -150,19 +169,6 @@
</div>
</div>
<!-- NEW: Awards Sprint Progress Bar -->
<div v-if="awards.tarAwardsName" class="progress-wrapper">
<div class="progress-wrapper__label">奖衔冲刺</div>
<div class="sprint-progress-container">
<div
class="sprint-current-progress"
:style="{ width: sprintProgress.percentageString }"
></div>
<div class="sprint-progress-text">
已完成 {{ awards.sumRealPv }} / 目标
{{ sprintProgress.target }}
</div>
</div>
</div>
</div>
</div>
</div>
@ -461,7 +467,7 @@ export default {
.user-cards {
cursor: pointer;
padding: 0px 10px 16px;
padding: 16px 10px 16px;
z-index: 1;
.user-card-bg {
position: absolute;
@ -712,10 +718,27 @@ export default {
transform: translate(-50%, -50%);
white-space: nowrap;
text-align: center;
font-size: 10px;
font-size: 12px;
color: #ffffff;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
z-index: 2;
.target-award-name,
.achieved-value {
font-size: 12px;
font-weight: 700;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
margin: 0 2px;
}
.target-award-name {
color: #ffd700;
}
.achieved-value {
color: #f0e68c;
}
}
</style>