diff --git a/components/MzButton/index.vue b/components/MzButton/index.vue
index b199e4a..79bbbd1 100644
--- a/components/MzButton/index.vue
+++ b/components/MzButton/index.vue
@@ -71,5 +71,5 @@
 </script>
 
 <style lang="scss">
-	@import '@/components/MzButton/components/index.scss';
+	@import './components/index.scss';
 </style>
\ No newline at end of file
diff --git a/pages/AddrDetail/components/index.scss b/pages/AddrDetail/components/index.scss
index be075c9..15a25c8 100644
--- a/pages/AddrDetail/components/index.scss
+++ b/pages/AddrDetail/components/index.scss
@@ -4,6 +4,7 @@
 		size: 100% 100%;
 		repeat: no-repeat;
 	};
+	padding-bottom: 30rpx;
 	.container-background-group{
 		position: relative;
 		padding:{
@@ -22,15 +23,72 @@
 			.door_pass{
 				font-size:28rpx;
 			}
+			.xq-label{
+				color:#131313;
+				font-size: 28rpx;
+				font-weight: 500;
+				line-height: 1;
+				margin:{
+					top:0rpx;
+					bottom:20rpx;
+				}
+			}
+			.xq-textarea{
+				background-color: #F2F8F8;
+				width:100%;
+				height:145rpx;
+				padding:30rpx;
+				box-sizing: border-box;
+
+			}
+			.u-form-item .u-form-item__body{
+				padding:35rpx 0;
+			}
+			.u-form-item:nth-child(4) .u-form-item__body{
+				padding-bottom: 0;
+			}
+			.u-form-item__body__left__content__label{
+				font-size: 28rpx;
+				font-weight: 500;
+				color: #131313;
+				line-height: 1;
+			}
 			.radio-group{
+				justify-content: flex-end;
 				.radio-option{
+					box-sizing: border-box;
+					justify-content: flex-end;
+					align-items: center;
+					width:150rpx;
+					margin-left:60rpx;
 					.radio-circle{
+						box-sizing: border-box;
 						width:28rpx;
 						height:28rpx;
 						border:2rpx solid #636363;
 						border-radius: 50%;
+						margin-right:15rpx;
 					}
 					.radio-label{}
+					&.active{
+						.radio-circle{
+							width:28rpx;
+							height:28rpx;
+							border:2rpx solid #4DC3B8;
+							border-radius: 50%;
+							margin-right:15rpx;
+							padding:5rpx;
+							.radio-circle-in{
+								width:100%;
+								height:100%;
+								background-color: #4DC3B8;
+								border-radius: 50%;
+							}
+						}
+						.radio-label{
+							color:#4DC3B8;
+						}
+					}
 				}
 			}
 			.submit-button{
diff --git a/pages/AddrDetail/index.vue b/pages/AddrDetail/index.vue
index 8e03b40..c22e7a5 100644
--- a/pages/AddrDetail/index.vue
+++ b/pages/AddrDetail/index.vue
@@ -23,28 +23,21 @@
 						</template>
 					</u-form-item>
 					
-					<u-form-item labelPosition="top" label="详细地址" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
-						ref="item1">
-						<template v-slot:label>
-							<view class="xq-label">详细地址</view>
-							<u--textarea v-model="model1.userInfo.sex" placeholder="请填写详细地址信息,精确到门牌号" ></u--textarea>
-						</template>
+					<u-form-item label="" prop="userInfo.sex" :borderBottom="false" ref="item1" class="row">
+						<view class="xq-label">详细地址</view>
+						<textarea class="xq-textarea" cols="30" rows="10" placeholder="请填写详细地址信息,精确到门牌号"></textarea>
 					</u-form-item>
-					<u-form-item label="门锁密码" prop="userInfo.name" borderBottom ref="item1" inputAlign="right">
-						<u-radio-group
-						    v-model="radiovalue1"
-						    placement="row"
-						  >
-						    <u-radio
-						      :customStyle="{marginBottom: '8rpx'}"
-						      v-for="(item, index) in radiolist1"
-						      :key="index"
-						      :label="item.name"
-						      :name="item.name"
-                  class="door_pass"
-						    >
-						    </u-radio>
-						  </u-radio-group>
+					<u-form-item label="门锁密码" prop="userInfo.name" borderBottom ref="item1" inputAlign="right" style="border-bottom:none;">
+						<view class="radio-group row">
+							<view class="radio-option row " :class="{active:item.disabled}" v-for="(item,index) in radiolist1" @click="checkLock(index)">
+								<view class="radio-circle">
+									<view class="radio-circle-in"></view>
+								</view>
+								<view class="radio-label">
+									{{item.name}}
+								</view>
+							</view>
+						</view>
 					</u-form-item>
 					<u-form-item label="普通锁" prop="userInfo.name" borderBottom ref="item1">
 						<u--input v-model="model1.userInfo.name" border="none" inputAlign="right"></u--input>
@@ -141,7 +134,15 @@
 
 		},
 		methods: {
-
+			checkLock(index){
+				this.radiolist1.forEach((item,num) => {
+					if(index === num){
+						this.radiolist1[num].disabled = true;
+					}else{
+						this.radiolist1[num].disabled = false;
+					}
+				})
+			}
 		},
 		onPageScroll(res) {
 			if (res.scrollTop <= 20) {
diff --git a/pages/Card/components/index.scss b/pages/Card/components/index.scss
new file mode 100644
index 0000000..84f5133
--- /dev/null
+++ b/pages/Card/components/index.scss
@@ -0,0 +1,219 @@
+.app-wallpaper{
+	position: relative;
+	background:{
+		size: 100% 100%;
+		repeat: no-repeat;
+	};
+	.capsule-container{
+		position: sticky;
+		
+		box-sizing: border-box;
+		width:100%;
+		padding:10rpx;
+		border:2rpx solid #262626;
+		border-radius: 45rpx;
+		box-shadow: 1rpx 4rpx 12rpx 0rpx rgba(90,104,103,0.24);
+		background-color: #F8FAFA;
+		.capsule{
+			box-sizing: border-box;
+			padding:20rpx;
+			text-align: center;
+			font: {
+				size:30rpx;
+				weight:500;
+			}
+			line-height:30rpx;
+			border:2rpx solid rgba(0,0,0,0);
+			&.active{
+				background:{
+					color:#4DC3B8;
+				}
+				color:#FFFFFF;
+				border:2rpx solid #262626;
+				border-radius:35rpx;
+			}
+		}
+	}
+	.screen-container{
+		.screen{
+			padding:40rpx 0 20rpx 0;
+			padding-right: 66rpx;
+			font-size: 28rpx;
+			line-height: 53rpx;
+			color:#646464;
+			font-weight: 400;
+			&.active{
+				color:#000000;
+				font-size: 32rpx;
+				font-weight: 500;
+				.screen-active{
+					display:flex;
+				}
+			}
+			.screen-active{
+				display: none;
+				align-items: center;
+				justify-content: center;
+				.img{
+					width:37rpx;
+				}
+			}
+			
+		}
+		.screen-time-container{
+			flex:1;
+			margin-left:auto;
+			justify-content: flex-end;
+			.screen{
+				// padding-right:0;
+			}
+		}
+			.screen-time-title{
+				color:#B5B5B5;
+				font-size:26rpx;
+				font-weight: 400;
+				line-height:53rpx;
+				padding-right: 16rpx;
+			}
+			.screen-time-buttton-container{
+				padding-right: 0;
+			}
+			.screen-time-buttton{
+				padding:8rpx 19rpx;
+				color:#4EC2B7;
+				font-size: 28rpx;
+				font-weight: 400;
+				background-color:#ffffff;
+				border:1px solid #4EC2B7;
+				border-radius: 10rpx;
+				line-height: 28rpx;
+				box-shadow: 0rpx 4rpx 5rpx 0rpx rgba(82,84,84,0.1), 2rpx -4rpx 0rpx 0rpx rgba(78,194,183,0.2);
+			}
+	}
+	.list-container{
+		width:100%;
+		max-height: 1000rpx;
+		height: 100%;
+		overflow: auto;
+		box-sizing: border-box;
+		
+		.list-item{
+			margin-bottom:30rpx;
+			width:100%;
+			box-sizing: border-box;
+			.card-container{
+				width:100%;
+				box-sizing: border-box;
+				padding:10rpx 10rpx;
+				position: relative;
+				box-sizing: border-box;
+				.card-container-background{
+					
+					width:100%;
+					height:90%;
+					position: absolute;
+					left:0rpx;
+					z-index: -1;
+					bottom:0rpx;
+					border: 3rpx solid #262626;
+					box-shadow: 2rpx 6rpx 11rpx 0rpx rgba(159,167,185,0.3);
+					border-radius: 26rpx;
+					background: {
+						color:#EED9AD;
+					};
+				}
+				.card-container-background-main{
+					
+					width:100%;
+					background:{
+						color:#FFFFFF;
+					}
+					border-radius: 26rpx;
+					border: 3rpx solid #262626;
+					padding:7rpx;
+					box-sizing:border-box;
+					.card-col{
+						width:100%;
+						box-sizing: border-box;
+						padding:30rpx;
+						background:{
+							size:100% 100%;
+							position: center center;
+							repeat:no-repeat;
+						}
+					}
+				}
+				
+
+				.card-right{
+					width:100%;
+					.card-title{
+						font-size: 40rpx;
+						font-weight: bold;
+						color: #18181B;
+					}
+					.card-desc-container{
+						display: flex;
+						padding:20rpx 0rpx;
+						.card-desc{
+							padding:10rpx 0;
+							position: relative;
+							.card-desc-text{
+								position: relative;
+								z-index: 2;
+								font-size: 30rpx;
+								font-weight: 500;
+								color: #18181B;
+							}
+							.card-desc-background{
+								position: absolute;
+								bottom:0;
+								left:0;
+								z-index: 1;
+								width:100%;
+								height:50%;
+								background:{
+									color:#E3BF77;
+								}
+							}
+						}
+
+					}
+					.card-content-container{
+
+						justify-content: space-between;
+						.card-avatar{
+							width:70rpx;
+							height:70rpx;
+							.img{
+								width:70rpx;
+								height:70rpx;
+							}
+						}
+						.card-content{
+							font-size: 24rpx;
+							font-weight: 400;
+							color: #656565;
+						}
+					}
+					.card-title{
+						padding-top:5px;
+						font-size:32rpx;
+						font-weight: 500;
+						line-height: 1;
+						color:#131313;
+					}
+
+				}
+			}
+		}
+	}
+	.item-end{
+		font-size: 28rpx;
+		font-weight: 400;
+		color: #ACB4B6;
+		line-height: 30rpx;
+		justify-content: center;
+		margin-top:8rpx;
+	}
+}
\ No newline at end of file
diff --git a/pages/Card/index.vue b/pages/Card/index.vue
new file mode 100644
index 0000000..9cc663d
--- /dev/null
+++ b/pages/Card/index.vue
@@ -0,0 +1,140 @@
+<template>
+	<HeaderNav title="付款权益卡" :is-back="true"></HeaderNav>
+	<view class="body-background" :style="{
+		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
+		}"></view>
+	<view class="app-wallpaper">
+
+		<view class="screen-container row">
+
+			<view class="list-container">
+				<view class="list-item" v-for="item in orderCardList">
+					<view class="card-container row">
+						<view class="card-container-background col-12"></view>
+						<view class="card-container-background-main row">
+							<view class="card-col row" :style="{backgroundImage:'url('+staticImage.cardBackground+')'}">
+
+								<view class="card-right">
+									<view class="card-title">{{item.title}}</view>
+									<view class="card-desc-container">
+										<view class="card-desc">
+											<view class="card-desc-text">300元购500元券包</view>
+											<view class="card-desc-background"></view>
+										</view>
+									</view>
+									<view class="card-content-container row">
+										<view class="card-avatar">
+											<image class="img" mode="aspectFit" :src="staticImage.dogImage"/>
+										</view>
+										<view class="card-content">
+											<view class="card-content-top">
+												券内含50元抵扣券10张
+											</view>
+											<view class="card-content-bottom">
+												抵扣券有效期：购卡后
+											</view>
+										</view>
+										<view class="card-btn">
+											<MzButton
+													title="开始预约"
+													font-color="#FFFFFF"
+													button-color="#4DC3B8"
+													button-width="255rpx"
+													padding-tb="10rpx"
+													font-size="28rpx"
+													class="card-button"></MzButton>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="item-end row">
+					— 没有更多内容了 —
+				</view>
+			</view>
+		</view>
+	</view>
+
+	<!-- <RightNav></RightNav> -->
+</template>
+
+<script>
+	import {
+		imghost
+	} from '@/config/host.js'
+	import HeaderNav from '@/components/HeaderNav/Index.vue';
+	import FooterNav from '@/components/FooterNav/Index.vue';
+	import RightNav from '@/components/RightNav/Index.vue';
+	import MzButton from '../../components/MzButton/Index.vue';
+	import api from '@/utils/functions.js';
+	export default {
+		components: {
+			HeaderNav,
+			FooterNav,
+			RightNav,
+			MzButton
+		},
+		data() {
+			return {
+				title: 'Hello',
+				loading: true,
+				staticImage: {
+					screenActiveImg: imghost + '/static/image/screen-active.png',
+					cardBackground: imghost + '/static/image/order-card-background.png',
+					wallpaperBgImage:imghost +'/static/image/card-background.png',
+					dogImage:imghost+'/static/image/index-user-title-dog.png',
+				},
+				indexBanner: [{
+					image: imghost + '/static/image/banner.png',
+					url: '',
+				}],
+				user: {
+					avatar: imghost + '/static/image/banner.png',
+					nickname: '清晨的风',
+					coupons: 221,
+					id: 88685
+				},
+				isTop: false,
+				pagePadding: 100,
+				petImage: imghost + '/static/image/pet_avatar1.jpeg',
+				orderCardList:[
+					{
+						title:'成都市武侯区丰德国际4栋...',
+						tags:['刷毛','洗澡'],
+						do_time:'2023/05/03 15—17时',
+						create_time:'2023/03/03 15:23:22',
+					},
+					{
+						title:'成都市武侯区丰德国际4栋...',
+						tags:['刷毛','洗澡'],
+						do_time:'2023/05/03 15—17时',
+						create_time:'2023/03/03 15:23:22',
+					},
+				]
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+		},
+		onPageScroll(res) {
+			if(res.scrollTop <= 20){
+				uni.$emit('isTop', true);
+			}else{
+				uni.$emit('isTop', false);
+			}
+		},
+		created() {
+			this.pagePadding = (api.navHeight().navPaddingTop +
+				api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import './components/index.scss';
+</style>
\ No newline at end of file
diff --git a/pages/Index/components/HomePage/index.vue b/pages/Index/components/HomePage/index.vue
index 6ccf42d..2c786f7 100644
--- a/pages/Index/components/HomePage/index.vue
+++ b/pages/Index/components/HomePage/index.vue
@@ -39,7 +39,7 @@
 			<view class="index-button-detail col-6" v-for="(item) in staticImage.indexButtonGroup">
 				<view class="index-button-detail-container row" :style="{
 					backgroundImage:'url('+item.backgroundImage+')'
-				}">
+				}" @click="navTo(item.url)">
 					<view class="col-12">
 						<image mode="widthFix" class="img"
 							:src="item.serviceImage"/>
@@ -72,18 +72,22 @@
 							backgroundImage:imghost+'/static/image/index-button-one.png',
 							serviceImage:imghost+'/static/image/index-button-bg-one.png',
 							buttonImage:imghost+'/static/image/index-button-bg-btn-one.png',
+							url:'/pages/Index/index'
 						},{
 							backgroundImage:imghost+'/static/image/index-button-two.png',
 							serviceImage:imghost+'/static/image/index-button-bg-two.png',
 							buttonImage:imghost+'/static/image/index-button-bg-btn-two.png',
+							url:'/pages/Index/index'
 						},{
 							backgroundImage:imghost+'/static/image/index-button-three.png',
 							serviceImage:imghost+'/static/image/index-button-bg-three.png',
 							buttonImage:imghost+'/static/image/index-button-bg-btn-three.png',
+							url:'/pages/Card/index'
 						},{
 							backgroundImage:imghost+'/static/image/index-button-four.png',
 							serviceImage:imghost+'/static/image/index-button-bg-four.png',
 							buttonImage:imghost+'/static/image/index-button-bg-btn-four.png',
+							url:'/pages/Index/index'
 						},
 					],
 					wallpaperBgImage:imghost+'/static/image/background.png'
@@ -111,7 +115,12 @@
 				wx.navigateTo({
 					url:'/pages/UserCoupons/index'
 				})
-			}
+			},
+			navTo(url){
+				wx.navigateTo({
+					url:url
+				})
+			},
 		},
 		onPageScroll(res) {
 			if(res.scrollTop <= 20){