优化样式

vedio/pagesA/vipPay/vipPay.vue

@@ -13,22 +13,22 @@
 					<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">
+							<view class="label" v-if="item.topTitle">
 								{{ item.topTitle }}
 							</view>
 							<view class="name row" :class="[{active2: index==selectedIndex}]">
 								{{item.title}}
 							</view>
 							<view class="price row" :class="[{active1: index==selectedIndex}]">
-								<view style="font-size: 22rpx;">￥</view>
+								<view style="font-size: 30rpx;">￥</view>
 								{{item.firstPayPrice}}
 							</view>
 							<view class="origin row" v-if='item.oldPrice'>
 								￥{{item.oldPrice}}
 							</view>
 
-							<view class="origin2 row" v-if='item.oldPrice'>
-								{{item.remarks }}
+							<view class="origin2 row" v-if='item.remarks'>
+								{{ getRemark1(item.remarks) + '\r\n' + getRemark2(item.remarks) }}
 							</view>
 
 							<view class="label2" v-if="index==selectedIndex">
@@ -77,18 +77,18 @@
 		data() {
 			return {
 				vipList: [],
-				selectedIndex: 0,
+				selectedIndex: 0,
 				os: 'android',
 				checked: false,
 				agreementDto: null,
 			}
 		},
 		methods: {
-			loadData() {
-				if (wx.getSystemInfoSync().platform === 'ios') {
-					this.os = 'ios';
-				}
-				
+			loadData() {
+				if (wx.getSystemInfoSync().platform === 'ios') {
+					this.os = 'ios';
+				}
+
 				this.post({
 					url: '/vip/getVipProducts/cyc',
 					showLoading: false,
@@ -126,6 +126,20 @@
 			amount(value) {
 				return value.toFixed(2)
 			},
+			getRemark1(value) {
+				let data = value.split(',')
+				if (data.length > 0) {
+					return data[0]
+				}
+				return ''
+			},
+			getRemark2(value) {
+				let data = value.split(',')
+				if (data.length > 1) {
+					return data[1]
+				}
+				return ''
+			},
 			handlePay() {
 				if (!this.checked) {
 					message.notify("请阅读《支付协议》后勾选同意")
@@ -135,50 +149,50 @@
 				let that = this;
 				let vipBean = this.vipList[this.selectedIndex];
 
-				if (this.os == 'ios') {
-					message.notify('暂不支持ios系统~');
-				} else {
-					this.post({
-						url: '/vip/getVipPayParams/wechat',
-						data: {
-							pid: vipBean.pid,
-							payChannel: 'WEIXIN'
-						},
-						showLoading: true,
-						success: ({
-							data
-						}) => {
-							if (vipBean.firstPayPrice == 0) {
-								//签约
-								that.wxSign(data, vipBean.largeType);
-							} else {
-								//普通支付
-								that.wxPay(data, vipBean.largeType);
-							}
-				
-						}
-					});
+				if (this.os == 'ios') {
+					message.notify('暂不支持ios系统~');
+				} else {
+					this.post({
+						url: '/vip/getVipPayParams/wechat',
+						data: {
+							pid: vipBean.pid,
+							payChannel: 'WEIXIN'
+						},
+						showLoading: true,
+						success: ({
+							data
+						}) => {
+							if (vipBean.firstPayPrice == 0) {
+								//签约
+								that.wxSign(data, vipBean.largeType);
+							} else {
+								//普通支付
+								that.wxPay(data, vipBean.largeType);
+							}
+
+						}
+					});
 				}
-			},
-			wxSign(wxData, largeType) {
-				let that = this;
-				// 发起微信签约
-				wx.navigateToMiniProgram({
-					appId: wxData.appId,
-					path: 'pages/loading',
-					extraData: wxData.params,
-					success(res) {
-						message.notify('支付成功')
-						
-						setTimeout(() => {
-							navigateBack();
-						}, 1000);
-					},
-					fail(res) {
-						// 未成功跳转到签约小程序 
-						console.log("wxSign fail=", res);
-					}
-				})
+			},
+			wxSign(wxData, largeType) {
+				let that = this;
+				// 发起微信签约
+				wx.navigateToMiniProgram({
+					appId: wxData.appId,
+					path: 'pages/loading',
+					extraData: wxData.params,
+					success(res) {
+						message.notify('支付成功')
+
+						setTimeout(() => {
+							navigateBack();
+						}, 1000);
+					},
+					fail(res) {
+						// 未成功跳转到签约小程序 
+						console.log("wxSign fail=", res);
+					}
+				})
 			},
 			wxPay(wxData) {
 				let wxParams = wxData.params;
@@ -260,15 +274,15 @@
 
 					.pack-content {
 						width: 100%;
-						height: 270rpx;
+						height: 320rpx;
 						display: flex;
 						flex-direction: column;
 						align-items: center;
 						background: white;
-						border: 4rpx solid #EAECEC;
+						border: 2rpx solid #EAECEC;
 						border-radius: 20rpx;
 						position: relative;
-						padding-top: 50rpx;
+						padding-top: 60rpx;
 
 						.row {
 							display: flex;
@@ -282,13 +296,13 @@
 						}
 
 						.name {
-							font-size: 26rpx;
+							font-size: 30rpx;
 							font-weight: 700;
 							color: #000000;
 						}
 
 						.price {
-							font-size: 40rpx;
+							font-size: 60rpx;
 							color: #000000;
 							font-weight: 700;
 						}
@@ -303,20 +317,20 @@
 
 
 						.origin {
-							font-size: 22rpx;
+							font-size: 26rpx;
+							margin: 0;
 							text-align: center;
 							color: #676666;
 							text-decoration: line-through;
 						}
 
 						.origin2 {
-							// width: 100rpx;
-							font-size: 22rpx;
+							font-size: 26rpx;
 							text-align: center;
-							color: #676666;
-							word-wrap: break-word;
-							  word-break: break-all;
-							  white-space: pre-line;
+							color: #676666;
+							word-wrap: break-word;
+							word-break: break-all;
+							white-space: pre-line;
 						}
 
 						.label {