diff --git a/pageB/components/sdetails/navs.vue b/pageB/components/sdetails/navs.vue
new file mode 100644
index 0000000..6d942bc
--- /dev/null
+++ b/pageB/components/sdetails/navs.vue
@@ -0,0 +1,30 @@
+<template>
+    <view class="nav">
+        <text>dsadasdas</text>
+        <image></image>
+    </view>
+</template>
+<script>
+export default {
+    name:"navs"    
+}
+</script>
+<style lang="scss" scoped>
+.nav{
+    width: 100%;
+    height: 100rpx;
+    display: flex;
+    padding: 30rpx;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 30rpx;
+    // margin-bottom: 2rpx;
+    border-bottom: 2rpx solid #ececec;
+    color:#333;
+    background-color: #fff;
+    >image{
+        width: 13rpx;
+        height: 25rpx;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pageB/components/sdetails/tloos.vue b/pageB/components/sdetails/tloos.vue
new file mode 100644
index 0000000..05ff9aa
--- /dev/null
+++ b/pageB/components/sdetails/tloos.vue
@@ -0,0 +1,55 @@
+<template>
+    <view class="tloos">
+        <view class="navs">
+            <image></image>
+            123
+        </view>
+        <view class="navs" style="margin-right:30rpx">
+            <image></image>
+            123
+        </view>
+        <view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
+        <view class="button" style="background:rgba(253,211,96,1);">加入购物车</view>
+        <view class="button" style="background:rgba(255,120,15,1);">立即购买</view>
+    </view>
+</template>
+<script>
+export default {
+    name:"tloos"
+}
+</script>
+<style lang="scss" scoped>
+.tloos{
+    display: flex;
+    position: fixed;
+    height: 98rpx;
+    width: 100%;
+    bottom:0;
+    border-top: 1rpx solid #ececec;
+    .navs{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 24rpx;
+        color: #666;
+        flex-shrink: 0;
+        margin-left: 30rpx;
+        >image{
+            width: 35rpx;
+            height: 35rpx;
+            margin-bottom: 15rpx;
+        }
+        
+
+    }
+    .button{
+        width: 100%;
+        height: 100%;
+        line-height: 98rpx;
+        text-align: center;
+        color: #fff;
+
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pageB/components/sdetails/youhuiitem.vue b/pageB/components/sdetails/youhuiitem.vue
new file mode 100644
index 0000000..9d12710
--- /dev/null
+++ b/pageB/components/sdetails/youhuiitem.vue
@@ -0,0 +1,53 @@
+<template>
+    <view class="youhuiitem">
+        <view class="left">
+            <view>
+                <text>￥41</text>
+                <text>店铺优惠券</text>
+            </view>
+            <text>新用户可用</text>
+            <text>有效期2018.09.06-2018.10.06</text>
+        </view>
+        <view class="right">立即领取</view>
+
+    </view>
+</template>
+<script>
+export default {
+    name:"youhuiitem"
+}
+</script>
+<style lang="scss" scoped>
+.youhuiitem{
+    width: 689rpx;
+    height: 173rpx;
+    padding: 0 60rpx 0 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left{
+        display: flex;
+        flex-direction: column;
+        >text{
+            margin-top: 17rpx;
+            font-size: 24rpx;
+            color: #fff;
+        }
+        >view{
+            display: flex;
+            align-items: flex-end;
+            color: #fff;
+            >text:first-child{
+                font-size: 50rpx;
+            }
+            >text:last-child{
+                font-size: 28rpx;
+            }
+        }
+    }
+    .right{
+        font-size: 32rpx;
+        color: #fff;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pageB/components/sdetails/youhuiquan.vue b/pageB/components/sdetails/youhuiquan.vue
new file mode 100644
index 0000000..44ffe75
--- /dev/null
+++ b/pageB/components/sdetails/youhuiquan.vue
@@ -0,0 +1,27 @@
+<template>
+    <view class="youhuiquan">
+        <view class="top">
+            优惠券详情
+        </view>
+        <view class="title">
+            领取优惠券
+        </view>
+        <scroll-view class="gundong" :scroll-y="true">
+            
+        </scroll-view>
+    </view>
+</template>
+<script>
+export default {
+    name:"youhuiquan"
+}
+</script>
+<style lang="scss" scoped>
+.youhuiquan{
+.gundong{
+    width: 100%;
+    height: 447rpx;
+
+}
+}
+</style>
\ No newline at end of file
diff --git a/pageB/sdetails/index.vue b/pageB/sdetails/index.vue
new file mode 100644
index 0000000..904587f
--- /dev/null
+++ b/pageB/sdetails/index.vue
@@ -0,0 +1,113 @@
+<template>
+    <view class="sdetails">
+        <u-swiper :list="list" height="500" border-radius="0"></u-swiper>
+        <view class="info">
+            <view class="title">
+                <text>萨的环境</text>
+
+                                               套装新款小个子春季时尚韩版短袖衬衫套装
+新款小个子春季时尚韩版...
+                            
+            </view>
+            <view class="pic">
+                <text>￥24</text>
+                <s>￥12</s>
+            </view>
+        </view>
+        <view class="hr"></view>
+        <navs></navs>
+        <navs></navs>
+        <navs></navs>
+        <view class="xiangqing">
+            <view class="heng"></view>
+            <view class="title">商品详情</view>
+            <view class="heng"></view>
+        </view>
+        <tloos></tloos>
+    </view>
+</template>
+<script>
+import navs from "../components/sdetails/navs"
+import tloos from "../components/sdetails/tloos"
+export default {
+    name:"sdetails",
+    components:{
+        navs,
+        tloos
+    },
+    data() {
+        return {
+            list: [{
+                    image: '/static/uView/swiper/swiper1.jpg',
+                    title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
+                },
+                {
+                    image: '/static/uView/swiper/swiper2.jpg',
+                    title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
+                },
+                {
+                    image: '/static/uView/swiper/swiper3.jpg',
+                    title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
+                }
+            ]
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.sdetails{
+    /deep/image{
+        background-color: #0f0;
+    }
+    .info{
+        padding: 30rpx;
+        .title{
+            flex-wrap: wrap;
+            >text{
+                padding: 13rpx;
+                font-size: 24rpx;
+                color:#fff;
+                margin-right: 13rpx;
+                background-color: #FF780F;
+                display: inline-block;
+                border-radius: 25rpx;
+            }
+        }
+        .pic{
+            >text{
+                font-size: 32rpx;
+                color: #FF3131;
+            }
+            >s{
+                font-size: 26rpx;
+                color: #999;
+                display: inline-block;
+                margin-left: 30rpx;
+            }
+        }
+    }
+    .hr{
+        width: 100%;
+        height: 20rpx;
+        background-color: #ececec;
+    }
+    .xiangqing{
+        display: flex;
+        height: 85rpx;
+        background-color: #ececec;
+        align-items: center;
+        justify-content: center;
+        .heng{
+            width: 79rpx;
+            height: 2rpx;
+            background-color: #a9a9a9;
+
+        }
+        font-size: 28rpx;
+        color: #999;
+        .title{
+            margin: 0 20rpx;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index d7768a6..c143e1e 100644
--- a/pages.json
+++ b/pages.json
@@ -56,6 +56,17 @@
 						}
 					}
 				},
+				{
+					"path": "sdetails/index",
+					"style": {
+						"navigationBarTitleText": "商品详情",
+						"app-plus":{
+							"titleNView":{
+								"backgroundColor":"#ffffff"
+							}
+						}
+					}
+				},
 				{
 					"path": "search/index",
 					"style": {