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

108
src/pages/statistic/bill/onlineLendSettledAnalysis/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="checkbox-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">已结清贷款</div>
<div class="num">{{ historyObj.clearedCount }}<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-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">已结清（本息）</div>
<div class="num">{{ historyObj.clearedTotal }}<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="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">已结清（本金）</div>
<div class="num">{{ historyObj.clearedPrincipal}}<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="star-filled" size="20" color="#ffffff"></uni-icons>
</view>
<div class="info-sum">
<div class="title">已结清利息</div>
<div class="num">{{ historyObj.totalInterest }}<span>元</span></div>
@@ -290,47 +298,73 @@ const start = dayjs(end).add(-239, 'months')
<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 {