DP-27,add:学院直播部分的响应式

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) {

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">
+              <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="f16 hide-txt m_description">{{item.description}}</div>
-                <div class="flex-1 speaker">
+                <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) {