diff --git a/src/api/invest/dailyLiabilities.js b/src/api/invest/dailyLiabilities.js
new file mode 100644
index 0000000..49c6a2a
--- /dev/null
+++ b/src/api/invest/dailyLiabilities.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询每日负债统计列表
+export function listDailyLiabilities(query) {
+  return request({
+    url: '/invest/dailyLiabilities/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询每日负债统计详细
+export function getDailyLiabilities(id) {
+  return request({
+    url: '/invest/dailyLiabilities/' + id,
+    method: 'get'
+  })
+}
+
+// 新增每日负债统计
+export function addDailyLiabilities(data) {
+  return request({
+    url: '/invest/dailyLiabilities',
+    method: 'post',
+    data
+  })
+}
+
+// 修改每日负债统计
+export function updateDailyLiabilities(data) {
+  return request({
+    url: '/invest/dailyLiabilities',
+    method: 'put',
+    data
+  })
+}
+
+// 删除每日负债统计
+export function delDailyLiabilities(id) {
+  return request({
+    url: '/invest/dailyLiabilities/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/invest/exchange.js b/src/api/invest/exchange.js
new file mode 100644
index 0000000..1ac689e
--- /dev/null
+++ b/src/api/invest/exchange.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询交易所基础信息列表
+export function listExchange(query) {
+  return request({
+    url: '/invest/exchange/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询交易所基础信息详细
+export function getExchange(id) {
+  return request({
+    url: '/invest/exchange/' + id,
+    method: 'get'
+  })
+}
+
+// 新增交易所基础信息
+export function addExchange(data) {
+  return request({
+    url: '/invest/exchange',
+    method: 'post',
+    data
+  })
+}
+
+// 修改交易所基础信息
+export function updateExchange(data) {
+  return request({
+    url: '/invest/exchange',
+    method: 'put',
+    data
+  })
+}
+
+// 删除交易所基础信息
+export function delExchange(id) {
+  return request({
+    url: '/invest/exchange/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/invest/futureBaseInfor.js b/src/api/invest/futureBaseInfor.js
new file mode 100644
index 0000000..7ad8711
--- /dev/null
+++ b/src/api/invest/futureBaseInfor.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询期货基本合约列表
+export function listFutureBaseInfor(query) {
+  return request({
+    url: '/invest/futureBaseInfor/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询期货基本合约详细
+export function getFutureBaseInfor(id) {
+  return request({
+    url: '/invest/futureBaseInfor/' + id,
+    method: 'get'
+  })
+}
+
+// 新增期货基本合约
+export function addFutureBaseInfor(data) {
+  return request({
+    url: '/invest/futureBaseInfor',
+    method: 'post',
+    data
+  })
+}
+
+// 修改期货基本合约
+export function updateFutureBaseInfor(data) {
+  return request({
+    url: '/invest/futureBaseInfor',
+    method: 'put',
+    data
+  })
+}
+
+// 删除期货基本合约
+export function delFutureBaseInfor(id) {
+  return request({
+    url: '/invest/futureBaseInfor/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/invest/futureStandardInfor.js b/src/api/invest/futureStandardInfor.js
new file mode 100644
index 0000000..9f5060b
--- /dev/null
+++ b/src/api/invest/futureStandardInfor.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询期货品种标准合约列表
+export function listFutureStandardInfor(query) {
+  return request({
+    url: '/invest/futureStandardInfor/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询期货品种标准合约详细
+export function getFutureStandardInfor(id) {
+  return request({
+    url: '/invest/futureStandardInfor/' + id,
+    method: 'get'
+  })
+}
+
+// 新增期货品种标准合约
+export function addFutureStandardInfor(data) {
+  return request({
+    url: '/invest/futureStandardInfor',
+    method: 'post',
+    data
+  })
+}
+
+// 修改期货品种标准合约
+export function updateFutureStandardInfor(data) {
+  return request({
+    url: '/invest/futureStandardInfor',
+    method: 'put',
+    data
+  })
+}
+
+// 删除期货品种标准合约
+export function delFutureStandardInfor(id) {
+  return request({
+    url: '/invest/futureStandardInfor/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/invest/futuresDailyHistory.js b/src/api/invest/futuresDailyHistory.js
new file mode 100644
index 0000000..5f7065d
--- /dev/null
+++ b/src/api/invest/futuresDailyHistory.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询期货日行情历史列表
+export function listFuturesDailyHistory(query) {
+  return request({
+    url: '/invest/futuresDailyHistory/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询期货日行情历史详细
+export function getFuturesDailyHistory(id) {
+  return request({
+    url: '/invest/futuresDailyHistory/' + id,
+    method: 'get'
+  })
+}
+
+// 新增期货日行情历史
+export function addFuturesDailyHistory(data) {
+  return request({
+    url: '/invest/futuresDailyHistory',
+    method: 'post',
+    data
+  })
+}
+
+// 修改期货日行情历史
+export function updateFuturesDailyHistory(data) {
+  return request({
+    url: '/invest/futuresDailyHistory',
+    method: 'put',
+    data
+  })
+}
+
+// 删除期货日行情历史
+export function delFuturesDailyHistory(id) {
+  return request({
+    url: '/invest/futuresDailyHistory/' + id,
+    method: 'delete'
+  })
+}
+
+// 同步期货日行情历史列表
+export function synFuturesDailyHistory(query) {
+  return request({
+    url: '/invest/futuresDailyHistory/synFuturesDailyHistory',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/invest/iitem.js b/src/api/invest/iitem.js
new file mode 100644
index 0000000..bc2d9fe
--- /dev/null
+++ b/src/api/invest/iitem.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 查询预约项目列表
+export function listIitem(query) {
+  return request({
+    url: '/investprod/iitem/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询预约项目详细
+export function getIitem(itemId) {
+  return request({
+    url: '/investprod/iitem/' + itemId,
+    method: 'get'
+  })
+}
+
+// 新增预约项目
+export function addIitem(data) {
+  return request({
+    url: '/investprod/iitem',
+    method: 'post',
+    data
+  })
+}
+
+// 修改预约项目
+export function updateIitem(data) {
+  return request({
+    url: '/investprod/iitem',
+    method: 'put',
+    data
+  })
+}
+
+// 删除预约项目
+export function delIitem(itemId) {
+  return request({
+    url: '/investprod/iitem/' + itemId,
+    method: 'delete'
+  })
+}
+
+// 刷新i茅台预约商品列表
+export function refreshItem(itemId) {
+  return request({
+    url: '/investprod/iitem/refresh',
+    method: 'get'
+  })
+}
diff --git a/src/api/invest/ilog.js b/src/api/invest/ilog.js
new file mode 100644
index 0000000..6614054
--- /dev/null
+++ b/src/api/invest/ilog.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询操作日志列表
+export function listIlog(query) {
+  return request({
+    url: '/investprod/ilog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询操作日志详细
+export function getIlog(logId) {
+  return request({
+    url: '/investprod/ilog/' + logId,
+    method: 'get'
+  })
+}
+
+// 新增操作日志
+export function addIlog(data) {
+  return request({
+    url: '/investprod/ilog',
+    method: 'post',
+    data
+  })
+}
+
+// 修改操作日志
+export function updateIlog(data) {
+  return request({
+    url: '/investprod/ilog',
+    method: 'put',
+    data
+  })
+}
+
+// 删除操作日志
+export function delIlog(logId) {
+  return request({
+    url: '/investprod/ilog/' + logId,
+    method: 'delete'
+  })
+}
diff --git a/src/api/invest/ishop.js b/src/api/invest/ishop.js
new file mode 100644
index 0000000..b4db90d
--- /dev/null
+++ b/src/api/invest/ishop.js
@@ -0,0 +1,78 @@
+import request from '@/utils/request'
+
+// 查询门店列表列表
+export function listIshop(query) {
+  return request({
+    url: '/investprod/ishop/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询门店列表详细
+export function getIshop(shopId) {
+  return request({
+    url: '/investprod/ishop/' + shopId,
+    method: 'get'
+  })
+}
+
+// 新增门店列表
+export function addIshop(data) {
+  return request({
+    url: '/investprod/ishop',
+    method: 'post',
+    data
+  })
+}
+
+// 修改门店列表
+export function updateIshop(data) {
+  return request({
+    url: '/investprod/ishop',
+    method: 'put',
+    data
+  })
+}
+
+// 删除门店列表
+export function delIshop(shopId) {
+  return request({
+    url: '/investprod/ishop/' + shopId,
+    method: 'delete'
+  })
+}
+// i茅台商品
+export function refreshShop() {
+  return request({
+    url: '/investprod/ishop/refresh',
+    method: 'get'
+  })
+}
+
+// 查询省份列表
+export function listProvince(query) {
+  return request({
+    url: '/investprod/ishop/provinceList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询城市列表
+export function listCity(query) {
+  return request({
+    url: '/investprod/ishop/cityList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询区域列表列表
+export function listDistrict(query) {
+  return request({
+    url: '/investprod/ishop/districtList',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/invest/iuser.js b/src/api/invest/iuser.js
new file mode 100644
index 0000000..45c5047
--- /dev/null
+++ b/src/api/invest/iuser.js
@@ -0,0 +1,88 @@
+import request from '@/utils/request'
+
+// 查询用户管理列表
+export function listIuser(query) {
+  return request({
+    url: '/investprod/iuser/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询用户管理详细
+export function getIuser(mobile) {
+  return request({
+    url: '/investprod/iuser/' + mobile,
+    method: 'get'
+  })
+}
+
+// 新增用户管理
+export function addIuser(data) {
+  return request({
+    url: '/investprod/iuser',
+    method: 'post',
+    data
+  })
+}
+
+// 修改用户管理
+export function updateIuser(data) {
+  return request({
+    url: '/investprod/iuser',
+    method: 'put',
+    data
+  })
+}
+
+// 删除用户管理
+export function delIuser(mobile) {
+  return request({
+    url: '/investprod/iuser/' + mobile,
+    method: 'delete'
+  })
+}
+
+// reservation
+export function reservation(mobile) {
+  return request({
+    url: '/investprod/iuser/reservation',
+    method: 'get',
+    params: { mobile }
+  })
+}
+//travelReward
+export function travelReward(mobile) {
+  return request({
+    url: '/investprod/iuser/travelReward',
+    method: 'get',
+    params: { mobile }
+  })
+}
+
+// 发送验证码
+export function sendCode(mobile, deviceId) {
+  return request({
+    url: '/investprod/iuser/sendCode',
+    method: 'get',
+    params: { mobile, deviceId }
+  })
+}
+
+// 查询I茅台用户列表
+export function login(mobile, code, deviceId) {
+  return request({
+    url: '/investprod/iuser/login',
+    method: 'get',
+    params: { mobile, code, deviceId }
+  })
+}
+
+// 新增账号管理
+export function loginIUser(data) {
+  return request({
+    url: '/investprod/iuser/loginIUser',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/api/invest/limitHistory.js b/src/api/invest/limitHistory.js
new file mode 100644
index 0000000..7e63df5
--- /dev/null
+++ b/src/api/invest/limitHistory.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询银行卡额度调整历史记录列表
+export function listLimitHistory(query) {
+  return request({
+    url: '/invest/limitHistory/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询银行卡额度调整历史记录详细
+export function getLimitHistory(id) {
+  return request({
+    url: '/invest/limitHistory/' + id,
+    method: 'get'
+  })
+}
+
+// 新增银行卡额度调整历史记录
+export function addLimitHistory(data) {
+  return request({
+    url: '/invest/limitHistory',
+    method: 'post',
+    data
+  })
+}
+
+// 修改银行卡额度调整历史记录
+export function updateLimitHistory(data) {
+  return request({
+    url: '/invest/limitHistory',
+    method: 'put',
+    data
+  })
+}
+
+// 删除银行卡额度调整历史记录
+export function delLimitHistory(id) {
+  return request({
+    url: '/invest/limitHistory/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/invest/posmachine.js b/src/api/invest/posmachine.js
index 0ce79af..c15a88d 100644
--- a/src/api/invest/posmachine.js
+++ b/src/api/invest/posmachine.js
@@ -42,3 +42,12 @@ export function delPosmachine(id) {
     method: 'delete'
   })
 }
+
+// 查询信用卡刷pos机信息列表
+export function creditPosList(query) {
+  return request({
+    url: '/invest/posmachine/creditPosList',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/invest/productInfor.js b/src/api/invest/productInfor.js
new file mode 100644
index 0000000..0595fdb
--- /dev/null
+++ b/src/api/invest/productInfor.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询商品基础信息列表
+export function listProductInfor(query) {
+  return request({
+    url: '/invest/productInfor/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询商品基础信息详细
+export function getProductInfor(id) {
+  return request({
+    url: '/invest/productInfor/' + id,
+    method: 'get'
+  })
+}
+
+// 新增商品基础信息
+export function addProductInfor(data) {
+  return request({
+    url: '/invest/productInfor',
+    method: 'post',
+    data
+  })
+}
+
+// 修改商品基础信息
+export function updateProductInfor(data) {
+  return request({
+    url: '/invest/productInfor',
+    method: 'put',
+    data
+  })
+}
+
+// 删除商品基础信息
+export function delProductInfor(id) {
+  return request({
+    url: '/invest/productInfor/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/invest/productPriceRecord.js b/src/api/invest/productPriceRecord.js
new file mode 100644
index 0000000..90a5e9a
--- /dev/null
+++ b/src/api/invest/productPriceRecord.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询物价记录列表
+export function listProductPriceRecord(query) {
+  return request({
+    url: '/invest/productPriceRecord/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询物价记录详细
+export function getProductPriceRecord(id) {
+  return request({
+    url: '/invest/productPriceRecord/' + id,
+    method: 'get'
+  })
+}
+
+// 新增物价记录
+export function addProductPriceRecord(data) {
+  return request({
+    url: '/invest/productPriceRecord',
+    method: 'post',
+    data
+  })
+}
+
+// 修改物价记录
+export function updateProductPriceRecord(data) {
+  return request({
+    url: '/invest/productPriceRecord',
+    method: 'put',
+    data
+  })
+}
+
+// 删除物价记录
+export function delProductPriceRecord(id) {
+  return request({
+    url: '/invest/productPriceRecord/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/invest/statisticAnalysis.js b/src/api/invest/statisticAnalysis.js
index 1996e09..71b5557 100644
--- a/src/api/invest/statisticAnalysis.js
+++ b/src/api/invest/statisticAnalysis.js
@@ -79,3 +79,37 @@ export function getDailyExpensesAnalysis(query) {
     params: query
   })
 }
+
+export function getDebitCardAnalysis(query) {
+  return request({
+    url: '/invest/analysis/debitCardAnalysis',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getPosStatics(query) {
+  return request({
+    url: '/invest/analysis/posStatics',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询睡眠账户列表
+export function listSleepAccounts(query) {
+  return request({
+    url: '/invest/analysis/sleepAccountsList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询储蓄卡开卡统计数据
+export function getOpenCardList(query) {
+  return request({
+    url: '/invest/analysis/openCardList',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/invest/stockBaseInfor.js b/src/api/invest/stockBaseInfor.js
new file mode 100644
index 0000000..43c9d79
--- /dev/null
+++ b/src/api/invest/stockBaseInfor.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询股票基础信息列表
+export function listStockBaseInfor(query) {
+  return request({
+    url: '/invest/stockBaseInfor/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询股票基础信息详细
+export function getStockBaseInfor(id) {
+  return request({
+    url: '/invest/stockBaseInfor/' + id,
+    method: 'get'
+  })
+}
+
+// 新增股票基础信息
+export function addStockBaseInfor(data) {
+  return request({
+    url: '/invest/stockBaseInfor',
+    method: 'post',
+    data
+  })
+}
+
+// 修改股票基础信息
+export function updateStockBaseInfor(data) {
+  return request({
+    url: '/invest/stockBaseInfor',
+    method: 'put',
+    data
+  })
+}
+
+// 删除股票基础信息
+export function delStockBaseInfor(id) {
+  return request({
+    url: '/invest/stockBaseInfor/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/invest/stocksDailyHistory.js b/src/api/invest/stocksDailyHistory.js
new file mode 100644
index 0000000..b84e3d4
--- /dev/null
+++ b/src/api/invest/stocksDailyHistory.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询股票日行情历史列表
+export function listStocksDailyHistory(query) {
+  return request({
+    url: '/invest/stocksDailyHistory/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询股票日行情历史详细
+export function getStocksDailyHistory(id) {
+  return request({
+    url: '/invest/stocksDailyHistory/' + id,
+    method: 'get'
+  })
+}
+
+// 新增股票日行情历史
+export function addStocksDailyHistory(data) {
+  return request({
+    url: '/invest/stocksDailyHistory',
+    method: 'post',
+    data
+  })
+}
+
+// 修改股票日行情历史
+export function updateStocksDailyHistory(data) {
+  return request({
+    url: '/invest/stocksDailyHistory',
+    method: 'put',
+    data
+  })
+}
+
+// 删除股票日行情历史
+export function delStocksDailyHistory(id) {
+  return request({
+    url: '/invest/stocksDailyHistory/' + id,
+    method: 'delete'
+  })
+}
+
+// 同步股票日行情历史列表
+export function synStocksDailyHistory(query) {
+  return request({
+    url: '/invest/stocksDailyHistory/synStocksDailyHistory',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/assets/styles/page.scss b/src/assets/styles/page.scss
index 05c5674..99cb1dd 100644
--- a/src/assets/styles/page.scss
+++ b/src/assets/styles/page.scss
@@ -505,62 +505,115 @@
     padding: 0.2rem;
     display: flex;
     justify-content: space-between;
+    gap: 0.16rem;
 
     .left-con,
     .center-con,
     .right-con {
       width: 5.8rem;
-      height: 1.1rem;
-      background: #f8f9fc;
-      border-radius: 0.04rem;
+      height: 1.2rem;
+      background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
+      border-radius: 0.12rem;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: flex-start;
+      padding: 0.2rem 0.24rem;
+      box-shadow: 0 0.04rem 0.16rem rgba(102, 126, 234, 0.08), 0 0 0 0.01rem rgba(102, 126, 234, 0.05);
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+      list-style: none;
 
-      .img {
-        width: 0.88rem;
-        height: 0.93rem;
-        margin-top: 8px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 0.03rem;
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
 
-        img {
-          width: 100%;
-          height: 100%;
+      &:hover {
+        transform: translateY(-0.04rem);
+        box-shadow: 0 0.08rem 0.24rem rgba(102, 126, 234, 0.15), 0 0 0 0.01rem rgba(102, 126, 234, 0.1);
+
+        &::before {
+          opacity: 1;
+        }
+
+        .icon-box {
+          transform: scale(1.08);
+
+          .el-icon {
+            transform: rotate(8deg);
+          }
+        }
+      }
+
+      .icon-box {
+        width: 0.7rem;
+        height: 0.7rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%);
+        border-radius: 0.1rem;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        flex-shrink: 0;
+        border: 0.01rem solid rgba(102, 126, 234, 0.1);
+        margin-right: 0.16rem;
+
+        .el-icon {
+          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
       }
 
       .line {
-        width: 0.01rem;
-        height: 0.41rem;
-        border: 0.01rem solid #e2ede0;
+        width: 0.02rem;
+        height: 0.5rem;
+        background: linear-gradient(180deg, transparent 0%, rgba(102, 126, 234, 0.15) 20%, rgba(102, 126, 234, 0.15) 80%, transparent 100%);
+        border: none;
+        border-radius: 0.01rem;
+        flex-shrink: 0;
+        margin: 0 0.12rem;
       }
 
       .item-wrap {
-        .num {
-          font-size: 0.24rem;
-          font-family: PingFangSC, PingFang SC;
-          font-weight: 600;
-          color: #1d2129;
-          line-height: 0.33rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.04rem;
 
-          .unit {
-            font-weight: 500;
-            color: #1f2d3d;
-            line-height: 0.24rem;
-          }
+        &::before,
+        &::after {
+          display: none;
+        }
+
+        .num {
+          font-size: 0.26rem;
+          font-family: PingFangSC, PingFang SC, DIN, Arial, sans-serif;
+          font-weight: 700;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          line-height: 1;
+          transition: all 0.3s ease;
+          white-space: nowrap;
         }
 
         .title {
-          height: 0.22rem;
-          font-size: 16px;
+          font-size: 0.13rem;
           font-family: PingFangSC, PingFang SC;
           font-weight: 400;
-          color: #475669;
-          line-height: 0.22rem;
-          margin-top: 0.06rem;
-        }
-
-        &:last-child {
-          margin-right: 0.6rem;
+          color: #909399;
+          line-height: 1.2;
+          letter-spacing: 0.005rem;
+          white-space: nowrap;
+          margin-top: 0.04rem;
         }
       }
     }
@@ -568,21 +621,42 @@
     .center-con,
     .right-con {
       width: 3.2rem;
-      height: 1.1rem;
-      background: #f8f9fc;
-      border-radius: 0.04rem;
+      height: 1.2rem;
+      background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
+      border-radius: 0.12rem;
       display: flex;
       align-items: center;
       justify-content: flex-start;
+      padding: 0.2rem 0.24rem;
 
-      .img {
-        width: 56px;
-        height: 56px;
-        margin: 0 24px;
+      .icon-box {
+        width: 0.7rem;
+        height: 0.7rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%);
+        border-radius: 0.1rem;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        flex-shrink: 0;
+        border: 0.01rem solid rgba(102, 126, 234, 0.1);
+        margin-right: 0.16rem;
 
-        img {
-          width: 100%;
-          height: 100%;
+        .el-icon {
+          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+      }
+
+      .item-wrap {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.04rem;
+
+        &::before,
+        &::after {
+          display: none;
         }
       }
     }
@@ -592,16 +666,41 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid #e6e6ec;
-    margin-bottom: 0.1rem;
-    padding: 0.1rem 0.2rem;
+    border-bottom: 0.02rem solid transparent;
+    background: linear-gradient(to right, #e6e6ec, #e6e6ec) no-repeat bottom / 100% 0.01rem;
+    margin-bottom: 0.15rem;
+    padding: 0.12rem 0.2rem;
     position: relative;
 
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -0.01rem;
+      left: 0;
+      width: 0.6rem;
+      height: 0.03rem;
+      background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+      border-radius: 0.02rem;
+      transition: width 0.3s ease;
+    }
+
     .title {
-      font-size: 0.14rem;
+      font-size: 0.16rem;
       font-family: PingFang-SC-Medium, PingFang-SC;
-      font-weight: 500;
-      color: #000000;
+      font-weight: 600;
+      color: #303133;
+      letter-spacing: 0.01rem;
+      display: flex;
+      align-items: center;
+      gap: 0.08rem;
+
+      &::before {
+        content: '';
+        width: 0.04rem;
+        height: 0.18rem;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 0.02rem;
+      }
 
       .time_select {
         position: absolute;
@@ -620,7 +719,13 @@
       .el-button {
         min-width: 0.8rem;
         height: 0.28rem;
-        border-radius: 0.02rem;
+        border-radius: 0.04rem;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+        &:hover {
+          transform: translateY(-0.02rem);
+          box-shadow: 0 0.04rem 0.12rem rgba(102, 126, 234, 0.2);
+        }
       }
     }
   }
@@ -628,23 +733,36 @@
 
 .content-con {
   overflow: hidden;
-  border-radius: 2px;
-  padding: 0 0.25rem;
+  border-radius: 0.12rem;
+  padding: 0.15rem 0.25rem;
   width: 100%;
   height: calc(100% - 0.59rem);
+  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
+  box-shadow: 0 0.02rem 0.12rem rgba(102, 126, 234, 0.06);
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 0.04rem 0.16rem rgba(102, 126, 234, 0.1);
+  }
 
   .el-table__inner-wrapper {
     height: 100% !important;
+    border-radius: 0.08rem;
+    overflow: hidden;
   }
 
   .el-table__header {
     height: 0.5rem;
-    background: #fafafa;
+    background: linear-gradient(135deg, #f8f9fc 0%, #f0f4ff 100%);
   }
 
   .chart {
     width: 100%;
     height: 100%;
+    border-radius: 0.08rem;
+    padding: 0.1rem;
+    background: #ffffff;
+    box-shadow: inset 0 0.01rem 0.04rem rgba(102, 126, 234, 0.05);
   }
 
   .no_data {
@@ -652,6 +770,8 @@
     display: table-cell;
     vertical-align: middle;
     text-align: center;
+    color: #909399;
+    font-size: 0.14rem;
   }
 }
 
diff --git a/src/views/invest/accountAnalysis/index.vue b/src/views/invest/accountAnalysis/index.vue
index 50b9803..517d9ff 100644
--- a/src/views/invest/accountAnalysis/index.vue
+++ b/src/views/invest/accountAnalysis/index.vue
@@ -1,644 +1,838 @@
 <template>
-  <div class="app-container" style="overflow: auto">
-    <div class="header-title" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;资产总览</div>
-    <div class="header-con" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">净资产</div>
-          <div class="num">
-            {{
-              (
-                parseFloat(debitTotalBalance) +
-                parseFloat(investBalance) -
-                parseFloat(unClearedOnlineDebt) -
-                parseFloat(creditBalance) -
-                parseFloat(peopleLendHistory)
-              ).toFixed(2)
-            }}<span>元</span>
+  <div class="app-container">
+    <div class="content-wrapper">
+      <div class="header-title" ref="searchHeightRef">
+        <el-icon class="title-icon"><TrendCharts /></el-icon>
+        资产总览
+      </div>
+      <div class="header-con" ref="searchHeightRef">
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Wallet /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">净资产</div>
+            <div class="num">
+              {{
+                (
+                  parseFloat(debitTotalBalance) +
+                  parseFloat(investBalance) -
+                  parseFloat(unClearedOnlineDebt) -
+                  parseFloat(creditBalance) -
+                  parseFloat(peopleLendHistory)
+                ).toFixed(2)
+              }}<span>元</span>
+            </div>
+          </div>
+        </div>
+        <div class="item gradient-red">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DocumentCopy /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">总负债</div>
+            <div class="num">{{ (parseFloat(unClearedOnlineDebt) + parseFloat(creditBalance) + parseFloat(peopleLendHistory)).toFixed(2) }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-blue" v-hasPermi="['invest:debitCard']">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Coin /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">储蓄账户余额</div>
+            <div class="num">{{ debitTotalBalance }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><CreditCard /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">储蓄卡余额</div>
+            <div class="num">{{ debitBalance }}<span>元</span></div>
           </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">总负债</div>
-          <div class="num">{{ (parseFloat(unClearedOnlineDebt) + parseFloat(creditBalance) + parseFloat(peopleLendHistory)).toFixed(2) }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:onlineLend', 'invest:creditCard']" ref="searchHeightRef">
+        <div class="item gradient-purple" v-hasPermi="['invest:futureStocks:list']">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><TrendCharts /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">投资账户余额</div>
+            <div class="num">{{ investBalance }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-red" v-hasPermi="['invest:onlineLend']">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Warning /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">未结清贷款本息</div>
+            <div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange" v-hasPermi="['invest:onlineLend']">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><User /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">人情欠款</div>
+            <div class="num">{{ peopleLendHistory }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-blue" v-hasPermi="['invest:creditCard']">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><CreditCard /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">信用卡已使用额度</div>
+            <div class="num">{{ creditBalance }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item" v-hasPermi="['invest:debitCard']">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">储蓄账户余额</div>
-          <div class="num">{{ debitTotalBalance }}<span>元</span></div>
+      <div class="header-title" v-hasPermi="['invest:debitCard']" ref="searchHeightRef">
+        <el-icon class="title-icon"><Coin /></el-icon>
+        储蓄账户信息
+      </div>
+      <div class="header-con" v-hasPermi="['invest:debitCard']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><CreditCard /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">I类储蓄卡</div>
+            <div class="num">{{ debitICount }}<span>张</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Postcard /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">II类储蓄卡</div>
+            <div class="num">{{ debitIICount }}<span>张</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple" v-show="debitOnlineCount > 0">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Iphone /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">网络账户</div>
+            <div class="num">{{ debitOnlineCount }}<span>个</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange" v-show="storedValueCardCount > 0">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Ticket /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">储值卡</div>
+            <div class="num">{{ storedValueCardCount }}<span>张</span></div>
+          </div>
         </div>
       </div>
-      <div class="item" v-hasPermi="['invest:futureStocks:list']">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">投资账户余额</div>
-          <div class="num">{{ investBalance }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:debitCard']" ref="searchHeightRef">
+        <div class="item gradient-gray" v-show="otherDebitCount > 0">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><More /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">其他账户</div>
+            <div class="num">{{ otherDebitCount }}<span>个</span></div>
+          </div>
+        </div>
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Wallet /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">储蓄账户余额</div>
+            <div class="num">{{ debitTotalBalance }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Coin /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">储蓄卡余额</div>
+            <div class="num">{{ debitBalance }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple" v-show="debitOnlineCount > 0">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Monitor /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">网络账户余额</div>
+            <div class="num">{{ debitOnlineBalance }}<span>元</span></div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:onlineLend', 'invest:creditCard']" ref="searchHeightRef">
-      <div class="item" v-hasPermi="['invest:onlineLend']">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">未结清贷款本息</div>
-          <div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
+      <div
+        class="header-con"
+        v-show="storedValueCardCount > 0 || housingFundBalance > 0 || medicalBalance > 0 || personalPensionBalance > 0"
+        v-hasPermi="['invest:debitCard']"
+        ref="searchHeightRef"
+      >
+        <div class="item gradient-orange" v-show="storedValueCardCount > 0">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Ticket /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">储值卡余额</div>
+            <div class="num">{{ storedValueCardBalance }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-blue" v-show="housingFundBalance > 0">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><House /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">住房公积金余额</div>
+            <div class="num">{{ housingFundBalance }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green" v-show="medicalBalance > 0">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><FirstAidKit /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">职工医保余额</div>
+            <div class="num">{{ medicalBalance }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple" v-show="personalPensionBalance > 0">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Van /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">个人养老金余额</div>
+            <div class="num">{{ personalPensionBalance }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item" v-hasPermi="['invest:onlineLend']">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">人情欠款</div>
-          <div class="num">{{ peopleLendHistory }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item" v-hasPermi="['invest:creditCard']">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">信用卡已使用额度</div>
-          <div class="num">{{ creditBalance }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-title" v-hasPermi="['invest:debitCard']" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;储蓄账户信息</div>
-    <div class="header-con" v-hasPermi="['invest:debitCard']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">I类储蓄卡</div>
-          <div class="num">{{ debitICount }}<span>张</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">II类储蓄卡</div>
-          <div class="num">{{ debitIICount }}<span>张</span></div>
-        </div>
-      </div>
-      <div class="item" v-show="debitOnlineCount > 0">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">网络账户</div>
-          <div class="num">{{ debitOnlineCount }}<span>个</span></div>
-        </div>
-      </div>
-      <div class="item" v-show="storedValueCardCount > 0">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">储值卡</div>
-          <div class="num">{{ storedValueCardCount }}<span>张</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:debitCard']" ref="searchHeightRef">
-      <div class="item" v-show="otherDebitCount > 0">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">其他账户</div>
-          <div class="num">{{ otherDebitCount }}<span>个</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">储蓄账户余额</div>
-          <div class="num">{{ debitTotalBalance }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">储蓄卡余额</div>
-          <div class="num">{{ debitBalance }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item" v-show="debitOnlineCount > 0">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">网络账户余额</div>
-          <div class="num">{{ debitOnlineBalance }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="header-con"
-      v-show="storedValueCardCount > 0 || housingFundBalance > 0 || medicalBalance > 0 || personalPensionBalance > 0"
-      v-hasPermi="['invest:debitCard']"
-      ref="searchHeightRef"
-    >
-      <div class="item" v-show="storedValueCardCount > 0">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">储值卡余额</div>
-          <div class="num">{{ storedValueCardBalance }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item" v-show="housingFundBalance > 0">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">住房公积金余额</div>
-          <div class="num">{{ housingFundBalance }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item" v-show="medicalBalance > 0">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">职工医保余额</div>
-          <div class="num">{{ medicalBalance }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item" v-show="personalPensionBalance > 0">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">个人养老金余额</div>
-          <div class="num">{{ personalPensionBalance }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
 
-    <div class="header-title" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;信用卡信息</div>
-    <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">信用卡总数</div>
-          <div class="num">{{ creditCount }}<span>张</span></div>
+      <div class="header-title" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
+        <el-icon class="title-icon"><CreditCard /></el-icon>
+        信用卡信息
+      </div>
+      <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><CreditCard /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">信用卡总数</div>
+            <div class="num">{{ creditCount }}<span>张</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Histogram /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">总额度</div>
+            <div class="num">{{ creditLimit }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Money /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">已使用额度</div>
+            <div class="num">{{ creditBalance }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Wallet /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">可用额度</div>
+            <div class="num">{{ creditAvailableLimit }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">总额度</div>
-          <div class="num">{{ creditLimit }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DataLine /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">信用卡使用率</div>
+            <div class="num">{{ creditBillRate }}<span>%</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Document /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当月账单</div>
+            <div class="num">{{ currentCreditBill }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Calendar /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当月分期本息</div>
+            <div class="num">{{ creditInstallment }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">已使用额度</div>
-          <div class="num">{{ creditBalance }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
+        <div class="item gradient-red">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Timer /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">未结清分期</div>
+            <div class="num">{{ unclearedCreditInstallmentCount }}<span>笔</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Coin /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">未结清分期本息</div>
+            <div class="num">{{ unclearedCreditInstallment }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Money /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">未结清分期本金</div>
+            <div class="num">{{ unclearedCreditInstallmentPrinciple }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><PriceTag /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">未结清分期利息</div>
+            <div class="num">{{ unclearedCreditInstallmentInterest }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">可用额度</div>
-          <div class="num">{{ creditAvailableLimit }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><CircleCheck /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">已结清分期</div>
+            <div class="num">{{ clearedCreditInstallmentCount }}<span>笔</span></div>
+          </div>
+        </div>
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Coin /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">已结清分期本息</div>
+            <div class="num">{{ clearedCreditInstallmentDebt }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Money /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">已结清分期本金</div>
+            <div class="num">{{ clearedCreditInstallmentPrinciple }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><PriceTag /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">已结清分期利息</div>
+            <div class="num">{{ clearedCreditInstallmentInterest }}<span>元</span></div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">信用卡使用率</div>
-          <div class="num">{{ creditBillRate }}<span>%</span></div>
+      <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DataAnalysis /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">上月账单使用率</div>
+            <div class="num">{{ lastMonthUsedRate }}<span>%</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Document /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">上月账单</div>
+            <div class="num">{{ lastMonthUsedLimit }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><TrendCharts /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近6个月账单使用率</div>
+            <div class="num">{{ lastSixMonthUsedRate }}<span>%</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DataLine /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近6个月账单平均使用额度</div>
+            <div class="num">{{ lastSixMonthUsedLimit }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当月账单</div>
-          <div class="num">{{ currentCreditBill }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当月分期本息</div>
-          <div class="num">{{ creditInstallment }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">未结清分期</div>
-          <div class="num">{{ unclearedCreditInstallmentCount }}<span>笔</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">未结清分期本息</div>
-          <div class="num">{{ unclearedCreditInstallment }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">未结清分期本金</div>
-          <div class="num">{{ unclearedCreditInstallmentPrinciple }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">未结清分期利息</div>
-          <div class="num">{{ unclearedCreditInstallmentInterest }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">已结清分期</div>
-          <div class="num">{{ clearedCreditInstallmentCount }}<span>笔</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">已结清分期本息</div>
-          <div class="num">{{ clearedCreditInstallmentDebt }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">已结清分期本金</div>
-          <div class="num">{{ clearedCreditInstallmentPrinciple }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">已结清分期利息</div>
-          <div class="num">{{ clearedCreditInstallmentInterest }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:creditCard']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">上月账单使用率</div>
-          <div class="num">{{ lastMonthUsedRate }}<span>%</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">上月账单</div>
-          <div class="num">{{ lastMonthUsedLimit }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近6个月账单使用率</div>
-          <div class="num">{{ lastSixMonthUsedRate }}<span>%</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近6个月账单平均使用额度</div>
-          <div class="num">{{ lastSixMonthUsedLimit }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
 
-    <div class="header-title" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;借贷账户信息</div>
-    <div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">贷款账户</div>
-          <div class="num">{{ onlineLendCount }}<span>个</span></div>
+      <div class="header-title" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
+        <el-icon class="title-icon"><Briefcase /></el-icon>
+        借贷账户信息
+      </div>
+      <div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Briefcase /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">贷款账户</div>
+            <div class="num">{{ onlineLendCount }}<span>个</span></div>
+          </div>
+        </div>
+        <div class="item gradient-red">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Warning /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">未结清贷款本息</div>
+            <div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><User /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">人情账户</div>
+            <div class="num">{{ peopleLendCount }}<span>人</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Money /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">人情欠款</div>
+            <div class="num">{{ peopleLendHistory }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">未结清贷款本息</div>
-          <div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Calendar /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当月应还款</div>
+            <div class="num">{{ dueOnlineDebt }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><CircleCheck /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当月已还款</div>
+            <div class="num">{{ repaidOnlineDebt }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Clock /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当月待还款</div>
+            <div class="num">{{ leftOnlineDebt }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">人情账户</div>
-          <div class="num">{{ peopleLendCount }}<span>人</span></div>
+      <div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
+        <div class="item gradient-red">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Timer /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">未结清贷款</div>
+            <div class="num">{{ unclearedOnlineDebtCount }}<span>笔</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Money /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">未结清贷款本金</div>
+            <div class="num">{{ unClearedOnlineDebtPrinciple }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><PriceTag /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">未结清贷款利息</div>
+            <div class="num">{{ unClearedOnlineDebtInterest }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">人情欠款</div>
-          <div class="num">{{ peopleLendHistory }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><CircleCheck /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">已结清贷款</div>
+            <div class="num">{{ clearedOnlineDebtCount }}<span>笔</span></div>
+          </div>
+        </div>
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Money /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">已结清贷款本金</div>
+            <div class="num">{{ clearedOnlineDebtPrinciple }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><PriceTag /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">已结清贷款利息</div>
+            <div class="num">{{ clearedOnlineDebtInterest }}<span>元</span></div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当月应还款</div>
-          <div class="num">{{ dueOnlineDebt }}<span>元</span></div>
+      <div class="header-title" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
+        <el-icon class="title-icon"><ShoppingCart /></el-icon>
+        POS机信息
+      </div>
+      <div class="header-con" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Printer /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">POS机</div>
+            <div class="num">{{ posCount }}<span>台</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DataBoard /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当月刷卡次数</div>
+            <div class="num">{{ currentMonthCount }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Money /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当月刷卡金额</div>
+            <div class="num">{{ currentMonthAmount }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><PriceTag /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当月刷卡手续费</div>
+            <div class="num">{{ currentMonthCommission }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当月已还款</div>
-          <div class="num">{{ repaidOnlineDebt }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Calendar /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当年刷卡次数</div>
+            <div class="num">{{ currentYearCount }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Coin /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当年刷卡金额</div>
+            <div class="num">{{ currentYearAmount }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><PriceTag /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">当年刷卡手续费</div>
+            <div class="num">{{ currentYearCommission }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当月待还款</div>
-          <div class="num">{{ leftOnlineDebt }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DataAnalysis /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">累计刷卡次数</div>
+            <div class="num">{{ accumulateCount }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Wallet /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">累计刷卡金额</div>
+            <div class="num">{{ accumulateAmount }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><PriceTag /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">累计刷卡手续费</div>
+            <div class="num">{{ accumulateCommission }}<span>元</span></div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">未结清贷款</div>
-          <div class="num">{{ unclearedOnlineDebtCount }}<span>笔</span></div>
+      <div class="header-title" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
+        <el-icon class="title-icon"><TrendCharts /></el-icon>
+        投资账户信息
+      </div>
+      <div class="header-con" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Postcard /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">股票账户</div>
+            <div class="num">{{ stocksCount }}<span>个</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DataLine /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">期货账户</div>
+            <div class="num">{{ futuresCount }}<span>个</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Wallet /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">投资账户余额</div>
+            <div class="num">{{ investBalance }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">未结清贷款本金</div>
-          <div class="num">{{ unClearedOnlineDebtPrinciple }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><TrendCharts /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">本月投资收益</div>
+            <div class="num">{{ currentMonthInvest }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Sunrise /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">本月投资盈利</div>
+            <div class="num">{{ currentMonthIncome }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-red">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Sunset /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">本月投资亏损</div>
+            <div class="num">{{ currentMonthExpenses }}<span>元</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">未结清贷款利息</div>
-          <div class="num">{{ unClearedOnlineDebtInterest }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Trophy /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">总收益</div>
+            <div class="num">{{ totalIncome }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DataLine /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">期货收益</div>
+            <div class="num">{{ futuresIncome }}<span>元</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Histogram /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">股票收益</div>
+            <div class="num">{{ stocksIncome }}<span>元</span></div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:onlineLend']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">已结清贷款</div>
-          <div class="num">{{ clearedOnlineDebtCount }}<span>笔</span></div>
+      <div class="header-title" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
+        <el-icon class="title-icon"><Document /></el-icon>
+        征信信息
+      </div>
+      <div class="header-con" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
+        <div class="item gradient-red">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Warning /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近1月硬查询</div>
+            <div class="num">{{ lastOneMonths }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Search /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近2月硬查询</div>
+            <div class="num">{{ lastTwoMonths }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><View /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近3月硬查询</div>
+            <div class="num">{{ lastThreeMonths }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Document /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近6月硬查询</div>
+            <div class="num">{{ lastSixMonths }}<span>次</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">已结清贷款本金</div>
-          <div class="num">{{ clearedOnlineDebtPrinciple }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Calendar /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近1年硬查询</div>
+            <div class="num">{{ lastOneYears }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Histogram /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近2年硬查询</div>
+            <div class="num">{{ lastTwoYears }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DataAnalysis /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">总硬查询</div>
+            <div class="num">{{ lastAllYears }}<span>次</span></div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">已结清贷款利息</div>
-          <div class="num">{{ clearedOnlineDebtInterest }}<span>元</span></div>
+      <div class="header-con" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
+        <div class="item gradient-blue">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><User /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近6月个人查询</div>
+            <div class="num">{{ lastSixMonthQueryCount }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-green">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Management /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近6月贷后管理</div>
+            <div class="num">{{ lastSixMonthsAfterLoan }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-orange">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><Monitor /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">近2年贷后管理</div>
+            <div class="num">{{ lastTwoYearsAfterLoan }}<span>次</span></div>
+          </div>
+        </div>
+        <div class="item gradient-purple">
+          <div class="icon-wrapper">
+            <el-icon class="item-icon"><DataBoard /></el-icon>
+          </div>
+          <div class="info-sum">
+            <div class="title">贷后管理总数</div>
+            <div class="num">{{ totalAfterLoan }}<span>次</span></div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="header-title" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;POS机信息</div>
-    <div class="header-con" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">POS机</div>
-          <div class="num">{{ posCount }}<span>台</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当月刷卡次数</div>
-          <div class="num">{{ currentMonthCount }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当月刷卡金额</div>
-          <div class="num">{{ currentMonthAmount }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当月刷卡手续费</div>
-          <div class="num">{{ currentMonthCommission }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当年刷卡次数</div>
-          <div class="num">{{ currentYearCount }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当年刷卡金额</div>
-          <div class="num">{{ currentYearAmount }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">当年刷卡手续费</div>
-          <div class="num">{{ currentYearCommission }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:posmachine:list']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">累计刷卡次数</div>
-          <div class="num">{{ accumulateCount }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">累计刷卡金额</div>
-          <div class="num">{{ accumulateAmount }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">累计刷卡手续费</div>
-          <div class="num">{{ accumulateCommission }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-title" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;投资账户信息</div>
-    <div class="header-con" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">股票账户</div>
-          <div class="num">{{ stocksCount }}<span>个</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">期货账户</div>
-          <div class="num">{{ futuresCount }}<span>个</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">投资账户余额</div>
-          <div class="num">{{ investBalance }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">本月投资收益</div>
-          <div class="num">{{ currentMonthInvest }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">本月投资盈利</div>
-          <div class="num">{{ currentMonthIncome }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">本月投资亏损</div>
-          <div class="num">{{ currentMonthExpenses }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:futureStocks:list']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">总收益</div>
-          <div class="num">{{ totalIncome }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">期货收益</div>
-          <div class="num">{{ futuresIncome }}<span>元</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">股票收益</div>
-          <div class="num">{{ stocksIncome }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-title" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;征信信息</div>
-    <div class="header-con" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近1月硬查询</div>
-          <div class="num">{{ lastOneMonths }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近2月硬查询</div>
-          <div class="num">{{ lastTwoMonths }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近3月硬查询</div>
-          <div class="num">{{ lastThreeMonths }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近6月硬查询</div>
-          <div class="num">{{ lastSixMonths }}<span>次</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近1年硬查询</div>
-          <div class="num">{{ lastOneYears }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近2年硬查询</div>
-          <div class="num">{{ lastTwoYears }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">总硬查询</div>
-          <div class="num">{{ lastAllYears }}<span>次</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" v-hasPermi="['invest:creditQueryRecord:list']" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近6月个人查询</div>
-          <div class="num">{{ lastSixMonthQueryCount }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近6月贷后管理</div>
-          <div class="num">{{ lastSixMonthsAfterLoan }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">近2年贷后管理</div>
-          <div class="num">{{ lastTwoYearsAfterLoan }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">贷后管理总数</div>
-          <div class="num">{{ totalAfterLoan }}<span>次</span></div>
-        </div>
-      </div>
-    </div>
 
-    <div></div>
+      <div></div>
+    </div>
   </div>
 </template>
 <script setup name="facilityType">
@@ -857,44 +1051,295 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .app-container {
-  .header-con {
-    width: 100%;
-    height: 120px;
-    background-color: #ffffff;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .item {
-      width: 20%;
-      height: 100%;
-      display: flex;
-      position: relative;
-      align-items: center;
-      margin: 30px 60px 30px 60px;
-      .title {
-        margin-left: 20px;
-        color: rgb(133, 133, 148);
-        margin-bottom: 8px;
-      }
-      .num {
-        margin-left: 20px;
-        font-weight: bold;
-      }
-    }
-    img {
-      height: 50px;
-      width: 50px;
+  background: #f5f7fa;
+  padding: 20px;
+  min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.content-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 10px;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(102, 126, 234, 0.3);
+    border-radius: 4px;
+    transition: background 0.3s;
+
+    &:hover {
+      background: rgba(102, 126, 234, 0.5);
     }
   }
-  .header-title {
-    width: 100%;
-    height: 30px;
-    background-color: #ffffff;
-    margin-bottom: 3px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+  padding-left: 12px;
+  border-left: 4px solid #667eea;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
+  padding: 16px 20px;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
+
+  .title-icon {
+    margin-right: 12px;
+    font-size: 22px;
+    color: #667eea;
+  }
+}
+
+.header-con {
+  width: 100%;
+  min-height: 100px;
+  background-color: transparent;
+  margin-bottom: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 20px;
+
+  .item {
+    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
+    border-radius: 16px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    padding: 24px;
+    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.08), 0 0 0 1px rgba(102, 126, 234, 0.05);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    list-style: none !important;
+
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      display: block !important;
+    }
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15), 0 0 0 1px rgba(102, 126, 234, 0.1);
+
+      &::before {
+        opacity: 1;
+      }
+
+      .icon-wrapper {
+        transform: scale(1.08);
+
+        .item-icon {
+          transform: rotate(8deg);
+        }
+      }
+    }
+
+    .icon-wrapper {
+      width: 70px;
+      height: 70px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 20px;
+      flex-shrink: 0;
+      background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%);
+      border: 1px solid rgba(102, 126, 234, 0.1);
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &::before,
+      &::after {
+        display: none !important;
+        content: none !important;
+      }
+
+      .item-icon {
+        font-size: 40px;
+        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
+    .info-sum {
+      flex: 1;
+      min-width: 0;
+
+      &::before,
+      &::after {
+        display: none !important;
+        content: none !important;
+      }
+
+      .title {
+        color: #909399;
+        font-size: 14px;
+        margin-bottom: 8px;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &::before,
+        &::after {
+          display: none !important;
+          content: none !important;
+        }
+      }
+
+      .num {
+        font-size: 28px;
+        font-family: DIN, Arial, sans-serif;
+        font-weight: 700;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        line-height: 1.2;
+        word-break: break-all;
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+        white-space: nowrap;
+
+        &::before,
+        &::after {
+          display: none !important;
+          content: none !important;
+        }
+
+        span {
+          font-size: 14px;
+          color: #909399;
+          font-weight: 500;
+          background: none;
+          -webkit-text-fill-color: #909399;
+          margin-left: 0;
+
+          &::before,
+          &::after {
+            display: none !important;
+            content: none !important;
+          }
+        }
+      }
+    }
+
+    // Color variants - icon colors only
+    &.gradient-blue {
+      .icon-wrapper .item-icon {
+        color: #409eff;
+      }
+    }
+
+    &.gradient-green {
+      .icon-wrapper .item-icon {
+        color: #67c23a;
+      }
+    }
+
+    &.gradient-orange {
+      .icon-wrapper .item-icon {
+        color: #e6a23c;
+      }
+    }
+
+    &.gradient-purple {
+      .icon-wrapper .item-icon {
+        color: #9c27b0;
+      }
+    }
+
+    &.gradient-red {
+      .icon-wrapper .item-icon {
+        color: #f56c6c;
+      }
+    }
+
+    &.gradient-gray {
+      .icon-wrapper .item-icon {
+        color: #909399;
+      }
+    }
+  }
+}
+
+// Responsive design
+@media (max-width: 1400px) {
+  .header-con {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1000px) {
+  .header-con {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .app-container {
+    padding: 16px;
+
+    .header-title {
+      font-size: 16px;
+      padding: 14px 18px;
+
+      .title-icon {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .header-con {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    margin-bottom: 12px;
+
+    .item {
+      padding: 20px;
+
+      .icon-wrapper {
+        width: 56px;
+        height: 56px;
+
+        .item-icon {
+          font-size: 28px;
+        }
+      }
+
+      .info-sum .num {
+        font-size: 24px;
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/invest/accountCalendar/index.vue b/src/views/invest/accountCalendar/index.vue
index 860311f..1fa8bb4 100644
--- a/src/views/invest/accountCalendar/index.vue
+++ b/src/views/invest/accountCalendar/index.vue
@@ -1,14 +1,21 @@
 <template>
   <div class="app-container">
-    <!-- 这里是自定义头部，切换视图类型和切换日期 -->
+    <!-- 这里是自定义头部,切换视图类型和切换日期 -->
     <div class="calendarHeader">
       <div class="header_left">
+        <el-icon class="calendar-icon"><DataLine /></el-icon>
         <h1>{{ calendarTitle }}</h1>
       </div>
       <div class="header_right">
-        <el-select v-model="type" placeholder="视图类型" style="width: 80px" size="default" class="header_select" @change="handleChangeType">
-          <el-option label="月" value="1" />
-          <el-option label="周" value="2" />
+        <el-select v-model="type" placeholder="视图类型" class="view-type-select" @change="handleChangeType">
+          <el-option label="月" value="1">
+            <el-icon><DataBoard /></el-icon>
+            <span>月视图</span>
+          </el-option>
+          <el-option label="周" value="2">
+            <el-icon><Grid /></el-icon>
+            <span>周视图</span>
+          </el-option>
         </el-select>
         <!-- 选择月份的日期框 -->
         <el-date-picker
@@ -18,21 +25,30 @@
           size="default"
           :clearable="false"
           placeholder="请选择日期"
-          style="margin-left: 10px; vertical-align: middle"
+          class="month-picker"
           @change="changeDate"
         />
 
-        <el-button-group v-if="type !== '3' && isShowBack" style="margin-left: 10px">
-          <el-button type="primary" size="default" icon="RefreshRight" @click="getToday()">返回本月</el-button>
+        <el-button-group v-if="type !== '3' && isShowBack" class="control-group">
+          <el-button type="primary" size="default" @click="getToday()">
+            <el-icon><RefreshRight /></el-icon>
+            <span>返回本月</span>
+          </el-button>
         </el-button-group>
-        <el-button-group v-if="type === '2'" style="margin-left: 10px">
-          <el-button size="default" type="primary" icon="ArrowLeft" @click="getPrev()">上一周</el-button>
-          <el-button style="margin-left: 2px" size="default" type="primary" icon="ArrowRight" @click="getNext()">下一周</el-button>
+        <el-button-group v-if="type === '2'" class="control-group">
+          <el-button size="default" type="primary" @click="getPrev()">
+            <el-icon><ArrowLeft /></el-icon>
+            <span>上一周</span>
+          </el-button>
+          <el-button size="default" type="primary" @click="getNext()">
+            <el-icon><ArrowRight /></el-icon>
+            <span>下一周</span>
+          </el-button>
         </el-button-group>
       </div>
     </div>
     <!-- 月视图和周视图显示，列视图显示表格形式 -->
-    <div v-show="type !== '3'" ref="fullcalendar" class="card" />
+    <div v-show="type !== '3'" ref="fullcalendar" class="calendar-wrapper" />
     <!-- 信用卡账单 -->
     <el-dialog :title="titleDealRecord" v-model="openDealRecord" width="1200px" append-to-body destroy-on-close>
       <el-form :model="queryDealRecordParams" ref="queryDealRecordRef" inline>
@@ -138,16 +154,18 @@ const initCalendar = () => {
   Tcalendar.value = new Calendar(fullcalendar.value, {
     plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
     initialView: 'dayGridMonth',
-    aspectRatio: 2.2,
+    aspectRatio: 1.8,
     locale: 'zh-cn',
     handleWindowResize: true,
     editable: true, // 允许编辑表格
     droppable: true,
     eventDisplay: 'block',
-    // height: 'auto',
-    // 限制事件最大数量
+    height: 'auto',
+    // 限制事件最大数量，让单元格高度可控
+    dayMaxEvents: 5,
     // 事件数量超出时更多显示链接汉化
     moreLinkContent: '+ 更多',
+    moreLinkClick: 'popover', // 点击更多时显示弹窗
     // 显示事件开始时间
     displayEventTime: false,
     // 显示事件结束时间
@@ -162,7 +180,7 @@ const initCalendar = () => {
     eventDurationEditable: true,
     eventResizableFromStart: true,
     selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
-    firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
+    firstDay: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getDay(), // 动态设置每月1号为第一列
     unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
     unselectCancel: '.el-drawer',
     // dayMaxEvents: true,
@@ -209,12 +227,24 @@ const initCalendar = () => {
 const getPrev = () => {
   Tcalendar.value.prev()
   calendarTitle.value = Tcalendar.value.view.title
+  // 月视图时更新 firstDay 为当月1号的星期
+  if (type.value === '1') {
+    const currentDate = Tcalendar.value.getDate()
+    const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay()
+    Tcalendar.value.setOption('firstDay', firstDayOfMonth)
+  }
   getCalendarList()
 }
 // 下一月、周、日
 const getNext = () => {
   Tcalendar.value.next()
   calendarTitle.value = Tcalendar.value.view.title
+  // 月视图时更新 firstDay 为当月1号的星期
+  if (type.value === '1') {
+    const currentDate = Tcalendar.value.getDate()
+    const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay()
+    Tcalendar.value.setOption('firstDay', firstDayOfMonth)
+  }
   getCalendarList()
 }
 // 回到今天
@@ -223,6 +253,12 @@ const getToday = () => {
   calendarTitle.value = Tcalendar.value.view.title
   isShowBack.value = false
   showMonth.value = new Date()
+  // 月视图时更新 firstDay 为当前月1号的星期
+  if (type.value === '1') {
+    const today = new Date()
+    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1).getDay()
+    Tcalendar.value.setOption('firstDay', firstDayOfMonth)
+  }
   getCalendarList()
 }
 const getCalendarList = () => {
@@ -250,8 +286,18 @@ const handleChangeType = (val) => {
   if (val === '1') {
     Tcalendar.value.changeView('dayGridMonth')
     showMonth.value = new Date()
+    // 月视图：设置为当月1号的星期
+    const today = new Date()
+    const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1).getDay()
+    Tcalendar.value.setOption('firstDay', firstDayOfMonth)
+    // 月视图：限制每日最多显示5个事件
+    Tcalendar.value.setOption('dayMaxEvents', 5)
   } else if (val === '2') {
     Tcalendar.value.changeView('dayGridWeek')
+    // 周视图：设置为周一
+    Tcalendar.value.setOption('firstDay', 1)
+    // 周视图：显示所有事件
+    Tcalendar.value.setOption('dayMaxEvents', false)
   }
   isShowBack.value = false
   calendarTitle.value = Tcalendar.value.view.title
@@ -261,6 +307,11 @@ const handleChangeType = (val) => {
 // 切换月份和日期
 const changeDate = (date) => {
   Tcalendar.value.gotoDate(date)
+  // 月视图时更新 firstDay 为当月1号的星期
+  if (type.value === '1') {
+    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1).getDay()
+    Tcalendar.value.setOption('firstDay', firstDayOfMonth)
+  }
   // 判断不是当前月份，显示返回当前月
   if (date.getMonth() !== new Date().getMonth() || new Date().getFullYear() !== new Date(date).getFullYear()) {
     isShowBack.value = true
@@ -402,25 +453,569 @@ const handleSelectDate = (info) => {
 }
 </script>
 <style lang="scss" scoped>
+.app-container {
+  background: #f5f7fa;
+  padding: 24px;
+  min-height: 100vh;
+}
+
 .calendarHeader {
-  margin: 0px 0px 5px 0px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  padding: 18px 28px;
+  margin-bottom: 20px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  .header_select {
-    margin: 0 0 0 10px;
-    display: inline-block;
-    vertical-align: middle;
+  align-items: center;
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -10%;
+    width: 300px;
+    height: 300px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -30%;
+    right: 20%;
+    width: 200px;
+    height: 200px;
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 50%;
+  }
+
+  .header_left {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    z-index: 1;
+
+    .calendar-icon {
+      font-size: 32px;
+      color: #ffffff;
+      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+      animation: pulse 2s ease-in-out infinite;
+    }
+
+    h1 {
+      font-size: 26px;
+      font-weight: 600;
+      line-height: 1;
+      margin: 0;
+      color: #ffffff;
+      display: inline-block;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      letter-spacing: 0.5px;
+    }
+  }
+
+  .header_right {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    z-index: 1;
+
+    :deep(.view-type-select) {
+      width: 130px;
+
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.25);
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.35);
+          border-color: rgba(255, 255, 255, 0.6);
+          transform: translateY(-2px);
+        }
+      }
+
+      .el-input__inner {
+        color: #ffffff;
+        font-weight: 600;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      .el-input__suffix {
+        .el-icon {
+          color: #ffffff;
+        }
+      }
+    }
+
+    :deep(.month-picker) {
+      .el-input__wrapper {
+        background: rgba(255, 255, 255, 0.25);
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.35);
+          border-color: rgba(255, 255, 255, 0.6);
+          transform: translateY(-2px);
+        }
+      }
+
+      .el-input__inner {
+        color: #ffffff;
+        font-weight: 600;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      .el-input__prefix,
+      .el-input__suffix {
+        .el-icon {
+          color: #ffffff;
+        }
+      }
+    }
+
+    .control-group {
+      :deep(.el-button) {
+        background: rgba(255, 255, 255, 0.25);
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        color: #ffffff;
+        font-weight: 600;
+        backdrop-filter: blur(10px);
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.35);
+          border-color: rgba(255, 255, 255, 0.6);
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        span {
+          margin-left: 6px;
+        }
+      }
+    }
   }
 }
-h1 {
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 32px;
-  margin: 0 0 0 0;
-  text-align: left;
-  vertical-align: middle;
-  display: inline-block;
-  color: #303133;
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+}
+
+.calendar-wrapper {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(102, 126, 234, 0.1);
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
+  }
+
+  // 美化滚动条（备用，实际不显示）
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f5f7fa;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 5px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+      box-shadow: 0 0 6px rgba(102, 126, 234, 0.5);
+    }
+  }
+}
+
+// FullCalendar 自定义样式
+:deep(.fc) {
+  // 头部样式
+  .fc-col-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 10px 10px 0 0;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+
+    th {
+      border: none;
+      padding: 12px 6px;
+      font-weight: 700;
+      font-size: 13px;
+      color: #ffffff;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    .fc-col-header-cell {
+      border-right: 1px solid rgba(255, 255, 255, 0.2);
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  // 日期单元格
+  .fc-daygrid-day {
+    border: 1px solid #e8eaed;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 3px 4px;
+    background: #ffffff;
+    position: relative;
+    min-height: 90px;
+
+    &:hover {
+      background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+      cursor: pointer;
+      border-color: #667eea;
+      box-shadow: inset 0 0 0 1px rgba(102, 126, 234, 0.2);
+      z-index: 2;
+    }
+
+    // 当前月份之外的日期
+    &.fc-day-other {
+      background: #fafbfc;
+
+      .fc-daygrid-day-number {
+        color: #c0c4cc;
+        opacity: 0.5;
+      }
+    }
+
+    // 今天
+    &.fc-day-today {
+      background: linear-gradient(135deg, #fff5f8 0%, #ffe9f0 100%) !important;
+      border: none !important;
+      box-shadow: inset 0 0 0 3px #f56c6c, 0 0 0 2px rgba(245, 108, 108, 0.1), inset 0 0 15px rgba(245, 108, 108, 0.05) !important;
+      position: relative;
+      z-index: 10 !important;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(circle at 20% 20%, rgba(245, 108, 108, 0.08) 0%, transparent 50%);
+        pointer-events: none;
+        border-radius: 0;
+      }
+
+      .fc-daygrid-day-number {
+        background: linear-gradient(135deg, #f56c6c 0%, #ff8585 100%);
+        color: #ffffff;
+        font-weight: 700;
+        padding: 2px 7px;
+        border-radius: 5px;
+        display: inline-block;
+        box-shadow: 0 2px 6px rgba(245, 108, 108, 0.4);
+        position: relative;
+        z-index: 1;
+      }
+    }
+
+    // 周末
+    &.fc-day-sat,
+    &.fc-day-sun {
+      background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
+    }
+  }
+
+  // 日期数字
+  .fc-daygrid-day-number {
+    padding: 2px 6px;
+    font-size: 15px;
+    font-weight: 700;
+    color: #303133;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: inline-block;
+    margin-bottom: 2px;
+    border-radius: 5px;
+
+    &:hover {
+      color: #667eea;
+      background: rgba(102, 126, 234, 0.1);
+      transform: scale(1.08);
+    }
+  }
+
+  // 日期顶部区域
+  .fc-daygrid-day-top {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 2px;
+  }
+
+  // 事件样式
+  .fc-event {
+    border: none;
+    border-radius: 5px;
+    padding: 2px 8px;
+    margin: 1px 0;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    line-height: 1.3;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 5px 0 0 5px;
+    }
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    }
+
+    .fc-event-main {
+      padding: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .fc-event-title {
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+    }
+  }
+
+  // 事件容器
+  .fc-daygrid-day-events {
+    margin-top: 1px;
+    padding: 0 2px;
+  }
+
+  // 更多链接
+  .fc-daygrid-more-link {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    border-radius: 3px;
+    padding: 1px 5px;
+    font-size: 10px;
+    font-weight: 700;
+    margin: 1px 0;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px rgba(102, 126, 234, 0.3);
+
+    &:hover {
+      background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+      transform: scale(1.03);
+      box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
+    }
+  }
+
+  // 弹出层样式
+  .fc-popover {
+    background: #ffffff;
+    border: none;
+    border-radius: 12px;
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
+    z-index: 9999;
+    overflow: hidden;
+
+    .fc-popover-header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #ffffff;
+      padding: 14px 18px;
+      border-radius: 12px 12px 0 0;
+      font-weight: 700;
+      font-size: 14px;
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+
+    .fc-popover-body {
+      padding: 10px;
+      max-height: 450px;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: #f5f7fa;
+        border-radius: 3px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 3px;
+
+        &:hover {
+          background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+        }
+      }
+
+      .fc-event {
+        margin: 6px 0;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    .fc-popover-close {
+      color: #ffffff;
+      opacity: 0.9;
+      font-size: 20px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        opacity: 1;
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  // 表格边框
+  .fc-scrollgrid {
+    border: none;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .fc-scrollgrid-sync-table {
+    border-radius: 10px;
+  }
+
+  // 周视图样式
+  .fc-timegrid-slot {
+    height: 3em;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .fc-timegrid-axis {
+    border-right: 2px solid #e4e7ed;
+  }
+}
+
+// 自定义事件颜色类
+:deep(.plan_title) {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 4px;
+
+  span {
+    font-size: 11px;
+    opacity: 0.95;
+    margin-right: 3px;
+    font-weight: 700;
+    background: rgba(255, 255, 255, 0.3);
+    padding: 0px 4px;
+    border-radius: 2px;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .app-container {
+    padding: 16px;
+  }
+
+  .calendarHeader {
+    flex-direction: column;
+    gap: 16px;
+    padding: 18px 20px;
+    border-radius: 12px;
+
+    .header_left {
+      width: 100%;
+      justify-content: center;
+
+      .calendar-icon {
+        font-size: 28px;
+      }
+
+      h1 {
+        font-size: 22px;
+      }
+    }
+
+    .header_right {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+  }
+
+  .calendar-wrapper {
+    padding: 12px;
+    border-radius: 12px;
+    max-height: calc(100vh - 240px);
+  }
+
+  :deep(.fc) {
+    .fc-col-header th {
+      padding: 12px 6px;
+      font-size: 12px;
+    }
+
+    .fc-daygrid-day {
+      padding: 6px;
+    }
+
+    .fc-daygrid-day-number {
+      padding: 4px 6px;
+      font-size: 13px;
+    }
+
+    .fc-event {
+      font-size: 11px;
+      padding: 5px 8px;
+      margin: 2px 1px;
+    }
+
+    .fc-daygrid-more-link {
+      padding: 2px 6px;
+      font-size: 10px;
+    }
+  }
 }
 </style>
diff --git a/src/views/invest/accountDealAnalysis/index.vue b/src/views/invest/accountDealAnalysis/index.vue
index 2388d63..ec8f930 100644
--- a/src/views/invest/accountDealAnalysis/index.vue
+++ b/src/views/invest/accountDealAnalysis/index.vue
@@ -49,122 +49,100 @@
         <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="main-con">
+      <div class="summary-con">
         <div class="right-con">
-          <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">{{ account.balance }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.balance }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><DataLine /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">工资收益</div>
-            <div>
-              <span class="num">{{ account.salaryIncome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.salaryIncome }}</div>
           </div>
         </div>
         <div class="right-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"><Histogram /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">投资盈利</div>
-            <div>
-              <span class="num">{{ account.investIncome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.investIncome }}</div>
           </div>
         </div>
         <div class="right-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="#F56C6C"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">投资亏损</div>
-            <div>
-              <span class="num">{{ account.investOutcome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.investOutcome }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">支出总额</div>
-            <div>
-              <span class="num">{{ account.totalOutcome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.totalOutcome }}</div>
           </div>
         </div>
-      </div>
-      <div class="summary-con" style="height: 115px">
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <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">{{ account.dailyExpenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.dailyExpenses }}</div>
           </div>
         </div>
         <div class="right-con" v-hasPermi="['invest:onlineLend', 'invest:posmachine:list', 'invest:creditCard']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><WalletFilled /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">手续费利息支出</div>
-            <div>
-              <span class="num">{{ account.notDailyExpenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.notDailyExpenses }}</div>
           </div>
         </div>
         <div class="right-con" v-hasPermi="['invest:posmachine:list']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><CreditCard /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">POS机刷卡手续费</div>
-            <div>
-              <span class="num">{{ account.posExpenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.posExpenses }}</div>
           </div>
         </div>
         <div class="right-con" v-hasPermi="['invest:creditCard']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">信用卡分期利息</div>
-            <div>
-              <span class="num">{{ account.creditInterest }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.creditInterest }}</div>
           </div>
         </div>
         <div class="right-con" v-hasPermi="['invest:onlineLend']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">贷款利息</div>
-            <div>
-              <span class="num">{{ account.onLineInterest }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.onLineInterest }}</div>
           </div>
         </div>
       </div>
-      <div class="title-con" style="margin-top: 18px">
+      <div class="title-con">
         <div class="title">账户收支统计</div>
         <div class="operate-btn-con">
           <el-radio-group v-model="radioVal" @change="handleRadioChange">
@@ -175,9 +153,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% - 225px); margin-top: -10px"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.tableAccountsList" 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="account.tableAccountsList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -200,6 +178,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { TrendCharts, Money, Coin, WalletFilled, CreditCard, DataLine, Odometer, Histogram } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getAcccountsOutInAnalysis } from '@/api/invest/statisticAnalysis'
 import { listAccounts } from '@/api/invest/accounts'
@@ -423,21 +402,32 @@ const drawBar = (data) => {
         type: 'bar',
         barWidth: 20, // 根据需求调整数值大小，单位是像素
         itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         }
       }
     ],
     // 添加点击事件的处理函数
     emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
     }
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -497,7 +487,15 @@ const drawLine = (data) => {
           color: '#4181c9'
         },
         itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         },
         smooth: true,
         symbol: 'emptyCircle',
@@ -527,21 +525,134 @@ 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;
+
+  .right-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 {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+
+@media (max-width: 1600px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 calc(25% - 0.105rem);
+      max-width: calc(25% - 0.105rem);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 calc(33.333% - 0.093rem);
+      max-width: calc(33.333% - 0.093rem);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/accountDealRecord/index.vue b/src/views/invest/accountDealRecord/index.vue
index 61df7e2..8d2db85 100644
--- a/src/views/invest/accountDealRecord/index.vue
+++ b/src/views/invest/accountDealRecord/index.vue
@@ -23,6 +23,11 @@
             <el-option v-for="dict in deal_category" :key="dict.value" :label="dict.label" :value="dict.value" />
           </el-select>
         </el-form-item>
+        <el-form-item label="交易子类别" style="width: 240px" prop="childCategory">
+          <el-select v-model="queryParams.childCategory" placeholder="请选择交易子类别" clearable>
+            <el-option v-for="dict in daily_expenses" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="交易时间" prop="time">
           <el-date-picker v-model="queryParams.time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
         </el-form-item>
diff --git a/src/views/invest/accountsBalance/index.vue b/src/views/invest/accountsBalance/index.vue
index 71f2d16..fede616 100644
--- a/src/views/invest/accountsBalance/index.vue
+++ b/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>
diff --git a/src/views/invest/creditAnalysis/index.vue b/src/views/invest/creditAnalysis/index.vue
index 4de0c47..7771118 100644
--- a/src/views/invest/creditAnalysis/index.vue
+++ b/src/views/invest/creditAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="信用卡" prop="id">
-          <el-select v-model="queryParams.id" placeholder="请选择信用卡" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择信用卡" @change="handleCreditChange" clearable>
             <el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
           </el-select>
         </el-form-item>
@@ -26,77 +26,66 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 2.05rem)">
+    <div class="main-con">
       <div class="summary-con">
         <div class="left-con">
-          <div class="img">
-            <img src="@/assets/images/chart-pie.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#667eea"><PieChart /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="num">{{ creditObj.creditBillRate }}%</div>
             <div class="title">使用率</div>
           </div>
+          <div class="line"></div>
           <div class="item-wrap">
-            <div>
-              <span class="num">{{ creditObj.creditLimit }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ creditObj.creditLimit }}</div>
             <div class="title">总额度</div>
           </div>
           <div class="line"></div>
           <div class="item-wrap">
-            <div>
-              <span class="num">{{ creditObj.creditBalance }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ creditObj.creditBalance }}</div>
             <div class="title">已用额度</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><WalletFilled /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">可用额度</div>
-            <div>
-              <span class="num">{{ creditObj.creditAvailableLimit }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ creditObj.creditAvailableLimit }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><CreditCard /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">信用卡总数</div>
-            <div>
-              <span class="num">{{ creditObj.creditCardCount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ creditObj.creditCardCount }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">月平均账单金额</div>
-            <div>
-              <span class="num">{{ creditObj.averageCreditBill }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">月平均账单</div>
+            <div class="num">{{ creditObj.averageCreditBill }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><DataLine /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">累计账单金额</div>
-            <div>
-              <span class="num">{{ creditObj.actualCreditBill }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">累计账单</div>
+            <div class="num">{{ creditObj.actualCreditBill }}</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="柱状图" />
@@ -106,9 +95,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="creditObj.tableCreditBillList" height="calc(100% - 170px)">
+        <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="creditObj.tableCreditBillList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -131,6 +120,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { PieChart, WalletFilled, CreditCard, TrendCharts, DataLine } from '@element-plus/icons-vue'
 
 import { getCreditAnalysis } from '@/api/invest/statisticAnalysis'
 import { listBankcardLend } from '@/api/invest/bankcardlend'
@@ -175,6 +165,12 @@ const data = reactive({
 })
 
 const { queryParams, queryCreditCardParams, rules } = toRefs(data)
+
+const handleCreditChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
+
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
 const start = dayjs(end).add(-11, 'months')
@@ -469,3 +465,78 @@ const handleRadioChange = (type) => {
 getCreditCardList()
 getList()
 </script>
+
+<style lang="scss" scoped>
+.main-con {
+  height: calc(100vh - 240px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.summary-con {
+  flex-shrink: 0;
+  margin-bottom: 0.15rem;
+
+  .left-con,
+  .center-con,
+  .right-con {
+    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;
+}
+
+.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;
+  }
+}
+</style>
diff --git a/src/views/invest/creditCardBill/index.vue b/src/views/invest/creditCardBill/index.vue
index c923e02..c95a101 100644
--- a/src/views/invest/creditCardBill/index.vue
+++ b/src/views/invest/creditCardBill/index.vue
@@ -38,22 +38,21 @@
           <el-table-column type="index" label="序号" :index="indexMethod" width="50"></el-table-column>
           <el-table-column label="信用卡" align="center" prop="bankNameCode" />
           <el-table-column label="账单名称" align="center" prop="name" />
-          <el-table-column label="账单日" align="center" prop="billDate">
-            <template #default="scope">
-              <span>{{ parseTime(scope.row.billDate, '{y}-{m}-{d}') }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="账单周期" align="center" prop="billDatePeriod" width="220" />
-          <el-table-column label="账单金额" align="center" prop="billAmount" />
-          <el-table-column label="数据更新时间" align="center" prop="updateTime" width="160" />
-          <el-table-column v-hasPermi="['invest:posmachine:list']" label="POS刷卡次数" align="center" prop="posCount" />
-          <el-table-column v-hasPermi="['invest:posmachine:list']" label="日常支出次数" align="center" prop="dailyExpensesCount" />
-          <el-table-column label="账单状态" align="center" prop="billState">
+          <el-table-column label="账单日" width="100" align="center" prop="billDate"> </el-table-column>
+          <el-table-column label="还款日" width="100" align="center" prop="repaymentDay"> </el-table-column>
+          <el-table-column label="账单周期" align="center" prop="billDatePeriod" width="180" />
+          <el-table-column label="账单金额" align="center" width="90" prop="billAmount" />
+          <el-table-column label="可用余额" align="center" width="90" prop="availableLimit" />
+          <el-table-column label="数据更新时间" align="center" prop="updateTime" width="155" />
+          <el-table-column v-hasPermi="['invest:posmachine:list']" label="POS刷卡" width="90" align="center" prop="posCount" />
+          <el-table-column v-hasPermi="['invest:posmachine:list']" label="日常支出" width="90" align="center" prop="dailyExpensesCount" />
+          <el-table-column v-hasPermi="['invest:posmachine:list']" label="POS占比" width="90" align="center" prop="posRate" />
+          <el-table-column label="账单状态" width="90" align="center" prop="billState">
             <template #default="scope">
               <dict-tag :options="bill_state" :value="scope.row.billState" />
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <el-table-column label="操作" width="160" align="center" class-name="small-padding fixed-width">
             <template v-slot="scope">
               <div class="ctrl-btn d-flex">
                 <el-tooltip v-for="item in operateList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
@@ -303,7 +302,7 @@ function handleQuery() {
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm('queryRef')
-  queryParams.value.billState = '1'
+  queryParams.value.billState = null
   handleQuery()
 }
 
diff --git a/src/views/invest/creditCardDealAnalysis/index.vue b/src/views/invest/creditCardDealAnalysis/index.vue
index b66b684..b8095b1 100644
--- a/src/views/invest/creditCardDealAnalysis/index.vue
+++ b/src/views/invest/creditCardDealAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="信用卡" style="width: 480px" prop="id">
-          <el-select v-model="queryParams.id" placeholder="请选择信用卡" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择信用卡" @change="handleChange" clearable>
             <el-option v-for="account in accountsList" :key="account.id" :label="account.nameCodeAvailableLimit" :value="account.id" />
           </el-select>
         </el-form-item>
@@ -64,122 +64,100 @@
         <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="main-con">
+      <div class="summary-con">
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">交易金额</div>
-            <div>
-              <span class="num">{{ account.amount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.amount }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">收入金额</div>
-            <div>
-              <span class="num">{{ account.income }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.income }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">支出金额</div>
-            <div>
-              <span class="num">{{ account.expenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.expenses }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Histogram /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">收入笔数</div>
-            <div>
-              <span class="num">{{ account.incomeCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ account.incomeCount }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><CircleCheck /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">支出笔数</div>
-            <div>
-              <span class="num">{{ account.expensesCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ account.expensesCount }}</div>
           </div>
         </div>
-      </div>
-      <div class="summary-con" v-hasPermi="['invest:posmachine:list']" style="height: 115px">
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><CreditCard /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">POS刷卡支出</div>
-            <div>
-              <span class="num">{{ account.posExpenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.posExpenses }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">真实消费支出</div>
-            <div>
-              <span class="num">{{ account.realExpenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.realExpenses }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><CircleCheck /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">POS刷卡笔数</div>
-            <div>
-              <span class="num">{{ account.posExpensesCount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.posExpensesCount }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">真实消费支出笔数</div>
-            <div>
-              <span class="num">{{ account.realExpensesCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ account.realExpensesCount }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Histogram /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">其他支出笔数</div>
-            <div>
-              <span class="num">{{ account.otherExpensesCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ account.otherExpensesCount }}</div>
           </div>
         </div>
       </div>
-      <div class="title-con" style="margin-top: 18px">
+      <div class="title-con">
         <div class="title">信用卡收支统计</div>
         <div class="operate-btn-con">
           <el-radio-group v-model="radioVal" @change="handleRadioChange">
@@ -190,9 +168,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% - 225px); margin-top: -10px"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.tableAccountsList" 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="account.tableAccountsList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -215,6 +193,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { TrendCharts, Money, Coin, CreditCard, Histogram, Odometer, CircleCheck, Clock } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getAcccountsDealAnalysis } from '@/api/invest/statisticAnalysis'
 import { listAccounts } from '@/api/invest/accounts'
@@ -276,6 +255,12 @@ const data = reactive({
 })
 
 const { queryParams, queryAcccountsParams, rules } = toRefs(data)
+
+const handleChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
+
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
 const start = dayjs(end).add(-7, 'day')
@@ -472,21 +457,32 @@ const drawBar = (data) => {
         type: 'bar',
         barWidth: 20, // 根据需求调整数值大小，单位是像素
         itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         }
       }
     ],
     // 添加点击事件的处理函数
     emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
     }
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -546,7 +542,15 @@ const drawLine = (data) => {
           color: '#4181c9'
         },
         itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         },
         smooth: true,
         symbol: 'emptyCircle',
@@ -576,22 +580,135 @@ 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
+    }
+  })
 }
 getAcccountsList()
 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;
+
+  .right-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 {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+
+@media (max-width: 1600px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 calc(25% - 0.105rem);
+      max-width: calc(25% - 0.105rem);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 calc(33.333% - 0.093rem);
+      max-width: calc(33.333% - 0.093rem);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/creditInstallmentAnalysis/index.vue b/src/views/invest/creditInstallmentAnalysis/index.vue
index 02415ab..13f24fd 100644
--- a/src/views/invest/creditInstallmentAnalysis/index.vue
+++ b/src/views/invest/creditInstallmentAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="信用卡" prop="bankCardLendId">
-          <el-select v-model="queryParams.id" placeholder="请选择信用卡" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择信用卡" @change="handleCreditChange" clearable>
             <el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
           </el-select>
         </el-form-item>
@@ -53,65 +53,85 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 2.05rem)">
+    <div class="main-con">
       <div class="summary-con">
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><List /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">未结清分期笔数</div>
-            <div>
-              <span class="num">{{ historyObj.unclearedDetailCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ historyObj.unclearedDetailCount }}</div>
           </div>
         </div>
 
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><WalletFilled /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">未结清分期（本息）</div>
-            <div>
-              <span class="num">{{ historyObj.unClearedDetail }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">未结清（本息）</div>
+            <div class="num">{{ historyObj.unClearedDetail }}</div>
           </div>
         </div>
 
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Money /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">当期应还金额</div>
-            <div>
-              <span class="num">{{ historyObj.dueDetail }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">未结清本金</div>
+            <div class="num">{{ historyObj.unClearedPrincipal }}</div>
           </div>
         </div>
 
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">当期已还金额</div>
-            <div>
-              <span class="num">{{ historyObj.repaidDetail }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">未结清利息</div>
+            <div class="num">{{ historyObj.unClearedInterest }}</div>
           </div>
         </div>
 
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><DocumentCopy /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">当期待还金额</div>
-            <div>
-              <span class="num">{{ historyObj.leftDetail }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">当期应还本息</div>
+            <div class="num">{{ historyObj.dueDetail }}</div>
+          </div>
+        </div>
+
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><CircleCheck /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">当期已还本息</div>
+            <div class="num">{{ historyObj.repaidDetail }}</div>
+          </div>
+        </div>
+
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Clock /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">当期待还本息</div>
+            <div class="num">{{ historyObj.leftDetail }}</div>
+          </div>
+        </div>
+
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Histogram /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">当期利息</div>
+            <div class="num">{{ historyObj.dueInterest }}</div>
           </div>
         </div>
       </div>
@@ -126,9 +146,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryDetailList" height="calc(100% - 170px)">
+        <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="historyObj.tableHistoryDetailList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -151,6 +171,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { List, WalletFilled, Money, Coin, DocumentCopy, CircleCheck, Clock, TrendCharts, Histogram } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getInstallmentHistoryAnalysis } from '@/api/invest/statisticAnalysis'
 import { listBankcardLend } from '@/api/invest/bankcardlend'
@@ -213,6 +234,12 @@ const data = reactive({
 })
 
 const { queryParams, queryCreditCardParams, rules } = toRefs(data)
+
+const handleCreditChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
+
 const today = new Date()
 const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
 // 当前月份的结束日期
@@ -512,3 +539,113 @@ const handleRadioChange = (type) => {
 getCreditCardList()
 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(25% - 0.105rem);
+    min-width: 2.6rem;
+    max-width: calc(25% - 0.105rem);
+    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 {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+
+// 响应式优化
+@media (max-width: 1600px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 calc(33.333% - 0.093rem);
+      max-width: calc(33.333% - 0.093rem);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 calc(50% - 0.07rem);
+      max-width: calc(50% - 0.07rem);
+      min-width: 2.4rem;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/creditInstallmentHistory/index.vue b/src/views/invest/creditInstallmentHistory/index.vue
index 133c4fd..3649a1c 100644
--- a/src/views/invest/creditInstallmentHistory/index.vue
+++ b/src/views/invest/creditInstallmentHistory/index.vue
@@ -129,15 +129,10 @@
                           </el-date-picker>
                         </el-form-item> -->
 
-        <!-- <el-form-item label="关闭日期" prop="closeDate">
-                          <el-date-picker clearable
-                                          v-model="form.closeDate"
-                                          type="date"
-                                          value-format="YYYY-MM-DD"
-                                          placeholder="请选择关闭日期">
-                          </el-date-picker>
-                        </el-form-item> -->
-        <el-form-item label="备注" prop="remark">
+        <el-form-item label="关闭日期" prop="closeDate">
+          <el-date-picker clearable v-model="form.closeDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择关闭日期"> </el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注" style="width: 792px" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
diff --git a/src/views/invest/creditInstallmentSettledAnalysis/index.vue b/src/views/invest/creditInstallmentSettledAnalysis/index.vue
index 38cd8bf..04a8422 100644
--- a/src/views/invest/creditInstallmentSettledAnalysis/index.vue
+++ b/src/views/invest/creditInstallmentSettledAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="信用卡" prop="bankCardLendId">
-          <el-select v-model="queryParams.id" placeholder="信用卡" clearable>
+          <el-select v-model="queryParams.id" placeholder="信用卡" @change="handleCreditChange" clearable>
             <el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
           </el-select>
         </el-form-item>
@@ -53,51 +53,42 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 2.05rem)">
+    <div class="main-con">
       <div class="summary-con">
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><List /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">已结清分期笔数</div>
-            <div>
-              <span class="num">{{ historyObj.clearedCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ historyObj.clearedCount }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">已结清分期（本息）</div>
-            <div>
-              <span class="num">{{ historyObj.clearedTotal }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ historyObj.clearedTotal }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">已结清分期（本金）</div>
-            <div>
-              <span class="num">{{ historyObj.clearedPrincipal }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ historyObj.clearedPrincipal }}</div>
           </div>
         </div>
-
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">已结清总利息</div>
-            <div>
-              <span class="num">{{ historyObj.totalInterest }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ historyObj.totalInterest }}</div>
           </div>
         </div>
       </div>
@@ -112,9 +103,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryList" height="calc(100% - 170px)">
+        <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="historyObj.tableHistoryList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -137,6 +128,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { List, Money, Coin, TrendCharts, Histogram } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getInstallmentSettledAnalysis } from '@/api/invest/statisticAnalysis'
 import { listBankcardLend } from '@/api/invest/bankcardlend'
@@ -197,6 +189,11 @@ const data = reactive({
 })
 
 const { queryParams, queryCreditCardParams, rules } = toRefs(data)
+const handleCreditChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
+
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
 const start = dayjs(end).add(-239, 'months')
@@ -485,3 +482,111 @@ const handleRadioChange = (type) => {
 getCreditCardList()
 getList()
 </script>
+
+<style lang="scss" scoped>
+.main-con {
+  height: calc(100vh - 240px);
+  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(25% - 0.105rem);
+    min-width: 2.6rem;
+    max-width: calc(25% - 0.105rem);
+    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 {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+
+@media (max-width: 1600px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 calc(33.333% - 0.093rem);
+      max-width: calc(33.333% - 0.093rem);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 calc(50% - 0.07rem);
+      max-width: calc(50% - 0.07rem);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/creditRecordAnalysis/index.vue b/src/views/invest/creditRecordAnalysis/index.vue
index 7682d49..aa3097d 100644
--- a/src/views/invest/creditRecordAnalysis/index.vue
+++ b/src/views/invest/creditRecordAnalysis/index.vue
@@ -49,130 +49,100 @@
         <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="main-con">
+      <div class="summary-con">
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><DocumentCopy /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近1月硬查询</div>
-            <div>
-              <span class="num">{{ creditRecord.lastOneMonths }}</span> <span class="unit">次</span>
-            </div>
+            <div class="num">{{ creditRecord.lastOneMonths }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><DocumentCopy /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近2月硬查询</div>
-            <div>
-              <span class="num">{{ creditRecord.lastTwoMonths }}</span> <span class="unit">次</span>
-            </div>
+            <div class="num">{{ creditRecord.lastTwoMonths }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><DocumentCopy /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近3月硬查询</div>
-            <div>
-              <span class="num">{{ creditRecord.lastThreeMonths }}</span> <span class="unit">次</span>
-            </div>
+            <div class="num">{{ creditRecord.lastThreeMonths }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><DocumentCopy /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近6月硬查询</div>
-            <div>
-              <span class="num">{{ creditRecord.lastSixMonths }}</span
-              >次
-            </div>
+            <div class="num">{{ creditRecord.lastSixMonths }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Clock /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近1年硬查询</div>
-            <div>
-              <span class="num">{{ creditRecord.lastOneYears }}</span
-              >次
-            </div>
+            <div class="num">{{ creditRecord.lastOneYears }}</div>
           </div>
         </div>
-      </div>
-      <div class="summary-con" style="height: 110px">
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Clock /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近2年硬查询</div>
-            <div>
-              <span class="num">{{ creditRecord.lastTwoYears }}</span
-              >次
-            </div>
+            <div class="num">{{ creditRecord.lastTwoYears }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近6月个人查询</div>
-            <div>
-              <span class="num">{{ creditRecord.lastSixMonthPersonalCount }}</span
-              >次
-            </div>
+            <div class="num">{{ creditRecord.lastSixMonthPersonalCount }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">个人查询总数</div>
-            <div>
-              <span class="num">{{ creditRecord.totalPersonalCount }}</span
-              >次
-            </div>
+            <div class="num">{{ creditRecord.totalPersonalCount }}</div>
           </div>
         </div>
-
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Clock /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近2年贷后管理</div>
-            <div>
-              <span class="num">{{ creditRecord.lastTwoYearsAfterLoan }}</span
-              >次
-            </div>
+            <div class="num">{{ creditRecord.lastTwoYearsAfterLoan }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">贷后管理总数</div>
-            <div>
-              <span class="num">{{ creditRecord.totalAfterLoan }}</span
-              >次
-            </div>
+            <div class="num">{{ creditRecord.totalAfterLoan }}</div>
           </div>
         </div>
       </div>
-      <div class="title-con" style="margin-top: 18px">
+      <div class="title-con">
         <div class="title">征信查询统计</div>
         <div class="operate-btn-con">
           <el-radio-group v-model="radioVal" @change="handleRadioChange">
@@ -183,9 +153,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% - 225px); margin-top: -10px"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="creditRecord.tableCreditRecordsList" 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="creditRecord.tableCreditRecordsList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -208,6 +178,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { DocumentCopy, Clock, TrendCharts, Odometer } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getCreditRecordsAnalysis } from '@/api/invest/statisticAnalysis'
 const { proxy } = getCurrentInstance()
@@ -567,3 +538,115 @@ const handleRadioChange = (type) => {
 }
 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;
+
+  .right-con,
+  .center-con {
+    flex: 1 1 calc(20% - 0.112rem);
+    min-width: 2.2rem;
+    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 {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+
+@media (max-width: 1600px) {
+  .summary-con {
+    .right-con,
+    .center-con {
+      flex: 1 1 calc(25% - 0.105rem);
+      max-width: calc(25% - 0.105rem);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con {
+    .right-con,
+    .center-con {
+      flex: 1 1 calc(33.333% - 0.093rem);
+      max-width: calc(33.333% - 0.093rem);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con {
+    .right-con,
+    .center-con {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/dailyExpensesAnalysis/index.vue b/src/views/invest/dailyExpensesAnalysis/index.vue
index c7d2014..b6af670 100644
--- a/src/views/invest/dailyExpensesAnalysis/index.vue
+++ b/src/views/invest/dailyExpensesAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="记账账户" style="width: 480px" prop="id">
-          <el-select v-model="queryParams.id" placeholder="请选择记账账户" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择记账账户" @change="handleChange" clearable>
             <el-option v-for="account in accountsList" :key="account.id" :label="account.nameCodeAvailableLimit" :value="account.id" />
           </el-select>
         </el-form-item>
@@ -54,76 +54,130 @@
         <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="main-con">
+      <div class="summary-con">
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">支出总额</div>
-            <div>
-              <span class="num">{{ account.dailyExpenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.dailyExpenses }}</div>
           </div>
         </div>
         <div class="right-con" v-show="account.top1Name != null">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">{{ account.top1Name }}</div>
-            <div>
-              <span class="num">{{ account.top1 }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.top1 }}</div>
           </div>
         </div>
         <div class="right-con" v-show="account.top2Name != null">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">{{ account.top2Name }}</div>
-            <div>
-              <span class="num">{{ account.top2 }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.top2 }}</div>
           </div>
         </div>
         <div class="right-con" v-show="account.top3Name != null">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><WalletFilled /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">{{ account.top3Name }}</div>
-            <div>
-              <span class="num">{{ account.top3 }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.top3 }}</div>
           </div>
         </div>
         <div class="right-con" v-show="account.top4Name != null">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><CreditCard /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">{{ account.top4Name }}</div>
-            <div>
-              <span class="num">{{ account.top4 }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.top4 }}</div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top5Name != null">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><ShoppingCart /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top5Name }}</div>
+            <div class="num">{{ account.top5 }}</div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top6Name != null">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><PieChart /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top6Name }}</div>
+            <div class="num">{{ account.top6 }}</div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top7Name != null">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Histogram /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top7Name }}</div>
+            <div class="num">{{ account.top7 }}</div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top8Name != null">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top8Name }}</div>
+            <div class="num">{{ account.top8 }}</div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top9Name != null">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><DocumentCopy /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top9Name }}</div>
+            <div class="num">{{ account.top9 }}</div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top10Name != null">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Odometer /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top10Name }}</div>
+            <div class="num">{{ account.top10 }}</div>
+          </div>
+        </div>
+        <div class="right-con" v-show="account.top11Name != null">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><CircleCheck /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ account.top11Name }}</div>
+            <div class="num">{{ account.top11 }}</div>
           </div>
         </div>
       </div>
-      <div class="title-con" style="margin-top: 15px">
+      <div class="title-con">
         <div class="title">日常支出统计</div>
         <div class="operate-btn-con">
           <el-radio-group v-model="radioVal" @change="handleRadioChange">
-            <el-radio-button label="表格" />
-            <el-radio-button label="柱状图" />
-            <el-radio-button label="折线图" />
+            <el-radio-button label="分类柱状图" />
+            <el-radio-button label="分类表格" />
+            <el-radio-button label="日期折线图" />
+            <el-radio-button label="日期表格" />
           </el-radio-group>
         </div>
       </div>
       <div class="content-con">
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.accountsList" height="calc(100% - 170px)">
+        <el-table v-show="radioVal === '分类表格'" v-loading="loading" :data="account.accountsList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -132,8 +186,17 @@
           <el-table-column label="交易子类别" align="center" prop="time" />
           <el-table-column label="支出金额" align="center" prop="value" />
         </el-table>
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px); margin-top: -10px"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px); margin-top: -10px"></div>
+        <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="account.tableAccountsDateList">
+          <el-table-column label="序号" width="50" type="index" align="center">
+            <template #default="scope">
+              <span>{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="交易日期" align="center" prop="time" />
+          <el-table-column label="支出金额" align="center" prop="value" />
+        </el-table>
       </div>
     </div>
   </div>
@@ -143,6 +206,20 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import {
+  TrendCharts,
+  PieChart,
+  Histogram,
+  DataLine,
+  Money,
+  Coin,
+  WalletFilled,
+  DocumentCopy,
+  CreditCard,
+  ShoppingCart,
+  Odometer,
+  CircleCheck
+} from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getDailyExpensesAnalysis } from '@/api/invest/statisticAnalysis'
 import { listAccounts } from '@/api/invest/accounts'
@@ -166,7 +243,7 @@ const dates = [
 const accountsList = ref([])
 const loading = ref(true)
 const total = ref(0)
-const radioVal = ref('表格')
+const radioVal = ref('分类柱状图')
 const dateValidate = (rules, value, callback) => {
   const dateType = rules.dateType || 'days'
   const num = rules.num || 31
@@ -201,6 +278,10 @@ const data = reactive({
 })
 
 const { queryParams, queryAcccountsParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
 const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
@@ -264,6 +345,10 @@ const chartData = ref({
   name: [],
   value1: []
 })
+const lineData = ref({
+  name: [],
+  value1: []
+})
 
 /** 查询管理列表 */
 function getAcccountsList() {
@@ -275,6 +360,7 @@ function getAcccountsList() {
 function getList() {
   loading.value = true
   chartData.value = { name: [], value1: [] }
+  lineData.value = { name: [], value1: [] }
   const { type, time, id, dataType, dealType, dealCategory } = queryParams.value
   let formatValue = 'YYYY-MM-DD'
   if (type === 1) {
@@ -306,6 +392,10 @@ function getList() {
       chartData.value.name.push(item.time)
       chartData.value.value1.push(item.value)
     })
+    response.data.acccountsDateList.map((item) => {
+      lineData.value.name.push(item.time)
+      lineData.value.value1.push(item.value)
+    })
     handleRadioChange(currentType.value)
   })
 }
@@ -350,9 +440,10 @@ const drawBar = (data) => {
       }
     },
     grid: {
-      left: '5%',
-      right: '5%',
-      bottom: '5%',
+      left: '3%',
+      right: '3%',
+      bottom: '30%',
+      top: '10%',
       containLabel: true
     },
     xAxis: [
@@ -360,12 +451,19 @@ const drawBar = (data) => {
         type: 'category',
         data: data.name,
         axisTick: {
-          alignWithLabel: true // 刻度线是否与标签对齐，默认false
+          alignWithLabel: true
+        },
+        axisLabel: {
+          interval: 0,
+          rotate: 40,
+          fontSize: 10,
+          margin: 15,
+          overflow: 'truncate',
+          width: 60
         },
-        // 设置 X 轴线条粗细
         axisLine: {
           lineStyle: {
-            width: 1, // 根据需求调整数值大小，单位是像素
+            width: 1,
             color: '#999'
           }
         }
@@ -390,7 +488,7 @@ const drawBar = (data) => {
       {
         data: data.value1,
         type: 'bar',
-        barWidth: 20, // 根据需求调整数值大小，单位是像素
+        barMaxWidth: 50,
         itemStyle: {
           color: '#2283cf'
         }
@@ -407,6 +505,9 @@ const drawBar = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -429,7 +530,7 @@ const drawLine = (data) => {
         type: 'shadow'
       },
       formatter: function (params) {
-        return params[0].name + '<br>' + '交易金额：' + params[0].value + '元'
+        return params[0].name + '<br>' + '支出金额：' + params[0].value + '元'
       }
     },
     xAxis: {
@@ -496,22 +597,135 @@ const drawLine = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
-const currentType = ref('柱状图')
+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(lineData.value)
+        break
+      default:
+        break
+    }
+  })
 }
 getAcccountsList()
 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;
+
+  .right-con {
+    flex: 1 1 calc(20% - 0.112rem);
+    min-width: 2.2rem;
+    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 {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+
+@media (max-width: 1600px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 calc(25% - 0.105rem);
+      max-width: calc(25% - 0.105rem);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 calc(33.333% - 0.093rem);
+      max-width: calc(33.333% - 0.093rem);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/dailyLiabilities/index.vue b/src/views/invest/dailyLiabilities/index.vue
new file mode 100644
index 0000000..a925568
--- /dev/null
+++ b/src/views/invest/dailyLiabilities/index.vue
@@ -0,0 +1,519 @@
+<template>
+  <div class="app-container">
+    <div class="search-con">
+      <div class="title">查询条件</div>
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
+        <!-- <el-form-item label="名称" prop="name">
+          <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
+        </el-form-item> -->
+        <el-form-item label="记录时间" prop="time">
+          <el-date-picker v-model="queryParams.time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
+        </el-form-item>
+      </el-form>
+      <div class="search-btn-con">
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
+      </div>
+    </div>
+    <div class="main-con">
+      <div class="title-con">
+        <div class="title">净资产趋势分析</div>
+        <div class="operate-btn-con">
+          <el-radio-group v-model="radioVal" @change="handleRadioChange">
+            <el-radio-button label="柱状图" />
+            <el-radio-button label="折线图" />
+            <el-radio-button label="表格" />
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="content-con">
+        <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="dailyLiabilitiesList" @selection-change="handleSelectionChange">
+          <!-- <el-table-column type="selection" width="55" align="center" /> -->
+          <el-table-column label="名称" align="center" width="260" prop="name" />
+          <el-table-column label="净资产" align="center" prop="totalBalance" />
+          <el-table-column label="信用卡余额" align="center" prop="creditBalance" />
+          <el-table-column label="投资账户余额" align="center" prop="investBalance" />
+          <el-table-column label="储蓄账户余额" align="center" prop="debitBalance" />
+          <el-table-column label="借贷账户余额" align="center" prop="lendingBalance" />
+          <el-table-column label="记录时间" align="center" prop="recordDate" width="180"> </el-table-column>
+          <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template v-slot="scope">
+              <div class="ctrl-btn d-flex">
+                <el-tooltip v-for="item in operateList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
+                  <el-button :icon="item.icon" :v-hasPermi="item.hasPermi" circle @click="handleOperate(item.id,scope.row)"></el-button>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column> -->
+        </el-table>
+      </div>
+    </div>
+    <!-- 添加或修改每日负债统计对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="dailyLiabilitiesRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <el-form-item label="记录时间" prop="recordDate">
+          <el-date-picker clearable v-model="form.recordDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择记录时间"> </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <template v-if="title !== '查看每日负债统计'" #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="DailyLiabilities">
+import { listDailyLiabilities, getDailyLiabilities, delDailyLiabilities, addDailyLiabilities, updateDailyLiabilities } from '@/api/invest/dailyLiabilities'
+// eslint-disable-next-line no-unused-vars
+import dayjs from 'dayjs'
+import * as echarts from 'echarts'
+import { require } from '@/utils/require'
+const { proxy } = getCurrentInstance()
+
+const dailyLiabilitiesList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref('')
+const radioVal = ref('柱状图')
+const chartData = ref({
+  name: [],
+  value1: []
+})
+const operateList = ref([
+  { id: 'view', icon: 'View', title: '查看', hasPermi: ['invest:dailyLiabilities:query'] },
+  { id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['invest:dailyLiabilities:edit'] },
+  { id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['invest:dailyLiabilities:remove'] }
+])
+// 初始化默认查询最近10天
+const today = new Date()
+const tenDaysAgo = new Date()
+tenDaysAgo.setDate(today.getDate() - 9) // 包含今天共10天
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 100, // 增加pageSize以确保能获取到足够的数据
+    time: [tenDaysAgo, today],
+    name: null,
+    recordDate: null
+  },
+  rules: {}
+})
+
+const handleOperate = (operate, row) => {
+  switch (operate) {
+    case 'view':
+      handleView(row)
+      break
+    case 'edit':
+      handleUpdate(row)
+      break
+    case 'delete':
+      handleDelete(row)
+      break
+    default:
+      break
+  }
+}
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询每日负债统计列表 */
+function getList() {
+  loading.value = true
+  const timeRange = queryParams.value.time
+  let st = ''
+  let et = ''
+  if (timeRange && timeRange.length === 2) {
+    st = dayjs(timeRange[0]).format('YYYY-MM-DD')
+    et = dayjs(timeRange[1]).format('YYYY-MM-DD')
+  }
+  queryParams.value.startTime = st
+  queryParams.value.endTime = et
+  listDailyLiabilities(queryParams.value).then((response) => {
+    dailyLiabilitiesList.value = response.rows
+    total.value = response.total
+    loading.value = false
+
+    // 准备图表数据 - 使用查询结果的所有数据
+    chartData.value = { name: [], value1: [] }
+    const chartDataList = response.rows.slice().reverse() // 倒序显示，时间从旧到新
+    chartDataList.forEach((item) => {
+      chartData.value.name.push(item.recordDate)
+      chartData.value.value1.push(parseFloat(item.totalBalance) || 0)
+    })
+
+    handleRadioChange(currentType.value)
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    name: null,
+    totalBalance: null,
+    creditBalance: null,
+    investBalance: null,
+    debitBalance: null,
+    lendingBalance: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null,
+    remark: null,
+    recordDate: null
+  }
+  proxy.resetForm('dailyLiabilitiesRef')
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  // 重置为默认的最近10天
+  const today = new Date()
+  const tenDaysAgo = new Date()
+  tenDaysAgo.setDate(today.getDate() - 9)
+  queryParams.value.time = [tenDaysAgo, today]
+  queryParams.value.name = null
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.id)
+  single.value = selection.length !== 1
+  multiple.value = !selection.length
+}
+
+// 查看
+const handleView = (row) => {
+  title.value = '查看每日负债统计'
+  form.value = row
+  open.value = true
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = '添加每日负债统计'
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getDailyLiabilities(_id).then((response) => {
+    form.value = response.data
+    open.value = true
+    title.value = '修改每日负债统计'
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs.dailyLiabilitiesRef.validate((valid) => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateDailyLiabilities(form.value).then((response) => {
+          proxy.$modal.msgSuccess('修改成功')
+          open.value = false
+          getList()
+        })
+      } else {
+        addDailyLiabilities(form.value).then((response) => {
+          proxy.$modal.msgSuccess('新增成功')
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal
+    .confirm('是否确认删除选中的数据项？')
+    .then(function () {
+      return delDailyLiabilities(_ids)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+    .catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    'invest/dailyLiabilities/export',
+    {
+      ...queryParams.value
+    },
+    `dailyLiabilities_${new Date().getTime()}.xlsx`
+  )
+}
+
+/** 绘制柱状图 */
+const drawBar = (data) => {
+  if (document.getElementById('chartBar') === null) {
+    return
+  }
+  echarts.dispose(document.getElementById('chartBar'))
+  const myChart = echarts.init(document.getElementById('chartBar'))
+
+  const option = {
+    legend: {
+      show: true,
+      top: 50,
+      right: 50,
+      itemGap: 20
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + '<br>' + '净资产：' + params[0].value + '元'
+      }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: data.name,
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLine: {
+          lineStyle: {
+            width: 1,
+            color: '#999'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            color: '#999'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        data: data.value1,
+        type: 'bar',
+        barWidth: 20,
+        itemStyle: {
+          color: '#2283cf'
+        }
+      }
+    ],
+    emphasis: {
+      itemStyle: {
+        color: '#2283cf',
+        barWidth: 20
+      },
+      barWidth: 24
+    }
+  }
+
+  myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
+}
+
+/** 绘制折线图 */
+const drawLine = (data) => {
+  if (document.getElementById('chartLine') === null) {
+    return
+  }
+  echarts.dispose(document.getElementById('chartLine'))
+  const myChart = echarts.init(document.getElementById('chartLine'))
+
+  const option = {
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + '<br>' + '净资产：' + params[0].value + '元'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: data.name,
+      axisTick: {
+        alignWithLabel: true
+      },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: '#999'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          color: '#999'
+        }
+      }
+    },
+    series: [
+      {
+        data: data.value1,
+        type: 'line',
+        lineStyle: {
+          color: '#4181c9'
+        },
+        itemStyle: {
+          color: '#4181c9'
+        },
+        smooth: true,
+        symbol: 'emptyCircle',
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(65,129,201, 0.70)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(65,129,201, 0.10)'
+              }
+            ],
+            false
+          ),
+          shadowColor: 'rgba(65,129,201, 0.10)',
+          shadowBlur: 10
+        }
+      }
+    ]
+  }
+
+  myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
+}
+
+/** 单选按钮切换处理 */
+const currentType = ref('柱状图')
+const handleRadioChange = (type) => {
+  currentType.value = type
+  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;
+}
+
+.title-con {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+</style>
diff --git a/src/views/invest/debitCardAnalysis/index.vue b/src/views/invest/debitCardAnalysis/index.vue
new file mode 100644
index 0000000..085ea0f
--- /dev/null
+++ b/src/views/invest/debitCardAnalysis/index.vue
@@ -0,0 +1,513 @@
+<template>
+  <div class="app-container">
+    <div class="main-con" style="height: calc(100% - 0rem)">
+      <div class="summary-con" style="height: 115px">
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Calendar /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">今日结算</div>
+            <div class="num">{{ debitCardAnalysis.todayCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Money /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">今日收款</div>
+            <div class="num">{{ debitCardAnalysis.todayAmount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Histogram /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近7日结算</div>
+            <div class="num">{{ debitCardAnalysis.sevenDayCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><CreditCard /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近7日收款</div>
+            <div class="num">{{ debitCardAnalysis.sevenDayAmount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><CircleCheck /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近1月结算</div>
+            <div class="num">{{ debitCardAnalysis.oneMonthCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#00D0FF"><Coin /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近1月收款</div>
+            <div class="num">{{ debitCardAnalysis.oneMonthAmount }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="summary-con" style="height: 110px">
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><DataLine /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近6月结算</div>
+            <div class="num">{{ debitCardAnalysis.sixMonthCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><WalletFilled /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近6月收款</div>
+            <div class="num">{{ debitCardAnalysis.sixMonthAmount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Histogram /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近1年结算</div>
+            <div class="num">{{ debitCardAnalysis.oneYearCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Money /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近1年收款</div>
+            <div class="num">{{ debitCardAnalysis.oneYearAmount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><TrendCharts /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">总结算次数</div>
+            <div class="num">{{ debitCardAnalysis.totalCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#00D0FF"><WalletFilled /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">总收款金额</div>
+            <div class="num">{{ debitCardAnalysis.totalAmount }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="title-con" style="margin-top: 18px">
+        <div class="title">结算卡统计</div>
+        <div class="operate-btn-con">
+          <el-radio-group v-model="radioVal" @change="handleRadioChange">
+            <el-radio-button label="结算卡统计表格" />
+            <el-radio-button label="近6月收款金额柱状图" />
+            <el-radio-button label="近6月收款金额折线图" />
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="content-con">
+        <div v-show="radioVal === '近6月收款金额柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
+        <div v-show="radioVal === '近6月收款金额折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px); margin-top: -10px"></div>
+        <el-table v-show="radioVal === '结算卡统计表格'" v-loading="loading" :data="debitCardAnalysis.debitCardTableList" height="calc(100% - 245px)">
+          <el-table-column label="序号" width="50" type="index" align="center">
+            <template #default="scope">
+              <span>{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="结算卡" align="center" prop="nameCode" />
+          <el-table-column label="今日结算次数" align="center" prop="todayCount" />
+          <el-table-column label="今日收款金额" align="center" prop="todayAmount" />
+          <!-- <el-table-column label="近7日结算" align="center" prop="sevenDayCount" />
+          <el-table-column label="近7日收款" align="center" prop="sevenDayAmount" /> -->
+          <el-table-column label="近1月结算次数" align="center" prop="oneMonthCount" />
+          <el-table-column label="近1月收款金额" align="center" prop="oneMonthAmount" />
+          <!-- <el-table-column label="近3月结算" align="center" prop="threeMonthCount" />
+          <el-table-column label="近3月收款" align="center" prop="threeMonthAmount" /> -->
+          <el-table-column label="近6月结算次数" align="center" prop="sixMonthCount" />
+          <el-table-column label="近6月收款金额" align="center" prop="sixMonthAmount" />
+          <el-table-column label="近1年结算次数" align="center" prop="oneYearCount" />
+          <el-table-column label="近1年收款金额" align="center" prop="oneYearAmount" />
+          <el-table-column label="总结算次数" align="center" prop="totalCount" />
+          <el-table-column label="总收款金额" align="center" prop="totalAmount" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="DebitCardAnalysis">
+import dayjs from 'dayjs'
+import * as echarts from 'echarts'
+import { ElMessage } from 'element-plus'
+import { Calendar, Money, CreditCard, TrendCharts, DataLine, WalletFilled, Coin, Histogram, CircleCheck } from '@element-plus/icons-vue'
+import { getDebitCardAnalysis } from '@/api/invest/statisticAnalysis'
+const { proxy } = getCurrentInstance()
+const { account_type } = proxy.useDict('account_type')
+
+const loading = ref(true)
+const total = ref(0)
+const radioVal = ref('结算卡统计表格')
+const dateValidate = (rules, value, callback) => {
+  const dateType = rules.dateType || 'days'
+  const num = rules.num || 31
+  const dateString = rules.dateString || '天'
+  const message = rules.message || `时间跨度不能超过${num}${dateString}`
+
+  if (value && value.length === 2) {
+    const start = value[0]
+    const end = value[1]
+    if (dayjs(end).diff(dayjs(start), dateType) > num) {
+      queryParams.value.time = [start, dayjs(start).add(59, 'months')]
+      ElMessage.warning(message)
+    }
+  }
+}
+
+const data = reactive({
+  queryParams: {
+    type: 1,
+    time: null,
+    dataType: null,
+    id: null
+  },
+  rules: {
+    time: [{ validator: dateValidate, dateType: 'months', num: 59, dateRange: '月', message: '时间跨度不能大于60个月，默认选择开始日期的24个月' }]
+  }
+})
+
+const { queryParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.dataType = id
+  getList()
+}
+const today = new Date()
+const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
+const start = end
+queryParams.value.time = [start, end]
+
+const firstChooseDate = ref('')
+const calendarChange = (val) => {
+  firstChooseDate.value = val[0].getTime()
+  if (val[1]) firstChooseDate.value = ''
+}
+
+const debitCardAnalysis = ref({
+  debetBalance: '',
+  creditAvailableLimit: '',
+  creditBalance: '',
+  investBalance: '',
+  debitBalance: '',
+  debitCardList: []
+})
+const chartData = ref({
+  name: [],
+  value1: []
+})
+
+function getList() {
+  loading.value = true
+  chartData.value = { name: [], value1: [] }
+  const { type, time, id, dataType } = queryParams.value
+  let formatValue = 'YYYY-MM-DD'
+  if (type === 1) {
+    formatValue = 'YYYY-MM-DD'
+  } else if (type === 2) {
+    formatValue = 'YYYY-MM'
+  } else {
+    formatValue = 'YYYY'
+  }
+  const params = {
+    type,
+    startTime: time && time.length > 0 ? dayjs(time[0]).format(formatValue) : '',
+    endTime: time && time.length > 0 ? dayjs(time[1]).format(formatValue) : '',
+    id,
+    dataType
+  }
+  getDebitCardAnalysis(params).then((response) => {
+    loading.value = false
+    debitCardAnalysis.value = { ...response.data }
+    debitCardAnalysis.value.debitCardList.map((item) => {
+      return {
+        name: item.debitCard,
+        value: item.amount
+      }
+    })
+    response.data.debitCardList.map((item) => {
+      chartData.value.name.push(item.debitCard)
+      chartData.value.value1.push(item.amount)
+    })
+    handleRadioChange(currentType.value)
+  })
+}
+
+function handleQuery() {
+  getList()
+}
+
+function resetQuery() {
+  proxy.resetForm('queryRef')
+  queryParams.value.id = null
+  queryParams.value.dataType = null
+  total.value = 0
+  handleQuery()
+}
+
+const drawBar = (data) => {
+  if (document.getElementById('chartBar') === null) {
+    return
+  }
+  echarts.dispose(document.getElementById('chartBar'))
+  const myChart = echarts.init(document.getElementById('chartBar'))
+
+  const option = {
+    legend: {
+      // 图示例样式
+      show: true,
+      top: 50,
+      right: 50,
+      itemGap: 20
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + '<br>' + '收款金额：' + params[0].value + '元'
+      }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: data.name,
+        axisTick: {
+          alignWithLabel: true // 刻度线是否与标签对齐，默认false
+        },
+        // 设置 X 轴线条粗细
+        axisLine: {
+          lineStyle: {
+            width: 1, // 根据需求调整数值大小，单位是像素
+            color: '#999'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisTick: {
+          show: false // 默认为true，如果要隐藏，则改为 false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            color: '#999'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        data: data.value1,
+        type: 'bar',
+        barWidth: 20, // 根据需求调整数值大小，单位是像素
+        itemStyle: {
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
+        }
+      }
+    ],
+    // 添加点击事件的处理函数
+    emphasis: {
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
+    }
+  }
+
+  myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
+}
+
+const drawLine = (data) => {
+  if (document.getElementById('chartLine') === null) {
+    return
+  }
+  echarts.dispose(document.getElementById('chartLine'))
+  const myChart = echarts.init(document.getElementById('chartLine'))
+
+  const option = {
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + '<br>' + '收款金额：' + params[0].value + '元'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: data.name,
+      axisTick: {
+        alignWithLabel: true
+      },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: '#999'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          color: '#999'
+        }
+      }
+    },
+    series: [
+      {
+        data: data.value1,
+        type: 'line',
+        lineStyle: {
+          color: '#4181c9'
+        },
+        itemStyle: {
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
+        },
+        smooth: true,
+        symbol: 'emptyCircle',
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(65,129,201, 0.70)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(65,129,201, 0.10)'
+              }
+            ],
+            false
+          ),
+          shadowColor: 'rgba(65,129,201, 0.10)',
+          shadowBlur: 10
+        }
+      }
+    ]
+  }
+
+  myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
+}
+
+const currentType = ref('近1年收款金额柱状图')
+const handleRadioChange = (type) => {
+  currentType.value = type
+  nextTick(() => {
+    switch (type) {
+      case '近6月收款金额柱状图':
+        drawBar(chartData.value)
+        break
+      case '近6月收款金额折线图':
+        drawLine(chartData.value)
+        break
+      default:
+        break
+    }
+  })
+}
+getList()
+</script>
+
+<style lang="scss" scoped>
+.summary-con {
+  .center-con {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+
+  .item-wrap {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+
+  .icon-box {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/debitDealAnalysis/index.vue b/src/views/invest/debitDealAnalysis/index.vue
index 08f8aae..453fa10 100644
--- a/src/views/invest/debitDealAnalysis/index.vue
+++ b/src/views/invest/debitDealAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="储蓄账户" style="width: 480px" prop="id">
-          <el-select v-model="queryParams.id" placeholder="请选择储蓄账户" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择储蓄账户" @change="handleChange" clearable>
             <el-option v-for="account in accountsList" :key="account.id" :label="account.nameCodeAvailableLimit" :value="account.id" />
           </el-select>
         </el-form-item>
@@ -64,122 +64,100 @@
         <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="main-con">
+      <div class="summary-con">
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">交易金额</div>
-            <div>
-              <span class="num">{{ account.amount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.amount }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">收入金额</div>
-            <div>
-              <span class="num">{{ account.income }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.income }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">支出金额</div>
-            <div>
-              <span class="num">{{ account.expenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.expenses }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Histogram /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">收入笔数</div>
-            <div>
-              <span class="num">{{ account.incomeCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ account.incomeCount }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><CircleCheck /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">支出笔数</div>
-            <div>
-              <span class="num">{{ account.expensesCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ account.expensesCount }}</div>
           </div>
         </div>
-      </div>
-      <div class="summary-con" v-hasPermi="['invest:posmachine:list']" style="height: 115px">
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><WalletFilled /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">POS刷卡收入</div>
-            <div>
-              <span class="num">{{ account.posIncome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.posIncome }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">真实消费支出</div>
-            <div>
-              <span class="num">{{ account.realExpenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.realExpenses }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><CircleCheck /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">POS收入笔数</div>
-            <div>
-              <span class="num">{{ account.posIncomeCount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.posIncomeCount }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">真实消费支出笔数</div>
-            <div>
-              <span class="num">{{ account.realExpensesCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ account.realExpensesCount }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="right-con" v-hasPermi="['invest:posmachine:list']">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Histogram /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">支出笔数</div>
-            <div>
-              <span class="num">{{ account.otherExpensesCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ account.otherExpensesCount }}</div>
           </div>
         </div>
       </div>
-      <div class="title-con" style="margin-top: 18px">
+      <div class="title-con">
         <div class="title">储蓄账户收支统计</div>
         <div class="operate-btn-con">
           <el-radio-group v-model="radioVal" @change="handleRadioChange">
@@ -190,9 +168,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% - 225px); margin-top: -10px"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.tableAccountsList" 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="account.tableAccountsList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -215,6 +193,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { TrendCharts, Money, Coin, CreditCard, Histogram, CircleCheck, WalletFilled, Odometer } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getAcccountsDealAnalysis } from '@/api/invest/statisticAnalysis'
 import { listAccounts } from '@/api/invest/accounts'
@@ -276,6 +255,10 @@ const data = reactive({
 })
 
 const { queryParams, queryAcccountsParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
 const start = dayjs(end).add(-7, 'day')
@@ -467,21 +450,32 @@ const drawBar = (data) => {
         type: 'bar',
         barWidth: 20, // 根据需求调整数值大小，单位是像素
         itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         }
       }
     ],
     // 添加点击事件的处理函数
     emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
     }
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -541,7 +535,15 @@ const drawLine = (data) => {
           color: '#4181c9'
         },
         itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         },
         smooth: true,
         symbol: 'emptyCircle',
@@ -571,22 +573,135 @@ 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
+    }
+  })
 }
 getAcccountsList()
 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;
+
+  .right-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 {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+
+@media (max-width: 1600px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 calc(25% - 0.105rem);
+      max-width: calc(25% - 0.105rem);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 calc(33.333% - 0.093rem);
+      max-width: calc(33.333% - 0.093rem);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con {
+    .right-con {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/debitcard/index.vue b/src/views/invest/debitcard/index.vue
index 796bbc5..9e54ce0 100644
--- a/src/views/invest/debitcard/index.vue
+++ b/src/views/invest/debitcard/index.vue
@@ -37,6 +37,7 @@
           <el-table-column type="index" label="序号" :index="indexMethod" width="50"></el-table-column>
           <el-table-column label="储蓄账户名称" align="center" width="180" prop="name" />
           <el-table-column label="储蓄账户卡号" align="center" prop="code" />
+          <el-table-column label="余额" align="center" prop="balance" />
           <el-table-column label="储蓄账户类型" width="150" align="center" prop="debitType">
             <template #default="scope">
               <dict-tag :options="debit_type" :value="scope.row.debitType" />
@@ -119,16 +120,90 @@
         </div>
       </template>
     </el-dialog>
+    <!-- 添加或修改分期历史调额记录对话框 -->
+    <el-dialog :title="titleDetail" v-model="openDetail" width="500px" append-to-body>
+      <el-form ref="limitHistoryRef" :model="formDetail" :rules="rulesDetail" label-width="120px">
+        <el-form-item label="调整类型" prop="adjustType">
+          <el-select v-model="formDetail.adjustType" placeholder="请选择调整类型">
+            <el-option v-for="dict in adjust_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="调整后额度" prop="afterLimit">
+          <el-input v-model="formDetail.afterLimit" type="number" @change="handlePriceChange" placeholder="请输入调整后额度">
+            <template #suffix>元</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="调整时间" prop="adjustTime">
+          <el-date-picker clearable v-model="formDetail.adjustTime" type="datetime" value-format="YYYY-MM-DD  HH:mm:ss" placeholder="请选择调整时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="生效日期" prop="effectDate">
+          <el-date-picker clearable v-model="formDetail.effectDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择生效日期"> </el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formDetail.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFormDetail">确 定</el-button>
+          <el-button @click="cancelDetail">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 添加或修改分期历史调额记录对话框 -->
+    <el-dialog title="查看添加非柜面限额记录" v-model="detailOpen" width="1150px" append-to-body>
+      <div class="basic-information">
+        <div class="main-con">
+          <div class="title-con">
+            <div class="title">基本信息</div>
+            <div class="operate-btn-con">
+              <el-button @click="handleAddDetail" icon="Plus" v-hasPermi="['invest:bankcard:add']">新增</el-button>
+            </div>
+          </div>
+          <div class="content-con">
+            <el-table v-loading="loading" :data="limitHistoryList">
+              <el-table-column label="调整时间" align="center" prop="adjustTime" width="180"> </el-table-column>
+              <el-table-column label="生效日期" align="center" prop="effectDate" width="120">
+                <template #default="scope">
+                  <span>{{ parseTime(scope.row.effectDate, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="调整类型" align="center" width="120" prop="adjustType">
+                <template #default="scope">
+                  <dict-tag :options="adjust_type" :value="scope.row.adjustType" />
+                </template>
+              </el-table-column>
+              <el-table-column label="调整后额度" align="center" width="100" prop="afterLimit" />
+              <el-table-column label="调整幅度" align="center" width="100" prop="adjustLimit" />
+              <el-table-column label="备注" align="center" prop="remark" />
+              <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
+                <template v-slot="scope">
+                  <div class="ctrl-btn d-flex">
+                    <el-tooltip v-for="item in operateDetailList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
+                      <el-button :icon="item.icon" v-hasPermi="item.hasPermi" circle @click="handleDetailOperate(item.id, scope.row)"></el-button>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <template #footer> </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="BankcardLend">
 import { listBankcardLend, getBankcardLend, delBankcardLend, addBankcardLend, updateBankcardLend } from '@/api/invest/bankcardlend'
+import { listLimitHistory, getLimitHistory, delLimitHistory, addLimitHistory, updateLimitHistory } from '@/api/invest/limitHistory'
 // eslint-disable-next-line no-unused-vars
 import { require } from '@/utils/require'
 const { proxy } = getCurrentInstance()
 const { bank_card_type, debit_type, account_status } = proxy.useDict('bank_card_type', 'debit_type', 'account_status')
-
+const { limit_history_type, adjust_type } = proxy.useDict('limit_history_type', 'adjust_type')
 const bankcardList = ref([])
 const open = ref(false)
 const loading = ref(true)
@@ -138,13 +213,28 @@ const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
 const title = ref('')
+
+const detailOpen = ref(false)
+const openDetail = ref(false)
+const titleDetail = ref('')
+const limitHistoryList = ref([])
+const currentcardId = ref('')
+const currentBeforeLimit = ref('0')
+
 const operateList = ref([
   { id: 'view', icon: 'View', title: '查看', hasPermi: ['invest:bankcard:query'] },
+  { id: 'limit', icon: 'Grid', title: '非柜面限额记录', hasPermi: ['invest:bankcard:edit'] },
   { id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['invest:bankcard:edit'] },
   { id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['invest:bankcard:remove'] }
 ])
+const operateDetailList = ref([
+  //{ id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['invest:bankcard:edit'] },
+  { id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['invest:bankcard:remove'] }
+])
+
 const data = reactive({
   form: {},
+  formDetail: {},
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -159,11 +249,19 @@ const data = reactive({
     status: [{ required: true, message: '账户状态不能为空', trigger: 'blur' }],
     debitType: [{ required: true, message: '储蓄账户类型不能为空', trigger: 'blur' }],
     balance: [{ required: true, message: '余额不能为空', trigger: 'blur' }]
+  },
+  rulesDetail: {
+    afterLimit: [{ required: true, message: '调整后额度不能为空', trigger: 'blur' }],
+    adjustTime: [{ required: true, message: '调整时间不能为空', trigger: 'blur' }],
+    adjustType: [{ required: true, message: '调整类型不能为空', trigger: 'change' }]
   }
 })
 
 const handleOperate = (operate, row) => {
   switch (operate) {
+    case 'limit':
+      handleDetail(row)
+      break
     case 'view':
       handleView(row)
       break
@@ -178,8 +276,120 @@ const handleOperate = (operate, row) => {
   }
 }
 
-const { queryParams, form, rules } = toRefs(data)
+const { queryParams, form, formDetail, rules, rulesDetail } = toRefs(data)
 
+/** 新增按钮操作 */
+function handleAddDetail() {
+  resetDetail()
+  titleDetail.value = '添加非柜面限额记录'
+  openDetail.value = true
+}
+
+const handleDetailOperate = (operate, row) => {
+  switch (operate) {
+    case 'edit':
+      handleUpdateDetail(row)
+      break
+    case 'delete':
+      handleDeleteDetail(row)
+      break
+    default:
+      break
+  }
+}
+
+// 取消按钮
+function cancelDetail() {
+  openDetail.value = false
+  resetDetail()
+}
+
+/** 删除按钮操作 */
+function handleDeleteDetail(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal
+    .confirm('是否确认删除选中的数据项？')
+    .then(function () {
+      return delLimitHistory(_ids)
+    })
+    .then(() => {
+      listLimitHistory({ bankCardLendId: currentcardId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+        limitHistoryList.value = response.rows
+      })
+      proxy.$modal.msgSuccess('删除非柜面限额记录成功')
+    })
+    .catch(() => {})
+}
+
+/** 提交按钮 */
+function submitFormDetail() {
+  formDetail.value.bankCardLendId = currentcardId.value
+  formDetail.value.beforeLimit = currentBeforeLimit
+  proxy.$refs.limitHistoryRef.validate((valid) => {
+    if (valid) {
+      if (formDetail.value.id != null) {
+        updateLimitHistory(formDetail.value).then((response) => {
+          proxy.$modal.msgSuccess('修改调非柜面限额记录成功')
+          openDetail.value = false
+          listLimitHistory({ bankCardLendId: currentcardId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+            limitHistoryList.value = response.rows
+          })
+        })
+      } else {
+        addLimitHistory(formDetail.value).then((response) => {
+          proxy.$modal.msgSuccess('新增调非柜面限额记录成功')
+          openDetail.value = false
+          listLimitHistory({ bankCardLendId: currentcardId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+            limitHistoryList.value = response.rows
+          })
+        })
+      }
+    }
+  })
+}
+
+/** 修改按钮操作 */
+function handleUpdateDetail(row) {
+  resetDetail()
+  getLimitHistory(row.id).then((response) => {
+    formDetail.value = response.data
+    openDetail.value = true
+    titleDetail.value = '修改非柜面限额记录'
+  })
+}
+
+// 表单重置
+function resetDetail() {
+  formDetail.value = {
+    id: null,
+    name: null,
+    type: '3',
+    bankCardLendId: null,
+    afterLimit: null,
+    createBy: null,
+    createTime: null,
+    updateBy: null,
+    updateTime: null,
+    delFlag: null,
+    remark: null,
+    adjustTime: null,
+    effectDate: null,
+    deadlineDate: null,
+    adjustType: null,
+    beforeLimit: null,
+    adjustLimit: null
+  }
+  proxy.resetForm('limitHistoryRef')
+}
+/** 新增按钮操作 */
+function handleDetail(row) {
+  detailOpen.value = true
+  currentcardId.value = row.id
+  currentBeforeLimit.value = row.creditLimit
+  listLimitHistory({ bankCardLendId: row.id, pageNum: 1, pageSize: 1000 }).then((response) => {
+    limitHistoryList.value = response.rows
+  })
+}
 /** 查询储蓄账户信息列表 */
 function getList() {
   loading.value = true
diff --git a/src/views/invest/futures/index.vue b/src/views/invest/futures/index.vue
index d23f22f..dd68ec6 100644
--- a/src/views/invest/futures/index.vue
+++ b/src/views/invest/futures/index.vue
@@ -37,6 +37,7 @@
               <dict-tag :options="account_status" :value="scope.row.status" />
             </template>
           </el-table-column>
+          <el-table-column label="余额" align="center" prop="balance" />
           <el-table-column label="期货交易中心账号" align="center" prop="tradingCenterCode" />
           <el-table-column label="手续费" align="center" prop="commission" />
           <el-table-column label="保证金比例" align="center" prop="bond" />
diff --git a/src/views/invest/futuresAnalysis/index.vue b/src/views/invest/futuresAnalysis/index.vue
index 51c9e60..f0fc3ab 100644
--- a/src/views/invest/futuresAnalysis/index.vue
+++ b/src/views/invest/futuresAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="期货账户" prop="futureStocksId">
-          <el-select v-model="queryParams.id" placeholder="请选择期货账户" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择期货账户" @change="handleChange" clearable>
             <el-option v-for="futureStocks in futureStocksList" :key="futureStocks.id" :label="futureStocks.nameCode" :value="futureStocks.id" />
           </el-select>
         </el-form-item>
@@ -55,55 +55,56 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 2.05rem)">
+    <div class="main-con">
       <div class="summary-con">
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+        <div class="center-con">
+          <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">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.accumulateIncome }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><List /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">交易次数</div>
+            <div class="num">{{ futuresStock.count }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">平均收益</div>
-            <div>
-              <span class="num">{{ futuresStock.averageIncome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.averageIncome }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/chart-pie.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><PieChart /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">最大收益</div>
-            <div>
-              <span class="num">{{ futuresStock.maxRevenue }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.maxRevenue }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">最大亏损</div>
-            <div>
-              <span class="num">{{ futuresStock.maxLoss }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.maxLoss }}</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="柱状图" />
@@ -113,9 +114,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
+        <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="futuresStock.tableFuturesStocksList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -138,6 +139,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { TrendCharts, List, DataLine, PieChart, Odometer } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getFuturesStocksAnalysis } from '@/api/invest/statisticAnalysis'
 import { listFutureStocks } from '@/api/invest/futureStocks'
@@ -197,6 +199,11 @@ const data = reactive({
 })
 
 const { queryParams, queryFutureStocksListParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
+
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
 const start = dayjs(end).add(-59, 'months')
@@ -286,6 +293,7 @@ function getList() {
   getFuturesStocksAnalysis(params).then((response) => {
     loading.value = false
     futuresStock.value = { ...response.data }
+    futuresStock.value.count = response.data.futuresStocksList.length
     futuresStock.value.futuresStocksList.map((item) => {
       return {
         name: item.time,
@@ -379,17 +387,25 @@ const drawBar = (data) => {
         type: 'bar',
         barWidth: 20, // 根据需求调整数值大小，单位是像素
         itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         }
       }
     ],
     // 添加点击事件的处理函数
     emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
     }
   }
 
@@ -453,7 +469,15 @@ const drawLine = (data) => {
           color: '#4181c9'
         },
         itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         },
         smooth: true,
         symbol: 'emptyCircle',
@@ -502,3 +526,106 @@ const handleRadioChange = (type) => {
 getFutureStocksList()
 getList()
 </script>
+
+<style lang="scss" scoped>
+.main-con {
+  height: calc(100vh - 240px);
+  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>
diff --git a/src/views/invest/investAnalysis/index.vue b/src/views/invest/investAnalysis/index.vue
index d6a88c3..6e869b8 100644
--- a/src/views/invest/investAnalysis/index.vue
+++ b/src/views/invest/investAnalysis/index.vue
@@ -50,77 +50,56 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 2.05rem)">
+    <div class="main-con">
       <div class="summary-con">
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+        <div class="center-con">
+          <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">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.accumulateIncome }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+        <div class="center-con">
+          <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">{{ futuresStock.accumulateFutures }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.accumulateFutures }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">股票累计收益</div>
-            <div>
-              <span class="num">{{ futuresStock.accumulateStocks }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.accumulateStocks }}</div>
           </div>
         </div>
-        <!-- <div class="center-con">
-              <div class="img">
-                <img src="@/assets/images/average.png" alt="" />
-              </div>
-              <div class="item-wrap">
-                <div class="title">平均收益</div>
-                <div>
-                  <span class="num">{{ futuresStock.averageIncome }}</span> <span class="unit"></span>
-                </div>
-              </div>
-            </div> -->
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/chart-pie.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><PieChart /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">最大收益</div>
-            <div>
-              <span class="num">{{ futuresStock.maxRevenue }}</span>
-            </div>
+            <div class="num">{{ futuresStock.maxRevenue }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">最大亏损</div>
-            <div>
-              <span class="num">{{ futuresStock.maxLoss }}</span>
-            </div>
+            <div class="num">{{ futuresStock.maxLoss }}</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="柱状图" />
@@ -130,9 +109,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
+        <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="futuresStock.tableFuturesStocksList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -155,6 +134,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { TrendCharts, Histogram, DataLine, PieChart, Odometer } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getFuturesStocksAnalysis } from '@/api/invest/statisticAnalysis'
 const { proxy } = getCurrentInstance()
@@ -380,17 +360,25 @@ const drawBar = (data) => {
         type: 'bar',
         barWidth: 20, // 根据需求调整数值大小，单位是像素
         itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         }
       }
     ],
     // 添加点击事件的处理函数
     emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
     }
   }
 
@@ -454,7 +442,15 @@ const drawLine = (data) => {
           color: '#4181c9'
         },
         itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         },
         smooth: true,
         symbol: 'emptyCircle',
@@ -502,3 +498,106 @@ const handleRadioChange = (type) => {
 }
 getList()
 </script>
+
+<style lang="scss" scoped>
+.main-con {
+  height: calc(100vh - 240px);
+  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>
diff --git a/src/views/invest/investDealAnalysis/index.vue b/src/views/invest/investDealAnalysis/index.vue
index eaf9845..695c1ed 100644
--- a/src/views/invest/investDealAnalysis/index.vue
+++ b/src/views/invest/investDealAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="投资账户" style="width: 480px" prop="id">
-          <el-select v-model="queryParams.id" placeholder="请选择投资账户" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择投资账户" @change="handleChange" clearable>
             <el-option v-for="account in accountsList" :key="account.id" :label="account.nameCodeAvailableLimit" :value="account.id" />
           </el-select>
         </el-form-item>
@@ -54,66 +54,65 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 1.45rem)">
+    <div class="main-con">
       <div class="summary-con">
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">收益金额</div>
-            <div>
-              <span class="num">{{ account.amount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.amount }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Histogram /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">交易次数</div>
+            <div class="num">{{ account.count }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">平均收益</div>
+            <div class="num">{{ account.average }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">盈利金额</div>
-            <div>
-              <span class="num">{{ account.income }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.income }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">亏损金额</div>
-            <div>
-              <span class="num">{{ account.expenses }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ account.expenses }}</div>
           </div>
         </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><CircleCheck /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">盈利笔数</div>
-            <div>
-              <span class="num">{{ account.incomeCount }}</span> <span class="unit">笔</span>
-            </div>
-          </div>
-        </div>
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
-          </div>
-          <div class="item-wrap">
-            <div class="title">亏损笔数</div>
-            <div>
-              <span class="num">{{ account.expensesCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="title">交易笔数</div>
+            <div class="num">{{ account.incomeCount + account.expensesCount }}</div>
           </div>
         </div>
       </div>
-      <div class="title-con" style="margin-top: 18px">
-        <div class="title">投资账户收益统计</div>
+      <div class="title-con">
+        <div class="title">投资收益统计</div>
         <div class="operate-btn-con">
           <el-radio-group v-model="radioVal" @change="handleRadioChange">
             <el-radio-button label="柱状图" />
@@ -123,9 +122,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px); margin-top: -10px"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px); margin-top: -10px"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="account.tableAccountsList" height="calc(100% - 170px)">
+        <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="account.tableAccountsList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -148,6 +147,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { Money, TrendCharts, DataLine, Odometer, Histogram, CircleCheck } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getAcccountsDealAnalysis } from '@/api/invest/statisticAnalysis'
 import { listAccounts } from '@/api/invest/accounts'
@@ -209,6 +209,11 @@ const data = reactive({
 })
 
 const { queryParams, queryAcccountsParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
+
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
 const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
@@ -238,6 +243,14 @@ function formatMultiLineData(data) {
     return data.replace(/<br\/>/g, '<br/>')
   }
 }
+function average() {
+  if (account.tableAccountsList.length > 0) {
+    return parseFloat(account.amount / account.tableAccountsList.length).toFixed(2)
+  } else {
+    return 0
+  }
+}
+
 const disabledDateFun = (time) => {
   const arr = [0, 30, 365, 365 * 5]
   const days = arr[queryParams.value.type]
@@ -304,6 +317,12 @@ function getList() {
   getAcccountsDealAnalysis(params).then((response) => {
     loading.value = false
     account.value = { ...response.data }
+    account.value.count = response.data.tableAccountsList.length
+    if (response.data.tableAccountsList.length > 0) {
+      account.value.average = parseFloat(account.value.amount / response.data.tableAccountsList.length).toFixed(2)
+    } else {
+      account.value.average = 0
+    }
     account.value.acccountsList.map((item) => {
       return {
         name: item.time,
@@ -400,21 +419,32 @@ const drawBar = (data) => {
         type: 'bar',
         barWidth: 20, // 根据需求调整数值大小，单位是像素
         itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         }
       }
     ],
     // 添加点击事件的处理函数
     emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
     }
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -474,7 +504,15 @@ const drawLine = (data) => {
           color: '#4181c9'
         },
         itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         },
         smooth: true,
         symbol: 'emptyCircle',
@@ -504,22 +542,130 @@ 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
+    }
+  })
 }
 getAcccountsList()
 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 {
+    width: 32% !important;
+    flex: 0 0 32% !important;
+    max-width: 32% !important;
+    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(33.333% - 0.093rem);
+    max-width: calc(33.333% - 0.093rem);
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con .center-con {
+    flex: 1 1 calc(50% - 0.07rem);
+    max-width: calc(50% - 0.07rem);
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con .center-con {
+    flex: 1 1 calc(50% - 0.07rem);
+    max-width: calc(50% - 0.07rem);
+  }
+}
+</style>
diff --git a/src/views/invest/lend/index.vue b/src/views/invest/lend/index.vue
index 7ed54e5..eae1096 100644
--- a/src/views/invest/lend/index.vue
+++ b/src/views/invest/lend/index.vue
@@ -42,6 +42,7 @@
               <dict-tag :options="lend_type" :value="scope.row.lendType" />
             </template>
           </el-table-column>
+          <el-table-column label="余额" align="center" prop="balance" />
           <el-table-column label="账户状态" align="center" prop="status">
             <template #default="scope">
               <dict-tag :options="account_status" :value="scope.row.status" />
diff --git a/src/views/invest/lendTransferRecord/index.vue b/src/views/invest/lendTransferRecord/index.vue
index 5457a9d..16d45c6 100644
--- a/src/views/invest/lendTransferRecord/index.vue
+++ b/src/views/invest/lendTransferRecord/index.vue
@@ -86,7 +86,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="交易类型" prop="dealType">
-          <el-select v-model="form.dealType" placeholder="请选择交易类型" @change="handleDealTypehange">
+          <el-select v-model="form.dealType" placeholder="请选择交易类型" @change="handleDealTypeChange">
             <el-option v-for="dict in record_lend_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
@@ -202,7 +202,7 @@ const handleOperate = (operate, row) => {
 
 const { queryParams, queryLendParams, queryDebitParams, form, rules } = toRefs(data)
 
-const handleDealTypehange = (type) => {
+const handleDealTypeChange = (type) => {
   //1表示借款，2表示还款
   if (type === '1') {
     commissionShow.value = false
diff --git a/src/views/invest/onlineLendAnalysis/index.vue b/src/views/invest/onlineLendAnalysis/index.vue
index 6d19e13..07266ec 100644
--- a/src/views/invest/onlineLendAnalysis/index.vue
+++ b/src/views/invest/onlineLendAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="贷款机构" prop="bankCardLendId">
-          <el-select v-model="queryParams.id" placeholder="请选择贷款机构" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择贷款机构" @change="handleCreditChange" clearable>
             <el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
           </el-select>
         </el-form-item>
@@ -53,65 +53,85 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 2.05rem)">
+    <div class="main-con">
       <div class="summary-con">
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><List /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">未结清贷款笔数</div>
-            <div>
-              <span class="num">{{ historyObj.unclearedDetailCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ historyObj.unclearedDetailCount }}</div>
           </div>
         </div>
 
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><WalletFilled /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">未结清贷款（本息）</div>
-            <div>
-              <span class="num">{{ historyObj.unClearedDetail }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">未结清（本息）</div>
+            <div class="num">{{ historyObj.unClearedDetail }}</div>
           </div>
         </div>
 
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Money /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">当期应还金额</div>
-            <div>
-              <span class="num">{{ historyObj.dueDetail }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">未结清本金</div>
+            <div class="num">{{ historyObj.unClearedPrincipal }}</div>
           </div>
         </div>
 
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">当期已还金额</div>
-            <div>
-              <span class="num">{{ historyObj.repaidDetail }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">未结清利息</div>
+            <div class="num">{{ historyObj.unClearedInterest }}</div>
           </div>
         </div>
 
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><DocumentCopy /></el-icon>
           </div>
           <div class="item-wrap">
-            <div class="title">当期待还金额</div>
-            <div>
-              <span class="num">{{ historyObj.leftDetail }}</span> <span class="unit"></span>
-            </div>
+            <div class="title">当期应还本息</div>
+            <div class="num">{{ historyObj.dueDetail }}</div>
+          </div>
+        </div>
+
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><CircleCheck /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">当期已还本息</div>
+            <div class="num">{{ historyObj.repaidDetail }}</div>
+          </div>
+        </div>
+
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Clock /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">当期待还本息</div>
+            <div class="num">{{ historyObj.leftDetail }}</div>
+          </div>
+        </div>
+
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Histogram /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">当期利息</div>
+            <div class="num">{{ historyObj.dueInterest }}</div>
           </div>
         </div>
       </div>
@@ -126,9 +146,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryDetailList" height="calc(100% - 170px)">
+        <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="historyObj.tableHistoryDetailList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -151,6 +171,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { List, WalletFilled, Money, Coin, DocumentCopy, CircleCheck, Clock, TrendCharts, Histogram } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getInstallmentHistoryAnalysis } from '@/api/invest/statisticAnalysis'
 import { listBankcardLend } from '@/api/invest/bankcardlend'
@@ -214,6 +235,11 @@ const data = reactive({
 })
 
 const { queryParams, queryCreditCardParams, rules } = toRefs(data)
+const handleCreditChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
+
 const today = new Date()
 const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
 // 当前月份的结束日期
@@ -514,3 +540,113 @@ const handleRadioChange = (type) => {
 getCreditCardList()
 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(25% - 0.105rem);
+    min-width: 2.6rem;
+    max-width: calc(25% - 0.105rem);
+    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 {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+
+// 响应式优化
+@media (max-width: 1600px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 calc(33.333% - 0.093rem);
+      max-width: calc(33.333% - 0.093rem);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 calc(50% - 0.07rem);
+      max-width: calc(50% - 0.07rem);
+      min-width: 2.4rem;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/onlineLendHistory/index.vue b/src/views/invest/onlineLendHistory/index.vue
index 1b197f9..6d13cfc 100644
--- a/src/views/invest/onlineLendHistory/index.vue
+++ b/src/views/invest/onlineLendHistory/index.vue
@@ -38,6 +38,7 @@
               <span>{{ parseTime(scope.row.installmentDate, '{y}-{m}-{d}') }}</span>
             </template>
           </el-table-column>
+          <el-table-column label="收款账户" align="center" width="150" prop="receivingAccountNameCode" />
           <el-table-column label="借款期数" align="center" width="80" prop="period" />
           <el-table-column label="已还期数" align="center" width="80" prop="repaidPeriod" />
           <el-table-column label="总利息" align="center" prop="totalInterest" />
@@ -101,6 +102,11 @@
         <el-form-item label="借款金额" prop="installmentAmount">
           <el-input v-model="form.installmentAmount" type="number" placeholder="请输入借款金额" />
         </el-form-item>
+        <el-form-item label="收款账户" prop="receivingAccountId">
+          <el-select v-model="form.receivingAccountId" placeholder="请选择收款账户" clearable>
+            <el-option v-for="debitCard in debitCardList" :key="debitCard.id" :label="debitCard.nameCode" :value="debitCard.id" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="总利息" prop="totalInterest">
           <el-input v-model="form.totalInterest" type="number" placeholder="请输入总利息" />
         </el-form-item>
@@ -139,7 +145,12 @@
 
     <!-- 添加或修改分期历史明细对话框 -->
     <el-dialog :title="titleDetail" v-model="openDetail" width="500px" append-to-body>
-      <el-form ref="installmentDetailRef" :model="formDetail" :rules="rulesDetail" label-width="120px">
+      <el-form ref="installmentDetailRef" :model="formDetail" :rules="rulesDetail" label-width="120px" :disabled="titleDetail === '查看贷款明细'">
+        <el-form-item label="还款账户" prop="repaymentAccountId">
+          <el-select v-model="formDetail.repaymentAccountId" placeholder="请选择还款账户" clearable>
+            <el-option v-for="debitCard in debitCardList" :key="debitCard.id" :label="debitCard.nameCode" :value="debitCard.id" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="还款日期" prop="repaymentDate">
           <el-date-picker clearable v-model="formDetail.repaymentDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择还款日期"> </el-date-picker>
         </el-form-item>
@@ -155,16 +166,16 @@
         <el-form-item label="利息" prop="interest">
           <el-input v-model="formDetail.interest" type="number" placeholder="请输入利息" />
         </el-form-item>
-        <el-form-item label="入账状态" prop="postingState">
-          <el-select v-model="formDetail.postingState" placeholder="请选择入账状态">
-            <el-option v-for="dict in posting_state" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+        <el-form-item label="还款状态" prop="postingState">
+          <el-select v-model="formDetail.postingState" placeholder="请选择还款状态">
+            <el-option v-for="dict in repayment_state" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="formDetail.remark" type="textarea" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
-      <template #footer>
+      <template v-if="titleDetail !== '查看贷款明细'" #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitFormDetail">确 定</el-button>
           <el-button @click="cancelDetail">取 消</el-button>
@@ -185,28 +196,41 @@
           </div>
           <div class="content-con">
             <el-table v-loading="loading" :data="installmentDetailList">
-              <el-table-column label="还款日期" align="center" prop="repaymentDate" width="180">
+              <el-table-column label="还款账户" align="center" prop="repaymentAccountName" />
+              <el-table-column label="还款日期" align="center" prop="repaymentDate" width="120">
                 <template #default="scope">
                   <span>{{ parseTime(scope.row.repaymentDate, '{y}-{m}-{d}') }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="还款期数" align="center" prop="periods" />
+              <el-table-column label="还款期数" align="center" prop="periods" width="100" />
               <el-table-column label="还款金额" align="center" prop="currentAmount" />
 
               <el-table-column label="应还本金" align="center" prop="principal" />
               <el-table-column label="利息" align="center" prop="interest" />
-              <el-table-column label="入账状态" align="center" prop="postingState">
+              <el-table-column label="还款状态" align="center" prop="postingState" width="100">
                 <template #default="scope">
-                  <dict-tag :options="posting_state" :value="scope.row.postingState" />
+                  <dict-tag :options="repayment_state" :value="scope.row.postingState" />
                 </template>
               </el-table-column>
 
               <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template v-slot="scope">
                   <div class="ctrl-btn d-flex">
-                    <el-tooltip v-for="item in operateDetailList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
-                      <el-button :icon="item.icon" v-hasPermi="item.hasPermi" circle @click="handleDetailOperate(item.id, scope.row)"></el-button>
-                    </el-tooltip>
+                    <template v-if="scope.row.postingState === '1'">
+                      <el-tooltip class="item" effect="dark" content="查看" placement="top">
+                        <el-button
+                          icon="View"
+                          v-hasPermi="['invest:installmentHistory:query']"
+                          circle
+                          @click="handleDetailOperate('view', scope.row)"
+                        ></el-button>
+                      </el-tooltip>
+                    </template>
+                    <template v-else>
+                      <el-tooltip v-for="item in operateDetailList" :key="item.id" class="item" effect="dark" :content="item.title" placement="top">
+                        <el-button :icon="item.icon" v-hasPermi="item.hasPermi" circle @click="handleDetailOperate(item.id, scope.row)"></el-button>
+                      </el-tooltip>
+                    </template>
                   </div>
                 </template>
               </el-table-column>
@@ -239,7 +263,7 @@ import { listBankcardLend } from '@/api/invest/bankcardlend'
 import { require } from '@/utils/require'
 import dayjs from 'dayjs'
 const { proxy } = getCurrentInstance()
-const { settle_state, bank_card_type, posting_state } = proxy.useDict('settle_state', 'bank_card_type', 'posting_state')
+const { settle_state, repayment_state } = proxy.useDict('settle_state', 'repayment_state')
 
 const installmentHistoryList = ref([])
 const installmentDetailList = ref([])
@@ -256,6 +280,7 @@ const title = ref('')
 const titleDetail = ref('')
 const currentInstallmentHistoryId = ref('')
 const creditCardList = ref([])
+const debitCardList = ref([])
 const operateList = ref([
   { id: 'detail', icon: 'Grid', title: '查看添加明细', hasPermi: ['invest:installmentHistory:query'] },
   { id: 'view', icon: 'View', title: '查看', hasPermi: ['invest:installmentHistory:query'] },
@@ -284,8 +309,16 @@ const data = reactive({
     lendType: '1',
     pageSize: 1000
   },
+  queryDebitCardParams: {
+    pageNum: 1,
+    type: '1',
+    status: '1',
+    // lendType: '1',
+    pageSize: 1000
+  },
   rules: {
     bankCardLendId: [{ required: true, message: '贷款机构不能为空', trigger: 'blur' }],
+    receivingAccountId: [{ required: true, message: '收款账户不能为空', trigger: 'blur' }],
     installmentAmount: [{ required: true, message: '借款金额不能为空', trigger: 'blur' }],
     installmentDate: [{ required: true, message: '借款日期不能为空', trigger: 'blur' }],
     period: [{ required: true, message: '借款期数不能为空', trigger: 'blur' }],
@@ -295,13 +328,14 @@ const data = reactive({
     balance: [{ required: true, message: '余额不能为空', trigger: 'blur' }]
   },
   rulesDetail: {
+    repaymentAccountId: [{ required: true, message: '还款账户不能为空', trigger: 'blur' }],
     installmentHistoryId: [{ required: true, message: '分期历史id不能为空', trigger: 'blur' }],
     bankCardLendId: [{ required: true, message: '信用卡贷款不能为空', trigger: 'blur' }],
     repaymentDate: [{ required: true, message: '还款日期不能为空', trigger: 'blur' }],
     principal: [{ required: true, message: '应还本金不能为空', trigger: 'blur' }],
     periods: [{ required: true, message: '还款期数不能为空', trigger: 'blur' }],
     interest: [{ required: true, message: '利息不能为空', trigger: 'blur' }],
-    postingState: [{ required: true, message: '入账状态不能为空', trigger: 'change' }]
+    postingState: [{ required: true, message: '还款状态不能为空', trigger: 'change' }]
   }
 })
 
@@ -326,6 +360,9 @@ const handleOperate = (operate, row) => {
 
 const handleDetailOperate = (operate, row) => {
   switch (operate) {
+    case 'view':
+      handleViewDetail(row)
+      break
     case 'edit':
       handleUpdateDetail(row)
       break
@@ -337,7 +374,7 @@ const handleDetailOperate = (operate, row) => {
   }
 }
 
-const { queryParams, queryCreditCardParams, form, rules, formDetail, rulesDetail } = toRefs(data)
+const { queryParams, queryCreditCardParams, form, rules, formDetail, rulesDetail, queryDebitCardParams } = toRefs(data)
 
 /** 查询贷款机构卡管理列表 */
 function getCreditCardList() {
@@ -346,6 +383,13 @@ function getCreditCardList() {
   })
 }
 
+/** 查询储蓄卡卡管理列表 */
+function getDebitCardList() {
+  listBankcardLend(queryDebitCardParams.value).then((response) => {
+    debitCardList.value = response.rows
+  })
+}
+
 /** 查询贷款账单列表 */
 function getList() {
   loading.value = true
@@ -380,12 +424,12 @@ function reset() {
     installmentAmount: null,
     installmentDate: null,
     period: null,
-    repaidPeriod: null,
+    repaidPeriod: 0,
     totalInterest: null,
     interestRate: null,
     dueDate: null,
     closeDate: null,
-    state: null,
+    state: '0',
     createBy: null,
     createTime: null,
     updateBy: null,
@@ -523,6 +567,16 @@ function handleUpdate(row) {
   })
 }
 
+/** 查看按钮操作 */
+function handleViewDetail(row) {
+  resetDetail()
+  getInstallmentDetail(row.id).then((response) => {
+    formDetail.value = response.data
+    openDetail.value = true
+    titleDetail.value = '查看贷款明细'
+  })
+}
+
 /** 修改按钮操作 */
 function handleUpdateDetail(row) {
   resetDetail()
@@ -558,27 +612,42 @@ function submitForm() {
 function submitFormDetail() {
   proxy.$refs.installmentDetailRef.validate((valid) => {
     if (valid) {
-      if (formDetail.value.id != null) {
-        updateInstallmentDetail(formDetail.value).then((response) => {
-          proxy.$modal.msgSuccess('修改明细成功')
-          openDetail.value = false
-          listInstallmentDetail({ installmentHistoryId: currentInstallmentHistoryId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
-            installmentDetailList.value = response.rows
+      // 判断入账状态是否为1，如果是则弹出确认框
+      if (formDetail.value.postingState === '1') {
+        proxy.$modal
+          .confirm('是否确认已还款？')
+          .then(function () {
+            executeSubmitDetail()
           })
-        })
+          .catch(() => {})
       } else {
-        addInstallmentDetail(formDetail.value).then((response) => {
-          proxy.$modal.msgSuccess('新增明细成功')
-          openDetail.value = false
-          listInstallmentDetail({ installmentHistoryId: currentInstallmentHistoryId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
-            installmentDetailList.value = response.rows
-          })
-        })
+        executeSubmitDetail()
       }
     }
   })
 }
 
+/** 执行提交明细操作 */
+function executeSubmitDetail() {
+  if (formDetail.value.id != null) {
+    updateInstallmentDetail(formDetail.value).then((response) => {
+      proxy.$modal.msgSuccess('修改明细成功')
+      openDetail.value = false
+      listInstallmentDetail({ installmentHistoryId: currentInstallmentHistoryId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+        installmentDetailList.value = response.rows
+      })
+    })
+  } else {
+    addInstallmentDetail(formDetail.value).then((response) => {
+      proxy.$modal.msgSuccess('新增明细成功')
+      openDetail.value = false
+      listInstallmentDetail({ installmentHistoryId: currentInstallmentHistoryId.value, pageNum: 1, pageSize: 1000 }).then((response) => {
+        installmentDetailList.value = response.rows
+      })
+    })
+  }
+}
+
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _ids = row.id || ids.value
@@ -622,5 +691,6 @@ function handleExport() {
 }
 
 getCreditCardList()
+getDebitCardList()
 getList()
 </script>
diff --git a/src/views/invest/onlineLendSettledAnalysis/index.vue b/src/views/invest/onlineLendSettledAnalysis/index.vue
index f2ba642..38aa526 100644
--- a/src/views/invest/onlineLendSettledAnalysis/index.vue
+++ b/src/views/invest/onlineLendSettledAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="贷款机构" prop="bankCardLendId">
-          <el-select v-model="queryParams.id" placeholder="请选择贷款机构" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择贷款机构" @change="handleCreditChange" clearable>
             <el-option v-for="creditCard in creditCardList" :key="creditCard.id" :label="creditCard.nameCode" :value="creditCard.id" />
           </el-select>
         </el-form-item>
@@ -53,51 +53,42 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 2.05rem)">
+    <div class="main-con">
       <div class="summary-con">
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><List /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">已结清贷款笔数</div>
-            <div>
-              <span class="num">{{ historyObj.clearedCount }}</span> <span class="unit">笔</span>
-            </div>
+            <div class="num">{{ historyObj.clearedCount }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">已结清贷款（本息）</div>
-            <div>
-              <span class="num">{{ historyObj.clearedTotal }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ historyObj.clearedTotal }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">已结清贷款（本金）</div>
-            <div>
-              <span class="num">{{ historyObj.clearedPrincipal }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ historyObj.clearedPrincipal }}</div>
           </div>
         </div>
-
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">已结清总利息</div>
-            <div>
-              <span class="num">{{ historyObj.totalInterest }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ historyObj.totalInterest }}</div>
           </div>
         </div>
       </div>
@@ -112,9 +103,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="historyObj.tableHistoryList" height="calc(100% - 170px)">
+        <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="historyObj.tableHistoryList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -137,6 +128,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { List, Money, Coin, TrendCharts, Histogram } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getInstallmentSettledAnalysis } from '@/api/invest/statisticAnalysis'
 import { listBankcardLend } from '@/api/invest/bankcardlend'
@@ -198,6 +190,12 @@ const data = reactive({
 })
 
 const { queryParams, queryCreditCardParams, rules } = toRefs(data)
+
+const handleCreditChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
+
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
 const start = dayjs(end).add(-239, 'months')
@@ -486,3 +484,111 @@ const handleRadioChange = (type) => {
 getCreditCardList()
 getList()
 </script>
+
+<style lang="scss" scoped>
+.main-con {
+  height: calc(100vh - 240px);
+  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(25% - 0.105rem);
+    min-width: 2.6rem;
+    max-width: calc(25% - 0.105rem);
+    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 {
+  margin-top: 0 !important;
+  padding-top: 0.08rem !important;
+  flex-shrink: 0;
+}
+
+.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;
+  }
+}
+
+@media (max-width: 1600px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 calc(33.333% - 0.093rem);
+      max-width: calc(33.333% - 0.093rem);
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 calc(50% - 0.07rem);
+      max-width: calc(50% - 0.07rem);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con {
+    .center-con {
+      flex: 1 1 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/openCardStatics/index.vue b/src/views/invest/openCardStatics/index.vue
new file mode 100644
index 0000000..2b92a92
--- /dev/null
+++ b/src/views/invest/openCardStatics/index.vue
@@ -0,0 +1,590 @@
+<template>
+  <div class="app-container">
+    <div class="search-con">
+      <div class="title">查询条件</div>
+      <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
+        <el-form-item label="" prop="type">
+          <el-select v-model="queryParams.type" @change="handleTimeChange" placeholder="请选择日期">
+            <el-option v-for="item in dates" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="time" v-if="queryParams.type === 1">
+          <el-date-picker
+            v-model="queryParams.time"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD"
+            :disabled-date="disabledDateFun"
+            @calendar-change="calendarChange"
+          />
+        </el-form-item>
+        <el-form-item label="" prop="time" v-if="queryParams.type === 2">
+          <el-date-picker
+            v-model="queryParams.time"
+            type="monthrange"
+            range-separator="~"
+            format="YYYY-MM"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :disabled-date="disabledDateFun"
+            @calendar-change="calendarChange"
+          />
+        </el-form-item>
+        <el-form-item label="" prop="time" v-if="queryParams.type === 3">
+          <yearPicker
+            v-model="queryParams.time"
+            ref="statisticPicker"
+            labelText="选择年份"
+            :initYear="dateValue"
+            :showYear="showYearValue"
+            :maxLength="10"
+            sp="~"
+            @updateTimeRange="updateStatisticYear"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="search-btn-con">
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
+      </div>
+    </div>
+    <div class="main-con">
+      <div class="summary-con">
+        <div v-for="(item, index) in debitCard.accountsList" :key="index" class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" :color="getIconColor(index)"><CreditCard /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">{{ item.name }}</div>
+            <div class="num">{{ item.count }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="title-con">
+        <div class="title">储蓄卡开卡统计</div>
+        <div class="operate-btn-con">
+          <el-radio-group v-model="radioVal" @change="handleRadioChange">
+            <el-radio-button label="柱状图" />
+            <el-radio-button label="折线图" />
+            <el-radio-button label="表格" />
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="content-con">
+        <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="debitCard.tableDebitList">
+          <el-table-column label="序号" width="50" type="index" align="center">
+            <template #default="scope">
+              <span>{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="开卡日期" align="center" prop="time" />
+          <el-table-column label="开卡张数" align="center" prop="value" />
+          <el-table-column prop="detail" label="开卡明细" width="800">
+            <template #default="scope">
+              <span v-html="formatMultiLineData(scope.row.detail)"></span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="CreditAnalysis">
+import dayjs from 'dayjs'
+import * as echarts from 'echarts'
+import { ElMessage } from 'element-plus'
+import { CreditCard } from '@element-plus/icons-vue'
+import yearPicker from '@/components/YearPicker/index.vue'
+import { getOpenCardList } from '@/api/invest/statisticAnalysis'
+const { proxy } = getCurrentInstance()
+
+const dateValue = ref({ startYear: 1970, endYear: new Date().getFullYear() })
+const showYearValue = ref({ startShowYear: '', endShowYear: '' })
+const updateStatisticYear = (startYear, endYear) => {
+  queryParams.value.time = [new Date(startYear, 0, 1), new Date(endYear, 0, 1)]
+}
+
+const dates = [
+  { value: 2, label: '月' },
+  { value: 3, label: '年' }
+]
+
+const loading = ref(true)
+const total = ref(0)
+const radioVal = ref('柱状图')
+const futureStocksList = ref([])
+const dateValidate = (rules, value, callback) => {
+  const dateType = rules.dateType || 'days'
+  const num = rules.num || 31
+  const dateString = rules.dateString || '天'
+  const message = rules.message || `时间跨度不能超过${num}${dateString}`
+
+  if (value && value.length === 2) {
+    const start = value[0]
+    const end = value[1]
+    if (dayjs(end).diff(dayjs(start), dateType) > num) {
+      queryParams.value.time = [start, dayjs(start).add(119, 'months')]
+      ElMessage.warning(message)
+    }
+  }
+}
+
+const data = reactive({
+  queryParams: {
+    type: 2,
+    time: null,
+    dataType: '1',
+    id: null
+  },
+  queryFutureStocksListParams: {
+    pageNum: 1,
+    type: '1',
+    pageSize: 1000
+  },
+  rules: {
+    time: [{ validator: dateValidate, dateType: 'months', num: 119, dateRange: '月', message: '时间跨度不能大于120个月，默认选择开始日期的120个月' }]
+  }
+})
+
+const { queryParams, queryFutureStocksListParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
+
+function formatMultiLineData(data) {
+  if (data != null) {
+    return data.replace(/<br\/>/g, '<br/>')
+  }
+}
+const handleTimeChange = (type) => {
+  queryParams.value.time = null
+  getList()
+}
+
+const disabledDateFun = (time) => {
+  const arr = [0, 30, 365, 365 * 5]
+  const days = arr[queryParams.value.type]
+
+  if (firstChooseDate.value) {
+    const one = days * 24 * 3600 * 1000
+    const minTime = firstChooseDate.value - one
+    const maxTime = firstChooseDate.value + one
+    const startTime = minTime
+    const endTime = maxTime > Date.now() - 8.64e7 ? Date.now() - 8.64e7 : maxTime
+    return time.getTime() > endTime || time.getTime() < startTime
+  } else {
+    return time.getTime() > Date.now() - 8.64e7
+  }
+}
+
+const firstChooseDate = ref('')
+const calendarChange = (val) => {
+  firstChooseDate.value = val[0].getTime()
+  if (val[1]) firstChooseDate.value = ''
+}
+
+const debitCard = ref({
+  maxRevenue: '',
+  maxLoss: '',
+  averageIncome: '',
+  accumulateIncome: '',
+  futuresStocksList: []
+})
+
+const chartData = ref({
+  name: [],
+  value1: []
+})
+
+function getList() {
+  loading.value = true
+  chartData.value = { name: [], value1: [] }
+  const { type, time, dataType, id } = queryParams.value
+  let formatValue = 'YYYY-MM-DD'
+  if (type === 1) {
+    formatValue = 'YYYY-MM-DD'
+  } else if (type === 2) {
+    formatValue = 'YYYY-MM'
+  } else {
+    formatValue = 'YYYY'
+  }
+  const params = {
+    type,
+    startTime: time && time.length > 0 ? dayjs(time[0]).format(formatValue) : '',
+    endTime: time && time.length > 0 ? dayjs(time[1]).format(formatValue) : '',
+    id,
+    dataType
+  }
+  getOpenCardList(params).then((response) => {
+    loading.value = false
+    debitCard.value = { ...response.data }
+    debitCard.value.count = response.data.debitList.length
+    debitCard.value.debitList.map((item) => {
+      return {
+        name: item.time,
+        value: item.value
+      }
+    })
+    response.data.debitList.map((item) => {
+      chartData.value.name.push(item.time)
+      chartData.value.value1.push(item.value)
+    })
+    handleRadioChange(currentType.value)
+  })
+}
+
+function handleQuery() {
+  getList()
+}
+
+function resetQuery() {
+  proxy.resetForm('queryRef')
+  queryParams.value.id = null
+  queryParams.value.dataType = '1'
+  total.value = 0
+  handleQuery()
+}
+
+const drawBar = (data) => {
+  if (document.getElementById('chartBar') === null) {
+    return
+  }
+  echarts.dispose(document.getElementById('chartBar'))
+  const myChart = echarts.init(document.getElementById('chartBar'))
+
+  const option = {
+    legend: {
+      // 图示例样式
+      show: true,
+      top: 50,
+      right: 50,
+      itemGap: 20
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + '<br>' + '开卡：' + params[0].value + ' 张'
+      }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '15%',
+      top: '10%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: data.name,
+        axisTick: {
+          alignWithLabel: true // 刻度线是否与标签对齐，默认false
+        },
+        axisLabel: {
+          show: true,
+          interval: 0,
+          fontSize: 12,
+          color: '#333'
+        },
+        // 设置 X 轴线条粗细
+        axisLine: {
+          lineStyle: {
+            width: 1, // 根据需求调整数值大小，单位是像素
+            color: '#999'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisTick: {
+          show: false // 默认为true，如果要隐藏，则改为 false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            color: '#999'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        data: data.value1,
+        type: 'bar',
+        barMaxWidth: 50, // 根据需求调整数值大小，单位是像素
+        itemStyle: {
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 2) {
+              return 'green'
+            } else if (params.data > 2) {
+              return 'red'
+            }
+          }
+        }
+      }
+    ],
+    // 添加点击事件的处理函数
+    emphasis: {
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
+    }
+  }
+
+  myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
+}
+
+const drawLine = (data) => {
+  if (document.getElementById('chartLine') === null) {
+    return
+  }
+  echarts.dispose(document.getElementById('chartLine'))
+  const myChart = echarts.init(document.getElementById('chartLine'))
+
+  const option = {
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '15%',
+      top: '10%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + '<br>' + '开卡' + params[0].value + '张'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: data.name,
+      axisTick: {
+        alignWithLabel: true
+      },
+      axisLabel: {
+        show: true,
+        interval: 0,
+        fontSize: 12,
+        color: '#333'
+      },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: '#999'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          color: '#999'
+        }
+      }
+    },
+    series: [
+      {
+        data: data.value1,
+        type: 'line',
+        lineStyle: {
+          color: '#4181c9'
+        },
+        itemStyle: {
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 2) {
+              return 'green'
+            } else if (params.data > 2) {
+              return 'red'
+            }
+          }
+        },
+        smooth: true,
+        symbol: 'emptyCircle',
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(65,129,201, 0.70)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(65,129,201, 0.10)'
+              }
+            ],
+            false
+          ),
+          shadowColor: 'rgba(65,129,201, 0.10)',
+          shadowBlur: 10
+        }
+      }
+    ]
+  }
+
+  myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
+}
+
+const currentType = ref('柱状图')
+const handleRadioChange = (type) => {
+  currentType.value = type
+  nextTick(() => {
+    switch (type) {
+      case '柱状图':
+        drawBar(chartData.value)
+        break
+      case '折线图':
+        drawLine(chartData.value)
+        break
+      default:
+        break
+    }
+  })
+}
+
+const getIconColor = (index) => {
+  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#00D0FF', '#FF6B9D']
+  return colors[index % colors.length]
+}
+
+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(25% - 0.105rem);
+    min-width: 2.6rem;
+    max-width: calc(25% - 0.105rem);
+    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;
+  }
+}
+
+// Responsive layout
+@media (max-width: 1600px) {
+  .summary-con .center-con {
+    flex: 1 1 calc(33.333% - 0.093rem);
+    max-width: calc(33.333% - 0.093rem);
+  }
+}
+
+@media (max-width: 1200px) {
+  .summary-con .center-con {
+    flex: 1 1 calc(50% - 0.07rem);
+    max-width: calc(50% - 0.07rem);
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-con .center-con {
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/src/views/invest/posAnalysis/index.vue b/src/views/invest/posAnalysis/index.vue
index 522f6ad..3bbd8ae 100644
--- a/src/views/invest/posAnalysis/index.vue
+++ b/src/views/invest/posAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="POS机" style="width: 500px" prop="id">
-          <el-select v-model="queryParams.id" placeholder="请选择POS机" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择POS机" @change="handleChange" clearable>
             <el-option v-for="pos in posMachineList" :key="pos.id" :label="pos.nameMerchantName" :value="pos.id" />
           </el-select>
         </el-form-item>
@@ -57,47 +57,39 @@
     <div class="main-con" style="height: calc(100% - 1.45rem)">
       <div class="summary-con">
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">刷卡金额</div>
-            <div>
-              <span class="num">{{ pos.amount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ pos.amount }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Coin /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">刷卡手续费</div>
-            <div>
-              <span class="num">{{ pos.commission }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ pos.commission }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <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">{{ pos.actualAmount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ pos.actualAmount }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Histogram /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">刷卡次数</div>
-            <div>
-              <span class="num">{{ pos.count }}</span> <span class="unit">次</span>
-            </div>
+            <div class="num">{{ pos.count }}</div>
           </div>
         </div>
       </div>
@@ -137,6 +129,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { Money, Coin, CreditCard, Histogram } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getPosAnalysis } from '@/api/invest/statisticAnalysis'
 import { listPosmachine } from '@/api/invest/posmachine'
@@ -193,6 +186,10 @@ const data = reactive({
 })
 
 const { queryParams, queryPosMachineParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
 const start = dayjs(end).add(-1, 'months')
@@ -397,6 +394,9 @@ const drawBar = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -486,22 +486,55 @@ 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
+    }
+  })
 }
 getPosMachineList()
 getList()
 </script>
+
+<style lang="scss" scoped>
+.summary-con {
+  .right-con {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+
+  .item-wrap {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+
+  .icon-box {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/posStatics/index.vue b/src/views/invest/posStatics/index.vue
new file mode 100644
index 0000000..8c9531c
--- /dev/null
+++ b/src/views/invest/posStatics/index.vue
@@ -0,0 +1,513 @@
+<template>
+  <div class="app-container">
+    <div class="main-con" style="height: calc(100% - 0rem)">
+      <div class="summary-con" style="height: 115px">
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Calendar /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">今日交易</div>
+            <div class="num">{{ debitCardAnalysis.todayCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Money /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">今日刷卡</div>
+            <div class="num">{{ debitCardAnalysis.todayAmount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Calendar /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近7日交易</div>
+            <div class="num">{{ debitCardAnalysis.sevenDayCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><CreditCard /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近7日刷卡</div>
+            <div class="num">{{ debitCardAnalysis.sevenDayAmount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Calendar /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近1月交易次数</div>
+            <div class="num">{{ debitCardAnalysis.oneMonthCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#00D0FF"><Coin /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近1月刷卡</div>
+            <div class="num">{{ debitCardAnalysis.oneMonthAmount }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="summary-con" style="height: 110px">
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><DataLine /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近6月交易</div>
+            <div class="num">{{ debitCardAnalysis.sixMonthCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><WalletFilled /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近6月刷卡</div>
+            <div class="num">{{ debitCardAnalysis.sixMonthAmount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近1年交易</div>
+            <div class="num">{{ debitCardAnalysis.oneYearCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Money /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">近1年刷卡</div>
+            <div class="num">{{ debitCardAnalysis.oneYearAmount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><TrendCharts /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">总交易次数</div>
+            <div class="num">{{ debitCardAnalysis.totalCount }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#00D0FF"><WalletFilled /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">总刷卡金额</div>
+            <div class="num">{{ debitCardAnalysis.totalAmount }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="title-con" style="margin-top: 18px">
+        <div class="title">POS机统计</div>
+        <div class="operate-btn-con">
+          <el-radio-group v-model="radioVal" @change="handleRadioChange">
+            <el-radio-button label="POS机统计表格" />
+            <el-radio-button label="近6月刷卡金额柱状图" />
+            <el-radio-button label="近6月刷卡金额折线图" />
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="content-con">
+        <div v-show="radioVal === '近6月刷卡金额柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
+        <div v-show="radioVal === '近6月刷卡金额折线图'" class="chart" id="chartLine" style="height: calc(100% - 225px); margin-top: -10px"></div>
+        <el-table v-show="radioVal === 'POS机统计表格'" v-loading="loading" :data="debitCardAnalysis.posTableList" height="calc(100% - 245px)">
+          <el-table-column label="序号" width="50" type="index" align="center">
+            <template #default="scope">
+              <span>{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="POS机" align="center" prop="nameCode" />
+          <el-table-column label="今日交易次数" align="center" prop="todayCount" />
+          <el-table-column label="今日刷卡金额" align="center" prop="todayAmount" />
+          <!-- <el-table-column label="近7日交易次数" align="center" prop="sevenDayCount" />
+          <el-table-column label="近7日刷卡金额" align="center" prop="sevenDayAmount" /> -->
+          <el-table-column label="近1月交易次数" align="center" prop="oneMonthCount" />
+          <el-table-column label="近1月刷卡金额" align="center" prop="oneMonthAmount" />
+          <!-- <el-table-column label="近3月交易次数" align="center" prop="threeMonthCount" />
+          <el-table-column label="近3月刷卡金额" align="center" prop="threeMonthAmount" /> -->
+          <el-table-column label="近6月交易次数" align="center" prop="sixMonthCount" />
+          <el-table-column label="近6月刷卡金额" align="center" prop="sixMonthAmount" />
+          <el-table-column label="近1年交易次数" align="center" prop="oneYearCount" />
+          <el-table-column label="近1年刷卡金额" align="center" prop="oneYearAmount" />
+          <el-table-column label="总交易次数" align="center" prop="totalCount" />
+          <el-table-column label="总刷卡金额" align="center" prop="totalAmount" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="DebitCardAnalysis">
+import dayjs from 'dayjs'
+import * as echarts from 'echarts'
+import { ElMessage } from 'element-plus'
+import { Calendar, Money, CreditCard, TrendCharts, DataLine, WalletFilled, Coin } from '@element-plus/icons-vue'
+import { getPosStatics } from '@/api/invest/statisticAnalysis'
+const { proxy } = getCurrentInstance()
+const { account_type } = proxy.useDict('account_type')
+
+const loading = ref(true)
+const total = ref(0)
+const radioVal = ref('POS机统计表格')
+const dateValidate = (rules, value, callback) => {
+  const dateType = rules.dateType || 'days'
+  const num = rules.num || 31
+  const dateString = rules.dateString || '天'
+  const message = rules.message || `时间跨度不能超过${num}${dateString}`
+
+  if (value && value.length === 2) {
+    const start = value[0]
+    const end = value[1]
+    if (dayjs(end).diff(dayjs(start), dateType) > num) {
+      queryParams.value.time = [start, dayjs(start).add(59, 'months')]
+      ElMessage.warning(message)
+    }
+  }
+}
+
+const data = reactive({
+  queryParams: {
+    type: 1,
+    time: null,
+    dataType: null,
+    id: null
+  },
+  rules: {
+    time: [{ validator: dateValidate, dateType: 'months', num: 59, dateRange: '月', message: '时间跨度不能大于60个月，默认选择开始日期的24个月' }]
+  }
+})
+
+const { queryParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.dataType = id
+  getList()
+}
+const today = new Date()
+const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
+const start = end
+queryParams.value.time = [start, end]
+
+const firstChooseDate = ref('')
+const calendarChange = (val) => {
+  firstChooseDate.value = val[0].getTime()
+  if (val[1]) firstChooseDate.value = ''
+}
+
+const debitCardAnalysis = ref({
+  debetBalance: '',
+  creditAvailableLimit: '',
+  creditBalance: '',
+  investBalance: '',
+  debitBalance: '',
+  posList: []
+})
+const chartData = ref({
+  name: [],
+  value1: []
+})
+
+function getList() {
+  loading.value = true
+  chartData.value = { name: [], value1: [] }
+  const { type, time, id, dataType } = queryParams.value
+  let formatValue = 'YYYY-MM-DD'
+  if (type === 1) {
+    formatValue = 'YYYY-MM-DD'
+  } else if (type === 2) {
+    formatValue = 'YYYY-MM'
+  } else {
+    formatValue = 'YYYY'
+  }
+  const params = {
+    type,
+    startTime: time && time.length > 0 ? dayjs(time[0]).format(formatValue) : '',
+    endTime: time && time.length > 0 ? dayjs(time[1]).format(formatValue) : '',
+    id,
+    dataType
+  }
+  getPosStatics(params).then((response) => {
+    loading.value = false
+    debitCardAnalysis.value = { ...response.data }
+    debitCardAnalysis.value.posList.map((item) => {
+      return {
+        name: item.pos,
+        value: item.amount
+      }
+    })
+    response.data.posList.map((item) => {
+      chartData.value.name.push(item.pos)
+      chartData.value.value1.push(item.amount)
+    })
+    handleRadioChange(currentType.value)
+  })
+}
+
+function handleQuery() {
+  getList()
+}
+
+function resetQuery() {
+  proxy.resetForm('queryRef')
+  queryParams.value.id = null
+  queryParams.value.dataType = null
+  total.value = 0
+  handleQuery()
+}
+
+const drawBar = (data) => {
+  if (document.getElementById('chartBar') === null) {
+    return
+  }
+  echarts.dispose(document.getElementById('chartBar'))
+  const myChart = echarts.init(document.getElementById('chartBar'))
+
+  const option = {
+    legend: {
+      // 图示例样式
+      show: true,
+      top: 50,
+      right: 50,
+      itemGap: 20
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + '<br>' + '刷卡金额：' + params[0].value + '元'
+      }
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: data.name,
+        axisTick: {
+          alignWithLabel: true // 刻度线是否与标签对齐，默认false
+        },
+        // 设置 X 轴线条粗细
+        axisLine: {
+          lineStyle: {
+            width: 1, // 根据需求调整数值大小，单位是像素
+            color: '#999'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisTick: {
+          show: false // 默认为true，如果要隐藏，则改为 false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            color: '#999'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        data: data.value1,
+        type: 'bar',
+        barWidth: 20, // 根据需求调整数值大小，单位是像素
+        itemStyle: {
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
+        }
+      }
+    ],
+    // 添加点击事件的处理函数
+    emphasis: {
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
+    }
+  }
+
+  myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
+}
+
+const drawLine = (data) => {
+  if (document.getElementById('chartLine') === null) {
+    return
+  }
+  echarts.dispose(document.getElementById('chartLine'))
+  const myChart = echarts.init(document.getElementById('chartLine'))
+
+  const option = {
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: function (params) {
+        return params[0].name + '<br>' + '刷卡金额：' + params[0].value + '元'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: data.name,
+      axisTick: {
+        alignWithLabel: true
+      },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: '#999'
+        }
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          color: '#999'
+        }
+      }
+    },
+    series: [
+      {
+        data: data.value1,
+        type: 'line',
+        lineStyle: {
+          color: '#4181c9'
+        },
+        itemStyle: {
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
+        },
+        smooth: true,
+        symbol: 'emptyCircle',
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: 'rgba(65,129,201, 0.70)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(65,129,201, 0.10)'
+              }
+            ],
+            false
+          ),
+          shadowColor: 'rgba(65,129,201, 0.10)',
+          shadowBlur: 10
+        }
+      }
+    ]
+  }
+
+  myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
+}
+
+const currentType = ref('近1年刷卡金额柱状图')
+const handleRadioChange = (type) => {
+  currentType.value = type
+  nextTick(() => {
+    switch (type) {
+      case '近6月刷卡金额柱状图':
+        drawBar(chartData.value)
+        break
+      case '近6月刷卡金额折线图':
+        drawLine(chartData.value)
+        break
+      default:
+        break
+    }
+  })
+}
+getList()
+</script>
+
+<style lang="scss" scoped>
+.summary-con {
+  .center-con {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+
+  .item-wrap {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+
+  .icon-box {
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/invest/posmachine/index.vue b/src/views/invest/posmachine/index.vue
index 8711f6c..b405908 100644
--- a/src/views/invest/posmachine/index.vue
+++ b/src/views/invest/posmachine/index.vue
@@ -51,14 +51,16 @@
             </template>
           </el-table-column>
           <el-table-column label="商户名称" align="center" prop="merchantName" />
-          <el-table-column label="刷卡费率" align="center" width="150" prop="rateName" />
+          <el-table-column label="刷卡费率" align="center" width="100" prop="rateName" />
           <el-table-column label="费率+" align="center" width="100" prop="ratePlus" />
           <el-table-column label="结算卡" align="center" prop="bankNameCode" />
-          <!-- <el-table-column label="商户类型" align="center" width="150" prop="merchantType">
+          <el-table-column label="商户类型" align="center" width="150" prop="merchantType">
             <template #default="scope">
               <dict-tag :options="merchant_type" :value="scope.row.merchantType" />
             </template>
           </el-table-column>
+          <el-table-column label="供货商" align="center" width="100" prop="manufacture" />
+          <!--
           <el-table-column label="商户码" align="center" prop="merchantCode" /> -->
           <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
             <template v-slot="scope">
@@ -120,8 +122,8 @@
             <el-option v-for="dict in rounding_mode" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="厂商" prop="manufacture">
-          <el-input v-model="form.manufacture" placeholder="请输入厂商" />
+        <el-form-item label="供货商" prop="manufacture">
+          <el-input v-model="form.manufacture" placeholder="请输入供货商" />
         </el-form-item>
         <el-form-item label="支付公司" prop="payCompany">
           <el-input v-model="form.payCompany" placeholder="请输入支付公司" />
diff --git a/src/views/invest/stocks/index.vue b/src/views/invest/stocks/index.vue
index e5dab8f..a1ee0ad 100644
--- a/src/views/invest/stocks/index.vue
+++ b/src/views/invest/stocks/index.vue
@@ -37,6 +37,7 @@
               <dict-tag :options="account_status" :value="scope.row.status" />
             </template>
           </el-table-column>
+          <el-table-column label="余额" align="center" prop="balance" />
           <el-table-column label="佣金费率" align="center" prop="commission" width="120" />
           <el-table-column label="关联储蓄卡" align="center" prop="bankNameCode" />
           <el-table-column label="开户日期" align="center" prop="activationDate" width="120">
diff --git a/src/views/invest/stocksAnalysis/index.vue b/src/views/invest/stocksAnalysis/index.vue
index 3410486..3703c6c 100644
--- a/src/views/invest/stocksAnalysis/index.vue
+++ b/src/views/invest/stocksAnalysis/index.vue
@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="股票账户" prop="futureStocksId">
-          <el-select v-model="queryParams.id" placeholder="请选择股票账户" clearable>
+          <el-select v-model="queryParams.id" placeholder="请选择股票账户" @change="handleChange" clearable>
             <el-option v-for="futureStocks in futureStocksList" :key="futureStocks.id" :label="futureStocks.nameCode" :value="futureStocks.id" />
           </el-select>
         </el-form-item>
@@ -55,55 +55,56 @@
         <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
       </div>
     </div>
-    <div class="main-con" style="height: calc(100% - 2.05rem)">
+    <div class="main-con">
       <div class="summary-con">
-        <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+        <div class="center-con">
+          <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">{{ futuresStock.accumulateIncome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.accumulateIncome }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><List /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">交易次数</div>
+            <div class="num">{{ futuresStock.count }}</div>
+          </div>
+        </div>
+        <div class="center-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><DataLine /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">平均收益</div>
-            <div>
-              <span class="num">{{ futuresStock.averageIncome }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.averageIncome }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/chart-pie.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><PieChart /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">最大收益</div>
-            <div>
-              <span class="num">{{ futuresStock.maxRevenue }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.maxRevenue }}</div>
           </div>
         </div>
         <div class="center-con">
-          <div class="img">
-            <img src="@/assets/images/accumulate.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#909399"><Odometer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">最大亏损</div>
-            <div>
-              <span class="num">{{ futuresStock.maxLoss }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ futuresStock.maxLoss }}</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="柱状图" />
@@ -113,9 +114,9 @@
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="futuresStock.tableFuturesStocksList" height="calc(100% - 170px)">
+        <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="futuresStock.tableFuturesStocksList">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -138,6 +139,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { TrendCharts, List, DataLine, PieChart, Odometer } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getFuturesStocksAnalysis } from '@/api/invest/statisticAnalysis'
 import { listFutureStocks } from '@/api/invest/futureStocks'
@@ -198,6 +200,10 @@ const data = reactive({
 })
 
 const { queryParams, queryFutureStocksListParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.id = id
+  getList()
+}
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)
 const start = dayjs(end).add(-59, 'months')
@@ -287,6 +293,7 @@ function getList() {
   getFuturesStocksAnalysis(params).then((response) => {
     loading.value = false
     futuresStock.value = { ...response.data }
+    futuresStock.value.count = response.data.futuresStocksList.length
     futuresStock.value.futuresStocksList.map((item) => {
       return {
         name: item.time,
@@ -380,17 +387,25 @@ const drawBar = (data) => {
         type: 'bar',
         barWidth: 20, // 根据需求调整数值大小，单位是像素
         itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         }
       }
     ],
     // 添加点击事件的处理函数
     emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
     }
   }
 
@@ -454,7 +469,15 @@ const drawLine = (data) => {
           color: '#4181c9'
         },
         itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         },
         smooth: true,
         symbol: 'emptyCircle',
@@ -503,3 +526,106 @@ const handleRadioChange = (type) => {
 getFutureStocksList()
 getList()
 </script>
+
+<style lang="scss" scoped>
+.main-con {
+  height: calc(100vh - 240px);
+  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>
diff --git a/src/views/invest/transferRecordAnalysis/index.vue b/src/views/invest/transferRecordAnalysis/index.vue
index cc73651..c3b15bc 100644
--- a/src/views/invest/transferRecordAnalysis/index.vue
+++ b/src/views/invest/transferRecordAnalysis/index.vue
@@ -57,47 +57,39 @@
     <div class="main-con" style="height: calc(100% - 1.45rem)">
       <div class="summary-con">
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">转账金额</div>
-            <div>
-              <span class="num">{{ pos.amount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ pos.amount }}</div>
           </div>
         </div>
         <div class="right-con">
-          <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">{{ pos.commission }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ pos.commission }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">入账金额</div>
-            <div>
-              <span class="num">{{ pos.actualAmount }}</span> <span class="unit"></span>
-            </div>
+            <div class="num">{{ pos.actualAmount }}</div>
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><CreditCard /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">刷卡次数</div>
-            <div>
-              <span class="num">{{ pos.count }}</span> <span class="unit">次</span>
-            </div>
+            <div class="num">{{ pos.count }}</div>
           </div>
         </div>
       </div>
@@ -132,6 +124,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { Money, TrendCharts, CreditCard, Histogram } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getPosAnalysis } from '@/api/invest/statisticAnalysis'
 import { listPosmachine } from '@/api/invest/posmachine'
@@ -386,6 +379,9 @@ const drawBar = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -475,21 +471,26 @@ 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
+    }
+  })
 }
 getPosMachineList()
 getList()
diff --git a/vite.config.js b/vite.config.js
index ba5f178..d7297d9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -42,18 +42,18 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          // target: 'http://154.8.147.51:8080',
-          target: 'http://127.0.0.1:8080',
+          target: 'http://117.72.197.29:8080',
+          // target: 'http://127.0.0.1:8080',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         },
         '/file-upload': {
-          target: 'http://101.126.95.100:9000',
+          target: 'http://117.72.197.29:9000',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/file-upload/, '')
         },
         '/fileUrl': {
-          target: 'http://101.126.95.100:9000', // 本地
+          target: 'http://117.72.197.29:9000', // 本地
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/fileUrl/, '')
         }