Forráskód Böngészése

按钮样式优化

1
mo 3 éve
szülő
commit
998d7dcfd0
1 módosított fájl, 16 hozzáadás és 8 törlés
  1. 16 8
      src/views/liveClassManager/liveClassDetail.vue

+ 16 - 8
src/views/liveClassManager/liveClassDetail.vue

@@ -124,8 +124,11 @@
           :key="index"
           @click="opneVideo(item)"
         >
-          <video width="110px" :src="item.url"></video>
-          <i class="el-icon-video-play linkIcon"></i>
+          <div class="linkItemWrap">
+            <video width="110px" :src="item.url"></video>
+            <i class="el-icon-video-play linkIcon"></i>
+          </div>
+
           <p :underline="false" type="text" class="lineTitle">
             {{ item.endTime | dateForMinFormat }}
           </p>
@@ -320,7 +323,6 @@ export default {
   align-items: center;
   flex-wrap: wrap;
 
-
   .linkItem {
     display: flex;
     flex-direction: column;
@@ -335,11 +337,17 @@ export default {
         font-weight: bold;
       }
     }
-    .linkIcon {
-      font-size: 25px;
-      position: absolute;
-      top: 30px;
-      color: #fff;
+    .linkItemWrap {
+      position: relative;
+      .linkIcon {
+        font-size: 25px;
+        position: absolute;
+        top: 50%;
+        margin-top: -13px;
+        left: 50%;
+        margin-left: -13px;
+        color: #fff;
+      }
     }
   }
   .lineTitle {