行内样式抽离

vueHomilyLink/src/views/LiveView.vue

@@ -4,25 +4,19 @@
         <div v-for="(live, index) in liveList" :key="index" class="card">
             <div class="cover-image" :class="{ 'no-overlay': !live.status == 1 }" style="position:relative;">
                 <img :src=live.cover alt="节目1">
-                <div 
-                    v-if="live.status == 1"
-                    style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;">
-                    即将开播</div>
-                <div 
-                    v-if="live.status == 1"
-                    style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;width: 120px;">
-                    {{getDateDay(live.startTime)}}  {{ live.startTime.slice(11, 16)}}开播</div>
+                <div v-if="live.status == 1" class="overlay">即将开播</div>
+                <div v-if="live.status == 1" class="start-time">{{ getDateDay(live.startTime) }} {{ live.startTime.slice(11, 16) }}开播</div>
             </div>
             <div class="card-content">
                 <div class="card-title">{{ live.liveName }}</div>
-                <div class="card-actions"> 
+                <div class="card-actions">
                     <!-- 用户头像 -->
-                    <img :src=live.user.avatar alt="节目1" class="user-avatar"
-                        style="border-radius: 50%; width: 20px; height: 20px;">
+                    <img :src=live.user.avatar alt="节目1" class="user-avatar">
                     <!-- 用户昵称，与头像同行显示 -->
                     <div class="card-info">{{ live.user.userName }}</div>
                     <!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” -->
-                    <a v-if="live.reservation == 0" href="#" class="card-button" @click="booking(live.id, live.user.userId)">预约</a>
+                    <a v-if="live.reservation == 0" href="#" class="card-button"
+                        @click="booking(live.id, live.user.userId)">预约</a>
                     <a v-else href="#" class="card-button" style="background-color: #ccc;">已预约</a>
                 </div>
             </div>
@@ -156,6 +150,7 @@ function getDateDay(startTime) {
 function booking(liveId, userId) {
     alert("预约成功！");
 }
+
 </script>
 
 
@@ -186,7 +181,7 @@ function booking(liveId, userId) {
     width: 209px;
 }
 
-.card img {
+.card .cover-image img {
     width: 100%;
     height: 100%;
     /*图片占满整个卡片*/
@@ -201,6 +196,31 @@ function booking(liveId, userId) {
     border-radius: 8px;
 }
 
+/*即将开播图层*/
+.overlay {
+    position: absolute;
+    z-index: 2;
+    text-align: center;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 18px;
+}
+
+/*开播时间*/
+.start-time {
+    position: absolute;
+    z-index: 2;
+    text-align: center;
+    top: 60%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #ffffffaf;
+    font-size: 15px;
+    width: 120px;
+}
+
 .cover-image::before {
     content: " ";
     position: absolute;
@@ -212,6 +232,7 @@ function booking(liveId, userId) {
     background-color: rgba(0, 0, 0, 0.3);
     border-radius: 8px;
 }
+
 /*用于隐藏样式*/
 .cover-image.no-overlay::before {
     display: none;