直播页面

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>

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);

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>

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">
+                    <indexad style="width:690rpx"></indexad>
-                        <swiper-item></swiper-item>
-                        <swiper-item></swiper-item>
-                        <swiper-item></swiper-item>
-                    </swiper>
                     <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>
+                    <indexad style="width:690rpx"></indexad>
-                    <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
+                    <view class="list">
-                    <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
+                        <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%;
-            width: 100%;
+        scroll-view{
-            height: 294rpx;
+            padding: 0 30rpx;
-            border-radius: 20rpx;
-            background-color: #0f0;
         }
         .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>