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

fix: pos刷卡推荐，样式修改。

Browse Source
This commit is contained in:
tianyongbao
2026-02-15 17:16:20 +08:00
parent fb9781ff52
commit 9b072ac892
1 changed files with 49 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,26 +16,19 @@
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item">
<view class="item-header">
<view class="left-section">
<view class="header-row">
<view class="card-icon">
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
</view>
<view class="header-info">
<view class="card-name-row">
<text class="card-name">{{ item.name }}</text>
<view class="bill-info">
<text class="limit-label">账单日</text>
<text class="bill-date">{{ item.billDateName }}</text>
</view>
</view>
<view class="card-detail-row">
<text class="card-code">{{ item.code }}</text>
</view>
<text class="card-name">{{ item.name }}</text>
<text class="bill-date-text">账单日 {{ item.billDateName }}</text>
<view class="available-amount">
<text class="amount-label">可用</text>
<text class="amount-value">{{ item.availableLimit }}元</text>
</view>
</view>
<view class="right-section">
<text class="limit-label-right">可用额度</text>
<text class="limit-value">{{ item.availableLimit }}</text>
<view class="info-row">
<text class="card-code">{{ item.code }}</text>
</view>
</view>
@@ -380,18 +373,15 @@ page {
.item-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 12rpx;
padding: 16rpx 24rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
.left-section {
.header-row {
display: flex;
align-items: center;
gap: 12rpx;
flex: 1;
min-width: 0;
gap: 10rpx;
}
.card-icon {
@@ -404,88 +394,64 @@ page {
justify-content: center;
flex-shrink: 0;
}
.header-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 6rpx;
min-width: 0;
}
.card-name-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12rpx;
}
.card-name {
font-size: 30rpx;
font-weight: 700;
font-size: 28rpx;
font-weight: 600;
color: #ffffff;
line-height: 1.3;
flex: 1;
white-space: nowrap;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-detail-row {
display: flex;
align-items: center;
}
.card-code {
font-size: 21rpx;
color: rgba(255, 255, 255, 0.85);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.5rpx;
font-family: 'Courier New', monospace;
}
.bill-info {
display: flex;
align-items: center;
gap: 6rpx;
flex-shrink: 0;
}
.limit-label {
font-size: 20rpx;
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
line-height: 1;
}
.bill-date {
.bill-date-text {
font-size: 24rpx;
font-weight: 600;
color: #ffffff;
line-height: 1;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
line-height: 1.3;
flex-shrink: 0;
margin-right: 12rpx;
}
.right-section {
.available-amount {
display: flex;
flex-direction: column;
align-items: flex-end;
align-items: baseline;
gap: 6rpx;
flex-shrink: 0;
}
.limit-label-right {
.amount-label {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
line-height: 1;
}
.limit-value {
.amount-value {
font-size: 32rpx;
font-weight: 700;
color: #52c41a;
line-height: 1;
line-height: 1.2;
}
.info-row {
display: flex;
align-items: center;
gap: 12rpx;
padding-top: 12rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}
.card-code {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.75);
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.5rpx;
font-family: 'Courier New', monospace;
flex: 1;
}
}