diff --git a/pages/card/card.vue b/pages/card/card.vue
index 7af5361..bfca580 100644
--- a/pages/card/card.vue
+++ b/pages/card/card.vue
@@ -1,53 +1,99 @@
 <template>
 
-	<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 -->
-	<z-paging ref="paging" v-model="data" @query="queryList" :auto='true'>
+	<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>
+			</view>
 
-		<view @click="bind"
-			style="background: #f1f2f3;width: 100%;height: 35px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
-			<image src="../../static/btn_bj.png" style="width: 15px;height: 15px;"></image>
-			<text style="line-height: 35px;text-align: center;color: red;margin-left: 5px;">绑定新卡</text>
 		</view>
 
-		<view style="display: flex;flex-direction: column;padding-top: 10px;">
+		<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 v-for="(item,index) in data" :key="index"
+					style="display: flex;flex-direction: column;align-items: center;margin-top: 10px; "
+					:class="item.showBtn==true?'oragin':'gray'" @click="detail(item)">
 
-			<view v-for="(item,index) in data" :key="index" style="display: flex;flex-direction: column;align-items: center;"
-				: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
+						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 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 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>
-					<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
+							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; ">
+
+						<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; ">
+
+								<text style="font-size: 12px;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="border: 1px #FED4B3 solid;margin-left: 10px;border-radius: 15px;padding:  3px 10px; font-size: 13px; color: #FF6000;">
+										{{item.state}}</text>
+
+								</view>
+							</view>
+
+						</view>
+						<view style="font-size: 12px;color:#fff;
+							border-radius: 15px; height: 18px;padding: 3px 8px;
+						 background: -webkit-linear-gradient(left,#FF7405,#FFAD6D);">预约提货</view>
 					</view>
+
+
 				</view>
-			</view>
 
-			<uni-popup ref="inputDialog" type="dialog">
-				<uni-popup-dialog ref="inputClose" mode="input" title="绑定新卡" :value="page.remarks" placeholder="请输入卡号"
-					@confirm="dialogInputConfirm"></uni-popup-dialog>
-			</uni-popup>
+			</z-paging>
 		</view>
-
-	</z-paging>
+	</view>
 
 </template>
 
@@ -58,7 +104,7 @@
 				page: {
 					remarks: ''
 				},
-				data: []
+				data: [],
 			}
 		},
 		onLoad() {
@@ -66,6 +112,7 @@
 				// 相当与下拉刷新
 				this.$refs.paging.reload(true);
 			})
+
 		},
 		onUnload() {
 			uni.$off('order');
@@ -121,6 +168,43 @@
 </script>
 
 <style>
+	.top {
+		width: 100%;
+		height: 60vh;
+		/* 加载背景图 */
+		background-image: url(../../static/OIP-C.jpg);
+		/* 让背景图基于容器大小伸缩 */
+		background-size: cover;
+	}
+
+	.btn {
+		margin-top: 45vh;
+		width: 83%;
+		margin-left: 30px;
+		margin-right: 30px;
+		background-color: #FFF;
+		border-radius: 20px;
+		display: flex;
+		height: 40px;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.item {
+		/* 加载背景图 */
+		background-image: url(../../static/card_item.png);
+		/* 让背景图基于容器大小伸缩 */
+		background-size: cover;
+	}
+	
+	.item2 {
+		/* 加载背景图 */
+		background-image: url(../../static/card_item2.png);
+		/* 让背景图基于容器大小伸缩 */
+		background-size: cover;
+	}
+
 	.use {
 		display: flex;
 		flex-direction: row;
diff --git a/static/OIP-C.jpg b/static/OIP-C.jpg
new file mode 100644
index 0000000..36b49e9
Binary files /dev/null and b/static/OIP-C.jpg differ
diff --git a/static/binding.png b/static/binding.png
new file mode 100644
index 0000000..c2d6062
Binary files /dev/null and b/static/binding.png differ
diff --git a/static/bomicon/bom_notPack.png b/static/bomicon/bom_notPack.png
new file mode 100644
index 0000000..2206eb0
Binary files /dev/null and b/static/bomicon/bom_notPack.png differ
diff --git a/static/bomicon/bom_notRecord.png b/static/bomicon/bom_notRecord.png
new file mode 100644
index 0000000..f4147d8
Binary files /dev/null and b/static/bomicon/bom_notRecord.png differ
diff --git a/static/bomicon/bom_pack.png b/static/bomicon/bom_pack.png
new file mode 100644
index 0000000..7bc1a99
Binary files /dev/null and b/static/bomicon/bom_pack.png differ
diff --git a/static/bomicon/bom_record.png b/static/bomicon/bom_record.png
new file mode 100644
index 0000000..f8a98fd
Binary files /dev/null and b/static/bomicon/bom_record.png differ
diff --git a/static/card_item.png b/static/card_item.png
new file mode 100644
index 0000000..c56d4cc
Binary files /dev/null and b/static/card_item.png differ
diff --git a/static/card_item2.png b/static/card_item2.png
new file mode 100644
index 0000000..b8e6e89
Binary files /dev/null and b/static/card_item2.png differ
diff --git a/static/hmoe_bj.png b/static/hmoe_bj.png
new file mode 100644
index 0000000..b14b659
Binary files /dev/null and b/static/hmoe_bj.png differ
diff --git a/static/pack.png b/static/pack.png
new file mode 100644
index 0000000..5b29a2d
Binary files /dev/null and b/static/pack.png differ
diff --git a/static/pack2.png b/static/pack2.png
new file mode 100644
index 0000000..bfc4b91
Binary files /dev/null and b/static/pack2.png differ