支付相关页面样式修改

common/styles/global/components.scss

@@ -78,18 +78,21 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 // 三个元素
 .ezy-navBar-box{
 	display: flex;align-items: center;justify-content: space-between;
-	padding: 0 20rpx 20rpx;box-sizing: border-box;
+	padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
 	.nav-bar-icon{
 		width: 24rpx;height: 38rpx;
 		background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
 	}
 	.nav-bar-title{
 		font-size: 36rpx;color: #fff;
+		position: absolute;top: 0;left: 50%;transform: translateX(-50%);
 	}
 	.nav-bar-other{
 		font-size: 30rpx;color: #fff;
 		.key-note{color: #ffff01;}
 	}
+	// 文字按钮
+	.text-btn{font-size: 26rpx;color: #fff;}
 }
 // 两个元素
 .icon-title-navBar-box{

common/styles/global/pages.scss

@@ -942,10 +942,9 @@
 	width: 100%;height: 100vh;background-color: #23befb;position: relative;
 	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
 	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/common/ezy-page-bj.png");
-	.svip-login{
-		width: 673rpx;height: 269rpx;margin: 24rpx auto 0;
-		@include ezy-no-repeat-cover;background-image: url("@/static/images/pay/svip-logo.png");
-	}
+	.svip-login1,.svip-login2{width: 673rpx;height: 269rpx;margin: 24rpx auto 0;@include ezy-no-repeat-cover;}
+	.svip-login1{background-image: url("@/static/images/pay/svip-logo1.png");}
+	.svip-login2{background-image: url("@/static/images/pay/svip-logo2.png");}
 	.svip-list-box{
 		margin: 24rpx auto;
 		.list-item-box{display: flex;align-items: center;color: #fff;margin-bottom: 28rpx;}
@@ -980,6 +979,7 @@
 				width: 48rpx;height: 48rpx;@include ezy-no-repeat-cover;margin-left: 16rpx;
 				background-image: url("@/static/images/pay/svip-radio.png");
 				background-color:transparent;border:0; pointer-events: none;
+				svg{display: none;}
 			}
 			.radio-checked .uni-radio-input{
 				width: 48rpx;height: 48rpx;@include ezy-no-repeat-cover;color:transparent;
@@ -1066,6 +1066,7 @@
 			box-sizing: border-box;padding-bottom: 32rpx;margin-bottom: 24rpx;
 			icon{width: 212rpx;height: 202rpx;margin-right: 20rpx;@include ezy-no-repeat-cover;}
 			.content-img1{background-image: url("@/static/images/pay/svip1.png");}
+			.content-img2{background-image: url("@/static/images/pay/svip2.png");}
 			.content-body-box{display: flex;flex-direction: column;}
 			.content-name{
 				font-size: 40rpx;color: #333;margin-bottom: 12rpx;
@@ -1096,6 +1097,101 @@
 	
 }
 
+// 订单支付
+.ezy-order-pay-page{
+	width: 100%;height: 100vh;background-color: #00c5fe;position: relative;
+	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
+	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/common/ezy-page-bj.png");
+	.order-pay-border-box{
+		width: 740rpx;height: 1144rpx;margin: 0 auto;box-sizing: border-box;padding: 30rpx;
+		@include ezy-no-repeat-cover(top);background-image: url("@/static/images/pay/order-pay-bj.png");
+	}
+	.order-pay-img-box{
+		display: flex;background-color: rgba(255, 255, 255, 0.6);
+		box-sizing: border-box;padding: 32rpx 24rpx;margin-bottom: 6rpx;
+		icon{width: 212rpx;height: 202rpx;margin-right: 20rpx;@include ezy-no-repeat-cover;flex-shrink: 0;}
+		.order-pay-img1{background-image: url("@/static/images/pay/svip1.png");}
+		.order-pay-img2{background-image: url("@/static/images/pay/svip2.png");}
+		.img-content-box{flex: 1;position: relative;}
+		.content-name{font-size: 40rpx;color: #333;margin-bottom: 12rpx;}
+		.content-tag{
+			width: 150rpx;height: 40rpx;line-height: 40rpx;display: inline-block;
+			font-size: 24rpx;color: #01c6fe;background-color: rgba(255, 255, 255, 0.6);
+			border-radius: 4rpx;text-align: center;
+		}
+		.content-tag + .content-tag{margin-left: 16rpx;}
+		.content-yuanjia{font-size: 42rpx;color: #ff0101;position: absolute;right: 0;bottom: 0;}
+	}
+	
+	.price-box{
+		margin-bottom: 6rpx;background-color: rgba(255, 255, 255, 0.6);box-sizing: border-box;padding: 32rpx 24rpx;
+		.price-row{display: flex;justify-content: space-between;font-size: 30rpx;color: #333;box-sizing: border-box;padding-left: 10rpx;}
+		.price-line-row{border-bottom: 1rpx dashed #fff;padding: 24rpx 0 36rpx 10rpx;margin-bottom: 24rpx;}
+		.price-red{color: #ff0101;}
+	}
+	
+	.pay-type-box{
+		background-color: rgba(255, 255, 255, 0.6);box-sizing: border-box;padding: 32rpx 24rpx;border-radius: 0 0 10rpx 10rpx;
+		.pay-type-name{font-size: 36rpx;color: #333;margin-bottom: 12rpx;}
+		.type-radio-box{display: flex;flex-direction: column;}
+		.type-radio-row{
+			display: flex;justify-content: space-between;flex: 1;align-items: center;color: #87664d;
+			padding: 24rpx 0;box-sizing: border-box;
+			icon{width: 58rpx;height: 58rpx;@include ezy-no-repeat-cover;margin-right: 16rpx;flex-shrink: 0;}
+			.uni-radio-input{
+				width: 48rpx;height: 48rpx;@include ezy-no-repeat-cover;margin-left: 16rpx;
+				background-image: url("@/static/images/pay/svip-radio.png");
+				background-color:transparent;border:0; pointer-events: none;
+				svg{display: none;}
+			}
+			.radio-checked .uni-radio-input{
+				width: 48rpx;height: 48rpx;@include ezy-no-repeat-cover;color:transparent;flex-shrink: 0;
+				background-image: url("@/static/images/pay/svip-radio-checked.png");
+			}
+			.radio-content-box{margin-right: auto;font-size: 0;}
+			.radio-title{font-size: 30rpx;color: #333;}
+			.radio-content{font-size: 24rpx;color: #666;}
+		}
+		.type-radio-row +.type-radio-row{border-top:1px dashed #fff;padding-bottom: 10rpx;}
+		.wx-radio{background-image: url("@/static/images/pay/svip-wx-icon.png");}
+		.zfb-radio{background-image: url("@/static/images/pay/svip-zfb-icon.png");}
+	}
+	
+	.pay-sum-box{
+		display: flex;justify-content: space-between;align-items: center;font-size: 36rpx;color: #333;margin-top: 42rpx;
+		icon{width: 35rpx;height: 35rpx;margin: 0 12rpx;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/pay/order-date.png");}
+		.sum-red{color: #ff0101;font-weight: bold;margin-left: 6rpx;}
+		.sum-btn{
+			width: 333rpx;height: 88rpx;line-height: 88rpx;text-align:center;color: #fff;font-size: 32rpx;
+			display: flex;justify-content: center;align-items: center;
+			@include ezy-no-repeat-cover;background-image: url("@/static/images/pay/svip-btn-bj.png");
+		}
+	}
+	@media (max-height: 700px) {
+		.order-pay-border-box{padding: 20rpx;}
+		.order-pay-img-box{padding:24rpx;}
+		.price-box{padding:24rpx;}
+		.pay-type-box{
+			padding:24rpx;
+			.pay-type-name{margin-bottom: 0;}
+			.type-radio-row{padding: 16rpx 0;}
+			}
+		.pay-sum-box{margin-top: 32rpx;}
+	}
+	@media (max-height: 600px) {
+		.order-pay-border-box{padding: 16rpx;}
+		.order-pay-img-box{padding:16rpx;}
+		.price-box{padding:16rpx;}
+		.pay-type-box{
+			padding:16rpx;
+			.pay-type-name{margin-bottom: 0;}
+			.type-radio-row{padding: 12rpx 0;}
+			}
+		.pay-sum-box{margin-top: 24rpx;}
+	}
+}
+
 // 游戏
 .ezy-game-page{
 	width: 100%;height: 100vh;background-color: #23befb;position: relative;

pages/pay/orderPay.vue

@@ -1,8 +1,90 @@
 <template>
-	<view>订单支付页面</view>
+	<view class="ezy-order-pay-page">
+		<view class="ezy-navBar-box">
+			<view class="nav-bar-icon"></view>
+			<text class="nav-bar-title">订单支付</text>
+			<view class="text-btn">取消订单</view>
+		</view>
+		<view class="order-pay-border-box">
+			<!-- svip -->
+			<view class="order-pay-img-box">
+				<!-- :class="'order-pay-img'+item.cardId" 改到下方 -->
+				<icon :class="'order-pay-img1'"></icon>
+				<view class="img-content-box">
+					<view class="content-name">SVIP终身卡</view>
+					<text class="content-tag">终身有效</text>
+					<text class="content-tag">不支持退订</text>
+					<view class="content-yuanjia">¥598</view>
+				</view>
+			</view>
+			
+			<!-- 价格 -->
+			<view class="price-box">
+				<view class="price-row">
+					<text>原价合计</text>
+					<text class="price-red">¥598</text>
+				</view>
+				<view class="price-row price-line-row">
+					<text>活动合计</text>
+					<text class="price-red">-¥400</text>
+				</view>
+				<view class="price-row">
+					<text>合计</text>
+					<text>¥198</text>
+				</view>
+			</view>
+			
+			<!-- 支付方式 -->
+			<view class="pay-type-box">
+				<view class="pay-type-name">支付方式</view>
+				<radio-group @change="radioChange">
+					<view  class="type-radio-box">
+						<view class="type-radio-row">
+							<icon class="wx-radio"></icon>
+							<view class="radio-content-box">
+								<view class="radio-title">微信支付</view>
+								<text class="radio-content">支付信用卡、储蓄卡快捷支付及微信</text>
+							</view>
+							<radio value="weixin" :checked="payType==='weixin'" activeBackgroundColor="transparent"
+							:class="{'radio-checked': payType==='weixin'}"/>
+						</view>
+						<view class="type-radio-row">
+							<icon class="zfb-radio"></icon>
+							<view class="radio-content-box">
+								<view class="radio-title">支付宝</view>
+								<text class="radio-content">支付信用卡、储蓄卡快捷支付及支付宝</text>
+							</view>
+							<radio value="zhifubao" :checked="payType==='zhifubao'" activeBackgroundColor="transparent"
+							:class="{'radio-checked': payType==='zhifubao'}" style="margin-right: 0;"/>
+						</view>
+					</view>
+				</radio-group>
+			</view>
+			
+			<!-- 合计 -->
+			<view class="pay-sum-box">
+				<view>
+					<text>合计：</text>
+					<text class="sum-red">¥198</text>	
+				</view>
+				<view class="sum-btn">
+					支付
+					<icon></icon>
+					29:30
+				</view>
+			</view>
+		</view>
+		<CustomTabBar></CustomTabBar>
+	</view>
 </template>
 
-<script>
+<script setup>
+	import {ref} from "vue";
+	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
+	let payType = ref('weixin')
+	function radioChange(data){
+		payType.value = data.detail.value;
+	}
 </script>
 
 <style>

pages/pay/svip.vue

@@ -6,7 +6,8 @@
 			<view class="nav-bar-icon"></view>
 			<view class="nav-bar-title">开通svip</view>
 		</view>
-		<icon class="svip-login"></icon>
+		<!-- :class="'svip-login'+Id" 改到下方 -->
+		<icon class="svip-login1"></icon>
 		<view class="svip-list-box">
 			<view v-for="(item, index) in svipArr" :key="index" class="list-item-box">
 				<icon class="list-icon" :style="{backgroundImage: 'url(' + item.iconPath + ')'}"></icon>