fix: 统一优化统计分析界面，图标样式等！

src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue

@@ -1,15 +1,14 @@
 
 <template>
     <view class="container">
-      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+      <u-sticky offsetTop="0rpx"
+ customNavHeight="0rpx">
          
          <view class="search-view">
           <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择贷款机构" suffixIcon="search"
           suffixIconStyle="color: #909399" class="search-input">
           </u-input>
        </view>
-       </u-sticky>
-        <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
         <view class="search-view">
           <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
           suffixIconStyle="color: #909399" class="search-input">
@@ -18,7 +17,80 @@
             <uni-icons type="list" size="18" color="#667eea"></uni-icons>
             <text>筛选</text>
           </view>
-        <u-transition :show="filterPanel" mode="fade">
+      </view>
+        <div class="app-container">
+    <div class="header-con" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
+          <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清贷款</div>
+          <div class="num">{{ historyObj.clearedCount }}<span>笔</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
+          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清（本息）</div>
+          <div class="num">{{  historyObj.clearedTotal }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="header-con" ref="searchHeightRef">
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
+          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清（本金）</div>
+          <div class="num">{{ historyObj.clearedPrincipal}}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
+          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">已结清利息</div>
+          <div class="num">{{ historyObj.totalInterest }}<span>元</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <view class="section-title" v-show="listData.length>0">
+    <view class="title-decorator"></view>
+    <text class="title-text">贷款已还统计</text>
+    <view class="view-switch">
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'list' }]" 
+        @click="viewMode = 'list'"
+      >
+        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
+        <text>列表</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'line' }]" 
+        @click="viewMode = 'line'"
+      >
+        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
+        <text>曲线图</text>
+      </view>
+      <view 
+        :class="['switch-item', { 'active': viewMode === 'column' }]" 
+        @click="viewMode = 'column'"
+      >
+        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
+        <text>柱状图</text>
+      </view>
+    </view>
+  </view>
+  </u-sticky>
+  
+  <u-transition :show="filterPanel" mode="fade">
           <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
             <view class="filter-panel-content">
              
@@ -65,78 +137,6 @@
             ></u-datetime-picker>
           </view>
         </u-transition>
-      </view>
-      </u-sticky>
-        <div class="app-container">
-    <div class="header-con" ref="searchHeightRef">
-      <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #5b51d8 0%, #6b21a8 100%);">
-          <uni-icons type="checkbox-filled" size="20" color="#ffffff"></uni-icons>
-        </view>
-        <div class="info-sum">
-          <div class="title">已结清贷款</div>
-          <div class="num">{{ historyObj.clearedCount }}<span>笔</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
-          <uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
-        </view>
-        <div class="info-sum">
-          <div class="title">已结清（本息）</div>
-          <div class="num">{{  historyObj.clearedTotal }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" ref="searchHeightRef">
-      <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);">
-          <uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
-        </view>
-        <div class="info-sum">
-          <div class="title">已结清（本金）</div>
-          <div class="num">{{ historyObj.clearedPrincipal}}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #0d9488 100%);">
-          <uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
-        </view>
-        <div class="info-sum">
-          <div class="title">已结清利息</div>
-          <div class="num">{{ historyObj.totalInterest }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div></div>
-  </div>
-  <view class="section-title" v-show="listData.length>0">
-    <view class="title-decorator"></view>
-    <text class="title-text">贷款已还统计</text>
-    <view class="view-switch">
-      <view 
-        :class="['switch-item', { 'active': viewMode === 'list' }]" 
-        @click="viewMode = 'list'"
-      >
-        <uni-icons type="list" size="16" :color="viewMode === 'list' ? '#667eea' : '#999'"></uni-icons>
-        <text>列表</text>
-      </view>
-      <view 
-        :class="['switch-item', { 'active': viewMode === 'line' }]" 
-        @click="viewMode = 'line'"
-      >
-        <uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
-        <text>曲线图</text>
-      </view>
-      <view 
-        :class="['switch-item', { 'active': viewMode === 'column' }]" 
-        @click="viewMode = 'column'"
-      >
-        <uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
-        <text>柱状图</text>
-      </view>
-    </view>
-  </view>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -161,7 +161,7 @@
   </view>
   
   <!-- 列表展示 -->
-      <u-list :spaceHeight="200" lowerThreshold="100" v-show="viewMode === 'list'">
+      <u-list :spaceHeight="700" lowerThreshold="100" v-show="viewMode === 'list'">
         <u-list-item v-for="(item, index) in listData" :key="index">
           <view class="list-item">
             <view class="item-header">
@@ -244,61 +244,70 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
   
   // 曲线图配置
-  const lineChartOpts = ref({
-    color: ['#667eea'],
-    padding: [20, 15, 35, 5],
-    enableScroll: false,
-    enableMarkLine: true,
-    dataLabel: false,
-    dataPointShape: true,
-    legend: {
-      show: false
-    },
-    xAxis: {
-      disableGrid: true,
-      boundaryGap: 'justify',
-      axisLine: false,
-      scrollShow: true,
-      itemCount: 5,
-      fontSize: 10,
-      fontColor: '#999999',
-      rotateLabel: true,
-      rotateAngle: 30
-    },
-    yAxis: {
-      gridType: 'dash',
-      dashLength: 4,
-      gridColor: '#EEEEEE',
-      splitNumber: 5,
-      fontSize: 10,
-      fontColor: '#999999',
-      format: (val) => {
-        if (val >= 10000) {
-          return (val / 10000).toFixed(1) + 'w'
-        }
-        return val.toFixed(0)
+  const lineChartOpts = computed(() => {
+    const dataCount = listData.value ? listData.value.length : 0
+    const showXAxisLabel = dataCount <= 10
+    
+    return {
+      color: ['#667eea'],
+      padding: [20, 15, 35, 5],
+      enableScroll: false,
+      enableMarkLine: true,
+      dataLabel: false,
+      dataPointShape: true,
+      legend: {
+        show: false
       },
-      data: [
-        {
-          min: 0
+      xAxis: {
+        disableGrid: true,
+        boundaryGap: 'justify',
+        axisLine: false,
+        scrollShow: true,
+        itemCount: 5,
+        fontSize: showXAxisLabel ? 10 : 0,
+        fontColor: showXAxisLabel ? '#999999' : 'transparent',
+        rotateLabel: true,
+        rotateAngle: 30,
+        disabled: !showXAxisLabel
+      },
+      yAxis: {
+        gridType: 'dash',
+        dashLength: 4,
+        gridColor: '#EEEEEE',
+        splitNumber: 5,
+        fontSize: 10,
+        fontColor: '#999999',
+        format: (val) => {
+          if (val >= 10000) {
+            return (val / 10000).toFixed(1) + 'w'
+          }
+          return val.toFixed(0)
+        },
+        data: [
+          {
+            min: 0
+          }
+        ]
+      },
+      extra: {
+        line: {
+          type: 'curve',
+          width: 3,
+          activeType: 'hollow',
+          linearType: 'custom',
+          linearOpacity: 0.2,
+          onShadow: true,
+          animation: true
         }
-      ]
-    },
-    extra: {
-      line: {
-        type: 'curve',
-        width: 3,
-        activeType: 'hollow',
-        linearType: 'custom',
-        linearOpacity: 0.2,
-        onShadow: true,
-        animation: true
       }
     }
   })
   
   // 柱状图配置
   const columnChartOpts = computed(() => {
+    const dataCount = listData.value ? listData.value.length : 0
+    const showXAxisLabel = dataCount <= 10
+    
     // 计算数据范围以动态设置Y轴
     let minValue = 0
     let maxValue = 0
@@ -321,7 +330,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
     
     return {
       color: ['#667eea'],
-      padding: [15, 15, 80, 15],
+      padding: [15, 15, 30, 5],
+
       enableScroll: false,
       dataLabel: false,
       legend: {
@@ -333,10 +343,11 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
         axisLine: false,
         scrollShow: true,
         itemCount: 5,
-        fontSize: 10,
-        fontColor: '#999999',
+        fontSize: showXAxisLabel ? 10 : 0,
+        fontColor: showXAxisLabel ? '#999999' : 'transparent',
         rotateLabel: true,
-        rotateAngle: 30
+        rotateAngle: 30,
+        disabled: !showXAxisLabel
       },
       yAxis: {
         gridType: 'dash',
@@ -514,7 +525,10 @@ const start = dayjs(end).add(-24, 'months')
   </script>
   
   <style lang="scss" scoped>
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .app-container {
   background-color: #f5f7fa;
   padding: 0;
@@ -596,6 +610,7 @@ const start = dayjs(end).add(-24, 'months')
 
   .section-title {
     display: flex;
+    margin-top: -10rpx;
     align-items: center;
     padding: 24rpx 32rpx 16rpx;
     background-color: #f5f7fa;