diff --git a/pageB/components/details/userinfo.vue b/pageB/components/details/userinfo.vue
new file mode 100644
index 0000000..9f7e9c6
--- /dev/null
+++ b/pageB/components/details/userinfo.vue
@@ -0,0 +1,84 @@
+<template>
+    <view class="userinfo">
+
+        <view class="user">
+            <view class="info">
+                <image></image>
+                <view>
+                    <text>达人昵称</text>
+                    <text>关注数量</text>
+                </view>
+               
+            </view>
+            <view class="guanzhu">关注</view>
+        </view>
+        <view class="profile">个性签名</view>
+    </view>
+</template>
+<style lang="scss" scoped>
+image{
+    background-color: #0f0;
+}
+.userinfo{
+    height: 261rpx;
+    width: 100%;
+    padding: 30rpx;
+    .user{
+        display: flex;
+        margin-top: 10rpx;
+        align-items: center;
+        justify-content: space-between;
+        .info{
+            display: flex;
+            align-items: center;
+            >image{
+                width: 140rpx;
+                height: 140rpx;
+                border-radius: 50%;
+
+            }
+            >view{
+                margin-left: 40rpx;
+                display: flex;
+                height: 79rpx;
+                justify-content: space-between;
+                flex-direction: column;
+                >text:first-child{
+                    font-size: 28rpx;
+                    color:#333;
+                }
+                >text:last-child{
+                    font-size: 24rpx;
+                    color: #333;
+                }
+            }
+        }
+        .guanzhu{
+            width: 140rpx;
+            height: 60rpx;
+            font-size: 26rpx;
+            color:#fff;
+            line-height: 60rpx;
+            border-radius: 30rpx;
+            background-color: #FF780F;
+            text-align: center;
+        }
+    }
+    .profile{
+        margin-top: 19rpx;
+        font-size: 24rpx;
+        color: #333;
+        margin-left: 14rpx;
+    }
+}
+</style>
+<script>
+export default {
+    name:"userinfo",
+    data(){
+        return {
+
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/pageB/details/index.vue b/pageB/details/index.vue
new file mode 100644
index 0000000..f31ffd0
--- /dev/null
+++ b/pageB/details/index.vue
@@ -0,0 +1,100 @@
+<template>
+    <view class="details">
+        <view style="border-top: 1rpx solid #ececec;"></view>
+        <userinfo></userinfo>
+        <view style="border-top: 20rpx solid #ececec;"></view>
+        <u-tabs :is-scroll="false" bar-width="70" ref="tabs" :list="list" :current="num" :bar-style="{
+                'background-color':'#FF780F',
+                'bottom':'10rpx'
+            }"
+            inactive-color="#333"
+            :active-item-style="{
+                'color':'#FF780F'
+            }"
+            :bold="false"
+            @change="dianji"
+            :show-bar="false"></u-tabs>
+        <swiper class="card" @change="dianji" :current="num">
+            <swiper-item>
+                <scroll-view style="width:100%;height:100%" scroll-y="true">
+                    <view class="box">
+                        <view class="list">
+                            <view >
+                                <videoItem v-for="item in 10"></videoItem>
+                            </view>
+                            <view style="margin-left:20rpx">
+                                <videoItem v-for="item in 10"></videoItem>
+                            </view>
+                        </view>
+                    </view>
+                    
+                </scroll-view>
+            </swiper-item>
+            <swiper-item>
+                <scroll-view style="width:100%;height:100%" scroll-y="true">
+                    <view class="box">
+                        <view class="list">
+                            <view >
+                                <zhiboItem v-for="item in 10"></zhiboItem>
+                            </view>
+                            <view style="margin-left:20rpx">
+                                <zhiboItem v-for="item in 10"></zhiboItem>
+                            </view>
+                        </view>
+                    </view>
+                    
+                </scroll-view>
+            </swiper-item>
+        </swiper>
+    </view>
+</template>
+<style lang="scss" scoped>
+.details{
+      .card{
+        height: 100vh;
+        width: 100%;
+        .box{
+            width: 100%;
+            padding: 0 30rpx;
+        }
+        .list{
+            display: flex;
+        }
+    }
+}
+</style>
+<script>
+import videoItem from "@/components/index/video-item/index" 
+import zhiboItem from "@/components/index/zhibo-item/index" 
+import userinfo from "../components/details/userinfo"
+export default {
+    name:"details",
+    components:{
+       userinfo,
+       videoItem,
+       zhiboItem
+    },
+    data(){
+        return {
+            list:[
+                {
+					name: '短视频'
+				}, {
+					name: '图文'
+				}
+            ],
+            num:0
+        }
+    },
+    methods:{
+        dianji(a){
+            console.log(a)
+            if(typeof a == "object"){
+                this.num = a.detail.current
+            }else{
+                this.num = a
+            }
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index d4c2aa3..528fdcc 100644
--- a/pages.json
+++ b/pages.json
@@ -44,6 +44,17 @@
 							}
 						}
 					}
+				},
+				{
+					"path": "details/index",
+					"style": {
+						"navigationBarTitleText": "",
+						"app-plus":{
+							"titleNView":{
+								"backgroundColor":"#ffffff"
+							}
+						}
+					}
 				}
 			]
 		},