样式修改

components/course/course-video.vue

@@ -61,10 +61,13 @@ export default {
   .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;
+    box-sizing: border-box;position: relative;justify-content: space-between;
     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;}
+    p{
+      color: #fdfdfd;font-size: 18px;display: flex;justify-content: space-between;
+      left: 77px;right: 0;bottom: -4px;z-index: 11;position: absolute;
+    }
     .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;
@@ -75,5 +78,9 @@ export default {
   .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);}
-
+  @media (max-width: 768px){
+    .video-item-box{
+      transform: scale(0.8);
+    }
+  }
 </style>