This commit is contained in:
dhr
2025-08-22 18:25:54 +08:00
parent a437d7a485
commit e3b4826dce
11 changed files with 1050 additions and 366 deletions

View File

@ -2,29 +2,12 @@
<div class="stat-card" :style="customStyles">
<!-- 标题区域 -->
<div class="stat-card__title">{{ title }}</div>
<!-- 数值区域 -->
<div class="stat-card__value-container">
<span class="stat-card__value">{{ formattedValue }}</span>
<span class="stat-card__value">{{ props.value }}</span>
<span class="stat-card__unit">{{ unit }}</span>
</div>
<!-- 底部信息区域 -->
<div class="stat-card__footer">
<div class="stat-card__trend">
<img
class="stat-card__trend-icon"
:src="'/src/assets/large/' + trendIcon+'.png'"
:alt="trendDirection === 'up' ? '上升' : '下降'"
>
<span class="stat-card__trend-text">{{ trendText }}</span>
</div>
<img
class="stat-card__badge"
:src="'/src/assets/large/'+badgeIcon+'.png'"
alt="徽章图标"
>
</div>
</div>
</template>
@ -107,18 +90,18 @@ const trendText = computed(() => {
box-sizing: border-box;
border: 1px solid rgba(29, 214, 255, 0.1);
border-radius: 4px; // 增加轻微圆角,提升视觉效果
&__title {
font-size: 14px;
color: #8FABBF;
color: #8fabbf;
line-height: 20px;
}
&__value-container {
display: flex;
align-items: baseline;
}
&__value {
font-size: 24px;
color: #fff;
@ -126,34 +109,34 @@ const trendText = computed(() => {
margin-right: 5px;
font-weight: bold;
}
&__unit {
color: #8FABBF;
color: #8fabbf;
font-size: 14px;
}
&__footer {
display: flex;
justify-content: space-between;
align-items: center;
}
&__trend {
display: flex;
align-items: center;
}
&__trend-icon {
width: 12px;
height: 12px;
margin-right: 4px;
}
&__trend-text {
font-size: 14px;
color: #8FABBF;
color: #8fabbf;
}
&__badge {
width: 40px;
height: 40px;