qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 统计分析页面，统一ui优化完善！

Browse Source
This commit is contained in:
tianyongbao
2025-11-13 00:01:38 +08:00
parent 7bc08b86e9
commit 6231c2494f
21 changed files with 1917 additions and 893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/pages/statistic/accounts/accountsBalance/index.vue
View File

@@ -7,68 +7,81 @@
</u-input>
</view>
</u-sticky>
<div class="app-container" style="overflow: auto">
<div class="app-container">
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">储蓄账户余额</div>
<div class="num">{{ accountsBalance.debitAllBalance }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">储蓄卡余额</div>
<div class="num">{{ accountsBalance.debitBalance }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">I类储蓄卡余额</div>
<div class="num">{{ accountsBalance.idebitBalance }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">II类储蓄卡余额</div>
<div class="num">{{ accountsBalance.iidebitBalance }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
<div class="item" >
<img src="@/static/images/one.png" alt="" />
<div class="item">
<view class="item-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">信用卡可用额度</div>
<div class="num">{{ accountsBalance.creditAvailableLimit }}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<div class="info-sum">
<div class="title">信用卡已用额度</div>
<div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div>
</div>
</div>
<view class="item-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<uni-icons type="wallet-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">信用卡已用额度</div>
<div class="num">{{ accountsBalance.creditBalance }}<span>元</span></div>
</div>
</div>
</div>
<div class="header-con" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<div class="info-sum">
<div class="title">借贷账户余额</div>
<div class="num">{{ accountsBalance.lendAccountBalance }}<span>元</span></div>
</div>
</div>
<view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">借贷账户余额</div>
<div class="num">{{ accountsBalance.lendAccountBalance }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
<uni-icons type="arrow-up" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">投资账户余额</div>
<div class="num">{{ accountsBalance.investBalance }}<span>元</span></div>
@@ -77,14 +90,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
<div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
<uni-icons type="navigate" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">期货账户余额</div>
<div class="num">{{ accountsBalance.futuresBalance }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="flag" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">股票账户余额</div>
<div class="num">{{ accountsBalance.stocksBalance }}<span>元</span></div>
@@ -259,59 +276,78 @@
<style lang="scss" scoped>
.app-container {
/* 在App.vue的<style>中或者单独的style文件中 */
.btn-normal {
background-color: #f0f0f0;
color: #333;
}
.btn-selected {
background-color: #007AFF;
color: #fff;
}
background-color: #f5f7fa;
padding: 0;
overflow: visible;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 8rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
align-items: stretch;
padding: 0;
gap: 12rpx;
.item {
width: 50%;
height: 100%;
flex: 1;
display: flex;
position: relative;
align-items: center;
margin: 5px 10px 5px 10px;
.title {
margin-left: 5px;
color: rgb(133, 133, 148);
margin-bottom: 5px;
font-size: 14px;
padding: 20rpx 16rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
&:hover {
border-color: #d0d7de;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.item-icon {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
}
}
}
}
img {
height: 30px;
width: 30px;
}
}
.header-title {
width: 100%;
height: 30px;
background-color: #ffffff;
margin-bottom: 3px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
}
.btnAdd {