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

141
src/pages/statistic/accounts/creditCardDealAnalysis/index.vue
View File

@@ -65,17 +65,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="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">交易金额</div>
<div class="num">{{ account.amount }}<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="arrow-down" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">收入金额</div>
<div class="num">{{ account.income }}<span>元</span></div>
@@ -84,14 +88,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, #4facfe 0%, #00f2fe 100%);">
<uni-icons type="arrow-up" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出金额</div>
<div class="num">{{ account.expenses}}<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="checkmarkempty" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">收入笔数</div>
<div class="num">{{ account.incomeCount }}<span>笔</span></div>
@@ -100,14 +108,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%, #ffc371 100%);">
<uni-icons type="list" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">支出笔数</div>
<div class="num">{{ account.expensesCount}}<span>笔</span></div>
</div>
</div>
<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, #667eea 0%, #f093fb 100%);">
<uni-icons type="gift" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">POS刷卡支出</div>
<div class="num">{{ account.posExpenses }}<span>元</span></div>
@@ -116,14 +128,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #fc6076 0%, #ff9a44 100%);">
<uni-icons type="shop" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">真实消费支出</div>
<div class="num">{{ account.realExpenses}}<span>元</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);">
<uni-icons type="reload" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">POS刷卡笔数</div>
<div class="num">{{ account.posExpensesCount }}<span>笔</span></div>
@@ -132,14 +148,18 @@
</div>
<div class="header-con" v-show="auth.hasPermi('invest:posmachine:list')" ref="searchHeightRef">
<div class="item">
<img src="@/static/images/one.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);">
<uni-icons type="heart" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">真实消费笔数</div>
<div class="num">{{ account.realExpensesCount}}<span>笔</span></div>
</div>
</div>
<div class="item">
<img src="@/static/images/ticketSum.png" alt="" />
<view class="item-icon" style="background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);">
<uni-icons type="gear" size="24" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">其他支出笔数</div>
<div class="num">{{ account.otherExpensesCount }}<span>笔</span></div>
@@ -344,47 +364,80 @@ function searchSubmit() {
<style lang="scss" scoped>
.app-container {
background-color: #f5f7fa;
padding: 8rpx 0;
.header-con {
width: 100%;
height: 100px;
background-color: #ffffff;
margin-bottom: 5px;
width: calc(100% - 32rpx);
margin: 0 16rpx 12rpx 16rpx;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
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: 24rpx 20rpx;
transition: all 0.3s ease;
border: 2rpx solid #e8edf3;
border-radius: 16rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}
.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: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
img {
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
.info-sum {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
.title {
color: #7f8c8d;
margin-bottom: 8rpx;
font-size: 24rpx;
line-height: 1.4;
}
.num {
color: #2c3e50;
font-size: 32rpx;
font-weight: 600;
span {
font-size: 20rpx;
color: #95a5a6;
margin-left: 4rpx;
font-weight: normal;
}
}
}
}
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 {