修改样式

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

@@ -4,8 +4,11 @@
     <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 in videoList" :key="item.plateId" style="padding: 10px;">
-          <video v-for="ele in item.videoCourseList" :id="'el-video-' + ele.id" :key="ele.id" class="w165h148" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play('el-video-' + ele.id)" />
+        <v-tab-item v-for="item in videoList" :key="item.plateId" style="padding: 10px;background: #FAFAFA;min-height: calc(100vh - 162px);">
+          <div v-for="ele in item.videoCourseList" :key="ele.id" class="video-card" @click="play('el-video-' + ele.id)">
+            <video :id="'el-video-' + ele.id" class="w165h148" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" />
+            <div class="video-card-title">{{ele.videoName}}</div>
+          </div>
         </v-tab-item>
       </v-tabs-items>
     </v-tabs>
@@ -98,7 +101,35 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
+.bgFAFAFA {
+  background: #FAFAFA;
+}
 @media (min-width: 0px) {
+  .video-card {
+    width: 165px;
+    height: 148px;
+    border-radius: 5px;
+    position: relative;
+    display: inline-block;
+    margin-right: 30px;
+    &:nth-of-type(4n+0){
+      margin-right: 0px;
+    }
+    & .video-card-title {
+      width: 100%;
+      height: 45px;
+      line-height: 45px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 500;
+      color: #1C1C1E;
+      background: #fff;
+      border-radius: 0 0 9px 9px;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
   .bg-guide {
     min-height: 100vh;
     overflow: hidden;
@@ -122,6 +153,7 @@ export default {
     height: 148px;
     margin-bottom: 10px;
     margin-right: 30px;
+    border-radius: 10px;
     &:nth-of-type(4n+0){
       margin-right: 0px;
     }

pages/activity/invite-user/guide.vue

@@ -4,7 +4,10 @@
     <div v-for="item in videoList" :key="item.plateId">
       <div class="fs16">{{item.plateName}}</div>
       <div :class="item.displayMode === 1 ? 'jjjc-list' : 'jcjc-list'">
-        <video v-for="ele in item.videoCourseList" :id="'el-video-' + ele.id" :key="ele.id" class="w165h148" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" @click="play(item, ele)" />
+        <div v-for="ele in item.videoCourseList" :key="ele.id" class="video-card" @click="play(item, ele)">
+          <video :id="'el-video-' + ele.id" class="w165h148" preload="auto" :poster="videoURL(ele.coverImageKey)" :src="videoURL(ele.videoKey)" />
+          <div class="video-card-title">{{ele.videoName}}</div>
+        </div>
       </div>
     </div>
     <div class="return out"><div class="in"><img src="~/assets/image/activity/invite-user/guide/left.png" /></div></div>
@@ -92,6 +95,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.video-card {
+  width: 165px;
+  height: 148px;
+  border-radius: 5px;
+  position: relative;
+  & .video-card-title {
+    width: 100%;
+    height: 45px;
+    line-height: 45px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    color: #1C1C1E;
+    background: #fff;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    border-radius: 0 0 9px 9px;
+  }
+}
 .bg2C2C2D {
   background-color: #1C1C1E;
   min-height: 100vh;
@@ -115,7 +138,7 @@ export default {
   overflow-x: scroll;
   display: flex;
   margin: 15px 0;
-  .w165h148 {
+  .video-card {
     margin-right: 10px;
     &:last-child {
       margin-right: 0;
@@ -151,6 +174,7 @@ export default {
   height: 148px;
   object-fit: contain;
   margin-bottom: 15px;
+  border-radius: 10px;
 }
 .return {
   width: 42px;