From c312152365597a7b33f15f8f3bd034b0273979b7 Mon Sep 17 00:00:00 2001
From: luyuan <1162963624@qq.com>
Date: Tue, 2 Jun 2020 09:16:41 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=8E=A8=E8=8D=90=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/index/video-item/index.vue | 35 ++++++++++++++++++++++++---
 pages/index/index.vue                 | 12 ++++++++-
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/components/index/video-item/index.vue b/components/index/video-item/index.vue
index 282da62..2137097 100644
--- a/components/index/video-item/index.vue
+++ b/components/index/video-item/index.vue
@@ -4,10 +4,11 @@
 
         </image>
         <view class="title">这是标题这是标题这是标题</view>
+        <view class="jianjie">这是简介这是简介这是简介</view>
         <view class="user">
             <view>
                 <image></image>
-                <text></text>
+                <text>这是名字</text>
             </view>
             <image></image>
         </view>
@@ -20,16 +21,34 @@
     }
     margin-top: 20rpx;
     width: 335rpx;
+    box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
+    padding-bottom: 20rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
     .head{
         width: 100%;
         height: 334rpx;
-        border-radius: 20rpx 0;
     }
     .title{
+        margin:0 auto;
+        margin-top: 20rpx;
+        font-size: 22rpx;
+        color: #333;
+        font-weight: 500;
+        line-height: 30rpx;
+        width: 307rpx;
+        overflow:hidden; 
+        text-overflow:ellipsis;
+        display:-webkit-box; 
+        -webkit-box-orient:vertical;
+        -webkit-line-clamp:2; 
+    }
+    .jianjie{
+        margin:0 auto;
+        margin-top: 20rpx;
         font-size: 22rpx;
         color: #666;
         line-height: 30rpx;
-        margin-top: 20px;
         width: 307rpx;
         margin-left: 18rpx;
         overflow:hidden; 
@@ -37,18 +56,28 @@
         display:-webkit-box; 
         -webkit-box-orient:vertical;
         -webkit-line-clamp:2; 
+
     }
     .user{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin:0 auto;
+        margin-top: 20rpx;
+        width: 307rpx;
         >view{
             display: flex;
             align-items: center;
             >image{
                 width: 38rpx;
                 height: 38rpx;
+                border-radius: 50%;
+
             }
             >text{
                 font-size: 20rpx;
                 color:#333;
+                margin-left: 9rpx;
             }
         }
         >image{
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b93465e..ec5dd11 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -17,7 +17,14 @@
                         <swiper-item></swiper-item>
                         <swiper-item></swiper-item>
                     </swiper>
-                    <videoItem></videoItem>
+                    <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>
                 </scroll-view>
             </swiper-item>
             <swiper-item>
@@ -91,6 +98,9 @@
             border-radius: 20rpx;
             background-color: #0f0;
         }
+        .list{
+            display: flex;
+        }
     }
 }
 </style>

From 0f5e209d64784dfbd20d7f44955535dfd439e6a1 Mon Sep 17 00:00:00 2001
From: luyuan <1162963624@qq.com>
Date: Tue, 2 Jun 2020 09:34:37 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E7=9B=B4=E6=92=AD=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/index/ad/index.vue         | 25 +++++++++
 components/index/video-item/index.vue |  3 --
 components/index/zhibo-item/index.vue | 75 +++++++++++++++++++++++++++
 pages/index/index.vue                 | 37 +++++++------
 4 files changed, 120 insertions(+), 20 deletions(-)
 create mode 100644 components/index/ad/index.vue
 create mode 100644 components/index/zhibo-item/index.vue

diff --git a/components/index/ad/index.vue b/components/index/ad/index.vue
new file mode 100644
index 0000000..0c6bddf
--- /dev/null
+++ b/components/index/ad/index.vue
@@ -0,0 +1,25 @@
+<template>
+    <swiper class="ad" indicator-dots="true" indicator-color="#fff" indicator-active-color="#634838">
+        <swiper-item></swiper-item>
+        <swiper-item></swiper-item>
+        <swiper-item></swiper-item>
+    </swiper>
+</template>
+<style lang="scss" scoped>
+.ad{
+    width: 100%;
+    height: 294rpx;
+    border-radius: 20rpx;
+    background-color: #0f0;
+}
+</style>
+<script>
+export default {
+    name:"ad",
+    data(){
+        return {
+
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/components/index/video-item/index.vue b/components/index/video-item/index.vue
index 2137097..1f48a97 100644
--- a/components/index/video-item/index.vue
+++ b/components/index/video-item/index.vue
@@ -16,9 +16,6 @@
 </template>
 <style lang="scss" scoped>
 .video-item{
-    image{
-        background-color: #0f0;
-    }
     margin-top: 20rpx;
     width: 335rpx;
     box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
diff --git a/components/index/zhibo-item/index.vue b/components/index/zhibo-item/index.vue
new file mode 100644
index 0000000..d26f10d
--- /dev/null
+++ b/components/index/zhibo-item/index.vue
@@ -0,0 +1,75 @@
+<template>
+    <view class="zhibo">
+        <image class="head"></image>
+        <view class="user">
+            <view class="name">
+                <image></image>
+                <text>这是名字</text>
+            </view>
+            <view class="pingbi">
+                <image></image>
+                <text>屏蔽用户</text>
+            </view>
+        </view>
+    </view>    
+</template>
+<style lang="scss" scoped>
+.zhibo{
+    width: 335rpx;
+    margin-top: 20rpx;
+    box-shadow:0 3rpx 7rpx 0 rgba(153, 153, 153, 0.35);
+    padding-bottom: 20rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    .head{
+        width: 100%;
+        height: 425rpx;
+    }
+    .user{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin:0 auto;
+        margin-top: 20rpx;
+        width: 307rpx;
+        .name{
+            display: flex;
+            align-items: center;
+            >image{
+                width: 38rpx;
+                height: 38rpx;
+                border-radius: 50%;
+
+            }
+            >text{
+                font-size: 20rpx;
+                color:#333;
+                margin-left: 9rpx;
+            }
+        }
+        .pingbi{
+            display: flex;
+            align-items: center;
+            >text{
+                font-size: 20rpx;
+                color: #333;
+                margin-left: 9rpx;
+            }
+            >image{
+                width: 24rpx;
+                height: 24rpx;
+            }
+        }
+    }
+}
+</style>
+<script>
+export default {
+    name:"zhibo-item",
+    data(){
+        return {
+
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index ec5dd11..034ee12 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -12,11 +12,7 @@
         <swiper class="card">
             <swiper-item>
                 <scroll-view style="width:100%;height:100%" scroll-y="true">
-                    <swiper class="ad" indicator-dots="true" indicator-color="#fff" indicator-active-color="#634838">
-                        <swiper-item></swiper-item>
-                        <swiper-item></swiper-item>
-                        <swiper-item></swiper-item>
-                    </swiper>
+                    <indexad style="width:690rpx"></indexad>
                     <view class="list">
                         <view >
                             <videoItem v-for="item in 10"></videoItem>
@@ -29,9 +25,15 @@
             </swiper-item>
             <swiper-item>
                 <scroll-view style="width:100%;height:100%" scroll-y="true">
-                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
-                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
-                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
+                    <indexad style="width:690rpx"></indexad>
+                    <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>
                 </scroll-view>
             </swiper-item>
             <swiper-item>
@@ -48,11 +50,11 @@
 <style lang="scss" scoped>
 .index{
     width: 750rpx;
-    padding: 0 30rpx;
     display: flex;
     flex-direction: column;
     height: 100vh;
     .top{
+        padding: 0 30rpx;
         display: flex;
         justify-content: space-between;
         width: 100%;
@@ -62,7 +64,6 @@
         .sosuo{
             width: 32rpx;
             height: 32rpx;
-            background-color: #0f0;
         }
         .tabs{
             display: flex;
@@ -90,13 +91,10 @@
         }
     }
     .card{
-        width: 100%;
         height: 100%;
-        .ad{
-            width: 100%;
-            height: 294rpx;
-            border-radius: 20rpx;
-            background-color: #0f0;
+        width: 100%;
+        scroll-view{
+            padding: 0 30rpx;
         }
         .list{
             display: flex;
@@ -106,6 +104,9 @@
 </style>
 <script>
 import videoItem from "@/components/index/video-item/index" 
+import zhiboItem from "@/components/index/zhibo-item/index" 
+import indexad from "@/components/index/ad/index" 
+
 export default {
     name:"index",
     data(){
@@ -114,7 +115,9 @@ export default {
         }
     },
     components:{
-        videoItem
+        videoItem,
+        zhiboItem,
+        indexad
     }
 }
 </script>
\ No newline at end of file

From af1e4ff55b12815d542a6e5af821e44f65842a23 Mon Sep 17 00:00:00 2001
From: luyuan <1162963624@qq.com>
Date: Tue, 2 Jun 2020 11:14:51 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=8E=A8=E8=8D=90+readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                             |   2 +-
 components/index/daren-item/index.vue |  54 ++++++++++++++
 pages/index/index.vue                 | 100 +++++++++++++++++++++-----
 3 files changed, 136 insertions(+), 20 deletions(-)
 create mode 100644 components/index/daren-item/index.vue

diff --git a/README.md b/README.md
index 9c4a4da..9a77c22 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 ## 使用
 - scss
 - uniapp
-- 组建库待定
+- 组建库 [uview](http://www.uviewui.com/)
 ## 目录结构
 ```1=
 |-pages tabes 目录
diff --git a/components/index/daren-item/index.vue b/components/index/daren-item/index.vue
new file mode 100644
index 0000000..cd1356b
--- /dev/null
+++ b/components/index/daren-item/index.vue
@@ -0,0 +1,54 @@
+<template>
+    <view class="daren-item">
+        <image class="head"></image>
+        <text class="name">这是名字</text>
+        <text class="zhuangtai">直播状态</text>
+        <view class="guanzhu">关注</view>
+    </view>
+</template>
+<script>
+export default {
+    name:"daren-item"    
+}
+</script>
+<style lang="scss" scoped>
+.daren-item{
+    width: 215rpx;
+    height: 282rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 10rpx;
+    overflow: hidden;
+    .head{
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        margin-top: 24rpx;
+        background-color: #0f0;
+    }
+    .name{
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 400;
+        margin-top: 23rpx;
+    }
+    .zhuangtai{
+        font-size:22rpx;
+        color: #999;
+        margin-top: 19rpx;
+    }
+    .guanzhu{
+        width: 130rpx;
+        height: 50rpx;
+        background-color: #FF780F;
+        font-size: 26rpx;
+        line-height: 50rpx;
+        color: #fff;
+        text-align: center;
+        margin-top: 19rpx;
+        border-radius: 25rpx;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 034ee12..2a3ec21 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -12,35 +12,56 @@
         <swiper class="card">
             <swiper-item>
                 <scroll-view style="width:100%;height:100%" scroll-y="true">
-                    <indexad style="width:690rpx"></indexad>
-                    <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 class="box">
+                        <indexad style="width:690rpx"></indexad>
+                        <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">
-                    <indexad style="width:690rpx"></indexad>
-                    <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 class="box">
+                        <indexad style="width:690rpx"></indexad>
+                        <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-item>
                 <scroll-view style="width:100%;height:100%" scroll-y="true">
-                    <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
-                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
-                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
+                    <view class="box">
+                        <view class="tuijian">
+                            <view class="title">
+                                <view class="left">
+                                    <view></view>
+                                    <text>推荐达人</text>
+                                </view>
+                                <image class="right"></image>
+                            </view>
+                            <view class="tuijianlist">
+                                <darenItem style="margin-right:23rpx"></darenItem>
+                                <darenItem style="margin-right:23rpx"></darenItem>
+                                <darenItem></darenItem>
+
+                            </view>
+                        </view>
+                    </view>
+                    
                 </scroll-view>
             </swiper-item>
         </swiper>
@@ -93,19 +114,59 @@
     .card{
         height: 100%;
         width: 100%;
-        scroll-view{
+        .box{
+            width: 100%;
             padding: 0 30rpx;
         }
         .list{
             display: flex;
         }
     }
+    .tuijian{
+        width: 750rpx;
+        margin-left: -30rpx;
+        height: 400rpx;
+        background-color: #ececec;
+        padding: 30rpx;
+        .title{
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .left{
+                display: flex;
+                align-items: center;
+                >view{
+                    width: 6rpx;
+                    height: 30rpx;
+                    background-color: #FF780F;
+                }
+                >text{
+                    font-size: 30rpx;
+                    color: 30rpx;
+                    margin-left: 14rpx;
+                }
+            }
+            .right{
+                width: 14rpx;
+                height: 24rpx;
+            }
+        }
+        .tuijianlist{
+            width: 100%;
+            height: 282rpx;
+            margin-top: 30rpx;
+            display: flex;
+        }
+    }
 }
 </style>
 <script>
 import videoItem from "@/components/index/video-item/index" 
 import zhiboItem from "@/components/index/zhibo-item/index" 
 import indexad from "@/components/index/ad/index" 
+import darenItem from "@/components/index/daren-item/index" 
+
 
 export default {
     name:"index",
@@ -117,7 +178,8 @@ export default {
     components:{
         videoItem,
         zhiboItem,
-        indexad
+        indexad,
+        darenItem
     }
 }
 </script>
\ No newline at end of file