修改
This commit is contained in:
		| @ -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; | ||||
|  | ||||
		Reference in New Issue
	
	Block a user