diff --git a/pages/card/card.vue b/pages/card/card.vue
index bfca580..0b4a1bd 100644
--- a/pages/card/card.vue
+++ b/pages/card/card.vue
@@ -3,91 +3,58 @@
 	<view style="display: flex;flex-direction: column;">
 
 		<view class="top">
-
-			<view class="btn" @click="bind">
-				<image src="@/static/binding.png" style="width: 20px;height: 20px;"></image>
-				<text
-					style="line-height: 35px;font-size: 18px; text-align: center;color: #FE6B00;margin-left: 10px;">绑定新卡</text>
+			<NavBar ref="nav" navTitle="首页" :showIcon="false" :start-change-height="page.startHeight"
+				:end-change-height="page.endHeight">
+			</NavBar>
+			<view style="display: flex;flex-direction: column;align-items: center;">
+				<view class="btn" @click="bind">
+					<image src="@/static/binding.png" style="width: 15px;height: 15px;"></image>
+					<text
+						style="height: 45px;line-height: 45px;font-size: 17px; text-align: center;color: #FE6B00;margin-left: 11px;">绑定新卡</text>
+				</view>
 			</view>
-
 		</view>
 
-		<view style="display: flex;flex-direction: column;
-				background-color: #fff;
-				height: 50vh; z-index: 100;
-				border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -20px;">
-			<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :auto='true' hight="30px"
-				:autoHeight='false'>
-
+		<view
+			style="display: flex;flex-direction: column;background-color: #fff;height: 50vh; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;">
 
+			<z-paging ref="paging" use-page-scroll v-model="data" @query="queryList" :refresher-enabled="false">
 
 				<view v-for="(item,index) in data" :key="index"
-					style="display: flex;flex-direction: column;align-items: center;margin-top: 10px; "
+					style="display: flex;flex-direction: column;align-items: center;margin-top: 14px; "
 					:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)">
 
-
-					<!-- 	<view
-						style="display: flex;flex-direction: column;border:  1px solid #e29a68;width: 90%;border-radius: 20rpx;margin-top: 8px;">
-
-						<view class="use">
-							<image style="width: 70rpx;height: 70rpx;position: absolute;right: 40px;"
-								src="../../static/card_line.png"></image>
-							<image src="../../static/gift.png" style="width: 30px;height: 30px;padding-left: 6px;">
-							</image>
-							<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;">
-								<view style="font-size: 14px;padding: 2px;padding-left: 5px;padding-top: 7px;">
-									{{item.name}}
-								</view>
-								<view style="font-size: 12px;padding-left: 5px;padding-bottom: 6px;">{{item.time}}
-								</view>
-							</view>
-
-							<view v-if="item.showBtn" @click.stop="booking(item.sid)"
-								style="flex-shrink: 0;padding: 9px;font-size: 13px;z-index: 1;font-weight: 600;">预约提货
-							</view>
-						</view>
-						<view
-							style="width: 100%;text-align: center;padding-top: 20px;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;background-color: #fdf0ee;">
-							<view style="font-size: 16px;color: red;">{{item.pname}}</view>
-							<view class="bottom"
-								style="padding-bottom: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;font-size: 12px;margin-top: 10px;color: #666;width: 100%;">
-								{{item.state}}
-							</view>
-						</view>
-					</view> -->
-
-
 					<view class="item" :class="{ item2: !item.showBtn }"
-						style="display: flex;flex-direction: row;width: 85%; margin-left: 10px; margin-right: 10px;  padding: 16px; ">
+						style="display: flex;flex-direction: row; padding: 16px;margin-left: 9px;margin-right: 9px;">
 
 						<view style="display: flex;flex-direction: row; align-items: center; flex: 1;">
 
 							<image src="@/static/pack.png" mode="aspectFill" v-show="item.showBtn"
 								style="width: 50px;height: 50px;margin-right: 10px;" />
-								
-								<image src="@/static/pack2.png" mode="aspectFill"  v-show="!item.showBtn"
-									style="width: 50px;height: 50px;margin-right: 10px;" />
 
-							<view style="display: flex;flex-direction: column;margin-right: 10px; ">
+							<image src="@/static/pack2.png" mode="aspectFill" v-show="!item.showBtn"
+								style="width: 50px;height: 50px;margin-right: 10px;" />
 
-								<text style="font-size: 12px;color: #333;"> {{item.name}}</text>
+							<view style="display: flex;flex-direction: column;padding-right: 10px;">
+
+								<text style="font-size: 13px;color: #333;"> {{item.name}}</text>
 								<text style="font-size: 12px;color: #999;margin-top: 5px;"> {{item.time}}</text>
 
 								<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
-									<text style="font-size: 12px;color: #FF7100;"> {{item.pname}}</text>
+									<text style="font-size: 15px;color: #FF7100;"> {{item.pname}}</text>
 									<text
-										style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding:  3px 10px; font-size: 13px; color: #FF6000;">
+										style="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding:  3px 10px; font-size: 12px; color: #FF6000;">
 										{{item.state}}</text>
-
 								</view>
 							</view>
 
 						</view>
-						<view style="font-size: 12px;color:#fff;
-							border-radius: 15px; height: 18px;padding: 3px 8px;
+
+						<view style="font-size: 12px;color:#fff;flex-shrink: 0;
+							border-radius: 15px; height: 30px;padding: 0px 12px;line-height: 30px;
 						 background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
-					</view>
 
+					</view>
 
 				</view>
 
@@ -102,7 +69,9 @@
 		data() {
 			return {
 				page: {
-					remarks: ''
+					remarks: '',
+					startHeight: 0,
+					endHeight: 0
 				},
 				data: [],
 			}
@@ -112,11 +81,18 @@
 				// 相当与下拉刷新
 				this.$refs.paging.reload(true);
 			})
+			let info = uni.getSystemInfoSync();
 
+			this.page.startHeight = info.windowWidth * 0.6
+			this.page.endHeight = info.windowWidth * 0.8
 		},
 		onUnload() {
 			uni.$off('order');
 		},
+		onPageScroll(res) {
+			// 渐变
+			this.$refs.nav.defaultColorBgAlpha(res)
+		},
 		methods: {
 			// 分页的请求
 			queryList(pageNo, pageSize) {
@@ -169,23 +145,20 @@
 
 <style>
 	.top {
-		width: 100%;
-		height: 60vh;
+		width: 100vw;
+		height: 126.66vw;
 		/* 加载背景图 */
-		background-image: url(../../static/OIP-C.jpg);
+		background-image: url(https://supervise.yxtsoft.com/lpk/image/hmoe_bj.png);
 		/* 让背景图基于容器大小伸缩 */
 		background-size: cover;
 	}
 
 	.btn {
-		margin-top: 45vh;
+		margin-top: 97.86vw;
 		width: 83%;
-		margin-left: 30px;
-		margin-right: 30px;
 		background-color: #FFF;
-		border-radius: 20px;
+		border-radius: 45px;
 		display: flex;
-		height: 40px;
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
@@ -195,14 +168,14 @@
 		/* 加载背景图 */
 		background-image: url(../../static/card_item.png);
 		/* 让背景图基于容器大小伸缩 */
-		background-size: cover;
+		background-size: 100% 100%;
 	}
-	
+
 	.item2 {
 		/* 加载背景图 */
 		background-image: url(../../static/card_item2.png);
 		/* 让背景图基于容器大小伸缩 */
-		background-size: cover;
+		background-size: 100% 100%;
 	}
 
 	.use {