样式调整

components/course/course-video.vue

@@ -1,14 +1,8 @@
 <template>
-  <div class="video-container">
-
-    <div class="video-box">
-      <span>
-        <img :src="imgUrl" :alt="title">
-        <i @click="playVideo"></i>
-      </span>
-      <p>{{ title }}</p>
-    </div>
-
+  <div class="video-item-box">
+    <i @click="playVideo" class="video-play-btn"></i>
+    <img :src="imgUrl" :alt="title">
+    <p><span>{{ title }}</span><span>用途：生产工艺</span></p>-->
     <!--  视频播放弹窗 -->
     <el-dialog
       :title="dialogTitle"
@@ -62,50 +56,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.video-container {
-  width: 380px;
-  height: 280px;
-
-  .video-box {
-    text-align: center;
-    > span {
-      position: relative;
-      display: inline-block;
-    }
-    p {
-      height: 23px;
-      font-size: 24px;
-      font-weight: 400;
-      color: #333333;
+  .video-item-box{
+    width: 352px;background: rgba(18,107,255,0.12);margin: 0;
+    border: 1px solid #ffffff;border-radius: 10px;padding: 10px;
+    box-sizing: border-box;position: relative;
+    display: flex;align-items: center;
+    img{width: 100%;border-radius: 8px;z-index: 8;}
+    p{color: #fdfdfd;font-size: 18px;display: flex;justify-content: space-between;}
+    .video-play-btn{
+      width: 70px;height: 70px;position: absolute;z-index: 10;background-size: cover;background-position: center;
+      background-image: url("~static/images/client/course/animation-video-img1.png");background-repeat: no-repeat;
+      right: -15px;bottom: 30px;transition: 0.5s;
     }
-
-    i:hover {
-      background-image: url("~static/images/client/course/course-video-icon-a.svg");
-      background-size: cover;
-      background-position: bottom;
-    }
-
-    i {
-      width: 48px;
-      height: 48px;
-      cursor: pointer;
-      background-image: url("~static/images/client/course/course-video-icon.svg");
-      display: inline-block;
-      position: absolute;
-      left: 50%;
-      margin-left: -24px;
-      z-index: 5;
-      top: 50%;
-      margin-top: -24px;
-      background-size: cover;
-      background-position: bottom;
-      transition: all 0.5s;
-    }
-
-    img {
-      width: 100%;
-    }
-
+    .video-play-btn:hover{transform: scale(1.1);cursor: pointer;}
   }
-}
+  .video-item-box:before,.video-item-box:after{content: ' ';position: absolute;display: block;background-repeat: no-repeat;background-size: contain;}
+  .video-item-box:before{width: 357px;height: 99px;background-image: url("~static/images/client/course/animation-video-img2.png");bottom: -30px;right: -44px;z-index: 9;}
+  .video-item-box:after{width: 95px;height: 160px;background-image: url("~static/images/client/course/animation-video-img3.png");bottom: 20px;right: -30px;z-index: 7;transform: rotateY(180deg);}
+
 </style>

pages/courseware/custom.vue

@@ -22,10 +22,6 @@
         <ul class="classification__info-videos">
           <li v-for="item in curItem.videos" class="classification-video-item">
             <course-video :img-url="item.imgUrl" :title="item.title" :dialog-title="item.title" :source="item.url"></course-video>
-<!--            <div class="video-item-box">-->
-<!--              <i class="video-play-btn"></i><img :src="item.imgUrl">-->
-<!--              <p><span>展现：Mg动画</span><span>用途：生产工艺</span></p>-->
-<!--            </div>-->
           </li>
         </ul>
         <div class="classification-btns">
@@ -311,25 +307,6 @@ export default {
 
       .classification-video-item {
         width: 380px;height: 280px;
-
-        .video-item-box{
-          width: 352px;background: rgba(18,107,255,0.12);margin: 0;
-          border: 1px solid #ffffff;border-radius: 10px;padding: 10px;
-          box-sizing: border-box;position: relative;
-          display: flex;align-items: center;
-          img{width: 100%;border-radius: 8px;z-index: 8;}
-          .video-play-btn{
-            width: 70px;height: 70px;position: absolute;z-index: 10;background-size: cover;background-position: center;
-            background-image: url("~static/images/client/course/animation-video-img1.png");background-repeat: no-repeat;
-            right: -15px;bottom: 30px;transition: 0.5s;
-          }
-          .video-play-btn:hover{transform: scale(1.1);cursor: pointer;}
-        }
-        .video-item-box:before,.video-item-box:after{content: ' ';position: absolute;display: block;background-repeat: no-repeat;background-size: contain;}
-        .video-item-box:before{width: 357px;height: 99px;background-image: url("~static/images/client/course/animation-video-img2.png");bottom: -30px;right: -44px;z-index: 9;}
-        .video-item-box:after{width: 95px;height: 160px;background-image: url("~static/images/client/course/animation-video-img3.png");bottom: 20px;right: -30px;z-index: 7;transform: rotateY(180deg);}
-
-
         &:last-child {
           margin-right: 0;
         }