diff --git a/common/styles/common.css b/common/styles/common.css
index 0eaaf23..11bff85 100644
--- a/common/styles/common.css
+++ b/common/styles/common.css
@@ -60,7 +60,7 @@ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
 radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbox-input:hover {
 	border-color: #d1d1d1 !important;
 }
-
+/* #endif */
 
 
 /* 常用的 */
@@ -125,6 +125,10 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 	flex-wrap: wrap;
 }
 
+.lf-text-vertical{
+	vertical-align: middle;
+}
+
 .lf-line-1{
 	overflow: hidden;
 	white-space: nowrap;
@@ -280,11 +284,11 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 }
 
 .lf-color-primary {
-	color: #FA4427 !important;
+	color: #FE9903 !important;
 }
 
 .lf-bg-primary {
-	background: #FA4427 !important;
+	background: #FE9903 !important;
 }
 
 .lf-color-secondary {
@@ -312,11 +316,11 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 }
 
 .lf-color-gray {
-	color: #656565 !important;
+	color: #777777 !important;
 }
 
 .lf-bg-gray {
-	background: #656565 !important;
+	background: #777777 !important;
 }
 
 .lf-color-999{
diff --git a/pages.json b/pages.json
index 4d6c64a..517fe08 100644
--- a/pages.json
+++ b/pages.json
@@ -51,6 +51,25 @@
 			"style": {
 				"navigationBarTitleText": "我的"
 			}
+		},
+		{
+			"path": "pages/goodsDetail/index",
+			"style": {
+				"navigationBarTitleText": "商品详情",
+				"backgroundColor": "#F5F5F5"
+			}
+		},
+		{
+			"path": "pages/collect/index",
+			"style": {
+				"navigationBarTitleText": "我的收藏"
+			}
+		},
+		{
+			"path": "pages/contactService/index",
+			"style": {
+				"navigationBarTitleText": "联系客服"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/center/index.vue b/pages/center/index.vue
index 88ee79b..517d49f 100644
--- a/pages/center/index.vue
+++ b/pages/center/index.vue
@@ -1,13 +1,81 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">
-				uView - 多平台快速开发的UI框架
-			</text>
+	<view>
+		<view class="lf-flex head">
+			<image class="user-img"></image>
+			<view class="user-info">
+				<view class="lf-font-40 lf-font-bold" style="width: 500rpx;">
+					<text>时空网的忠实网友</text>
+					<text class="user-label">商户</text>
+					<text class="user-label">管理员</text>
+				</view>
+				<view class="lf-m-t-20 lf-font-28">
+					<text>ID 78873</text>
+					<text class="lf-m-l-30">135****7547</text>
+				</view>
+			</view>
 		</view>
-		<view class="link-demo">
-			<u-link :color="$u.color['primary']" :under-line="true" href="http://www.uviewui.com">Link超链接组件演示</u-link>
+		<view class="list">
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">我的收藏</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">联系客服</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">意见反馈</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">常见问题</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">退出登录</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
+		</view>
+		<!-- 商家工具 -->
+		<view class="shop-list">
+			<view class="lf-row-between lf-m-b-20">
+				<view class="lf-font-36 lf-font-bold">商家工具</view>
+				<view class="lf-font-28" style="color: #555555;">李大叔家的店</view>
+			</view>
+			<view class="lf-row-between list-item" hover-class="lf-opacity">
+				<view>
+					<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
+					<text class="lf-text-vertical lf-m-l-16 lf-font-32">卡券核销</text>
+				</view>
+				<view>
+					<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -16,7 +84,7 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				
 			}
 		},
 		onLoad() {
@@ -28,35 +96,65 @@
 	}
 </script>
 
+<style>
+	page{
+		overflow-x: hidden;
+		background-color: #f5f5f5;
+	}
+</style>
 <style lang="scss" scoped>
-	.content {
+	.head{
+		height: max-content;
+		width: 750rpx;
+		background-color: #FFFFFF;
+		padding: 30rpx 32rpx;
+		box-sizing: border-box;
 		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 40rpx;
+		.user-img{
+			width: 150rpx;
+			height: 150rpx;
+			border-radius: 50%;
+			background-color: #EEEEEE;
+			margin-right: 20rpx;
+		}
+		.user-info{
+			flex: auto;
+			height: max-content;
+		}
+		.user-label{
+			display: inline-block;
+			font-size: 24rpx;
+			color: #FFFFFF;
+			background-color: #1E89FF;
+			padding: 4rpx 16rpx;
+			border-radius: 30rpx;
+			margin-left: 8rpx;
+		}
 	}
 	
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 100rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+	.list{
+		margin-top: 20rpx;
+		padding: 0 32rpx;
+		background-color: #FFFFFF;
+		width: 100%;
+		height: auto;
 	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-	
-	.title {
-		font-size: 28rpx;
-		color: $u-content-color;
+	.list-item{
+		border-bottom: 1rpx solid #EEEEEE;
+		height: 110rpx;
+		box-sizing: border-box;
+		&:last-child{
+			border-bottom: none;
+		}
 	}
 	
-	.link-demo {
-		margin-top: 80rpx;
+	.shop-list{
+		margin-top: 20rpx;
+		width: 750rpx;
+		height: auto;
+		background-color: #FFFFFF;
+		padding: 30rpx 32rpx;
+		padding-bottom: 0;
+		box-sizing: border-box;
 	}
 </style>
diff --git a/pages/collect/index.vue b/pages/collect/index.vue
new file mode 100644
index 0000000..46018d0
--- /dev/null
+++ b/pages/collect/index.vue
@@ -0,0 +1,74 @@
+<template>
+	<view>
+		<view class="list-box">
+			<view class="lf-row-between list-item" v-for="(item, index) in list" :key="index" hover-class="lf-opacity">
+				<image class="goods-img"></image>
+				<view style="width: 480rpx;">
+					<view class="lf-font-32 lf-line-1">网红辣椒棒魔鬼辣椒挑战全网第</view>
+					<view class="lf-row-between lf-m-t-20">
+						<view class="lf-flex">
+							<image class="shop-img"></image>
+							<view class="lf-m-l-10 lf-font-28 lf-line-1 shop-name">李大叔家的店</view>
+						</view>
+						<view>
+							<u-icon name="heart-fill" color="#ff0f00"></u-icon>
+						</view>
+					</view>
+					<view class="lf-m-t-20 lf-font-24 lf-color-gray">收藏时间 2021-6-17  12:37:54</view>
+				</view>
+			</view>
+		</view>
+		<!-- 加载 -->
+		<view class="loading-more">
+			<text v-if="list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
+			<my-nocontent v-else></my-nocontent>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				list: [1, 2],
+				loadingClass: false,
+				loadingText: '已显示全部数据~'
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.list-box{
+		width: 750rpx;
+		height: auto;
+		padding: 0 32rpx;
+		box-sizing: border-box;
+		.list-item{
+			border-bottom: 1rpx solid #EEEEEE;
+			padding: 30rpx 0;
+			.goods-img{
+				width: 180rpx;
+				height: 180rpx;
+				border-radius: 20rpx;
+				background-color: #EEEEEE;
+			}
+			.shop-img{
+				width: 60rpx;
+				height: 60rpx;
+				border-radius: 10rpx;
+				background-color: #EEEEEE;
+			}
+			.shop-name{
+				width: 340rpx; 
+				color: #555555;
+			}
+		}
+	}
+</style>
diff --git a/pages/contactService/index.vue b/pages/contactService/index.vue
new file mode 100644
index 0000000..91344d3
--- /dev/null
+++ b/pages/contactService/index.vue
@@ -0,0 +1,71 @@
+<template>
+	<view class="content">
+		<view class="lf-row-between item">
+			<view class="lf-color-gray">在线客服</view>
+			<button class="btn" open-type="contact">在线联系</button>
+		</view>
+		<view class="lf-row-between item">
+			<view class="lf-color-gray">服务时间</view>
+			<view>10:00～20:00</view>
+		</view>
+		<view class="lf-row-between item">
+			<view class="lf-color-gray">客服电话</view>
+			<view>13278683790</view>
+		</view>
+		<view class="lf-row-between item">
+			<view class="lf-color-gray">联系地址</view>
+			<view>南宁市青秀区汇东国际F座6楼</view>
+		</view>
+		<view class="lf-row-between item">
+			<view class="lf-color-gray">客服微信</view>
+			<view>
+				<text>whhu8798</text>
+				<text class="lf-m-l-20 lf-color-primary">复制</text>
+			</view>
+		</view>
+		<view class="lf-row-between item">
+			<view class="lf-color-gray">当前版本</view>
+			<view>1.0.1</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: auto;
+		padding: 0 32rpx;
+		box-sizing: border-box;
+		.item{
+			width: 100%;
+			height: 104rpx;
+			border-bottom: 1rpx solid #EEEEEE;
+			.btn{
+				margin: 0;
+				width: 176rpx;
+				height: 60rpx;
+				background: #FE9903;
+				border-radius: 30rpx;
+				color: #FFFFFF;
+				font-size: 28rpx;
+				line-height: 60rpx;
+			}
+		}
+	}
+</style>
diff --git a/pages/goodsDetail/goodsDetail.vue b/pages/goodsDetail/goodsDetail.vue
deleted file mode 100644
index 10fbaaf..0000000
--- a/pages/goodsDetail/goodsDetail.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data(){
-			return {
-				
-			}
-		},
-		onLoad(){
-			
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style lang="scss" scoped="scoped">
-	
-</style>
\ No newline at end of file
diff --git a/pages/goodsDetail/index.vue b/pages/goodsDetail/index.vue
new file mode 100644
index 0000000..e5f48dd
--- /dev/null
+++ b/pages/goodsDetail/index.vue
@@ -0,0 +1,221 @@
+<template>
+	<view>
+		<!-- 商品图片轮播 -->
+		<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box">
+			<swiper-item>
+				<image src="../../static/tu.png" style="width: 100%; height: 100%;"></image>
+			</swiper-item>
+			<swiper-item>
+				<image src="../../static/tu.png" style="width: 100%; height: 100%;"></image>
+			</swiper-item>
+		</swiper>
+		<!-- 商品主要信息 -->
+		<view class="head-info">
+			<view class="lf-font-40">网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 网红优惠季 网红优惠季 </view>
+			<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
+				<view class="lf-flex price">
+					<view>¥ 19.90</view>
+					<view>¥ 39.00</view>
+					<view>2.9折</view>
+				</view>
+				<view>
+					<view class="lf-color-gray">已售4.5万份</view>
+					<view class="lf-color-primary">库存仅剩98份</view>
+				</view>
+			</view>
+			<view class="label-box">
+				<view class="label-item">过期退</view>
+				<view class="label-item">满减优惠</view>
+				<view class="label-item">信用付</view>
+			</view>
+		</view>
+		<!-- 地址信息 -->
+		<view class="address-box">
+			<view class="lf-font-32 lf-font-bold">适用门店</view>
+			<view class="lf-m-t-20 lf-row-between">
+				<view class="lf-flex">
+					<image class="lf-fle shop-img" src="../../static/tu.png"></image>
+					<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">李大叔家的店的店的店的店的店</view>
+				</view>
+				<u-icon name="phone" color="#3A62FF" size="46"></u-icon>
+			</view>
+			<view class="lf-flex lf-m-t-20">
+				<u-icon name="map-fill" size="60"></u-icon>
+				<view class="lf-m-l-20 lf-font-32">南宁市青秀区 金湖广场 金浦路 地铁1号线A出口 右转200米</view>
+			</view>
+		</view>
+		<!-- 商品详情 -->
+		<view class="goods-detail">
+			<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
+			<image class="goods-img" src="../../static/tu.png"></image>
+			<image class="goods-img" src="../../static/tu.png"></image>
+		</view>
+		<!-- 修饰专用 -->
+		<view class="extra"></view>
+		<!-- 吸底操作按钮 -->
+		<view class="lf-row-between fixed-bottom">
+			<view class="lf-flex lf-p-t-10 lf-p-b-10">
+				<view class="lf-flex-column lf-row-center icon-item">
+					<u-icon name="home" size="50"></u-icon>
+					<view class="lf-m-t-1">首页</view>
+				</view>
+				<view class="lf-flex-column lf-row-center icon-item">
+					<u-icon name="server-fill" size="50"></u-icon>
+					<view class="lf-m-t-1">客服</view>
+				</view>
+				<view class="lf-flex-column lf-row-center icon-item">
+					<u-icon name="heart" size="50"></u-icon>
+					<view class="lf-m-t-1">收藏</view>
+				</view>
+				<view class="lf-flex-column lf-row-center icon-item">
+					<u-icon name="share" size="50"></u-icon>
+					<view class="lf-m-t-1">分享</view>
+				</view>
+			</view>
+			<button class="btn">立即抢购</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				current: 0 // 轮播下标
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+	page{
+		background-color: #f5f5f5;
+		overflow-x: hidden;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.swiper-box{
+		width: 750rpx;
+		height: 520rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.head-info{
+		width: 750rpx;
+		height: auto;
+		box-sizing: border-box;
+		padding: 0 32rpx;
+		padding-top: 20rpx;
+		background-color: #FFFFFF;
+		.price>view:nth-of-type(1){
+			color: #FF0000;
+			font-size: 40rpx;
+			margin-right: 22rpx;
+		}
+		.price>view:nth-of-type(2){
+			text-decoration: line-through;
+			color: #777777;
+			margin-right: 22rpx;
+		}
+		.price>view:nth-of-type(3){
+			width: max-content;
+			padding: 0 18rpx;
+			height: 46rpx;
+			background-color: #FE9903;
+			border-radius: 10rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: #FFFFFF;
+		}
+		.label-box{
+			min-height: 130rpx;
+			width: 100%;
+			border-top: 1rpx solid #E5E5E5;
+			display: flex;
+			flex-wrap: wrap;
+			padding: 30rpx 0 10rpx 0;
+			.label-item{
+				width: 156rpx;
+				height: 70rpx;
+				border-radius: 10rpx;
+				border: 2rpx solid #FE9903;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 28rpx;
+				color: #FE9903;
+				margin-right: 20rpx;
+				margin-bottom: 20rpx;
+			}
+		}
+	}
+	
+	.address-box{
+		width: 750rpx;
+		height: auto;
+		box-sizing: border-box;
+		background-color: #FFFFFF;
+		padding: 32rpx;
+		margin-top: 20rpx;
+		.shop-img{
+			width: 60rpx;
+			height: 60rpx;
+			border-radius: 10rpx;
+		}
+	}
+	
+	.goods-detail{
+		width: 750rpx;
+		height: auto;
+		background-color: #FFFFFF;
+		padding: 32rpx;
+		box-sizing: border-box;
+		margin-top: 20rpx;
+		.goods-img{
+			width: 100%;
+		}
+	}
+	
+	.extra{
+		width: 100%;
+		height: 120rpx;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		box-sizing: content-box;
+	}
+	
+	.fixed-bottom{
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		background-color: #FFFFFF;
+		width: 100%;
+		height: auto;
+		padding: 0 32rpx;
+		border-top: 1rpx solid #e5e5e5;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		.icon-item{
+			padding: 0 10rpx;
+			margin-right: 16rpx;
+		}
+		.btn{
+			margin: 0;
+			padding: 0;
+			width: 208rpx;
+			height: 80rpx;
+			background-color: #FE9903;
+			color: #FFFFFF;
+			line-height: 80rpx;
+			font-size: 32rpx;
+			border-radius: 42rpx;
+		}
+	}
+</style>
\ No newline at end of file