diff --git a/App.vue b/App.vue
index 2f31198..8b16486 100644
--- a/App.vue
+++ b/App.vue
@@ -113,6 +113,10 @@
 </script>
 
 <style lang="scss">
+	/* 主题 */
+	@import '@/style/blue/blue-topic.css';
+	/* 自定义公共css */
+	@import '@/style/default.css';
 	/* colorui */
 	@import '@/colorui/main.css';
 	@import '@/colorui/icon.css';
@@ -125,15 +129,5 @@
 		background-color: #f5f5f5;
 	}
 
-	/* #endif */
-	.margin-bottom-with-bar {
-		margin-bottom: 130rpx;
-	}
-	.uni-text-color {
-		color: #0081ff;
-	}
-	.uni-bg-color {
-		background-color: #0081ff;
-		color: #ffffff;
-	}
+	/* #endif */
 </style>
diff --git a/components/custom-bar/module-bar.vue b/components/custom-bar/module-bar.vue
index abae37f..b6b4f63 100644
--- a/components/custom-bar/module-bar.vue
+++ b/components/custom-bar/module-bar.vue
@@ -3,10 +3,10 @@
 	<view class="cu-bar tabbar margin-bottom-xl bg-white fixed-bottom-bar">
 		<view class="action text-gray add-action" v-for="(item, index) in moduleBarInfos" :key="index"
 			v-if="item.action === 'add'">
-			<button class="cu-btn uni-bg-color shadow" :class="'cuIcon-' + item.cuIcon"></button>
+			<button class="cu-btn bg-main-color shadow" :class="'cuIcon-' + item.cuIcon"></button>
 			{{item.name}}
 		</view>
-		<view class="action uni-text-color" v-else-if="index === 0">
+		<view class="action text-main-color" v-else-if="index === 0">
 			<view :class="'cuIcon-' + item.cuIcon">
 				<view class="cu-tag badge" v-if="item.countTag">{{item.countTag > 99 ? '99+' : item.countTag}}</view>
 			</view>
@@ -39,11 +39,5 @@
 	}
 </script>
 
-<style scoped>
-	.fixed-bottom-bar {
-		position: fixed;
-		width: 100%;
-		bottom: 0;
-		margin-bottom: 0;
-	}
+<style>
 </style>
diff --git a/components/goods-card/classify-goods-card.vue b/components/goods-card/classify-goods-card.vue
index 7e8a90b..a4d3ebc 100644
--- a/components/goods-card/classify-goods-card.vue
+++ b/components/goods-card/classify-goods-card.vue
@@ -2,10 +2,10 @@
 	<view>
 		<view class="cu-bar bg-white solid-bottom margin-top-sm">
 			<view class="action">
-				<text class="cuIcon-titles uni-text-color"></text> {{title}}
+				<text class="cuIcon-titles text-main-color"></text> {{title}}
 			</view>
 		</view>
-		<view class="cu-card case no-card solid-bottom" v-for="(item, index) in goodsInfos" :key="index">
+		<view class="cu-card case no-card solid-bottom" v-for="(item, index) in goodsInfos" :key="index" @click="showDetails(item)">
 			<view class="cu-item shadow">
 				<view class="image">
 					<image :src="item.imgUrl"
@@ -39,8 +39,10 @@
 		data() {
 			return {};
 		},
-		methods: {
-
+		methods: {
+			showDetails(productItem) {
+				uni.$emit('showProductDetail', productItem)
+			}
 		}
 	}
 </script>
diff --git a/components/goods-card/comments-card.vue b/components/goods-card/comments-card.vue
new file mode 100644
index 0000000..d5e79d7
--- /dev/null
+++ b/components/goods-card/comments-card.vue
@@ -0,0 +1,54 @@
+<template>
+	<view>
+		<view class="cu-card dynamic no-card solid-bottom padding-bottom-sm " v-for="(reviewer, index) in reviewers" :key="item.id">
+			<view class="cu-item shadow">
+				<view class="cu-list menu-avatar no-border">
+					<view class="cu-item">
+						<view class="cu-avatar" :style="'background-image:url(' + reviewer.avatarUrl + ');'">
+						</view>
+						<view class="content flex-sub">
+							<view>{{reviewer.name}}</view>
+							<view class="text-gray text-sm flex justify-between">
+								{{reviewer.reviewTime}}
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="text-content">
+					{{reviewer.comments}}
+				</view>
+				<view class="grid flex-sub padding-lr col-3 grid-square" v-if="reviewer.picList">
+					<view class="bg-img" :style="'background-image:url(' + item.url + ');'"
+						v-for="(item, index) in reviewer.picList" :key="index" v-if="index < 3">
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "comments-card",
+		props: {
+			reviewers: {
+				type: Array,
+				default: []
+			}
+		},
+		data() {
+			return {
+				isCard: true
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.cu-list.menu-avatar.no-border>.cu-item:after {
+	    border: none;
+	}
+</style>
diff --git a/data.js b/data.js
index a84899e..0209244 100644
--- a/data.js
+++ b/data.js
@@ -5,7 +5,7 @@
 const swiperList = [{
 	id: 0,
 	type: 'image',
-	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
+	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big17000.jpg'
 }, {
 	id: 1,
 	type: 'image',
@@ -188,12 +188,173 @@ const hotGoods = {
 		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,
+		commission: 12
+	}, {
+		id: 2,
+		name: '柜机拆洗（方型）含拆风轮',
+		salePrice: 240.00,
+		price: 350,
+		saledCount: 400,
+		commission: 16
+	}, {
+		id: 3,
+		name: '柜机圆柱型拆洗',
+		salePrice: 242.00,
+		price: 352,
+		saledCount: 350,
+		commission: 13
+	}, {
+		id: 4,
+		name: '中央风口机（单个风口）',
+		salePrice: 243.00,
+		price: 353,
+		saledCount: 100,
+		commission: 14
+	}, {
+		id: 5,
+		name: '天花机深度拆洗',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		commission: 15
+	}, {
+		id: 6,
+		name: '多台套餐xxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		commission: 15
+	}, {
+		id: 7,
+		name: '多台套餐xxxxxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		commission: 15
+	}, {
+		id: 8,
+		name: '多台套餐xxxxxxxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		commission: 15
+	}, {
+		id: 9,
+		name: '多台套餐xxxxxxxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		commission: 15
+	}, {
+		id: 10,
+		name: '多台套餐xxxxxxxx自命名',
+		salePrice: 244.00,
+		price: 354,
+		saledCount: 109,
+		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'
+	}
+}
+ 
 export default {
 	swiperList,
 	categories,
 	subCategories,
 	moduleBarInfos,
 	discountGoods,
-	hotGoods
+	hotGoods,
+	
+	productDetail
 }
diff --git a/main.js b/main.js
index 30ce85a..b79fa3c 100644
--- a/main.js
+++ b/main.js
@@ -11,7 +11,7 @@ const data = type=>{
 	return new Promise(resolve=>{
 		setTimeout(()=>{
 			resolve(Data[type]);
-		}, 500)
+		}, 0)
 	})
 }
 Vue.prototype.$api = {data}
diff --git a/manifest.json b/manifest.json
index 6313c5d..d4dedf7 100644
--- a/manifest.json
+++ b/manifest.json
@@ -49,7 +49,7 @@
     /* 快应用特有相关 */
     "mp-weixin" : {
         /* 小程序特有相关 */
-        "appid" : "wx7245cee0986fa0ac",
+        "appid" : "wxc39c2af3ea24cd37",
         "setting" : {
             "urlCheck" : false,
             "minified" : false,
diff --git a/pages.json b/pages.json
index e13f313..b3f385e 100644
--- a/pages.json
+++ b/pages.json
@@ -1,10 +1,19 @@
 {
 	"pages": [{
-		"path": "pages/index/index"
-	}],
-	"globalStyle": {
+			"path": "pages/index/index"
+		},
+		{
+			"path": "pages/product/product-detail",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}
+	],
+	"globalStyle": {
 		"navigationStyle": "custom",
-		// "navigationBarTextStyle": "black",
+		"navigationBarTextStyle": "black",
 		// "navigationBarTitleText": "uni-app",
 		// "navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8",
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 94614f9..e0cbf38 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,13 +1,13 @@
 <template>
 	<view>
 		<!-- 轮播图-->
-		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
-			:autoplay="true" interval="5000" duration="500">
-			<swiper-item v-for="(item,index) in swiperList" :key="item.id">
-				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
-				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
-					v-if="item.type=='video'"></video>
-			</swiper-item>
+		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
+			:autoplay="true" interval="5000" duration="500">
+			<swiper-item v-for="(item,index) in swiperList" :key="item.id">
+				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
+					v-if="item.type=='video'"></video>
+			</swiper-item>
 		</swiper>
 		<!-- 搜索栏 -->
 		<view class="cu-bar search bg-white">
@@ -26,13 +26,13 @@
 			<view class="flex justify-between text-black">
 				<view class="padding text-lg">
 					<text>分类</text>
-					<text class="cuIcon-apps uni-text-color"></text>
+					<text class="cuIcon-apps text-main-color"></text>
 					<text class="cuIcon-triangledownfill"></text>
 				</view>
 				<view>
 					<scroll-view scroll-x class="nav">
 						<view class="flex text-center">
-							<view class="cu-item flex-sub" :class="index==tabCur?'uni-text-color cur':''"
+							<view class="cu-item flex-sub" :class="index==tabCur?'text-main-color cur':''"
 								v-for="(item,index) in categories" :key="item.id" @tap="tabSelect" :data-id="index">
 								{{item.name}}
 							</view>
@@ -85,7 +85,7 @@
 		},
 		data() {
 			return {
-				dotStyle: false,
+				dotStyle: true,
 				swiperList: [],
 				tabCur: 0,
 				categories: [],
@@ -96,7 +96,8 @@
 			}
 		},
 		onLoad() {
-			this.loadData();
+			this.loadData();
+			this.bindEvent();
 		},
 		methods: {
 			async loadData() {
@@ -106,6 +107,9 @@
 				this.moduleBarInfos = await this.$api.data('moduleBarInfos');
 				this.hotGoods = await this.$api.data('hotGoods');
 				this.discountGoods = await this.$api.data('discountGoods');
+			},
+			bindEvent() {
+				uni.$on('showProductDetail', this.showDetails);
 			},
 			inputFocus(e) {
 				this.InputBottom = e.detail.height
@@ -124,6 +128,11 @@
 			searchGoods(item) {
 				console.log("搜索条件信息: " + item)
 				console.log("商品搜索中...");
+			},
+			showDetails(productItem) {
+				uni.navigateTo({
+					url: '../product/product-detail'
+				});
 			}
 		}
 	}
diff --git a/pages/product/product-detail.vue b/pages/product/product-detail.vue
new file mode 100644
index 0000000..b2ef720
--- /dev/null
+++ b/pages/product/product-detail.vue
@@ -0,0 +1,232 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-white'" :isBack="true">
+			<block slot="backText">返回</block>
+			<!-- <block slot="content">商品详情</block> -->
+		</cu-custom>
+		<!-- 导航栏 -->
+		<uni-transition class="fixed-top-bar" mode-class="fade" :show="showTopNav">
+			<view class="grid text-center col-3 solid-top solid-bottom bg-white">
+				<view class="padding" :class="curTopNav == 0 ? 'bg-blue' : ''" @click.stop="clickNav(0)">服务</view>
+				<view class="padding" :class="curTopNav == 1 ? 'bg-blue' : ''" @click.stop="clickNav(1)">评价</view>
+				<view class="padding" :class="curTopNav == 2 ? 'bg-blue' : ''" @click.stop="clickNav(2)">详情</view>
+			</view>
+		</uni-transition>
+		<!-- 轮播图，视频 -->
+		<swiper class="screen-swiper" @change="changeSwiper">
+			<swiper-item v-for="(item,index) in swiperList" :key="item.id" @click="pauseVideo($event, item)">
+				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
+				<video v-if="item.type=='video'" id="productVideo" :src="item.url" :controls="true" :autoplay="false"
+					:show-center-play-btn="true" :show-fullscreen-btn="false"></video>
+			</swiper-item>
+		</swiper>
+		<!-- 价格及活动栏 -->
+		<view class="bg-gradual-color padding-sm margin-bottom-xs shadow-blur">
+			<view class="flex justify-between align-center">
+				<view>
+					<text class="text-sl text-price">{{curProductSpecs.salePrice}}</text>
+					<text class="text-del">
+						<text class="text-xxl">¥{{curProductSpecs.price}}</text>
+					</text>
+				</view>
+				<view>
+					<text class="text-df">已售：{{curProductSpecs.saledCount}}</text>
+				</view>
+			</view>
+			<view id="pageAnchor0" class="flex justify-between align-end">
+				<view class="text-df">
+					佣金：<text class="text-price margin-right-sm">{{curProductSpecs.commission}}</text>
+					<text class="cuIcon-share"></text>
+				</view>
+				<!-- <view class="text-df">
+					距结束：<uni-countdown style="float: right;" :day="1" :hour="1" :minute="12" :second="40" background-color="#fff" splitorColor="#fff"></uni-countdown>
+				</view> -->
+				<view class="flex justify-end text-df align-center">
+					<view>距结束：</view>
+					<uni-countdown style="float: right;" :day="1" :hour="1" :minute="12" :second="40"
+						background-color="#fff" splitorColor="#fff"></uni-countdown>
+				</view>
+			</view>
+		</view>
+		<!-- 产品概要 -->
+		<view class="bg-white padding-sm">
+			<view class="flex justify-between text-df align-center">
+				<view class="padding-right-sm text-left solid-right">
+					<view class="text-xl">
+						<view class='cu-tag round bg-orange light' v-if="productInfo.isGoldServ">
+							<text class="cuIcon-medal">金牌服务</text>
+						</view>
+						{{productInfo.name}}
+					</view>
+					<view class="text-sm text-gray margin-top-xs">{{productInfo.desc}}</view>
+				</view>
+				<view class="text-xl text-right padding-lr">
+					<view class="margin-tb-xs"><text class="cuIcon-share"></text></view>
+					<view v-if="productInfo.isGoldServ" class="margin-tb-xs text-orange"><text
+							class="cuIcon-friendfamous"></text></view>
+				</view>
+			</view>
+		</view>
+		<!-- 服务保障和规格 -->
+		<view class="margin-lr-sm padding margin-top-sm bg-white">
+			<view v-for="(item, index) in guaranteeList" :key="item.id">
+				<view class="cu-capsule margin-tb-xs">
+					<view class='cu-tag bg-main-color'>
+						<text :class="'cuIcon-' + item.icon"></text>
+					</view>
+					<view class="cu-tag line-main-color">
+						{{item.name}}
+					</view>
+				</view>
+				<text class="margin-lr-xs text-sm">{{item.desc}}</text>
+			</view>
+			<view class="solid-top text-lg padding-tb-sm">
+				<text class="text-black">选择品类</text>
+			</view>
+			<view class="flex flex-wrap" :class="isShowAllSpecs ? '' : 'certern-height'">
+				<view class="margin-tb-xs margin-right-xs" v-for="(item,index) in specsList" :key="item.id">
+					<view class='cu-tag round padding'
+						:class="curProductSpecs.id === item.id ? 'line-main-color' : 'line-default'"
+						@click="chooseSpecs(item)">{{item.name}}</view>
+				</view>
+			</view>
+			<view class="text-bold text-gray text-lg text-center bg-white padding-top-sm" @click="showAllSpecs()"><text
+					:class="'cuIcon-' + (isShowAllSpecs ? 'fold' : 'unfold')"></text></view>
+		</view>
+		<!-- 服务评价 -->
+		<view id="pageAnchor1" class="margin-lr-sm margin-top-sm bg-white">
+			<view class="flex justify-between align-end padding">
+				<view class="text-black text-lg">商品评价</view>
+				<view class="text-red text-sm">好评率95%<text class="text-bold text-gray cuIcon-right"></text></view>
+			</view>
+			<comments-card :reviewers="reviewers"></comments-card>
+		</view>
+		<!-- 店家链接 -->
+		<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>
+		</view>
+		<!-- 服务详情 -->
+		<view id="pageAnchor2" class="margin-lr-sm margin-top-sm bg-white margin-bottom-with-bar image">
+			<!-- <image :src="productDetailImgUrl" mode="widthFix"></image> -->
+			详情图片......
+		</view>
+		<!-- 底部操作条 -->
+		<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>
+				客服
+			</button>
+			<!-- <view class="action">
+				<view class=" cuIcon-shop"></view> 店铺
+			</view> -->
+			<view class="action">
+				<view class="cuIcon-cart">
+					<view class="cu-tag badge">99</view>
+				</view>
+				购物车
+			</view>
+			<view class="bg-main-color light submit">加入购物车</view>
+			<view class="bg-main-color submit">立即订购</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import commentsCard from '@/components/goods-card/comments-card.vue';
+
+	export default {
+		components: {
+			commentsCard
+		},
+		data() {
+			return {
+				swiperList: [],
+				curProductSpecs: {},
+				productInfo: {},
+				guaranteeList: [],
+				specsList: [],
+				isShowAllSpecs: false,
+				reviewers: [],
+				productDetailImgUrl: '',
+				productVideoPlaying: false,
+				showTopNav: false,
+				curTopNav: 0,
+				shopInfo: {}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		onReady() {
+			this.productVideoContext = uni.createVideoContext('productVideo');
+		},
+		onPageScroll(e) {
+			this.showTopNav = e.scrollTop > 250 ? true : false
+		},
+		methods: {
+			async loadData() {
+				let productDetail = await this.$api.data('productDetail');
+				this.swiperList = productDetail.swiperList;
+				this.productInfo = productDetail.productInfo;
+				this.guaranteeList = productDetail.guaranteeList;
+				this.specsList = productDetail.specsList;
+				this.curProductSpecs = this.specsList[0];
+				this.reviewers = productDetail.reviewers;
+				this.productDetailImgUrl = productDetail.productDetailImgUrl;
+				this.shopInfo = productDetail.shopInfo;
+			},
+			chooseSpecs(item) {
+				this.curProductSpecs = item;
+			},
+			showAllSpecs() {
+				this.isShowAllSpecs = !this.isShowAllSpecs;
+			},
+			pauseVideo(e, item) {
+				if (item.type !== 'video') {
+					return;
+				}
+				if (this.productVideoPlaying) {
+					this.productVideoContext.pause();
+				} else {
+					this.productVideoContext.play();
+				}
+				this.productVideoPlaying = !this.productVideoPlaying;
+			},
+			changeSwiper(e) {
+				// 只有第一个是视频，如果是切换到图片就停止播放
+				if (e.detail.current !== 0) {
+					this.productVideoContext.pause();
+					this.productVideoPlaying = false;
+				}
+			},
+			clickNav(index) {
+				// 修改聚焦时的样式
+				this.curTopNav = index;
+				// 跳转到指定目录
+				uni.pageScrollTo({
+					selector: '#pageAnchor' + index
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.text-del {
+		text-decoration: line-through;
+	}
+
+	.certern-height {
+		height: 300rpx;
+		overflow: hidden;
+	}
+</style>
diff --git a/style/blue/blue-topic.css b/style/blue/blue-topic.css
new file mode 100644
index 0000000..bb7e2cb
--- /dev/null
+++ b/style/blue/blue-topic.css
@@ -0,0 +1,23 @@
+.line-default {
+	color: #aaaaaa;
+}
+
+.line-main-color,
+.text-main-color {
+	color: #0081ff;
+}
+
+.bg-main-color {
+	background-color: #0081ff;
+	color: #ffffff;
+}
+
+.bg-main-color.light {
+	color: #0081ff;
+	background-color: #cce6ff;
+}
+
+.bg-gradual-color {
+	background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
+	color: #ffffff;
+}
\ No newline at end of file
diff --git a/style/default.css b/style/default.css
new file mode 100644
index 0000000..bee73cc
--- /dev/null
+++ b/style/default.css
@@ -0,0 +1,17 @@
+.margin-bottom-with-bar {
+	margin-bottom: 130rpx;
+}
+
+.fixed-bottom-bar {
+	position: fixed !important;
+	width: 100% !important;
+	bottom: 0 !important;
+	margin-bottom: 0 !important;
+	z-index: 210000000;
+}
+
+.fixed-top-bar {
+	position: fixed !important;
+	z-index: 210000000;
+	width: 100%;
+}
\ No newline at end of file