fix: 首页日历、净资产、统计页面，统一优化样式。

src/views/invest/accountsBalance/index.vue

@@ -26,123 +26,101 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 1.45rem)">
-      <div class="summary-con" style="height: 115px">
-        <div class="right-con" v-hasPermi="['invest:debitCard']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+    <div class="main-con">
+      <div class="summary-con">
+        <div class="center-con" v-hasPermi="['invest:debitCard']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><WalletFilled /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">储蓄账户余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.debitAllBalance }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ accountsBalance.debitAllBalance }}</div>
           </div>
         </div>
-        <div class="right-con" v-hasPermi="['invest:debitCard']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con" v-hasPermi="['invest:debitCard']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><CreditCard /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">储蓄卡余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.debitBalance }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ accountsBalance.debitBalance }}</div>
           </div>
         </div>
-        <div class="right-con" v-hasPermi="['invest:debitCard']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con" v-hasPermi="['invest:debitCard']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">I类储蓄卡余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.idebitBalance }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ accountsBalance.idebitBalance }}</div>
           </div>
         </div>
-        <div class="right-con" v-hasPermi="['invest:debitCard']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con" v-hasPermi="['invest:debitCard']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">II类储蓄卡余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.iidebitBalance }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ accountsBalance.iidebitBalance }}</div>
           </div>
         </div>
-        <div class="right-con" v-hasPermi="['invest:creditCard']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con" v-hasPermi="['invest:creditCard']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><CreditCard /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">信用卡可用额度</div>
-            <div>
-              <span class="num">{{ accountsBalance.creditAvailableLimit }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ accountsBalance.creditAvailableLimit }}</div>
           </div>
         </div>
-      </div>
-      <div class="summary-con" style="height: 110px">
-        <div class="right-con" v-hasPermi="['invest:creditCard']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con" v-hasPermi="['invest:creditCard']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#00D0FF"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">信用卡余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.creditBalance }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ accountsBalance.creditBalance }}</div>
           </div>
         </div>
         <div class="center-con" v-hasPermi="['invest:onlineLend']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#FF6B9D"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">借贷账户余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.lendAccountBalance }}</span>
-            </div>
+            <div class="num">{{ accountsBalance.lendAccountBalance }}</div>
           </div>
         </div>
         <div class="center-con" v-hasPermi="['invest:futureStocks:list']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">投资账户余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.investBalance }}</span>
-            </div>
+            <div class="num">{{ accountsBalance.investBalance }}</div>
           </div>
         </div>
         <div class="center-con" v-hasPermi="['invest:futureStocks:list']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Histogram /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">期货投资账户余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.futuresBalance }}</span>
-            </div>
+            <div class="num">{{ accountsBalance.futuresBalance }}</div>
           </div>
         </div>
         <div class="center-con" v-hasPermi="['invest:futureStocks:list']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">股票投资账户余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.stocksBalance }}</span>
-            </div>
+            <div class="num">{{ accountsBalance.stocksBalance }}</div>
           </div>
         </div>
       </div>
       <div class="title-con">
-        <div class="title">记账账户查询统计</div>
+        <div class="title">记账账户统计</div>
         <div class="operate-btn-con">
           <el-radio-group v-model="radioVal" @change="handleRadioChange">
             <el-radio-button label="柱状图" />
@@ -153,9 +131,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 225x); margin-top: -10px"></div>
-        <el-table v-show="radioVal === '账户余额'" v-loading="loading" :data="accountsBalance.accountsBalancesList" height="calc(100% - 245px)">
+        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar"></div>
+        <div v-show="radioVal === '折线图'" class="chart" id="chartLine"></div>
+        <el-table v-show="radioVal === '账户余额'" v-loading="loading" :data="accountsBalance.accountsBalancesList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -164,7 +142,7 @@
           <el-table-column label="记账账户" align="center" prop="account" />
           <el-table-column label="可用余额" align="center" prop="availableLimit" />
         </el-table>
-        <el-table v-show="radioVal === '信用卡可用余额'" v-loading="loading" :data="accountsBalance.creditBalancesList" height="calc(100% - 245px)">
+        <el-table v-show="radioVal === '信用卡可用余额'" v-loading="loading" :data="accountsBalance.creditBalancesList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -182,6 +160,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { WalletFilled, CreditCard, Money, Coin, TrendCharts, PieChart, Histogram, Odometer } from '@element-plus/icons-vue'
 import { getAccountsAnalysis } from '@/api/invest/statisticAnalysis'
 const { proxy } = getCurrentInstance()
 const { account_type } = proxy.useDict('account_type')
@@ -359,15 +338,16 @@ const drawBar = (data) => {
       {
         data: data.value1,
         type: 'bar',
-        barWidth: 20, // 根据需求调整数值大小，单位是像素
+        barMaxWidth: 40,
         itemStyle: {
-          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
           color: function (params) {
-            // 这里可以根据需要设置不同的颜色，比如根据数据值
-            if (params.data <= 0) {
-              return 'green'
-            } else if (params.data > 0) {
-              return 'red'
+            // 根据数值大小设置颜色
+            if (params.data < 0) {
+              return '#f56c6c' // 红色表示负数（欠款）
+            } else if (params.data === 0) {
+              return '#909399' // 灰色表示零
+            } else {
+              return '#67c23a' // 绿色表示正数（有余额）
             }
           }
         }
@@ -384,6 +364,9 @@ const drawBar = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -440,16 +423,18 @@ const drawLine = (data) => {
         data: data.value1,
         type: 'line',
         lineStyle: {
-          color: '#4181c9'
+          color: '#4181c9',
+          width: 2
         },
         itemStyle: {
-          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
           color: function (params) {
-            // 这里可以根据需要设置不同的颜色，比如根据数据值
-            if (params.data <= 0) {
-              return 'green'
-            } else if (params.data > 0) {
-              return 'red'
+            // 根据数值大小设置颜色
+            if (params.data < 0) {
+              return '#f56c6c' // 红色表示负数（欠款）
+            } else if (params.data === 0) {
+              return '#909399' // 灰色表示零
+            } else {
+              return '#67c23a' // 绿色表示正数（有余额）
             }
           }
         },
@@ -481,21 +466,129 @@ const drawLine = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const currentType = ref('柱状图')
 const handleRadioChange = (type) => {
   currentType.value = type
-  switch (type) {
-    case '柱状图':
-      drawBar(chartData.value)
-      break
-    case '折线图':
-      drawLine(chartData.value)
-      break
-    default:
-      break
-  }
+  nextTick(() => {
+    switch (type) {
+      case '柱状图':
+        drawBar(chartData.value)
+        break
+      case '折线图':
+        drawLine(chartData.value)
+        break
+      default:
+        break
+    }
+  })
 }
 getList()
 </script>
+
+<style lang="scss" scoped>
+.main-con {
+  height: calc(100vh - 200px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.summary-con {
+  gap: 0.14rem !important;
+  justify-content: flex-start !important;
+  flex-wrap: wrap;
+  margin-bottom: 0.08rem !important;
+  flex-shrink: 0;
+
+  .center-con {
+    flex: 1 1 calc(20% - 0.112rem);
+    min-width: 2.4rem;
+    max-width: calc(20% - 0.112rem);
+    list-style: none !important;
+
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+
+  .item-wrap {
+    list-style: none !important;
+
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+
+    .num,
+    .title {
+      &::before,
+      &::after {
+        display: none !important;
+        content: none !important;
+      }
+    }
+  }
+
+  .icon-box {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+}
+
+.title-con {
+  flex-shrink: 0;
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+}
+
+.content-con {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+
+  .chart {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+  }
+
+  .el-table {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+@media (max-width: 1600px) {
+  .summary-con .center-con {
+    flex: 1 1 calc(25% - 0.105rem);
+    max-width: calc(25% - 0.105rem);
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con .center-con {
+    flex: 1 1 calc(33.333% - 0.093rem);
+    max-width: calc(33.333% - 0.093rem);
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con .center-con {
+    flex: 1 1 calc(50% - 0.07rem);
+    max-width: calc(50% - 0.07rem);
+  }
+}
+</style>