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

src/pages/statistic/bill/stocksAnalysis/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="wallet" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">累计收益</div>
+          <div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
+          <uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">平均收益</div>
+          <div class="num">{{  futuresStock.averageIncome }}<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="arrow-up" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">最大收益</div>
+          <div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
+        </div>
+      </div>
+      <div class="item">
+        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
+          <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
+        </view>
+        <div class="info-sum">
+          <div class="title">最大亏损</div>
+          <div class="num">{{ futuresStock.maxLoss }}<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,79 +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="wallet" size="24" color="#ffffff"></uni-icons>
-        </view>
-        <div class="info-sum">
-          <div class="title">累计收益</div>
-          <div class="num">{{ futuresStock.accumulateIncome }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #c026d3 0%, #dc2626 100%);">
-          <uni-icons type="bars" size="24" color="#ffffff"></uni-icons>
-        </view>
-        <div class="info-sum">
-          <div class="title">平均收益</div>
-          <div class="num">{{  futuresStock.averageIncome }}<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="arrow-up" size="24" color="#ffffff"></uni-icons>
-        </view>
-        <div class="info-sum">
-          <div class="title">最大收益</div>
-          <div class="num">{{ futuresStock.maxRevenue}}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <view class="item-icon" style="background: linear-gradient(135deg, #be123c 0%, #9f1239 100%);">
-          <uni-icons type="arrow-down" size="24" color="#ffffff"></uni-icons>
-        </view>
-        <div class="info-sum">
-          <div class="title">最大亏损</div>
-          <div class="num">{{ futuresStock.maxLoss }}<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'">
@@ -162,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">
@@ -248,6 +247,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   
   // 曲线图配置
   const lineChartOpts = computed(() => {
+    const dataCount = listData.value ? listData.value.length : 0
+    const showXAxisLabel = dataCount <= 10
+    
     // 计算数据范围以动态设置Y轴
     let minValue = 0
     let maxValue = 0
@@ -263,7 +265,8 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
     
     return {
       color: ['#667eea'],
-      padding: [20, 15, 60, 15],
+      padding: [15, 15, 30, 5],
+
       enableScroll: false,
       enableMarkLine: true,
       dataLabel: false,
@@ -277,10 +280,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',
@@ -317,6 +321,9 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
   
   // 柱状图配置
   const columnChartOpts = computed(() => {
+    const dataCount = listData.value ? listData.value.length : 0
+    const showXAxisLabel = dataCount <= 10
+    
     // 计算数据范围以动态设置Y轴
     let minValue = 0
     let maxValue = 0
@@ -345,7 +352,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: {
@@ -357,10 +365,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',
@@ -538,7 +547,10 @@ const start = dayjs(end).add(-12, 'months')
   </script>
   
   <style lang="scss" scoped>
-
+page {
+  height: 100%;
+  overflow: auto;
+}
 .app-container {
   background-color: #f5f7fa;
   padding: 8rpx 0;
@@ -619,6 +631,7 @@ const start = dayjs(end).add(-12, 'months')
   
   .section-title {
     display: flex;
+    margin-top: -10rpx;
     align-items: center;
     padding: 24rpx 32rpx 16rpx;
     background-color: #f5f7fa;
@@ -680,13 +693,13 @@ const start = dayjs(end).add(-12, 'months')
   }
   
   .chart-container {
-    margin: 16rpx 24rpx 160rpx;
+    margin: 16rpx 24rpx 60rpx;
     padding: 16rpx;
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
     border-radius: 16rpx;
     box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
     width: calc(100% - 48rpx);
-    height: 850rpx;
+    height: 800rpx;
     overflow: visible;
     position: relative;
   }