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

132
src/pages/statistic/accounts/accountDealAnalysis/index.vue
View File

@@ -57,17 +57,21 @@
</u-transition>
</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" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">收支差额</div>
<div class="num">{{ account.balance }}<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="star-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">工资收益</div>
<div class="num">{{ account.salaryIncome }}<span>元</span></div>
@@ -76,14 +80,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" 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="arrow-up" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">投资盈利</div>
<div class="num">{{ account.investIncome}}<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="arrow-down" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">投资亏损</div>
<div class="num">{{ account.investOutcome }}<span>元</span></div>
@@ -92,14 +100,18 @@
</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, #fa709a 0%, #fee140 100%);">
<uni-icons type="list" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出总额</div>
<div class="num">{{ account.totalOutcome}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<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">{{ account.dailyExpenses }}<span>元</span></div>
@@ -108,14 +120,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:creditCard','invest:posmachine:list','invest:onlineLend')" ref="searchHeightRef">
<div class="item" v-show="auth.hasPermi('invest:creditCard','invest:posmachine:list','invest:onlineLend')">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
<uni-icons type="calendar-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">手续费利息合计</div>
<div class="num">{{ account.notDailyExpenses}}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:creditCard')">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
<uni-icons type="star" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">信用卡分期利息</div>
<div class="num">{{ account.creditInterest}}<span>元</span></div>
@@ -125,14 +141,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:posmachine:list','invest:onlineLend')" ref="searchHeightRef">
<div class="item" v-show="auth.hasPermi('invest:posmachine:list')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
<uni-icons type="shop-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">POS机手续费</div>
<div class="num">{{ account.posExpenses }}<span>元</span></div>
</div>
</div>
<div class="item" v-show="auth.hasPermi('invest:onlineLend')">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="upload-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">贷款利息</div>
<div class="num">{{ account.onLineInterest }}<span>元</span></div>
@@ -289,47 +309,73 @@ function searchSubmit() {
<style lang="scss" scoped>
.app-container {
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);
&:active {
transform: scale(0.98);
opacity: 0.9;
}
.num {
margin-left: 5px;
font-weight: bold;
font-size: 14px;
.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 {