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

pkg_product/views/experienceCoupon.vue

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