推荐完成

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{

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>