v2.0.0支付弹层样式

components/pay-popup/pay-popup.vue

@@ -1,41 +1,43 @@
 <template>
 	<view>
-		<u-popup :show="payShow" mode="bottom" round="17" @close="close" :closeable="true">
+		<u-popup :show="payShow" mode="bottom" round="17" @close="close" :closeable="true" overlayOpacity="0.5" @touchmove.prevent.stop>
 			<view class="choiceShow-wrap">
+				<!-- 盲票信息 -->
 				<view class="flex goods">
 					<view class="flex image-wrap">
-						<image :src="payInfo.picUrl" mode="aspectFit"></image>
+						<image :src="payInfo.picUrl" mode="scaleToFill"></image>
 					</view>
 					<view class="info">
 						<view class="info-title">{{ payInfo.title }}</view>
-						<view class="info-stock coupon-right-color">￥{{ $numberFormat( payInfo.orderAmt ) }}</view>
+						<view class="info-stock">￥{{ $numberFormat( payInfo.orderAmt ) }}</view>
 					</view>
 				</view>
+				<!-- 优惠券信息 -->
 				<view class="flex coupon" @click="toCoupon">
 					<view class="flex coupon-left">
-						<u-icon name="coupon" size="26" color="#333"></u-icon>
+						<image src="../../static/icon/public_coupon.png" mode="scaleToFill"></image>
 						<view class="txt">优惠券</view>
 					</view>
-					<view class="flex coupon-right">
+					<view class="coupon-right flex">
 						<view class="txt coupon-right-color" v-if="$numberFormat(payInfo.discountAmt) != 0">-￥{{ $numberFormat(payInfo.discountAmt)}}</view>
 						<view class="txt" v-else-if="payInfo.listNum != undefined">{{payInfo.listNum}}张可用</view>
 						<view class="txt" v-else>暂无可用优惠券</view>
-						<u-icon name="arrow-right" size="16" color="#333"></u-icon>
+						<image src="../../static/icon/public_right_arrow.png" mode="scaleToFill"></image>
 					</view>
 				</view>
 				<view class="flex agreement">
-					<view class="txt" @click="toRule">同意<text>《盲票购买协议》</text></view>
 					<view class="checked">
-						<u-checkbox-group @change="changeChecked">
-							<u-checkbox :value="checked" :checked="checked" size="24" shape="circle"
-								activeColor="#E96737"></u-checkbox>
+						<u-checkbox-group>
+							<u-checkbox :value="checked" :checked="checked" shape="circle"
+								activeColor="#F9822C" @change="changeChecked"></u-checkbox>
 						</u-checkbox-group>
 					</view>
+					<view class="txt" @click="toRule">同意《盲票购买协议》</text></view>
 				</view>
 				<view class="flex btn">
 					<view class="flex btn-left">
 						<view class="title">应付：</view>
-						<view class="flex coin">￥{{ $numberFormat(payInfo.payAmt) }}</view>
+						<view class="flex price">￥{{ $numberFormat(payInfo.payAmt) }}</view>
 					</view>
 					<view class="btn-right">
 						<view class="confirm" @click="pay">立即支付</view>
@@ -184,22 +186,22 @@
 <style lang="scss" scoped>
 	.choiceShow-wrap {
 		min-height: 400rpx;
-		// padding: 80rpx 0 60rpx;
+		padding: 34rpx;
 
+		// 盲票信息
 		.goods {
-			padding: 0 20rpx;
-			justify-content: space-between;
-			margin-bottom: 20rpx;
+			justify-content: flex-start;
+			margin-bottom: 60rpx;
 
 			.image-wrap {
 				width: 220rpx;
 				height: 220rpx;
-				border: 1px solid #F8F8F8;
 				border-radius: 10rpx;
+				overflow: hidden;
 
 				image {
-					width: 174rpx;
-					height: 174rpx;
+					width: 100%;
+					height: 100%;
 				}
 			}
 
@@ -208,87 +210,95 @@
 				display: flex;
 				height: 220rpx;
 				flex-direction: column;
-				justify-content: space-between;
-				padding-left: 26rpx;
+				justify-content: space-around;
+				padding-left: 34rpx;
 
 				&-title {
-					font-size: 32rpx;
-					line-height: 44rpx;
-					font-weight: bold;
-				}
-
-				&-coin {
-					display: flex;
-					align-items: center;
-					font-size: 32rpx;
-					line-height: 44rpx;
-					color: rgba(235, 112, 9, 100);
+					font-size: 36rpx;
+					line-height: 36rpx;
 					font-weight: bold;
-
-					image {
-						width: 42rpx;
-						height: 42rpx;
-						margin-right: 20rpx;
-					}
 				}
-
+				
 				&-stock {
-					line-height: 44rpx;
+					font-size: 26rpx;
+					color: #FF4208;
 				}
 			}
 		}
 
+		// 优惠券
 		.coupon {
-			box-sizing: border-box;
-			height: 110rpx;
-			line-height: 110rpx;
 			justify-content: space-between;
-			padding: 0 40rpx;
-			border-top: 1px solid #F8F8F8;
-			border-bottom: 1px solid #F8F8F8;
+			height: 40rpx;
+			margin-bottom: 46rpx;
 
-			.txt {
-				margin: 0 24rpx;
+			&-left {
+				image {
+					width: 48rpx;
+					height: 40rpx;
+					margin-right: 18rpx;
+				}
+				
+				.txt {
+					font-size: 30rpx;
+					font-weight: bold;
+				}
+			}
+			
+			&-right {
+				height: 40rpx;
+				
+				image {
+					width: 12rpx;
+					height: 22rpx;
+					margin-left: 14rpx;
+				}
+				
+				.txt {
+					line-height: 26rpx;
+					font-size: 26rpx;
+					color: #666666;
+				}
 			}
 		}
 
+		// 同意协议
 		.agreement {
-			box-sizing: border-box;
-			height: 110rpx;
-			line-height: 110rpx;
-			justify-content: space-between;
-			padding: 0 40rpx;
-			border-bottom: 1px solid #F8F8F8;
+			justify-content: flex-start;
+			margin-bottom: 56rpx;
 
-			.txt text {
-				color: #007aff;
+			.txt {
+				font-size: 26rpx;
+				color: #666666;
 			}
 		}
 
+		// 支付按钮
 		.btn {
 			justify-content: space-between;
-			padding: 20rpx 40rpx;
 
 			&-left {
-				.coin {
-					display: flex;
-					align-items: center;
-					font-size: 32rpx;
-					line-height: 44rpx;
-					color: rgba(235, 112, 9, 100);
-					margin-left: 20rpx;
+				.title {
+					font-size: 13px;
+					font-weight: 500;
+				}
+				
+				.price {
+					font-size: 30rpx;
+					font-weight: bold;
+					color: #FF4208;
 				}
 			}
 
 			&-right {
 				.confirm {
-					width: 280rpx;
-					height: 90rpx;
-					font-size: 36rpx;
-					line-height: 90rpx;
-					border-radius: 10rpx;
-					background-color: rgba(235, 112, 9, 100);
-					color: rgba(255, 255, 255, 100);
+					width: 200rpx;
+					height: 72rpx;
+					line-height: 72rpx;
+					background: #F9822C;
+					border-radius: 36rpx;
+					font-size: 26rpx;
+					color: #fff;
 					text-align: center;
 				}