代码优化

vedio/pagesA/vipPay/vipPay.vue

 <template>
 	<view class="body">
-		<scroll-view scroll-y style="height: 100%;">
 
 		<image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_heli_vip.png"
 			mode="widthFix" />
@@ -10,8 +9,10 @@
 				style="margin-top: 12rpx;margin-left: 30rpx;color: black;">自动续费管理</view>
 
 			<view class="pack-box">
-					<view class="pack-item" :class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList'
-						:key='index' @click="choosePack(item, index)">
+				<scroll-view scroll-x style="white-space: nowrap">
+					<view class="pack-item" v-for='(item, index) in vipList' :key='index'
+						@click="choosePack(item, index)">
+						<view class="pack-content" :class="[{active: index==selectedIndex}]">
 							<view class="label">
 								{{ item.topTitle }}
 							</view>
@@ -35,6 +36,8 @@
 							</view>
 						</view>
 					</view>
+				</scroll-view>
+			</view>
 		</view>
 
 
@@ -50,12 +53,9 @@
 			</text>
 		</view>
 
-
 		<view class="section">
 			<button class="apply-button" @click="handlePay">立即开通</button>
 		</view>
-
-		</scroll-view>
 	</view>
 </template>
 
@@ -118,7 +118,7 @@
 			},
 			handlePay() {
 				if (!this.checked) {
-					message.notify("请阅读《连续订阅服务协议》与《支付协议》后勾选同意")
+					message.notify("请阅读《连续订阅服务协议》与《支付协议》与《河狸小故事隐私政策》后勾选同意")
 					return
 				}
 
@@ -215,20 +215,23 @@
 			.pack-box {
 				margin-top: 25rpx;
 				display: flex;
-				margin-left: 30rpx;
 				flex-direction: row;
 				align-items: center;
 				flex-wrap: wrap;
+				overflow-x: scroll;
+
+				.pack-item {
+					margin-left: 30rpx;
+					width: calc(32% - 30rpx);
+					display: inline-block;
 
 					.active {
 						background-color: #FEF8F5;
 						border: 4rpx solid #FDEADC !important;
 					}
 
-				.pack-item {
-					margin-bottom: 25rpx;
-					margin-right: 30rpx;
-					width: calc(31% - 30rpx);
+					.pack-content {
+						width: 100%;
 						height: 260rpx;
 						display: flex;
 						flex-direction: column;
@@ -279,9 +282,13 @@
 						}
 
 						.origin2 {
+							// width: 100rpx;
 							font-size: 22rpx;
 							text-align: center;
 							color: #676666;
+							word-wrap: break-word;
+							  word-break: break-all;
+							  white-space: pre-line;
 						}
 
 						.label {
@@ -317,20 +324,12 @@
 							bottom: 0;
 						}
 
-					.cut-down {
-						position: absolute;
-						top: 0;
-						right: 0;
-						color: #fff;
-						background: #ff502f;
-						font-size: 22rpx;
-						border-radius: 15rpx;
-						height: 30rpx;
-						line-height: 30rpx;
-						padding: 0 10rpx;
-						transform: translate(0, -50%);
 					}
 				}
+
+				.pack-item:last-child {
+					margin-right: 30rpx;
+				}
 			}
 
 			.apply-button {