diff --git a/components/common-card/horizontal-name-card.vue b/components/common-card/horizontal-name-card.vue
new file mode 100644
index 0000000..83b9e4f
--- /dev/null
+++ b/components/common-card/horizontal-name-card.vue
@@ -0,0 +1,59 @@
+<template>
+	<view class="product-item flex justify-start">
+		<view class="cu-avatar xl-view" :style="'background-image:url(' + vCard.picUrl + ');'">
+		</view>
+		<view class="margin-left-sm product-content">
+			<view>
+				<view class="text-black text-xl">{{vCard.name}}</view>
+				<view>
+					<text v-if="vCard.comments.icon" :class="'cuIcon-' + vCard.comments.icon" class="margin-right-xs text-main-color"></text>
+					<text>{{vCard.comments.desc}}</text>
+				</view>
+			</view>
+			<view v-for="(item, index) in vCard.extraInfos">
+				<view class="text-sm">
+					<text v-if="item.icon" :class="'cuIcon-' + item.icon" class="margin-right-xs text-main-color"></text>
+					<text>{{item.desc}}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'horizontal-name-card',
+		props: {
+			vCard: {
+				type: Object,
+				default: {}
+			}
+		},
+		data() {
+			return {
+
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.xl-view {
+		min-width: 150rpx;
+		min-height: 150rpx;
+	}
+	
+	.product-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
+		display: inline-block;
+		margin-left: 0;
+		height: 28rpx;
+		font-size: 16rpx;
+		line-height: 32rpx;
+	}
+</style>
diff --git a/components/goods-card/horizontal-goods-card.vue b/components/goods-card/horizontal-goods-card.vue
new file mode 100644
index 0000000..d5fff76
--- /dev/null
+++ b/components/goods-card/horizontal-goods-card.vue
@@ -0,0 +1,70 @@
+<template>
+	<view class="product-item flex justify-start">
+		<view class="cu-avatar xxl-view" :style="'background-image:url(' + product.picUrl + ');'">
+		</view>
+		<view class="margin-left-sm product-content">
+			<view>
+				<view class="text-black">{{product.name}}</view>
+				<view class="text-sm">{{product.comments}}</view>
+			</view>
+			<view class="text-price text-red text-bold text-xl" v-if="ifShowPrice">{{product.salePrice}}</view>
+			<view v-if="ifShowServArea">
+				<view class="cu-capsule">
+					<view class='cu-tag bg-main-color sm'>
+						<text class='cuIcon-locationfill'></text>
+					</view>
+					<view class="cu-tag line-main-color sm">
+						服务区域
+					</view>
+				</view>
+				<text class="margin-lr-xs text-xs" v-if="ifShowServArea">{{product.servArea}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'horizontal-goods-card',
+		props: {
+			ifShowServArea: {
+				type: Boolean,
+				default: false
+			},
+			ifShowPrice: {
+				type: Boolean,
+				default: true
+			},
+			product: {
+				type: Object,
+				default: {}
+			}
+		},
+		data() {
+			return {
+
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.xxl-view {
+		min-width: 230rpx;
+		min-height: 230rpx;
+	}
+
+	.product-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	.cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
+		display: inline-block;
+		margin-left: 0;
+		height: 28rpx;
+		font-size: 16rpx;
+		line-height: 32rpx;
+	}
+</style>
diff --git a/components/goods-card/classify-goods-card.vue b/components/goods-card/vertical-goods-card.vue
similarity index 91%
rename from components/goods-card/classify-goods-card.vue
rename to components/goods-card/vertical-goods-card.vue
index a4d3ebc..cfc94ed 100644
--- a/components/goods-card/classify-goods-card.vue
+++ b/components/goods-card/vertical-goods-card.vue
@@ -28,7 +28,7 @@
 
 <script>
 	export default {
-		name: "classify-goods-card",
+		name: "vertical-goods-card",
 		props: {
 			title: '',
 			goodsInfos: {
@@ -41,7 +41,7 @@
 		},
 		methods: {
 			showDetails(productItem) {
-				uni.$emit('showProductDetail', productItem)
+				uni.$emit('index_showProductDetail', productItem)
 			}
 		}
 	}
diff --git a/data.js b/data.js
index 948fab4..e705997 100644
--- a/data.js
+++ b/data.js
@@ -1,7 +1,7 @@
-/**
- * 页面静态数据
- */
-
+/**
+ * 页面静态数据
+ */
+
 const swiperList = [{
 	id: 0,
 	type: 'image',
@@ -31,350 +31,473 @@ const swiperList = [{
 	type: 'image',
 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
 }]
-
-const categories = [{
-	id: 1,
-	name: '服务商城'
-}, {
-	id: 2,
-	name: '二手城'
-}, {
-	id: 3,
-	name: '供货商城'
+
+const categories = [{
+	id: 1,
+	name: '服务商城'
+}, {
+	id: 2,
+	name: '二手城'
+}, {
+	id: 3,
+	name: '供货商城'
+}]
+
+const subCategories = [{
+	id: 1,
+	cuIcon: 'shopfill',
+	color: 'red',
+	name: '空调清洗',
+	badge: '69洗'
+}, {
+	id: 2,
+	cuIcon: 'shopfill',
+	color: 'orange',
+	name: '家庭维修',
+	badge: '新品'
+}, {
+	id: 3,
+	cuIcon: 'shopfill',
+	color: 'yellow',
+	name: 'iPhone维修',
+	badge: ''
+}, {
+	id: 4,
+	cuIcon: 'shopfill',
+	color: 'olive',
+	name: '家居安装',
+	badge: ''
+}, {
+	id: 5,
+	cuIcon: 'shopfill',
+	color: 'green',
+	name: '甲醛治理',
+	badge: ''
+}, {
+	id: 6,
+	cuIcon: 'shopfill',
+	color: 'cyan',
+	name: '任洗套装',
+	badge: ''
+}, {
+	id: 7,
+	cuIcon: 'shopfill',
+	color: 'blue',
+	name: '家电安装',
+	badge: ''
+}, {
+	id: 8,
+	cuIcon: 'shopfill',
+	color: 'purple',
+	name: '领券中心',
+	badge: ''
+}, {
+	id: 9,
+	cuIcon: 'shopfill',
+	color: 'mauve',
+	name: 'DIY装机',
+	badge: ''
+}, {
+	id: 10,
+	cuIcon: 'shopfill',
+	color: 'pink',
+	name: '家电回收',
+	badge: ''
+}, {
+	id: 11,
+	cuIcon: 'shopfill',
+	color: 'cyan',
+	name: '家电清洗',
+	badge: ''
+}, {
+	id: 12,
+	cuIcon: 'deliver',
+	color: 'green',
+	name: '手机维修',
+	badge: ''
+}, {
+	id: 13,
+	cuIcon: 'deliver',
+	color: 'pink',
+	name: '洗衣洗鞋',
+	badge: ''
+}, {
+	id: 14,
+	cuIcon: 'deliver',
+	color: 'pink',
+	name: '上门安装',
+	badge: ''
+}, {
+	id: 15,
+	cuIcon: 'deliver',
+	color: 'pink',
+	name: '奢品养护',
+	badge: ''
+}]
+
+const moduleBarInfos = [{
+	id: 1,
+	cuIcon: 'homefill',
+	name: '首页'
+}, {
+	id: 2,
+	cuIcon: 'circle',
+	name: '师傅圈'
+}, {
+	id: 3,
+	cuIcon: 'add',
+	name: '发布',
+	action: 'add'
+}, {
+	id: 4,
+	cuIcon: 'message',
+	name: '消息',
+	countTag: 100
+}, {
+	id: 5,
+	cuIcon: 'my',
+	name: '我的'
+}]
+
+const discountGoods = {
+	title: '超值服务品牌直降',
+	goodsInfos: [{
+		id: 1,
+		imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
+		name: '十平米擦玻璃服务',
+		desc: '10平米起擦玻璃服务，超过10平米按照15/平米现场另收费',
+		tag: ['自营直选', '未服务随时可退', '不满意重新服务', '全程上险'],
+		price: '189起'
+	}, {
+		id: 2,
+		imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg',
+		name: '十平米擦玻璃服务',
+		desc: '10平米起擦玻璃服务，超过10平米按照15/平米现场另收费',
+		tag: ['自营直选', '未服务随时可退', '不满意重新服务', '全程上险'],
+		price: '200起'
+	}]
+}
+
+const hotGoods = {
+	title: '大家都在买',
+	goodsInfos: [{
+		id: 1,
+		imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10000.jpg',
+		name: '十五平米擦玻璃服务',
+		desc: '15平米起擦玻璃服务，超过15平米按照15/平米现场另收费，11111111111111111',
+		tag: ['自营直选', '不满意重新服务', '全程上险'],
+		price: '283起'
+	}]
+}
+
+const productDetail = {
+	productDetailImgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
+	swiperList: [{
+		id: 0,
+		type: 'video',
+		// url: 'https://v.quanjing.com/movie/default/bottom/1.mp4'
+		url: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
+	}, {
+		id: 1,
+		type: 'image',
+		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
+	}, {
+		id: 2,
+		type: 'image',
+		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1000.jpg'
+	}, {
+		id: 3,
+		type: 'image',
+		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big2001.jpg'
+	}, {
+		id: 4,
+		type: 'image',
+		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big2002.jpg'
+	}, {
+		id: 5,
+		type: 'image',
+		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1002.jpg'
+	}, {
+		id: 6,
+		type: 'image',
+		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3002.jpg'
+	}],
+	productInfo: {
+		name: '十五平米擦玻璃服务',
+		desc: '15平米起擦玻璃服务，超过15平米按照15/平米现场另收费',
+		isGoldServ: true
+	},
+	guaranteeList: [{
+		id: 1,
+		name: '服务保障',
+		desc: '服务保障描述......',
+		icon: 'repairfill'
+	}, {
+		id: 2,
+		name: '服务区域',
+		desc: '服务区域描述......',
+		icon: 'deliver_fill'
+	}, {
+		id: 3,
+		name: '备注',
+		desc: '备注描述......',
+		icon: 'commentfill'
+	}, ],
+	specsList: [{
+		id: 1,
+		name: '挂机内机拆洗（不分匹）',
+		salePrice: 199.00,
+		price: 300,
+		saledCount: 370,
+		maxPieces: 1000,
+		comments: '备注',
+		commission: 12
+	}, {
+		id: 2,
+		name: '柜机拆洗（方型）含拆风轮',
+		salePrice: 240.00,
+		price: 350,
+		saledCount: 400,
+		maxPieces: 1001,
+		comments: '备注',
+		commission: 16
+	}, {
+		id: 3,
+		name: '柜机圆柱型拆洗',
+		salePrice: 242.00,
+		price: 352,
+		saledCount: 350,
+		maxPieces: 1002,
+		comments: '备注',
+		commission: 13
+	}, {
+		id: 4,
+		name: '中央风口机（单个风口）',
+		salePrice: 243.00,
+		price: 353,
+		saledCount: 100,
+		maxPieces: 1003,
+		comments: '备注',
+		commission: 14
+	}, {
+		id: 5,
+		name: '天花机深度拆洗',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		maxPieces: 1004,
+		comments: '备注',
+		commission: 15
+	}, {
+		id: 6,
+		name: '多台套餐xxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		maxPieces: 1005,
+		comments: '备注',
+		commission: 15
+	}, {
+		id: 7,
+		name: '多台套餐xxxxxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		maxPieces: 1006,
+		comments: '备注',
+		commission: 15
+	}, {
+		id: 8,
+		name: '多台套餐xxxxxxxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		maxPieces: 1007,
+		comments: '备注',
+		commission: 15
+	}, {
+		id: 9,
+		name: '多台套餐xxxxxxxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		maxPieces: 1008,
+		comments: '备注',
+		commission: 15
+	}, {
+		id: 10,
+		name: '多台套餐xxxxxxxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		maxPieces: 1009,
+		comments: '备注',
+		commission: 15
+	}],
+	reviewers: [{
+		id: 1,
+		avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3002.jpg',
+		name: 'e**1',
+		reviewTime: '2022年03月17日',
+		comments: '很好用啊......',
+		picList: []
+	}, {
+		id: 2,
+		avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20001.jpg',
+		name: 'e**1',
+		reviewTime: '2022年03月17日',
+		comments: '很好用啊......',
+		picList: [{
+			id: 21,
+			url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3004.jpg'
+		}, {
+			id: 22,
+			url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
+		}, {
+			id: 23,
+			url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
+		}, {
+			id: 24,
+			url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
+		}]
+	}],
+	shopInfo: {
+		id: 1,
+		name: '艺鑫到家（售后无忧）',
+		avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big17005.jpg'
+	}
+}
+
+const pickedProductList = [{
+	product: {
+		id: 1,
+		picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
+		name: '柜机空调清洗1',
+		comments: '备---------注',
+		salePrice: 199,
+		servArea: ['天河区', '黄埔区', '荔湾区']
+	},
+	pickedList: [{
+		id: 101,
+		name: '挂机内机拆洗（不分匹）',
+		pickedNum: 1
+	}, {
+		id: 102,
+		name: '柜机拆洗（方型）含拆风轮',
+		pickedNum: 2
+	}]
+}, {
+	product: {
+		id: 2,
+		picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20001.jpg',
+		name: '柜机空调清洗2',
+		comments: '备---------注',
+		salePrice: 200,
+		servArea: ['天河区', '黄埔区']
+	},
+	pickedList: [{
+		id: 201,
+		name: '多台套餐xxx自命名',
+		pickedNum: 2
+	}, {
+		id: 202,
+		name: '多台套餐xxxx自命名',
+		pickedNum: 2
+	}, {
+		id: 203,
+		name: '多台套餐xxxx自命名',
+		pickedNum: 2
+	}, {
+		id: 204,
+		name: '多台套餐xxxx自命名',
+		pickedNum: 2
+	}, {
+		id: 205,
+		name: '多台套餐xxxx自命名',
+		pickedNum: 2
+	}]
 }]
 
-const subCategories = [{
-	id: 1,
-	cuIcon: 'shopfill',
-	color: 'red',
-	name: '空调清洗',
-	badge: '69洗'
-}, {
-	id: 2,
-	cuIcon: 'shopfill',
-	color: 'orange',
-	name: '家庭维修',
-	badge: '新品'
-}, {
-	id: 3,
-	cuIcon: 'shopfill',
-	color: 'yellow',
-	name: 'iPhone维修',
-	badge: ''
-}, {
-	id: 4,
-	cuIcon: 'shopfill',
-	color: 'olive',
-	name: '家居安装',
-	badge: ''
-}, {
-	id: 5,
-	cuIcon: 'shopfill',
-	color: 'green',
-	name: '甲醛治理',
-	badge: ''
-}, {
-	id: 6,
-	cuIcon: 'shopfill',
-	color: 'cyan',
-	name: '任洗套装',
-	badge: ''
-}, {
-	id: 7,
-	cuIcon: 'shopfill',
-	color: 'blue',
-	name: '家电安装',
-	badge: ''
-}, {
-	id: 8,
-	cuIcon: 'shopfill',
-	color: 'purple',
-	name: '领券中心',
-	badge: ''
-}, {
-	id: 9,
-	cuIcon: 'shopfill',
-	color: 'mauve',
-	name: 'DIY装机',
-	badge: ''
-}, {
-	id: 10,
-	cuIcon: 'shopfill',
-	color: 'pink',
-	name: '家电回收',
-	badge: ''
-}, {
-	id: 11,
-	cuIcon: 'shopfill',
-	color: 'cyan',
-	name: '家电清洗',
-	badge: ''
-}, {
-	id: 12,
-	cuIcon: 'deliver',
-	color: 'green',
-	name: '手机维修',
-	badge: ''
-}, {
-	id: 13,
-	cuIcon: 'deliver',
-	color: 'pink',
-	name: '洗衣洗鞋',
-	badge: ''
-}, {
-	id: 14,
-	cuIcon: 'deliver',
-	color: 'pink',
-	name: '上门安装',
-	badge: ''
-}, {
-	id: 15,
-	cuIcon: 'deliver',
-	color: 'pink',
-	name: '奢品养护',
-	badge: ''
-}]
-
-const moduleBarInfos = [{
-	id: 1,
-	cuIcon: 'homefill',
-	name: '首页'
-}, {
-	id: 2,
-	cuIcon: 'circle',
-	name: '师傅圈'
-}, {
-	id: 3,
-	cuIcon: 'add',
-	name: '发布',
-	action: 'add'
-}, {
-	id: 4,
-	cuIcon: 'message',
-	name: '消息',
-	countTag: 100
-}, {
-	id: 5,
-	cuIcon: 'my',
-	name: '我的'
-}]
-
-const discountGoods = {
-	title: '超值服务品牌直降',
-	goodsInfos: [{
-		id: 1,
-		imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
-		name: '十平米擦玻璃服务',
-		desc: '10平米起擦玻璃服务，超过10平米按照15/平米现场另收费',
-		tag: ['自营直选', '未服务随时可退', '不满意重新服务', '全程上险'],
-		price: '189起'
-	}, {
-		id: 2,
-		imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg',
-		name: '十平米擦玻璃服务',
-		desc: '10平米起擦玻璃服务，超过10平米按照15/平米现场另收费',
-		tag: ['自营直选', '未服务随时可退', '不满意重新服务', '全程上险'],
-		price: '200起'
-	}]
-}
-
-const hotGoods = {
-	title: '大家都在买',
-	goodsInfos: [{
-		id: 1,
-		imgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10000.jpg',
-		name: '十五平米擦玻璃服务',
-		desc: '15平米起擦玻璃服务，超过15平米按照15/平米现场另收费，11111111111111111',
-		tag: ['自营直选', '不满意重新服务', '全程上险'],
-		price: '283起'
-	}]
-}
-
-const productDetail = {
-	productDetailImgUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
-	swiperList: [{
-		id: 0,
-		type: 'video',
-		// url: 'https://v.quanjing.com/movie/default/bottom/1.mp4'
-		url: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
-	}, {
-		id: 1,
-		type: 'image',
-		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
-	}, {
-		id: 2,
-		type: 'image',
-		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1000.jpg'
-	}, {
-		id: 3,
-		type: 'image',
-		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big2001.jpg'
-	}, {
-		id: 4,
-		type: 'image',
-		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big2002.jpg'
-	}, {
-		id: 5,
-		type: 'image',
-		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1002.jpg'
-	}, {
-		id: 6,
-		type: 'image',
-		url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3002.jpg'
-	}],
-	productInfo: {
-		name: '十五平米擦玻璃服务',
-		desc: '15平米起擦玻璃服务，超过15平米按照15/平米现场另收费',
-		isGoldServ: true
+const shopInfo = {
+	picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big17005.jpg',
+	name: '艺鑫到家（售后无忧）',
+	comments: {
+		icon: 'form',
+		desc: '企业认证'
 	},
-	guaranteeList: [{
+	extraInfos: [{
+		icon: 'locationfill',
+		desc: '广东省广州市番禺区钟村街道188号'
+	}],
+	totalScore: 4.5,
+	timeScore: 4.4,
+	attitudeScore: 4.4,
+	skillScore:4.6,
+	servType: '空调',
+	additionalServ: [{
 		id: 1,
-		name: '服务保障',
-		desc: '服务保障描述......',
-		icon: 'repairfill'
+		name: '58速运'
 	}, {
 		id: 2,
-		name: '服务区域',
-		desc: '服务区域描述......',
-		icon: 'deliver_fill'
+		name: '货拉拉'
 	}, {
 		id: 3,
-		name: '备注',
-		desc: '备注描述......',
-		icon: 'commentfill'
-	},],
-	specsList: [{
-		id: 1,
-		name: '挂机内机拆洗（不分匹）',
-		salePrice: 199.00,
-		price: 300,
-		saledCount: 370,
-		maxPieces: 1000,
-		comments: '备注',
-		commission: 12
-	}, {
-		id: 2,
-		name: '柜机拆洗（方型）含拆风轮',
-		salePrice: 240.00,
-		price: 350,
-		saledCount: 400,
-		maxPieces: 1001,
-		comments: '备注',
-		commission: 16
-	}, {
-		id: 3,
-		name: '柜机圆柱型拆洗',
-		salePrice: 242.00,
-		price: 352,
-		saledCount: 350,
-		maxPieces: 1002,
-		comments: '备注',
-		commission: 13
-	}, {
-		id: 4,
-		name: '中央风口机（单个风口）',
-		salePrice: 243.00,
-		price: 353,
-		saledCount: 100,
-		maxPieces: 1003,
-		comments: '备注',
-		commission: 14
-	}, {
-		id: 5,
-		name: '天花机深度拆洗',
-		salePrice: 244.00,
-		price: 354,
-		saledCount: 109,
-		maxPieces: 1004,
-		comments: '备注',
-		commission: 15
-	}, {
-		id: 6,
-		name: '多台套餐xxx自命名',
-		salePrice: 244.00,
-		price: 354,
-		saledCount: 109,
-		maxPieces: 1005,
-		comments: '备注',
-		commission: 15
-	}, {
-		id: 7,
-		name: '多台套餐xxxxxx自命名',
-		salePrice: 244.00,
-		price: 354,
-		saledCount: 109,
-		maxPieces: 1006,
-		comments: '备注',
-		commission: 15
-	}, {
-		id: 8,
-		name: '多台套餐xxxxxxxx自命名',
-		salePrice: 244.00,
-		price: 354,
-		saledCount: 109,
-		maxPieces: 1007,
-		comments: '备注',
-		commission: 15
-	}, {
-		id: 9,
-		name: '多台套餐xxxxxxxx自命名',
-		salePrice: 244.00,
-		price: 354,
-		saledCount: 109,
-		maxPieces: 1008,
-		comments: '备注',
-		commission: 15
-	}, {
-		id: 10,
-		name: '多台套餐xxxxxxxx自命名',
-		salePrice: 244.00,
-		price: 354,
-		saledCount: 109,
-		maxPieces: 1009,
-		comments: '备注',
-		commission: 15
+		name: '搬货服务'
 	}],
-	reviewers: [{
-		id: 1,
-		avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3002.jpg',
-		name: 'e**1',
-		reviewTime: '2022年03月17日',
-		comments: '很好用啊......',
-		picList: []
+	servArea: ['天河区', '黄埔区', '荔湾区'],
+	productList: [{
+		id: 1,
+		picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
+		name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
+		comments: '智能断点 | 遥控预约调温 | 一级能效',
+		salePrice: 199,
+		servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良', '南海']
 	}, {
-		id: 2,
-		avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20001.jpg',
-		name: 'e**1',
-		reviewTime: '2022年03月17日',
-		comments: '很好用啊......',
-		picList: [{
-			id: 21,
-			url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big3004.jpg'
-		}, {
-			id: 22,
-			url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
-		}, {
-			id: 23,
-			url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
-		}, {
-			id: 24,
-			url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big1010.jpg'
-		}]
-	}],
-	shopInfo: {
-		id: 1,
-		name: '艺鑫到家（售后无忧）',
-		avatarUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big17005.jpg'
-	}
-}
- 
+		id: 2,
+		picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20001.jpg',
+		name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
+		comments: '智能断点 | 遥控预约调温 | 一级能效',
+		salePrice: 199,
+		servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
+	}, {
+		id: 3,
+		picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20002.jpg',
+		name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
+		comments: '智能断点 | 遥控预约调温 | 一级能效',
+		salePrice: 199,
+		servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
+	}, {
+		id: 4,
+		picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20003.jpg',
+		name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
+		comments: '智能断点 | 遥控预约调温 | 一级能效',
+		salePrice: 199,
+		servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
+	}, {
+		id: 5,
+		picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20004.jpg',
+		name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
+		comments: '智能断点 | 遥控预约调温 | 一级能效',
+		salePrice: 199,
+		servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
+	}, {
+		id: 6,
+		picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20005.jpg',
+		name: '万和(Vanward)电热水器80升电热水器 点热水器速热 储水式电热水器',
+		comments: '智能断点 | 遥控预约调温 | 一级能效',
+		salePrice: 199,
+		servArea: ['广州', '顺德', '南海', '大良', '南海', '大良', '南海', '大良']
+	}]
+}
+
 export default {
-	swiperList,
-	categories,
-	subCategories,
-	moduleBarInfos,
-	discountGoods,
-	hotGoods,
-	
-	productDetail
+	swiperList,
+	categories,
+	subCategories,
+	moduleBarInfos,
+	discountGoods,
+	hotGoods,
+	productDetail,
+	pickedProductList,
+	shopInfo
 }
diff --git a/pages.json b/pages.json
index ceab90f..1f4b795 100644
--- a/pages.json
+++ b/pages.json
@@ -1,7 +1,6 @@
 {
 	"pages": [{
-			"path": "pages/index/index"
-			// "path": "pages/order/order-detail"
+			"path": "pages/index/index"
 		},
 		{
 			"path": "pages/product/product-detail",
@@ -15,15 +14,17 @@
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false
 			}
-		}
-		// ,
-		// {
-		// 	"path": "pages/order/order-detail",
-		// 	"style": {
-		// 		"navigationBarTitleText": "",
-		// 		"enablePullDownRefresh": false
-		// 	}
-		// }
+		},
+		{
+			"path": "pages/order/order-detail",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+		},
+		{
+			"path": "pages/product/shop-detail"
+		}
 	],
 	"globalStyle": {
 		"navigationStyle": "custom",
diff --git a/pages/index/index.vue b/pages/index/index.vue
index e0cbf38..13e57a9 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -13,7 +13,7 @@
 		<view class="cu-bar search bg-white">
 			<view class="search-form round">
 				<text class="cuIcon-search"></text>
-				<input @focus="inputFocus" @blur="inputBlur" @confirm="searchGoods" :adjust-position="false" type="text"
+				<input @confirm="searchGoods" :adjust-position="true" type="text"
 					placeholder="输入搜索内容" confirm-type="search"></input>
 			</view>
 			<view class="action">
@@ -64,11 +64,11 @@
 				</view>
 			</view>
 			<!-- 超值服务 -->
-			<classify-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
-				:title="discountGoods.title"></classify-goods-card>
+			<vertical-goods-card ref="discountGoodsCard" :goodsInfos="discountGoods.goodsInfos"
+				:title="discountGoods.title"></vertical-goods-card>
 			<!-- 热门服务 -->
-			<classify-goods-card ref="hotGoodsCard" :goodsInfos="hotGoods.goodsInfos"
-				:title="hotGoods.title"></classify-goods-card>
+			<vertical-goods-card ref="hotGoodsCard" :goodsInfos="hotGoods.goodsInfos"
+				:title="hotGoods.title"></vertical-goods-card>
 		</view>
 		<module-bar ref="moduleBar" :moduleBarInfos="moduleBarInfos"></module-bar>
 	</view>
@@ -76,12 +76,12 @@
 
 <script>
 	import moduleBar from '@/components/custom-bar/module-bar.vue';
-	import classifyGoodsCard from '@/components/goods-card/classify-goods-card.vue';
+	import verticalGoodsCard from '@/components/goods-card/vertical-goods-card.vue';
 
 	export default {
 		components: {
 			moduleBar,
-			classifyGoodsCard
+			verticalGoodsCard
 		},
 		data() {
 			return {
@@ -92,7 +92,8 @@
 				subCategories: [],
 				moduleBarInfos: [],
 				hotGoods: {},
-				discountGoods: {}
+				discountGoods: {},
+				InputBottom: 0
 			}
 		},
 		onLoad() {
@@ -109,13 +110,7 @@
 				this.discountGoods = await this.$api.data('discountGoods');
 			},
 			bindEvent() {
-				uni.$on('showProductDetail', this.showDetails);
-			},
-			inputFocus(e) {
-				this.InputBottom = e.detail.height
-			},
-			inputBlur(e) {
-				this.InputBottom = 0
+				uni.$on('index_showProductDetail', this.showDetails);
 			},
 			async tabSelect(e) {
 				this.tabCur = e.currentTarget.dataset.id;
diff --git a/pages/order/order-detail.vue b/pages/order/order-detail.vue
index 9310401..6f7a27d 100644
--- a/pages/order/order-detail.vue
+++ b/pages/order/order-detail.vue
@@ -1,45 +1,124 @@
-<template>
-	<view>
-		<!-- 顶部操作条 -->
-		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
-			<block slot="backText">返回</block>
-			<block slot="content">订单确认</block>
-		</cu-custom>
-		<!-- 服务地址 -->
-		<view class="padding-lg bg-white">
-			<view class="flex justify-between align-center">
-				<view class="text-lg text-black">
-					<text class="cuIcon-locationfill text-blue light"></text>
-					选择服务地址
-				</view>
-				<view>选择<text class="text-sm text-bold text-gray cuIcon-right"></text></view>
-			</view>
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">订单确认</block>
+		</cu-custom>
+		<!-- 服务地址 -->
+		<view class="padding-lg bg-white">
+			<view class="flex justify-between align-center">
+				<view class="text-lg text-black">
+					<text class="cuIcon-locationfill text-blue light"></text>
+					选择服务地址
+				</view>
+				<view>选择<text class="text-sm text-bold text-gray cuIcon-right"></text></view>
+			</view>
+		</view>
+		<!-- 预约时间 -->
+		<view class="margin-lr-sm margin-top-sm bg-white padding">
+			<view class="flex justify-between align-center">
+				<text class="text-black">预约时间</text>
+				<view class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
+			</view>
+			<view class="text-sm text-gray margin-top-sm"><text
+					class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
+		</view>
+		<!-- 选购的商品列表 -->
+		<view class="margin-lr-sm margin-top-sm bg-white padding">
+			<view class="solid-bottom" v-for="(item, index) in pickedProductList">
+				<product-picked :columnTitleArr="columnTitleArr" :product="item.product" :pickedList="item.pickedList">
+				</product-picked>
+			</view>
+		</view>
+		<!-- 支付方式 -->
+		<view class="margin-lr-sm margin-top-sm bg-white padding">
+			<view class="flex justify-between align-center">
+				<text class="text-black">支付方式</text>
+				<radio-group @change="changePayWay">
+					<label class="radio">
+						<radio class="main-color" value="online" :checked="payWay=='online'" />
+						<text class="margin-left-xs">在线支付</text>
+					</label>
+					<label class="radio margin-left">
+						<radio class="main-color" value="offline" :checked="payWay=='offline'" />
+						<text class="margin-left-xs">上门到付</text>
+					</label>
+				</radio-group>
+			</view>
 		</view>
-		<!-- 预约时间 -->
+		<!-- 发票信息 -->
 		<view class="margin-lr-sm margin-top-sm bg-white padding">
 			<view class="flex justify-between align-center">
-				<text class="text-black">预约时间</text>
-				<view class="text-red text-sm">请选择上门时间<text class="text-bold cuIcon-right"></text></view>
+				<text class="text-black">发票信息</text>
+				<text class="text-sm text-bold cuIcon-right"></text>
 			</view>
-			<view class="text-sm text-gray margin-top-sm"><text class="cuIcon-question">选择的为期望上门时间，稍后工程师将与你确认具体上门时间</text></view>
 		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				pickedProductList: []
-			}
-		},
-		methods: {
-			name() {
-				
-			}
-		},
+		<!-- 备注留言 -->
+		<view class="margin-lr-sm margin-top-sm bg-white padding">
+			<text class="text-black">备注留言</text>
+			<view class="margin-top uni-textarea">
+				<textarea class="solid" maxlength="-1" @input="inputComments" placeholder="请填写备注" />
+			</view>
+		</view>
+		<!-- 平台提醒 -->
+		<view class="margin-lr-sm margin-top-sm bg-white padding margin-bottom-with-bar">
+			<view class="text-sm text-orange"><text
+					class="cuIcon-roundcheck">为保障您的权益，请在平台内交易，师傅服务离开后发生损坏或退款以及售后质保，平台可为您追责！</text></view>
+		</view>
+		<!-- 底部操作栏 -->
+		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
+			<view class="action text-df left-grid">
+				<text class="margin-left-lg">共计</text>
+				<text class="margin-left-xs text-red text-price text-xl">{{formInfo.totalPrice}}</text>
+			</view>
+			<view class="bg-main-color submit">确定</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import productPicked from '@/pages/order/product-picked.vue';
+
+	export default {
+		components: {
+			productPicked
+		},
+		data() {
+			return {
+				columnTitleArr: ['购买型号', '购买数量'],
+				pickedProductList: [],
+				formInfo: {
+					payWay: 'online',
+					comments: '',
+					totalPrice: 0
+				}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.pickedProductList = await this.$api.data('pickedProductList');
+			},
+			changePayWay(e) {
+				this.formInfo.payWay = e.detail.value;
+			},
+			inputComments(e) {
+				this.comments = e.detail.value
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	.fixed-bottom-bar .text-df {
+		font-size: 28rpx !important;
 	}
-</script>
-
-<style>
+	
+	.fixed-bottom-bar .left-grid {
+		width: 55% !important;
+		text-align: left;
+	}
 </style>
diff --git a/pages/order/product-picked.vue b/pages/order/product-picked.vue
new file mode 100644
index 0000000..e09a511
--- /dev/null
+++ b/pages/order/product-picked.vue
@@ -0,0 +1,53 @@
+<template>
+	<view>
+		<view class="bg-white">
+			<horizontal-goods-card :ifShowServArea="true" :product="product"></horizontal-goods-card>
+			<view class="flex justify-between margin-lr-sm margin-tb-sm">
+				<view v-for="(title, index) in columnTitleArr">{{title}}</view>
+			</view>
+			<view class="margin-bottom-lg certern-height-with-scroll">
+				<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in pickedList"
+					:key="item.id">
+					<view class='cu-tag padding line-main-color'>{{item.name}}</view>
+					<view v-if="columnTitleArr.length === 2">{{item.pickedNum}}</view>
+					<view v-else-if="columnTitleArr.length === 3" class="flex justify-end">
+						<view>{{item.pickedNum}}</view>
+						<view>{{item.toServNum}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';
+	
+	export default {
+		name: "product-picked",
+		props: {
+			product: {
+				type: Object,
+				default: []
+			},
+			pickedList: {
+				type: Array,
+				default: []
+			},
+			columnTitleArr: {
+				type: Array,
+				default: []
+			}
+		},
+		components: {
+			horizontalGoodsCard
+		}
+	}
+</script>
+
+<style scoped>
+	.certern-height-with-scroll {
+		max-height: 300rpx;
+		overflow: scroll;
+	}
+</style>
diff --git a/pages/product/product-detail.vue b/pages/product/product-detail.vue
index 5074a7f..ebe2cea 100644
--- a/pages/product/product-detail.vue
+++ b/pages/product/product-detail.vue
@@ -104,15 +104,15 @@
 			<comments-card :reviewers="reviewers"></comments-card>
 		</view>
 		<!-- 店家链接 -->
-		<!-- <view class="margin-lr-sm margin-top-sm padding bg-white">
+		<view class="margin-lr-sm margin-top-sm padding bg-white">
 			<view class="flex justify-between align-center">
 				<view class="flex justify-start align-center">
 					<view class="cu-avatar" :style="'background-image:url(' + shopInfo.avatarUrl + ');'"></view>
 					<view class="margin-lr-sm text-lg text-black">{{shopInfo.name}}</view>
 				</view>
-				<view class="text-sm">店铺查看<text class="text-bold text-gray cuIcon-right"></text></view>
+				<view class="text-sm" @click="showShopDetail(shopInfo)">店铺查看<text class="text-bold text-gray cuIcon-right"></text></view>
 			</view>
-		</view> -->
+		</view>
 		<!-- 服务详情 -->
 		<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image">
 			<!-- <image :src="productDetailImgUrl" mode="widthFix"></image> -->
@@ -122,7 +122,7 @@
 		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
 			<button class="action" open-type="contact">
 				<view class="cuIcon-service text-green">
-					<view class="cu-tag badge"></view>
+					<view class="cu-tag badge" v-if="ifHasCsMsg"></view>
 				</view>
 				客服
 			</button>
@@ -131,18 +131,18 @@
 			</view> -->
 			<view class="action">
 				<view class="cuIcon-cart">
-					<view class="cu-tag badge">99</view>
+					<view class="cu-tag badge" v-if="totalPickCount > 0">{{totalPickCount}}</view>
 				</view>
 				购物车
 			</view>
 			<view class="bg-main-color light submit" @click="toggleProductPickModal">加入购物车</view>
-			<view class="bg-main-color submit">立即订购</view>
+			<view class="bg-main-color submit" @click="toggleProductPickModal($event, true)">立即订购</view>
 		</view>
 		<!-- 底部弹窗 -->
-		<uni-popup ref="productPickPopup" type="bottom">
+		<uni-popup ref="productPickPopup" type="bottom" @change="changePopupState">
 			<view class="text-bold text-gray text-lg text-center left-top-sm-bar" @click="toggleProductPickModal"><text
 					class="cuIcon-close"></text></view>
-			<product-pick :specsList="specsList"></product-pick>
+			<product-pick :specsList="specsList" :orderNow="orderNow"></product-pick>
 		</uni-popup>
 	</view>
 </template>
@@ -170,11 +170,15 @@
 				showTopNav: false,
 				curTopNav: 0,
 				shopInfo: {},
-				ifShowPageMeta: false
+				ifShowPageMeta: false,
+				orderNow: false,
+				totalPickCount: 0,
+				ifHasCsMsg: true
 			}
 		},
 		onLoad() {
-			this.loadData();
+			this.loadData();
+			this.bindEvent();
 		},
 		onReady() {
 			this.productVideoContext = uni.createVideoContext('productVideo');
@@ -193,6 +197,9 @@
 				this.reviewers = productDetail.reviewers;
 				this.productDetailImgUrl = productDetail.productDetailImgUrl;
 				this.shopInfo = productDetail.shopInfo;
+			},
+			bindEvent() {
+				uni.$on('product-detail_add2Cart', this.add2Cart);
 			},
 			chooseSpecs(item) {
 				this.curProductSpecs = item;
@@ -226,13 +233,25 @@
 					selector: '#pageAnchor' + index
 				})
 			},
-			toggleProductPickModal() {
+			toggleProductPickModal(e, orderNow) {
+				this.orderNow = orderNow ? true : false;
 				if (this.ifShowPageMeta) {
 					this.$refs.productPickPopup.close();
 				} else {
 					this.$refs.productPickPopup.open();
-				}
-				this.ifShowPageMeta = !this.ifShowPageMeta;
+				}
+			},
+			changePopupState(e) {
+				this.ifShowPageMeta = e.show;
+			},
+			add2Cart(totalPickCount) {
+				this.totalPickCount = totalPickCount;
+				this.toggleProductPickModal();
+			},
+			showShopDetail(shopInfo) {
+				uni.navigateTo({
+					url: '../product/shop-detail?shopInfo='+ encodeURIComponent(JSON.stringify(shopInfo))
+				});
 			}
 		}
 	}
diff --git a/pages/product/product-pick.vue b/pages/product/product-pick.vue
index 23c154d..c80fc79 100644
--- a/pages/product/product-pick.vue
+++ b/pages/product/product-pick.vue
@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<view class="padding-tb-lg padding-lr bg-white">
+		<view class="padding-lr bg-white main-container">
 			<view class="cu-list menu-avatar margin-bottom-sm">
 				<view class="cu-item padding-bottom-sm">
 					<view class="cu-avatar xl" :style="'background-image:url(' + curSpec.picUrl + ');'">
@@ -17,7 +17,7 @@
 				<view>购买型号</view>
 				<view>购买数量</view>
 			</view>
-			<view class="margin-bottom-lg certern-height-with-scroll">
+			<view class="certern-height-with-scroll">
 				<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
 					:key="item.id">
 					<view class='cu-tag padding' :class="curSpec.id === item.id ? 'line-main-color' : 'line-default'"
@@ -38,7 +38,7 @@
 				<text class="margin-lr-xs">共计</text>
 				<text class="text-red text-price">{{totalPrice}}</text>
 			</view>
-			<view class="bg-main-color submit">确定</view>
+			<view class="bg-main-color submit" @click="submit">确定</view>
 		</view>
 	</view>
 </template>
@@ -50,6 +50,10 @@
 			specsList: {
 				type: Array,
 				default: []
+			},
+			orderNow: {
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {
@@ -83,6 +87,17 @@
 			},
 			chooseSpecs(item) {
 				this.curSpec = item;
+			},
+			submit() {
+				if (this.orderNow) {
+					// 从立即订购按钮进来的直接跳转到订单详情确认页
+					uni.navigateTo({
+						url: '../order/order-detail'
+					})
+				} else {
+					// 从加入购物车按钮进来的触发父页面事件
+					uni.$emit('product-detail_add2Cart', this.totalPickCount)
+				}
 			}
 		},
 	}
@@ -103,7 +118,12 @@
 	}
 
 	.certern-height-with-scroll {
-		height: 600rpx;
+		height: 600rpx;
+		margin-bottom: calc(100rpx - env(safe-area-inset-bottom)/2);
 		overflow: scroll;
+	}
+	
+	.main-container {
+		padding-top: 45rpx;
 	}
 </style>
diff --git a/pages/product/shop-detail.vue b/pages/product/shop-detail.vue
new file mode 100644
index 0000000..a6d4307
--- /dev/null
+++ b/pages/product/shop-detail.vue
@@ -0,0 +1,109 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-white'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">店铺主页</block>
+		</cu-custom>
+		<!-- 店铺介绍 -->
+		<view class="bg-white padding">
+			<horizontal-name-card :vCard="shopInfo"></horizontal-name-card>
+		</view>
+		<!-- 店铺评分 -->
+		<view class="bg-white padding text-sm padding-top-xs solid-bottom">
+			<view class="flex justify-between">
+				<text>总评分：<text class="text-red text-xl">{{shopInfo.totalScore}}</text> / 5.0分</text>
+				<uni-rate :readonly="true" allow-half :value="shopInfo.totalScore" />
+			</view>
+			<view>
+				<text>准时</text><text class="margin-lr-xs">{{shopInfo.timeScore}}</text>
+				<text>态度</text><text class="margin-lr-xs">{{shopInfo.attitudeScore}}</text>
+				<text>技能</text><text class="margin-lr-xs">{{shopInfo.skillScore}}</text>
+			</view>
+		</view>
+		<!-- 店铺服务说明 -->
+		<view class="padding bg-white text-sm">
+			<view>服务类目：<text>{{shopInfo.servType}}</text></view>
+			<view>
+				附加服务：
+				<radio-group @change="changeAdditionalServId">
+					<label class="radio margin-right-sm" v-for="(item, index) in shopInfo.additionalServ">
+						<radio style="transform:scale(0.7)" class="main-color" :value="item.id"
+							:checked="additionalServId===item.id" />
+						<text class="margin-left-xs">{{item.name}}</text>
+					</label>
+				</radio-group>
+			</view>
+			<view>服务地区：<text>{{shopInfo.servArea}}</text></view>
+		</view>
+		<!-- 本店铺服务列表 -->
+		<view class="bg-white">
+			<view class="margin-top-sm sticky-bar" :style="[{top: stickyTop + 'px'}]">
+				<!-- 搜索栏 -->
+				<view class="cu-bar bg-white search solid-bottom margin-bottom-sm">
+					<view class="action">
+						<text class="cuIcon-location"></text>
+						<text>广州</text>
+					</view>
+					<view class="search-form round">
+						<text class="cuIcon-search"></text>
+						<input @confirm="searchGoods" :adjust-position="true"
+							type="text" placeholder="搜索本店铺" confirm-type="search"></input>
+					</view>
+					<view class="action">
+						<text>筛选</text>
+						<text class="cuIcon-filter"></text>
+					</view>
+				</view>
+			</view>
+			<!-- 服务列表 -->
+			<view class="padding-lr padding-bottom">
+				<view class="solid-bottom margin-bottom-sm padding-bottom-sm" @click="showDetails(item)"
+					v-for="(item, index) in shopInfo.productList">
+					<horizontal-goods-card :ifShowServArea="true" :product="item"></horizontal-goods-card>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
+	import horizontalGoodsCard from '@/components/goods-card/horizontal-goods-card.vue';
+
+	export default {
+		components: {
+			horizontalNameCard,
+			horizontalGoodsCard
+		},
+		data() {
+			return {
+				shopInfo: {},
+				stickyTop: this.CustomBar
+			}
+		},
+		onLoad(option) {
+			const shopInfo = JSON.parse(decodeURIComponent(option.shopInfo));
+			console.log("接收参数shopInfo:" + JSON.stringify(shopInfo));
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.shopInfo = await this.$api.data('shopInfo');
+			},
+			searchGoods(item) {
+				console.log("搜索条件信息: " + item)
+				console.log("商品搜索中...");
+			},
+			showDetails(productItem) {
+				uni.navigateTo({
+					url: '../product/product-detail'
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/style/blue/blue-topic.css b/style/blue/blue-topic.css
index bb7e2cb..5504d70 100644
--- a/style/blue/blue-topic.css
+++ b/style/blue/blue-topic.css
@@ -20,4 +20,15 @@
 .bg-gradual-color {
 	background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
 	color: #ffffff;
+}
+
+switch.main-color[checked] .wx-switch-input,
+checkbox.main-color[checked] .wx-checkbox-input,
+radio.main-color[checked] .wx-radio-input,
+switch.main-color.checked .uni-switch-input,
+checkbox.main-color.checked .uni-checkbox-input,
+radio.main-color.checked .uni-radio-input {
+	background-color: #0081ff !important;
+	border-color: #0081ff !important;
+	color: #ffffff !important;
 }
\ No newline at end of file
diff --git a/style/default.css b/style/default.css
index e5674c4..d14b6b9 100644
--- a/style/default.css
+++ b/style/default.css
@@ -1,5 +1,5 @@
 .margin-bottom-with-bar {
-	margin-bottom: 130rpx;
+	margin-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2)
 }
 
 .fixed-bottom-bar {
@@ -14,4 +14,10 @@
 	position: fixed !important;
 	z-index: 98;
 	width: 100%;
+}
+
+.sticky-bar {
+	z-index: 10;
+	position: sticky;
+	top: 0;
 }
\ No newline at end of file