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

fix: 功能优化完善，样式相关。

Browse Source
This commit is contained in:
tianyongbao
2025-11-16 23:15:45 +08:00
parent 9d6e505697
commit 0e8db750d9
65 changed files with 6498 additions and 4216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/pages/work/accounts/posadvice/list.vue
View File

@@ -17,20 +17,24 @@
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="item-header">
<view class="card-icon">
<uni-icons type="creditcard-filled" size="24" color="#ffffff"></uni-icons>
<view class="left-section">
<view class="card-icon">
<uni-icons type="wallet" size="20" color="#ffffff"></uni-icons>
</view>
<view class="header-info">
<view class="card-name-row">
<text class="card-name">{{ item.name }}</text>
<text class="card-code">{{ item.code }}</text>
</view>
<view class="card-limit-row">
<text class="limit-label">账单日</text>
<text class="bill-date">{{ item.billDateName }}</text>
</view>
</view>
</view>
<view class="header-info">
<view class="card-name-row">
<text class="card-name">{{ item.name }}</text>
<text class="card-code">{{ item.code }}</text>
</view>
<view class="card-limit-row">
<text class="limit-label">账单日</text>
<text class="bill-date">{{ item.billDateName }}</text>
<text class="limit-label">可用额度</text>
<text class="limit-value">{{ item.availableLimit }}</text>
</view>
<view class="right-section">
<text class="limit-label-right">可用额度</text>
<text class="limit-value">{{ item.availableLimit }}</text>
</view>
</view>
@@ -363,13 +367,22 @@ function settingCancel() {
.item-header {
display: flex;
align-items: center;
gap: 16rpx;
padding: 24rpx;
justify-content: space-between;
gap: 12rpx;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.left-section {
display: flex;
align-items: center;
gap: 12rpx;
flex: 1;
min-width: 0;
}
.card-icon {
width: 56rpx;
height: 56rpx;
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
display: flex;
@@ -382,25 +395,25 @@ function settingCancel() {
flex: 1;
display: flex;
flex-direction: column;
gap: 12rpx;
gap: 8rpx;
min-width: 0;
}
.card-name-row {
display: flex;
align-items: baseline;
gap: 12rpx;
gap: 10rpx;
}
.card-name {
font-size: 32rpx;
font-weight: 700;
font-size: 28rpx;
font-weight: 600;
color: #ffffff;
line-height: 1.2;
}
.card-code {
font-size: 28rpx;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
line-height: 1.2;
@@ -410,35 +423,51 @@ function settingCancel() {
display: flex;
align-items: center;
gap: 8rpx;
flex-wrap: wrap;
}
.limit-label {
font-size: 24rpx;
font-size: 22rpx;
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
line-height: 1;
}
.bill-date {
font-size: 30rpx;
font-weight: 600;
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
margin-right: 16rpx;
line-height: 1;
}
.right-section {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6rpx;
flex-shrink: 0;
}
.limit-label-right {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
line-height: 1;
}
.limit-value {
font-size: 32rpx;
font-weight: 700;
color: #52c41a;
line-height: 1;
}
}
.card-body {
padding: 24rpx;
padding: 20rpx 24rpx 24rpx;
background: #fff;
display: flex;
flex-direction: column;
gap: 24rpx;
gap: 20rpx;
}
.pos-section,
@@ -446,25 +475,32 @@ function settingCancel() {
display: flex;
flex-direction: column;
gap: 12rpx;
padding: 16rpx;
background: linear-gradient(135deg, #f8f9ff 0%, #fefeff 100%);
border-radius: 12rpx;
border: 1rpx solid rgba(102, 126, 234, 0.1);
}
.section-header {
display: flex;
align-items: center;
gap: 8rpx;
margin-bottom: 4rpx;
padding-bottom: 8rpx;
border-bottom: 1rpx solid rgba(102, 126, 234, 0.15);
.section-title {
font-size: 26rpx;
color: #333;
font-weight: 600;
line-height: 1.2;
}
}
.pos-tags {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
gap: 10rpx;
padding-top: 4rpx;
}
.pos-tag {
@@ -472,23 +508,38 @@ function settingCancel() {
color: #667eea;
font-weight: 500;
padding: 8rpx 16rpx;
background: rgba(102, 126, 234, 0.1);
border: 1rpx solid rgba(102, 126, 234, 0.3);
border-radius: 24rpx;
background: rgba(102, 126, 234, 0.08);
border: 1rpx solid rgba(102, 126, 234, 0.2);
border-radius: 20rpx;
line-height: 1.3;
transition: all 0.3s ease;
}
.record-list {
display: flex;
flex-direction: column;
gap: 8rpx;
gap: 10rpx;
padding-top: 4rpx;
}
.record-text {
font-size: 24rpx;
color: #666;
line-height: 1.6;
padding-left: 8rpx;
padding: 6rpx 0 6rpx 20rpx;
position: relative;
&::before {
content: '';
position: absolute;
left: 4rpx;
top: 50%;
transform: translateY(-50%);
width: 6rpx;
height: 6rpx;
background: #faad14;
border-radius: 50%;
}
}
}
</style>