style：能源总览-样式优化

src/pages_function/pages/overview/energy/index.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
   <view class="page-container">
     <NavBar title="能源总览" />
 
@@ -83,9 +83,15 @@
               <view :class="['rank-index', `rank-${index + 1}`]">{{ index + 1 }}</view>
               <view class="rank-main">
                 <text class="rank-name">{{ textValue(item.name) }}</text>
-                <text class="rank-region">{{ textValue(item.region) }}</text>
+                <view class="rank-meta">
+                  <text class="rank-meta-label">区域</text>
+                  <text class="rank-region">{{ textValue(item.region) }}</text>
+                </view>
+              </view>
+              <view class="rank-usage">
+                <text class="rank-value">{{ textValue(item.value) }}</text>
+                <text class="rank-unit">{{ selectedEnergyUnit }}</text>
               </view>
-              <text class="rank-value">{{ textValue(item.value) }} {{ selectedEnergyUnit }}</text>
             </view>
           </view>
         </template>
@@ -748,11 +754,13 @@ function textValue(value) {
 
 .rank-row {
   min-width: 0;
-  min-height: 88rpx;
+  min-height: 118rpx;
+  padding: 20rpx 0;
   display: flex;
   align-items: center;
-  gap: 18rpx;
+  gap: 20rpx;
   border-bottom: 1rpx solid #edf0f5;
+  box-sizing: border-box;
 }
 
 .rank-row:last-child {
@@ -760,31 +768,31 @@ function textValue(value) {
 }
 
 .rank-index {
-  width: 42rpx;
+  width: 48rpx;
-  height: 42rpx;
+  height: 48rpx;
-  border-radius: 50%;
+  border-radius: 14rpx;
-  background: #e5e7eb;
+  background: #f1f5f9;
   color: #475569;
-  font-size: 23rpx;
+  font-size: 24rpx;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: 0 0 42rpx;
+  flex: 0 0 48rpx;
 }
 
 .rank-1 {
-  background: #fef3c7;
+  background: #fff7ed;
-  color: #d97706;
+  color: #ea580c;
 }
 
 .rank-2 {
-  background: #e0f2fe;
+  background: #eff6ff;
-  color: #0284c7;
+  color: #2563eb;
 }
 
 .rank-3 {
-  background: #fee2e2;
+  background: #fef2f2;
   color: #dc2626;
 }
 
@@ -793,32 +801,74 @@ function textValue(value) {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 6rpx;
+  gap: 12rpx;
 }
 
 .rank-name {
-  font-size: 26rpx;
+  font-size: 28rpx;
+  line-height: 1.25;
   color: #111827;
-  font-weight: 700;
+  font-weight: 800;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.rank-meta {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+}
+
+.rank-meta-label {
+  height: 34rpx;
+  padding: 0 10rpx;
+  border-radius: 8rpx;
+  background: #f1f5f9;
+  color: #64748b;
+  font-size: 20rpx;
+  line-height: 34rpx;
+  flex: 0 0 auto;
+}
+
 .rank-region {
-  font-size: 22rpx;
+  min-width: 0;
+  font-size: 23rpx;
   color: #64748b;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.rank-usage {
+  max-width: 210rpx;
+  min-width: 150rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8rpx;
+  flex: 0 0 auto;
+}
+
 .rank-value {
   max-width: 210rpx;
   text-align: right;
-  font-size: 25rpx;
+  font-size: 30rpx;
+  line-height: 1;
   color: #0f172a;
-  font-weight: 800;
+  font-weight: 900;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rank-unit {
+  max-width: 210rpx;
+  text-align: right;
+  font-size: 22rpx;
+  line-height: 1;
+  color: #64748b;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -937,3 +987,5 @@ function textValue(value) {
   color: #ffffff;
 }
 </style>
+
+