fix: 样式完善与修改。

src/pages/statistic/bigScreen/index.vue

@@ -4,26 +4,29 @@
     
     <scroll-view scroll-y class="screen-scroll">
       <!-- 核心指标卡片 -->
-      <view class="metric-cards">
+      <view class="section">
-        <view class="metric-card primary">
+        <view class="section-title">核心指标</view>
-          <view class="metric-label">净资产</view>
+        <view class="metric-cards">
-          <view class="metric-value">{{ Number(netAsset || 0).toFixed(2) }}<text>元</text></view>
+          <view class="metric-card primary">
-        </view>
+            <view class="metric-label">净资产</view>
-        <view class="metric-card">
+            <view class="metric-value">{{ Number(netAsset || 0).toFixed(2) }}<text>元</text></view>
-          <view class="metric-label">总负债</view>
+          </view>
-          <view class="metric-value danger">{{ Number(totalDebt || 0).toFixed(2) }}<text>元</text></view>
+          <view class="metric-card">
-        </view>
+            <view class="metric-label">总负债</view>
-        <view class="metric-card">
+            <view class="metric-value danger">{{ Number(totalDebt || 0).toFixed(2) }}<text>元</text></view>
-          <view class="metric-label">总资产</view>
+          </view>
-          <view class="metric-value success">{{ Number(totalAsset || 0).toFixed(2) }}<text>元</text></view>
+          <view class="metric-card">
-        </view>
+            <view class="metric-label">总资产</view>
-        <view class="metric-card">
+            <view class="metric-value success">{{ Number(totalAsset || 0).toFixed(2) }}<text>元</text></view>
-          <view class="metric-label">信用卡已用额度</view>
+          </view>
-          <view class="metric-value danger">{{ Number(creditBalance || 0).toFixed(2) }}<text>元</text></view>
+          <view class="metric-card">
-        </view>
+            <view class="metric-label">信用卡已用额度</view>
-        <view class="metric-card">
+            <view class="metric-value danger">{{ Number(creditBalance || 0).toFixed(2) }}<text>元</text></view>
-          <view class="metric-label">未结清贷款本息</view>
+          </view>
-          <view class="metric-value danger">{{ Number(unClearedOnlineDebt || 0).toFixed(2) }}<text>元</text></view>
+          <view class="metric-card">
+            <view class="metric-label">未结清贷款本息</view>
+            <view class="metric-value danger">{{ Number(unClearedOnlineDebt || 0).toFixed(2) }}<text>元</text></view>
+          </view>
         </view>
       </view>
       <!-- 未结清分期及贷款 -->
@@ -488,7 +491,7 @@ const assetChartOpts = computed(() => ({
     lineHeight: 25
   },
   title: {
-    name: `总计`,
+    name: `资产总计`,
     fontSize: 15,
     color: '#666666'
   },
@@ -636,8 +639,9 @@ const trendChartOpts = ref({
   dataLabel: false,
   xAxis: {
     disableGrid: true,
-    rotateLabel: true,
+    fontSize: 9,
-    labelCount: 5
+    boundaryGap: 'justify',
+    labelCount: 3
   },
   yAxis: {
     gridType: 'dash',
@@ -680,8 +684,9 @@ const expenseChartOpts = ref({
   dataLabel: false,
   xAxis: {
     disableGrid: true,
-    rotateLabel: true,
+    fontSize: 9,
-    labelCount: 4
+    boundaryGap: 'justify',
+    labelCount: 3
   },
   yAxis: {
     gridType: 'dash',
@@ -724,8 +729,9 @@ const investChartOpts = ref({
   dataLabel: false,
   xAxis: {
     disableGrid: true,
-    rotateLabel: true,
+    fontSize: 9,
-    labelCount: 4
+    boundaryGap: 'justify',
+    labelCount: 3
   },
   yAxis: {
     gridType: 'dash',
@@ -765,8 +771,9 @@ const lendRepaymentChartOpts = ref({
   dataLabel: false,
   xAxis: {
     disableGrid: true,
-    rotateLabel: true,
+    fontSize: 9,
-    labelCount: 5
+    boundaryGap: 'justify',
+    labelCount: 3
   },
   yAxis: {
     gridType: 'dash',
@@ -809,8 +816,9 @@ const balanceChartOpts = ref({
   dataLabel: false,
   xAxis: {
     disableGrid: true,
-    rotateLabel: true,
+    fontSize: 9,
-    labelCount: 5
+    boundaryGap: 'justify',
+    labelCount: 3
   },
   yAxis: {
     gridType: 'dash',
@@ -850,8 +858,9 @@ const creditBillChartOpts = ref({
   dataLabel: false,
   xAxis: {
     disableGrid: true,
-    rotateLabel: true,
+    fontSize: 9,
-    labelCount: 4
+    boundaryGap: 'justify',
+    labelCount: 3
   },
   yAxis: {
     gridType: 'dash',
@@ -891,8 +900,9 @@ const openCardChartOpts = ref({
   dataLabel: false,
   xAxis: {
     disableGrid: true,
-    rotateLabel: true,
+    fontSize: 9,
-    labelCount: 5
+    boundaryGap: 'justify',
+    labelCount: 3
   },
   yAxis: {
     gridType: 'dash',
@@ -928,8 +938,9 @@ const posCardChartOpts = ref({
   dataLabel: false,
   xAxis: {
     disableGrid: true,
-    rotateLabel: true,
+    fontSize: 9,
-    labelCount: 6
+    boundaryGap: 'justify',
+    labelCount: 3
   },
   yAxis: {
     gridType: 'dash',
@@ -1302,7 +1313,6 @@ onMounted(() => {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20rpx;
-  margin: 24rpx 0;
   
   .metric-card:nth-child(4),
   .metric-card:nth-child(5) {
@@ -1363,6 +1373,10 @@ onMounted(() => {
   padding: 24rpx;
   border: 1px solid rgba(148, 163, 184, 0.3);
   box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.5);
+  
+  &:first-child {
+    margin-top: 24rpx;
+  }
 }
 
 .section-title {
@@ -1374,14 +1388,15 @@ onMounted(() => {
   border-bottom: 1px solid rgba(148, 163, 184, 0.2);
   position: relative;
   padding-left: 16rpx;
+  line-height: 28rpx;
 
   &::before {
     content: '';
     position: absolute;
     left: 0;
-    top: 2rpx;
+    top: 0;
     width: 6rpx;
-    height: 24rpx;
+    height: 28rpx;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 3rpx;
   }