Fix:4965 【商城小程序】体验券选择页面,页面套餐信息位置样式调整

This commit is contained in:
LinCyJang
2026-03-23 22:07:06 +08:00
parent bb052d12fe
commit 54bf1c5700
+18 -9
View File
@@ -316,15 +316,15 @@ export default {
根据您的套餐您有 <view class="num-badge">{{ totalCount }}</view> 张体验券可以选择 根据您的套餐您有 <view class="num-badge">{{ totalCount }}</view> 张体验券可以选择
</view> </view>
<view class="line-status flex ai-center"> <view class="line-status flex ai-center">
<view class="status-pill flex ai-center"> <view class="status-pill flex ai-center" style="flex-shrink: 0;">
<u-icon name="checkmark-circle" color="#fff" size="14" style="margin-left: 6rpx;" /> <u-icon name="checkmark-circle" color="#fff" size="14" style="margin-left: 6rpx; flex-shrink: 0;" />
<text class="status-text">已选清单</text> <text class="status-text" style="white-space: nowrap;">已选清单</text>
<view class="count-badge">{{ selectedCount }}/{{ totalCount }}</view> <view class="count-badge" style="white-space: nowrap;">{{ selectedCount }}/{{ totalCount }}</view>
</view> </view>
<view class="date-info flex ai-center"> <view class="date-info flex ai-center" style="flex-shrink: 0;">
<text>请在</text> <text style="white-space: nowrap;">请在</text>
<view class="date-badge">{{ expireDate }}</view> <view class="date-badge" style="white-space: nowrap;">{{ expireDate }}</view>
<text>内选择使用</text> <text style="white-space: nowrap;">内选择使用</text>
</view> </view>
</view> </view>
<view class="line-library flex ai-center"> <view class="line-library flex ai-center">
@@ -553,13 +553,21 @@ export default {
justify-content: flex-end; justify-content: flex-end;
gap: 16rpx; gap: 16rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
}
/* 隐藏滚动条 */
.line-status::-webkit-scrollbar {
display: none;
} }
.status-pill { .status-pill {
background: #C52733; background: #C52733;
padding: 6rpx 6rpx 6rpx 20rpx; padding: 6rpx 6rpx 6rpx 20rpx;
border-radius: 32rpx; border-radius: 32rpx;
color: #fff; color: #fff;
font-size: 26rpx; font-size: 22rpx;
white-space: nowrap;
} }
.status-text { .status-text {
margin-right: 12rpx; margin-right: 12rpx;
@@ -593,6 +601,7 @@ export default {
.date-info { .date-info {
font-size: 26rpx; font-size: 26rpx;
color: #fff; color: #fff;
white-space: nowrap;
} }
.date-badge { .date-badge {
background: #C52733; background: #C52733;