Explorar o código

fix: 结算记录站点列改为居中上下结构,名称在上ID在下,中间分隔线

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline hai 15 horas
pai
achega
59e39179f4

+ 18 - 11
admin-web-new/src/views/admin/finance/settlement.vue

@@ -163,9 +163,10 @@ const formatMoney = (value: number) => {
         <el-table-column v-for="col in state.tableData.columns" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" show-overflow-tooltip>
           <template #default="{ row }">
             <template v-if="col.prop === 'stationId'">
-              <div class="station-cell">
-                <span class="station-id">{{ row.stationId }}</span>
+              <div class="station-name-cell">
                 <span class="station-name">{{ row.stationName }}</span>
+                <span class="station-divider"></span>
+                <span class="station-id">{{ row.stationId }}</span>
               </div>
             </template>
             <template v-else-if="col.prop === 'status'">
@@ -212,21 +213,27 @@ const formatMoney = (value: number) => {
   margin-bottom: 16px;
 }
 
-.station-cell {
+.station-name-cell {
   display: flex;
   flex-direction: column;
-  line-height: 1.6;
-
-  .station-id {
-    font-size: 13px;
-    color: #909399;
-  }
+  align-items: center;
+  gap: 4px;
 
   .station-name {
-    font-size: 14px;
-    color: #303133;
     font-weight: 500;
   }
+
+  .station-divider {
+    display: block;
+    width: 40px;
+    height: 1px;
+    background: var(--el-border-color-light);
+  }
+
+  .station-id {
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+  }
 }
 
 .pagination-container {

+ 18 - 11
admin-web/src/views/admin/finance/settlement.vue

@@ -19,21 +19,27 @@
   margin-bottom: 20px;
 }
 
-.station-cell {
+.station-name-cell {
   display: flex;
   flex-direction: column;
-  line-height: 1.6;
-
-  .station-id {
-    font-size: 13px;
-    color: #909399;
-  }
+  align-items: center;
+  gap: 4px;
 
   .station-name {
-    font-size: 14px;
-    color: #303133;
     font-weight: 500;
   }
+
+  .station-divider {
+    display: block;
+    width: 40px;
+    height: 1px;
+    background: var(--el-border-color-light);
+  }
+
+  .station-id {
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+  }
 }
 
 .page-pager {
@@ -109,9 +115,10 @@
 
           <template #default="{row}">
             <template v-if="field.prop==='stationId'">
-              <div class="station-cell">
-                <span class="station-id">{{ row.stationId }}</span>
+              <div class="station-name-cell">
                 <span class="station-name">{{ row.stationName }}</span>
+                <span class="station-divider"></span>
+                <span class="station-id">{{ row.stationId }}</span>
               </div>
             </template>
             <template v-else-if="field.prop==='status'">