调整样式

pages/activity/invite-user/guide-pc.vue

@@ -8,10 +8,14 @@
     <v-tabs v-model="tab" color="#3666F2" background-color="transparent" style="height: 42px;">
       <v-tab v-for="item in videoList" :key="item.plateId" style="height: 42px;">{{item.plateName}}</v-tab>
       <v-tabs-items v-model="tab">
-        <v-tab-item v-for="(item, num) in videoList" :key="item.plateId" style="padding: 10px;background: #FAFAFA;min-height: calc(100vh - 162px);">
-          <div v-for="(ele, i) in item.videoCourseList" :key="ele.id" class="video-card">
-            <img class="w165h148" :src="videoURL(ele.coverImageKey)" @click="play(item, ele, num, i)" />
-          </div>
+        <v-tab-item v-for="(item, num) in videoList" :key="item.plateId" style="background: #FAFAFA;min-height: calc(100vh - 162px);padding: 10px;">
+          <v-container>
+            <v-row>
+              <v-col v-for="(ele, i) in item.videoCourseList" :key="ele.id" xl="2" lg="2" md="3" sm="3" xs="4" class="video-card">
+                <img class="w165h148" :src="videoURL(ele.coverImageKey)" @click="play(item, ele, num, i)" />
+              </v-col>
+            </v-row>
+          </v-container>
         </v-tab-item>
       </v-tabs-items>
     </v-tabs>
@@ -162,11 +166,9 @@ export default {
     border-radius: 5px;
     position: relative;
     display: inline-block;
-    margin-right: 25px;
+    padding: 0;
+    margin-bottom: 10px;
     z-index: 1;
-    &:nth-of-type(4n + 0) {
-      margin-right: 0px;
-    }
     & .video-card-title {
       width: 100%;
       height: 45px;
@@ -204,12 +206,9 @@ export default {
   .w165h148 {
     width: 165px;
     height: 148px;
-    margin-bottom: 10px;
-    margin-right: 30px;
+    margin: 0 auto;
+    display: block;
     border-radius: 10px;
-    &:nth-of-type(4n + 0) {
-      margin-right: 0px;
-    }
   }
 }
 </style>