From 8435d1c697bee215b9f3b94cb3335d7556fa41cb Mon Sep 17 00:00:00 2001
From: Wangwei <870653736@qq.com>
Date: Wed, 8 Feb 2023 19:48:16 +0800
Subject: [PATCH] =?UTF-8?q?DP-27,add:=E5=AD=A6=E9=99=A2=E7=9B=B4=E6=92=AD?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E7=9A=84=E5=93=8D=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/m.css |   2 +
 src/views/index.vue  | 132 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 130 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/m.css b/src/assets/css/m.css
index eabe7f3..3577075 100644
--- a/src/assets/css/m.css
+++ b/src/assets/css/m.css
@@ -28,6 +28,8 @@
     .m-db {
         display: block !important;
     }
+    .m-f12{font-size: 12px !important;}
+    .m-f14{font-size: 14px !important;}
 }
 
 @media screen and (max-width: 800px) {
diff --git a/src/views/index.vue b/src/views/index.vue
index 634cf57..396d995 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -8,18 +8,22 @@
         <router-link to="/live" target="_blank">查看更多<i class="iconfont icon-xiangyou"></i></router-link>
       </div>
 
-      <el-carousel indicator-position="outside" v-if="newLiveList.length>0" class="live-box" height="220px">
+      <el-carousel indicator-position="outside" v-if="newLiveList.length>0" class="live-box">
         <el-carousel-item v-for="(item, i) in newLiveList" :key="i">
           <li class="item">
+
             <div class="cover-mask">
-              <el-image class="cover" :src="item.cover"></el-image>
+              <a :href="'live/'+item.liveid">
+                <el-image class="cover" :src="item.cover"></el-image>
+              </a>
             </div>
 
             <div class="info">
+
               <div class="lfbox">
                 <h2 class="hide-txt">{{item.title}}</h2>
-                <div class="f16 hide-txt">{{item.description}}</div>
-                <div class="flex-1 speaker">
+                <div class="f16 hide-txt m_description">{{item.description}}</div>
+                <div class="flex-1 speaker m-dn">
                   <img class="speaker-uid" :src="item.speaker_uid" alt="">
                   <div>
                     <p>主讲人</p>
@@ -598,6 +602,7 @@
   /* 直播课程 */
   .live-box {
     margin-top: 2px;
+    height: 220px;
 
     .item {
       background: #fff;
@@ -1082,6 +1087,63 @@
       }
     }
 
+    .info {
+      display: block !important;
+      width: auto !important;
+      margin-left: 28px !important;
+      justify-content: space-between;
+      align-items: center;
+      overflow: hidden;
+
+      .lfbox {
+        width: 96% !important;
+        height: auto !important;
+
+        h2 {
+          font-size: 16px !important;
+          padding: 28px 0 8px;
+        }
+
+        .m_description {
+          font-size: 14px;
+          color: #808696;
+        }
+
+        .speaker-uid {
+          border-radius: 100px;
+          width: 40px;
+          height: 40px;
+        }
+
+        .speaker {
+          margin-top: 30px;
+
+          img {
+            margin-right: 12px;
+          }
+
+          p {
+            line-height: 22px;
+            font-size: 12px;
+          }
+
+          p:nth-child(2) {
+            font-weight: 600;
+          }
+        }
+      }
+
+      .rtbox {
+        align-items: flex-start !important;
+        height: 100px;
+        margin-right: 0 !important;
+
+        .btn-008-big {
+          padding: 10px 30px !important;
+        }
+      }
+    }
+
   }
 
   /* end-pad */
@@ -1191,6 +1253,68 @@
   /* end-phone */
 </style>
 
+<style lang="scss">
+  @media screen and (max-width: 660px) {
+
+    /* 直播 */
+    .live-box {
+      margin-top: 2px;
+      height: 400px !important;
+
+      &.el-carousel--horizontal {
+        overflow: hidden !important;
+      }
+
+      .el-carousel__container {
+        height: 400px !important;
+
+      }
+
+
+      .item {
+        background: #fff;
+        height: 386px !important;
+        border-radius: 8px;
+        position: relative;
+        display: block !important;
+        margin-top: 14px;
+
+        .cover {
+          position: relative;
+          margin-top: 0 !important;
+          width: 100% !important;
+          height: 200px !important;
+          border-radius: 8px;
+          z-index: 1;
+        }
+
+        .cover-mask::after {
+          display: none;
+        }
+
+        .info {
+          margin: 0 18px !important;
+
+          .lfbox {
+            h2 {
+              padding: 14px 0 8px !important;
+            }
+          }
+
+          .rtbox {
+            .btn-008-big {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+
+
+  }
+</style>
+
+
 <style lang="scss">
   @media screen and (max-width: 530px) {