diff --git a/common/styles/common.css b/common/styles/common.css
index 4ba4084..534f5db 100644
--- a/common/styles/common.css
+++ b/common/styles/common.css
@@ -280,11 +280,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 +312,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 b321520..cb16b98 100644
--- a/pages.json
+++ b/pages.json
@@ -25,7 +25,8 @@
 		{
 			"path": "pages/goodsDetail/goodsDetail",
 			"style": {
-				"navigationBarTitleText": "商品详情"
+				"navigationBarTitleText": "商品详情",
+				"backgroundColor": "#F5F5F5"
 			}
 		}
 	],
diff --git a/pages/goodsDetail/goodsDetail.vue b/pages/goodsDetail/goodsDetail.vue
index 10fbaaf..e5f48dd 100644
--- a/pages/goodsDetail/goodsDetail.vue
+++ b/pages/goodsDetail/goodsDetail.vue
@@ -1,6 +1,79 @@
 <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>
 
@@ -8,7 +81,7 @@
 	export default {
 		data(){
 			return {
-				
+				current: 0 // 轮播下标
 			}
 		},
 		onLoad(){
@@ -20,6 +93,129 @@
 	}
 </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