From 2be61f0b6ce27c370dda0bd3ce768721c65345a7 Mon Sep 17 00:00:00 2001
From: 396316021 <396316021@qq.com>
Date: Tue, 8 Aug 2023 19:05:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A0=E7=89=A9=E5=88=97=E8=A1=A8=20?=
 =?UTF-8?q?=E6=9D=83=E7=9B=8A=E5=8D=A1=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                             |  10 +
 pages/Card/index.vue                   |  11 +-
 pages/CardDetail/components/index.scss | 316 +++++++++++++++++++++++++
 pages/CardDetail/index.vue             | 186 +++++++++++++++
 pages/Pet/components/index.scss        | 250 +++++++++++++++++++
 pages/Pet/index.vue                    | 121 ++++++++++
 pages/UserCoupons/index.vue            |   2 +-
 7 files changed, 892 insertions(+), 4 deletions(-)
 create mode 100644 pages/CardDetail/components/index.scss
 create mode 100644 pages/CardDetail/index.vue
 create mode 100644 pages/Pet/components/index.scss
 create mode 100644 pages/Pet/index.vue

diff --git a/pages.json b/pages.json
index e8cfe4a..dc941a5 100644
--- a/pages.json
+++ b/pages.json
@@ -36,6 +36,16 @@
             "style" : {
                 "navigationBarTitleText" : "付款权益卡"
             }
+        },{
+            "path" : "pages/CardDetail/index",
+            "style" : {
+                "navigationBarTitleText" : "付款权益卡详情"
+            }
+        },{
+            "path" : "pages/Pet/index",
+            "style" : {
+                "navigationBarTitleText" : "萌宠画册"
+            }
         }
     ],
     "globalStyle" : {
diff --git a/pages/Card/index.vue b/pages/Card/index.vue
index 9cc663d..c8a05a1 100644
--- a/pages/Card/index.vue
+++ b/pages/Card/index.vue
@@ -34,7 +34,7 @@
 												抵扣券有效期：购卡后
 											</view>
 										</view>
-										<view class="card-btn">
+										<view class="card-btn" @click="navTo('/pages/CardDetail/index')">
 											<MzButton
 													title="开始预约"
 													font-color="#FFFFFF"
@@ -42,7 +42,8 @@
 													button-width="255rpx"
 													padding-tb="10rpx"
 													font-size="28rpx"
-													class="card-button"></MzButton>
+													class="card-button"
+                      ></MzButton>
 										</view>
 									</view>
 								</view>
@@ -119,7 +120,11 @@
 
 		},
 		methods: {
-
+      navTo(url){
+        wx.navigateTo({
+          url:url
+        })
+      },
 		},
 		onPageScroll(res) {
 			if(res.scrollTop <= 20){
diff --git a/pages/CardDetail/components/index.scss b/pages/CardDetail/components/index.scss
new file mode 100644
index 0000000..74614a5
--- /dev/null
+++ b/pages/CardDetail/components/index.scss
@@ -0,0 +1,316 @@
+.app-wallpaper{
+	position: relative;
+	background:{
+		size: 100% 100%;
+		repeat: no-repeat;
+	};
+	padding:0;
+	padding-bottom: 30rpx;
+	padding-top: 30rpx;
+	.item-end{
+		font-size: 28rpx;
+		font-weight: 400;
+		color: #ACB4B6;
+		line-height: 30rpx;
+		justify-content: center;
+		margin-top:8rpx;
+	}
+	.detail-box-top{
+		//height:300rpx;
+		width:100%;
+		position: relative;
+		bottom:30rpx;
+
+		.top-shadow{
+			width:100%;
+			height:70rpx;
+			background: #F7F7F7;
+			clip-path: polygon(95% 0%, 100% 100%, 0% 100%, 5% 0%);
+			box-shadow: 0rpx -9rpx 27rpx 0rpx rgba(51,72,70,0.2);
+			position: absolute;
+			bottom:0;
+			left:0;
+			z-index: 1;
+			border-top-left-radius: 150rpx;
+			border-top-right-radius: 150rpx;
+		}
+		.card-padding{
+			padding:30rpx;
+			padding-top:0;
+			padding-bottom:0;
+		}
+		.card-container{
+			background:{
+				position: 0 0;
+				size: 100% 100%;
+			}
+			.card-container-background{
+
+			}
+
+			width:100%;
+			box-sizing: border-box;
+			padding:30rpx 30rpx;
+			padding-bottom: 0;
+			position: relative;
+			z-index: 2;
+			.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{
+				padding-bottom:30rpx;
+				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: flex-start;
+					.card-avatar{
+						width:70rpx;
+						height:70rpx;
+						.img{
+							width:70rpx;
+							height:70rpx;
+						}
+					}
+					.card-content{
+						font-size: 24rpx;
+						font-weight: 400;
+						color: #656565;
+						margin-left:22rpx;
+					}
+				}
+				.card-title{
+					padding-top:5px;
+					font-size:32rpx;
+					font-weight: 500;
+					line-height: 1;
+					color:#131313;
+				}
+
+			}
+		}
+	}
+	.detail-box-bottom{
+		background:{
+			color:#ffffff;
+		}
+		min-height:200rpx;
+		.coupons-list{
+			padding:50rpx 30rpx;
+			box-sizing: border-box;
+			.coupons-item-container{
+				padding:{
+					bottom:7rpx;
+				}
+				background:{
+					size: 100% 100%;
+					repeat: no-repeat;
+				};
+				.coupons-item{
+					box-sizing: border-box;
+
+					height:178rpx;
+					padding:{
+						top:28rpx;
+						bottom:46rpx;
+						left:10rpx;
+						right:59rpx;
+					}
+					.coupons-left{
+						width:170rpx;
+						padding-top:0rpx;
+						.coupons-big-title-group{
+							align-items: flex-end;
+							justify-content: center;
+							.coupons-big-title{
+								text-align: center;
+								font-size: 62rpx;
+								font-weight: 800;
+								color: #FFFFFF;
+								line-height: 1;
+								text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21);
+							}
+							.coupons-big-desc{
+								font-size: 32rpx;
+								font-weight: bold;
+								color: #FFFFFF;
+								line-height: 70rpx;
+								text-shadow: 0rpx 0rpx 14rpx rgba(209,145,70,0.21);
+							}
+						}
+						.coupons-cause{
+							margin-top:15rpx;
+							text-align: center;
+							font-size: 26rpx;
+							font-family: Source Han Sans CN;
+							font-weight: 400;
+							color: #FFFFFF;
+						}
+					}
+					.coupons-right{
+						padding:10rpx 0 0 20rpx;
+						justify-content: space-between;
+						.coupons-gq{
+							width:80rpx;
+							height:80rpx;
+							.img{
+								width:75rpx;
+								height:75rpx;
+							}
+						}
+						.coupons-title{
+							font-size: 32rpx;
+							font-weight: 500;
+							color: #161616;
+						}
+						.coupons-btn{
+							margin-left:auto;
+							color:#4EC2B7;
+							font-size:28rpx;
+							font-weight: 400;
+							border:1rpx dashed #4EC2B7;
+							border-radius: 10rpx;
+							background:{
+								color:#E3FEFB;
+							}
+							padding:3rpx 15rpx;
+						}
+						.coupons-desc{
+							margin:20rpx 0;
+							font-size: 24rpx;
+							font-weight: 400;
+							color: #999999;
+						}
+						.coupons-bottom{
+							border-top: 1px solid #F0F1F6;
+							align-items: center;
+							justify-content: space-between;
+							margin:15rpx 0;
+							.coupons-rule{
+
+								font-size: 24rpx;
+								font-weight: 400;
+								color: #999999;
+								.u-icon{
+									margin-left:3rpx;
+									position: relative;
+									top:2rpx;
+									flex-direction: row;
+									align-items: center;
+
+								}
+							}
+							.coupons-button{
+								padding:10rpx;
+								font-size: 26rpx;
+								font-weight: 500;
+								color: #FFFFFF;
+								line-height: 30rpx;
+								text-shadow: 0rpx 3rpx 2rpx rgba(77,195,184,0.16);
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+.body-background{
+	background:{
+		size: 110% 110%;
+		repeat: no-repeat;
+	};
+	height:500rpx;
+}
+.footer-menu{
+	align-items: center;
+	padding:30rpx;
+	position: fixed;
+	bottom:0;
+	left:0;
+	width: 100%;
+	background: #FFFFFF;
+	border: 2rpx solid #262626;
+	box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(0,0,0,0.06);
+	border-radius: 26rpx 26rpx 0rpx 0rpx;
+	.foot-menu-checkbox{
+		margin-right:8rpx;
+		width: 28rpx;
+		height: 28rpx;
+		background: #FFFFFF;
+		border: 2px solid #131313;
+		border-radius: 50%;
+	}
+	.foot-menu-title{
+		font-size: 26rpx;
+		.foot-menu-url{
+			color:#4DC3B8;
+		}
+	}
+}
\ No newline at end of file
diff --git a/pages/CardDetail/index.vue b/pages/CardDetail/index.vue
new file mode 100644
index 0000000..9e5bb08
--- /dev/null
+++ b/pages/CardDetail/index.vue
@@ -0,0 +1,186 @@
+<template>
+	<HeaderNav title="付款权益卡" :is-back="true"></HeaderNav>
+	<view class="body-background" :style="{
+		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
+		}"></view>
+	<view class="app-wallpaper">
+    <view class="detail-box-container">
+      <view class="detail-box-top">
+        <view class="card-padding">
+          <view class="card-container row" :style="{backgroundImage:'url('+staticImage.cardDetailCard+')'}">
+            <view class="card-container-background col-12"></view>
+            <view class="card-container-background-main row">
+              <view class="card-col row" >
+
+                <view class="card-right">
+                  <view class="card-title">宠托10次权益卡</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>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="top-shadow">
+
+        </view>
+      </view>
+      <view class="detail-box-bottom">
+        <view class="coupons-list">
+          <view v-for="item in couponsList" class="coupons-item-container" :style="{
+					backgroundImage:'url('+(staticImage.couponsBackground)+')'
+					}">
+            <view class="coupons-item row">
+              <view class="coupons-left ">
+                <view class="coupons-big-title-group row">
+                  <view class="coupons-big-title">{{item.price}}</view>
+                  <view class="coupons-big-desc">元</view>
+                </view>
+                <view class="coupons-cause">
+                  {{item.cause}}
+                </view>
+              </view>
+              <view class="coupons-right col row">
+                <view class=" row">
+                  <view class="coupons-title-group col-12 row">
+                    <view class="coupons-title">
+                      {{item.title}}
+                    </view>
+                    <view class="coupons-btn">
+                      10张
+                    </view>
+                  </view>
+                  <view class="coupons-desc col-12">{{item.time}}</view>
+                </view>
+                <view class="coupons-gq " v-show="item.is_timeout">
+                  <image class="img" :src="staticImage.couponsGQ" mode="aspectFill" />
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+	</view>
+  <view class="footer-menu row">
+    <view class="foot-menu-checkbox-group row col">
+      <view class="foot-menu-checkbox"></view>
+      <view class="foot-menu-title">
+        <text>我已阅读并同意</text><text class="foot-menu-url">《付费权益卡协议》</text>
+      </view>
+    </view>
+    <MzButton
+        title="立即购买"
+        button-color="#4DC3B8"
+        font-color="#FFFFFF"
+        button-width="200rpx"
+    >
+    </MzButton>
+  </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-detail-background.png',
+					dogImage:imghost+'/static/image/index-user-title-dog.png',
+          cardDetailCard:imghost+'/static/image/card-detail-card.png',
+          couponsBackground:imghost+'/static/image/card-detail-coupons.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',
+					},
+				],
+        couponsList: [{
+          price: '57',
+          title: '57元抵扣券',
+          cause: '满0.01使用',
+          time: '满0.01元使用仅限线上预约下单使用',
+          is_timeout: false,
+        }]
+			}
+		},
+		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/Pet/components/index.scss b/pages/Pet/components/index.scss
new file mode 100644
index 0000000..95f366a
--- /dev/null
+++ b/pages/Pet/components/index.scss
@@ -0,0 +1,250 @@
+.app-wallpaper{
+	position: relative;
+	background:{
+		size: 100% 100%;
+		repeat: no-repeat;
+	};
+	.order-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;
+		.order-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;
+			}
+		}
+	}
+	.order-screen-container{
+		.order-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;
+				.order-screen-active{
+					display:flex;
+				}
+			}
+			.order-screen-active{
+				display: none;
+				align-items: center;
+				justify-content: center;
+				.img{
+					width:37rpx;
+				}
+			}
+			
+		}
+		.order-screen-time-container{
+			flex:1;
+			margin-left:auto;
+			justify-content: flex-end;
+			.order-screen{
+				// padding-right:0;
+			}
+		}
+			.order-screen-time-title{
+				color:#B5B5B5;
+				font-size:26rpx;
+				font-weight: 400;
+				line-height:53rpx;
+				padding-right: 16rpx;
+			}
+			.order-screen-time-buttton-container{
+				padding-right: 0;
+			}
+			.order-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);
+			}
+	}
+	.order-list-container{
+		width:100%;
+		max-height: 1000rpx;
+		height: 100%;
+		overflow: auto;
+		box-sizing: border-box;
+		
+		.order-list-item{
+			position: relative;
+			.pet-gun{
+				background:{
+					size: 80% 100%;
+					repeat: no-repeat;
+					position: center center;
+				}
+				height:90rpx;
+				width:100%;
+				position: absolute;
+				top:-60rpx;
+				z-index: 1;
+			}
+			margin-bottom:30rpx;
+			width:100%;
+			box-sizing: border-box;
+			.order-card-container{
+				width:100%;
+				box-sizing: border-box;
+				padding:10rpx 10rpx;
+				position: relative;
+				box-sizing: border-box;
+				.order-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;
+					};
+				}
+				.order-card-container-background-main{
+					
+					width:100%;
+					background:{
+						color:#FFFFFF;
+					}
+					border-radius: 26rpx;
+					border: 3rpx solid #262626;
+					padding:7rpx;
+					box-sizing:border-box;
+					.order-card-col{
+						width:100%;
+						box-sizing: border-box;
+						padding:20rpx;
+						background:{
+							size:100% 100%;
+							position: center center;
+							repeat:no-repeat;
+						}
+					}
+				}
+				
+				
+				.order-card-left{
+					align-items: center;
+					.left-background{
+						box-sizing: border-box;
+						width:135rpx;
+						height:135rpx;
+						border-radius: 50%;
+						align-items: center;
+						justify-content: center;
+						display: flex;
+						background:{
+							color:#EED9AD;
+						}
+					}
+
+					//height:auto;
+					margin-right: 25rpx;
+					.img{
+						width:110rpx;
+						height:110rpx;
+						border-radius: 50%;
+					}
+				}
+				.order-card-right{
+					border-radius: 30rpx;
+					align-items: center;
+					justify-content: center;
+					background:{
+						color:#FBF5E7;
+					}
+					text-align: center;
+					padding:30rpx;
+					padding-left:20rpx;
+					.order-card-title{
+						padding-top:5px;
+						font-size:32rpx;
+						font-weight: 500;
+						line-height: 30rpx;
+						color:#131313;
+					}
+					.order-card-tag-container{
+						padding-top:18rpx;
+						.order-card-tag{
+							padding:9rpx 20rpx;
+							background:{
+								color:#E9FBF7;
+							}
+							color:#4DC3B8;
+							font-size:26rpx;
+							font-weight:400;
+							line-height:1;
+							border-radius:6rpx;
+							&+.order-card-tag{
+								margin-left:9rpx;
+							}
+						}
+					}
+					.order-card-day{
+						
+					}
+					.order-card-pay-time{
+						
+					}
+					.order-card-day,.order-card-pay-time{
+						padding-top:20rpx;
+						font-size:28rpx;
+						font-weight:400;
+						line-height:30rpx;
+						color:#767676;
+						.card-label{
+							color:#1B1B1B;
+						}
+					}
+				}
+				.order-card-bottom{
+					padding-top:30rpx;
+					justify-content: center;
+				}
+				.card-button{
+					&:nth-child(1){
+						padding-right:23rpx;
+					}
+					&:nth-child(2){
+						padding-left:23rpx;
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/pages/Pet/index.vue b/pages/Pet/index.vue
new file mode 100644
index 0000000..0f98f2c
--- /dev/null
+++ b/pages/Pet/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <HeaderNav title="萌宠画册" :is-back="true"></HeaderNav>
+	<view class="app-wallpaper" :style="{
+		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
+		}">
+
+		<view class="order-screen-container row">
+			<view class="order-list-container">
+				<view class="order-list-item" v-for="(item,index) in orderCardList">
+          <view v-show="index!=0" class="pet-gun" :style="{
+          backgroundImage:'url('+staticImage.petGun+')'
+          }"></view>
+					<view class="order-card-container row">
+						<view class="order-card-container-background col-12"></view>
+						<view class="order-card-container-background-main row">
+							<view class="order-card-col row">
+								<view class="order-card-left">
+									<view class="left-background">
+                    <image class="img" :src="petImage" mode="aspectFill" />
+                  </view>
+								</view>
+								<view class="order-card-right col row">
+                  <view class="col">
+                    <view class="name ">靓仔</view>
+                    <view class="old">2岁</view>
+                  </view>
+                  <view class="col">
+                    <view class="type">英短</view>
+                    <view class="weight">8kg</view>
+                  </view>
+								</view>
+
+							</view>
+						</view>
+					</view>
+				</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/order-screen-active.png',
+					orderCardBackground: imghost + '/static/image/order-card-background.png',
+					wallpaperBgImage:imghost +'/static/image/background.png',
+          petGun:imghost +'/static/image/pet_gun.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/UserCoupons/index.vue b/pages/UserCoupons/index.vue
index 9782b63..747226e 100644
--- a/pages/UserCoupons/index.vue
+++ b/pages/UserCoupons/index.vue
@@ -141,5 +141,5 @@
 </script>
 
 <style lang="scss">
-	@import '@/pages/UserCoupons/components/index.scss';
+	@import './components/index.scss';
 </style>
\ No newline at end of file