瀏覽代碼

style: 数据统计页汇总卡片、列表项、详情弹窗数据全部居中显示

- 汇总卡片 text-align: center
- 统计范围文字居中
- 列表卡片头部改为垂直居中布局(日期/站点名居中,箭头绝对定位右侧)
- info-grid 数据项 text-align: center
- 详情弹窗行改为垂直堆叠居中布局

Co-Authored-By: Claude <noreply@anthropic.com>
skyline 1 月之前
父節點
當前提交
7b9502f0ce
共有 1 個文件被更改,包括 21 次插入12 次删除
  1. 21 12
      admin-h5/src/pages/statistics/index.vue

+ 21 - 12
admin-h5/src/pages/statistics/index.vue

@@ -77,11 +77,9 @@
         :key="index"
         @click="viewDetail(item)">
         <view class="item-header">
-          <view class="item-left">
-            <text class="item-period">{{ activeTab === 0 ? item.statDate : item.statMonth }}</text>
-            <text class="item-station">{{ item.stationName || '-' }}</text>
-          </view>
-          <AppIcon name="chevron-right" :size="24" color="#B0B0B0" />
+          <text class="item-period">{{ activeTab === 0 ? item.statDate : item.statMonth }}</text>
+          <text class="item-station">{{ item.stationName || '-' }}</text>
+          <AppIcon name="chevron-right" :size="24" color="#B0B0B0" class="item-header-arrow" />
         </view>
         <view class="item-content">
           <view class="info-grid">
@@ -495,6 +493,7 @@ onMounted(async () => {
 
 .summary-range {
   padding: 8rpx 20rpx 12rpx;
+  text-align: center;
 }
 .range-text {
   font-size: 22rpx;
@@ -512,6 +511,7 @@ onMounted(async () => {
   padding: 24rpx;
   border-radius: 16rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+  text-align: center;
 }
 .summary-label {
   font-size: 24rpx;
@@ -545,23 +545,30 @@ onMounted(async () => {
 }
 .item-header {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
   padding-bottom: 16rpx;
   border-bottom: 1rpx solid #F0F0F0;
   margin-bottom: 16rpx;
+  position: relative;
 }
 .item-period {
   font-size: 28rpx;
   font-weight: 600;
   color: #1A1A1A;
-  display: block;
+  text-align: center;
 }
 .item-station {
   font-size: 24rpx;
   color: #999999;
   margin-top: 4rpx;
-  display: block;
+  text-align: center;
+}
+.item-header-arrow {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 .info-grid {
   display: grid;
@@ -570,6 +577,7 @@ onMounted(async () => {
 }
 .info-item {
   padding: 8rpx 0;
+  text-align: center;
 }
 .info-label {
   font-size: 24rpx;
@@ -668,19 +676,20 @@ onMounted(async () => {
 }
 .detail-row {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
   padding: 16rpx 0;
   border-bottom: 1rpx solid #F5F5F5;
+  gap: 4rpx;
 }
 .d-label {
-  font-size: 26rpx;
+  font-size: 24rpx;
   color: #999999;
 }
 .d-value {
-  font-size: 26rpx;
+  font-size: 28rpx;
   color: #1A1A1A;
-  font-weight: 500;
+  font-weight: 600;
 }
 .d-value.amount {
   color: #C6171E;