add:直播响应式

src/assets/css/base.css

@@ -556,6 +556,23 @@ a:hover {
   width: 96% !important;
   height: 96% !important;
 }
+.btn-hot {
+  letter-spacing: 4px;
+  margin-top: 6px;
+  display: block;
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  width: 200px;
+  height: 44px;
+  line-height: 44px;
+  background: linear-gradient(270deg, #FF7C6B 0%, #FF4B72 100%);
+  border-radius: 8px;
+}
+.btn-hot:hover{
+  color: #fff;
+}
+
 @keyframes cpgradientBG {
   0% {
     background-position: 0% 50%;

src/components/Footer.vue

@@ -51,7 +51,7 @@
     background: #fff;
     padding: 24px 0;
     margin-top: 40px;
-    border-top: #CEDDF2 solid 1px;
+    border-top: #EAF0F9 solid 1px;
   }
 
   .foot_logo {
@@ -92,7 +92,7 @@
   .m-footr {
     display: none;
     background-color: #fff;
-    border-top: #CEDDF2 solid 1px;
+    border-top: #EAF0F9 solid 1px;
     text-align: center;
     font-size: 14px;
     padding: 14px 0;

src/components/Header.vue

@@ -380,9 +380,9 @@
         state.wwwUrl = proxy.$root.com_edu_url + to.path;
       })
 
-      window.onresize = () => {
+      window.addEventListener('resize', function() {
-        state.isPc = document.body.clientWidth > 1200;        
+        state.isPc = document.body.clientWidth > 1200;
-      }
+      });
 
       const fetchMenuList = async () => {
         const res = await getMenuList();

src/router.js

@@ -193,6 +193,7 @@ const routes = [
         component: () => import('@/views/live/live.vue'),
         meta: {
           title: '直播 - 帆软学院',
+          isMobile: 1,
         },
       },
 

src/views/index.vue

@@ -8,7 +8,8 @@
         <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">
+      <el-carousel indicator-position="outside" v-if="newLiveList.length>0" class="live-box"
+        :height="liveBoxHeiht+'px'">
         <el-carousel-item v-for="(item, i) in newLiveList" :key="i">
           <li class="item">
 
@@ -333,6 +334,16 @@
         FineBI: [],
         jiandaoyun: [],
         catelist: [],
+        liveBoxHeiht: 220
+      });
+
+      const liveBoxHeiht = () => {
+        let vw = document.body.clientWidth;
+        state.liveBoxHeiht = vw <= 660 ? 400 : 220;
+      }
+      liveBoxHeiht();
+      window.addEventListener('resize', function () {
+        liveBoxHeiht();
       });
 
       const fetchnewLiveList = async () => {
@@ -602,7 +613,6 @@
   /* 直播课程 */
   .live-box {
     margin-top: 2px;
-    height: 220px;
 
     .item {
       background: #fff;
@@ -1087,59 +1097,61 @@
       }
     }
 
-    .info {
+    .live-box {
-      display: block !important;
+      .info {
-      width: auto !important;
+        display: block !important;
-      margin-left: 28px !important;
+        width: auto !important;
-      justify-content: space-between;
+        margin-left: 28px !important;
-      align-items: center;
+        justify-content: space-between;
-      overflow: hidden;
+        align-items: center;
+        overflow: hidden;
 
-      .lfbox {
+        .lfbox {
-        width: 96% !important;
+          width: 96% !important;
-        height: auto !important;
+          height: auto !important;
 
-        h2 {
+          h2 {
-          font-size: 16px !important;
+            font-size: 16px !important;
-          padding: 28px 0 8px;
+            padding: 28px 0 8px;
-        }
+          }
 
-        .m_description {
+          .m_description {
-          font-size: 14px;
+            font-size: 14px;
-          color: #808696;
+            color: #808696;
-        }
+          }
 
-        .speaker-uid {
+          .speaker-uid {
-          border-radius: 100px;
+            border-radius: 100px;
-          width: 40px;
+            width: 40px;
-          height: 40px;
+            height: 40px;
-        }
+          }
 
-        .speaker {
+          .speaker {
-          margin-top: 30px;
+            margin-top: 30px;
 
-          img {
+            img {
-            margin-right: 12px;
+              margin-right: 12px;
-          }
+            }
 
-          p {
+            p {
-            line-height: 22px;
+              line-height: 22px;
-            font-size: 12px;
+              font-size: 12px;
-          }
+            }
 
-          p:nth-child(2) {
+            p:nth-child(2) {
-            font-weight: 600;
+              font-weight: 600;
+            }
           }
         }
-      }
 
-      .rtbox {
+        .rtbox {
-        align-items: flex-start !important;
+          align-items: flex-start !important;
-        height: 100px;
+          height: 100px;
-        margin-right: 0 !important;
+          margin-right: 0 !important;
 
-        .btn-008-big {
+          .btn-008-big {
-          padding: 10px 30px !important;
+            padding: 10px 30px !important;
+          }
         }
       }
     }
@@ -1205,6 +1217,7 @@
         top: 0 !important;
         width: auto !important;
         min-width: 150px;
+        max-width: 150px;
         height: 100px !important;
         border-radius: 8px;
         transition: all .3s;
@@ -1259,18 +1272,6 @@
     /* 直播 */
     .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;

src/views/live/live.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="live-page">
+  <div class="live-page m-dn">
 
     <div class="w1200">
       <div class="live-focus">
@@ -18,7 +18,6 @@
           <div class="left-content">
             <div class="lk-view">
 
-
               <router-link :to="'/video/play/'+obj.edu_id" class="lk-a" v-if="obj.edu_id">
                 <div class="stflex st4">
                   <span class="til">已结束 看回放</span>
@@ -90,16 +89,16 @@
 
   </div>
 
-  <div class="boxbg">
+  <div class="boxbg m-dn">
     <!-- <div class="mask">
       <img :src="obj.cover" class="sm-img">
     </div> -->
   </div>
 
-  <div style=" border-color: #fff; position: relative; z-index: 2; ">
+  <!-- pc分页 -->
+  <div style=" border-color: #fff; position: relative; z-index: 2; " class="m-dn">
     <div class="lv-title w1200">直播课程</div>
     <div class="live-wrap w1200">
-
       <ul class="live-list">
         <li class="live-item" v-for="(item,i) in liveList" :key="i">
 
@@ -121,13 +120,144 @@
         </li>
       </ul>
     </div>
-
     <div class="myel-pg">
       <el-pagination class="pagination" v-model:currentPage="query.page" background layout="prev, pager, next"
         @current-change="handleCurrentChange" :page-size="query.perpage" :total="total" />
     </div>
   </div>
 
+  <el-skeleton :loading="loading" animated class="dn m-db">
+    <template #template>
+      <div class="w1200 video-page">
+        <div class="video-wrap">
+          <ul class="video-list-m">
+            <li class="item flex-3" v-for="item in 1" :key="item" style="width: 100% !important;">
+              <div class="imgps">
+                <el-skeleton-item variant="image" class="img" />
+              </div>
+              <div class="rtbox">
+                <el-skeleton :rows="1" variant="text" style="width: 90%; " animated />
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+    <template #default>
+
+      <div class="top-title" v-if="liveFocusListWap.length > 0">
+        <span class="line"></span>
+        <p>近期直播</p>
+        <span class="line"></span>
+      </div>
+
+      <div class="live-box">
+
+        <li v-for="(item, i) in liveFocusListWap" :key="i" 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="m_description">
+                <div class="flex-1">
+                  <p>主讲人：</p>
+                  <p class="m_speaker">{{item.speaker}}</p>
+                  <p>{{item.applynumber}}</p>
+                </div>
+                <div class="flex-1 mt10">
+                  <p>直播时间：</p>
+                  <p>{{item.playdate}}</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="rtbox flex-2 flex-1">
+              <a class="btn-hot f16" :href="'live/'+item.liveid">
+                <span v-if="item.playstate==1">直播中</span>
+                <span v-else>立即报名</span>
+              </a>
+              <div v-html="item.downtime"></div>
+            </div>
+
+          </div>
+
+        </li>
+      </div>
+    </template>
+  </el-skeleton>
+
+
+  <div class="top-title">
+    <span class="line"></span>
+    <p>全部直播</p>
+    <span class="line"></span>
+  </div>
+
+  <!-- 移动端视频列表 -->
+  <el-skeleton :loading="loading" animated class="dn m-db">
+
+    <template #template>
+      <div class="w1200 video-page">
+        <div class="video-wrap">
+          <ul class="video-list-m">
+            <li class="item flex-3" v-for="item in 6" :key="item">
+              <div class="imgps">
+                <el-skeleton-item variant="image" class="img" />
+              </div>
+              <div class="rtbox">
+                <el-skeleton :rows="1" variant="text" style="width: 90%; " animated />
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+
+    <template #default>
+      <div class="dn m-db">
+
+        <van-list v-model:loading="loading_m" :finished="max_total" :offset="0" finished-text="没有更多了"
+          error-text="请求失败，点击重新加载" @load="loadVlist">
+          <div class="video-list-m">
+            <li class="item" v-for="(item, i) in liveList" :key="i">
+              <router-link :to="'/live/'+item.liveid" class="flex-3">
+                <div class="imgps">
+                  <el-image class="img" :src="item.cover" :alt="item.cover"></el-image>
+                </div>
+
+                <div class="rtbox">
+                  <h2 class="hide-txt f16">{{item.title}}</h2>
+
+                  <div v-if="item.it618_saleprice" class="saleprice">
+                    <span class="colff3">
+                      <i class="f14">￥</i>{{item.it618_saleprice}}
+                    </span>
+                    <del>￥{{item.it618_price}}</del>
+                  </div>
+
+                  <div class="info flex-3">
+                    <div class="status f12 " :class="'status_'+item.playstate">
+                      {{ item.playtitle }}
+                      <span v-if="item.playdate" class="playdate">{{ item.playdate }}</span>
+                    </div>
+                  </div>
+                </div>
+              </router-link>
+            </li>
+          </div>
+        </van-list>
+
+      </div>
+    </template>
+  </el-skeleton>
+
 
 </template>
 
@@ -135,12 +265,19 @@
   import { reactive, toRefs } from "vue";
   import { getLiveList, getLiveFocus } from "@/api/live";
   import store from '@/store';
+  import { Button, List, Cell } from 'vant';
   export default {
     name: "live",
+    components: {
+      [Button.name]: Button,
+      [List.name]: List,
+      [Cell.name]: Cell,
+    },
     setup() {
       const state = reactive({
         liveList: [],
         liveFocusList: [],
+        liveFocusListWap: [],
         activeIndex: 0,
         obj: {},
         total: 0,
@@ -148,7 +285,13 @@
           page: 1,
           perpage: 8
         },
-        lvie_cur: 0
+        lvie_cur: 0,
+        loading: true,
+        loading_m: false,
+        live_total: 0,
+        max_total: false,
+        start_perpage: 16,
+        onresize: '',
       })
 
       const fetchLiveFocus = async () => {
@@ -158,6 +301,7 @@
         const res = await getLiveFocus(params)
         if (res.code === 200) {
           state.liveFocusList = res.data;
+          state.liveFocusListWap = res.data.filter(t => t.playstate > 0);
           state.liveFocusList.forEach((item) => {
             if (item.playstate > '0') {
               state.obj = state.liveFocusList[1]
@@ -191,35 +335,531 @@
       // },500);
 
 
-      const fetchLiveList = async () => {
+      const fetchLiveList = async (query) => {
         const params = {
-          ...state.query
+          ...query
         }
         const res = await getLiveList(params)
         if (res.code === 200) {
           state.liveList = res.data.data
           state.total = res.data.total
+
+          state.loading = false;
+          state.live_total = res.data.total;
+
+          // 没有更多了
+          if (state.start_perpage > res.data.total) {
+            state.max_total = true;
+          } else {
+            state.max_total = false;
+          }
         }
       }
 
       const fetchAllData = () => {
         return Promise.all([
           fetchLiveFocus(),
-          fetchLiveList(),
+          fetchLiveList(state.query),
         ])
       }
+      fetchAllData();
+
 
-      fetchAllData()
+      // 滚动加载
+      const loadVlist = () => {
+        setTimeout(() => {
+          state.start_perpage += 8
+          const params = {
+            ...state.query,
+            perpage: state.start_perpage
+          };
+          // if (state.onresize < 1200) {
+          state.liveList.push(fetchLiveList(params));
+          // }
+
+          state.loading_m = false;
+
+        }, 800);
+      }
 
       return {
         ...toRefs(state),
         changeLiveFocus,
-        handleCurrentChange
+        handleCurrentChange,
+        loadVlist,
       };
     },
   };
 </script>
 
+<style lang="scss">
+  /*响应式-移动端*/
+  @import '~@/assets/css/m.css';
+
+  @media screen and (max-width: 1200px) {
+
+    html,
+    body {
+      background-color: #f3f8ff;
+    }
+
+    .live-box {
+      padding: 0 20px;
+      margin: 10px 0 10px;
+
+      .item {
+        background: #fff;
+        height: 176px;
+        border-radius: 8px;
+        position: relative;
+        display: flex;
+        margin-top: 16px;
+
+        .cover {
+          position: relative;
+          width: 288px;
+          height: 100%;
+          border-radius: 8px;
+          z-index: 1;
+        }
+
+        .info {
+          display: block !important;
+          width: 100% !important;
+          margin-left: 28px !important;
+          justify-content: space-between;
+          align-items: center;
+          overflow: hidden;
+
+          .lfbox {
+            width: 96% !important;
+            height: auto !important;
+
+            h2 {
+              font-size: 14px !important;
+              padding: 20px 0 8px;
+            }
+
+            .m_description {
+              font-size: 12px;
+              color: #808696;
+
+              .m_speaker {
+                width: 130px;
+              }
+            }
+
+            .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;
+
+          }
+        }
+      }
+    }
+
+  }
+
+  /* end screen */
+
+  .top-title {
+    position: relative;
+    text-align: center;
+    padding: 20px 0 0px 0;
+    font-size: 16px;
+    color: #515A6E;
+
+    .line {
+      display: inline-block;
+      vertical-align: middle;
+      width: 30px;
+      height: 1px;
+      top: 50%;
+      line-height: 30px;
+      background-color: #515A6E;
+    }
+
+    p {
+      display: inline-block;
+      padding: 0 18px;
+    }
+  }
+
+  .tool-box-m {
+    margin: 0 20px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 0 20px;
+  }
+
+  .wrapper-video-m {
+    padding: 0 20px;
+
+    .title {
+      color: #333;
+      text-align: left;
+      font-size: 15px;
+      margin: 20px 0 10px;
+      font-weight: 600;
+    }
+
+    ul {
+      display: flex;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+
+      li.category-item {
+        white-space: nowrap;
+        padding: 6px 18px;
+        cursor: pointer;
+        color: #617288;
+        border-radius: 50px;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        font-size: 14px;
+        background-color: #f8f8fa;
+
+        &.active {
+          color: #fff !important;
+          background-color: #0082fc !important;
+        }
+
+        &:hover {
+          color: #0082fc;
+          background-color: #D9ECFF;
+        }
+      }
+
+      li.category-item:first-child {
+        text-align: center;
+      }
+    }
+  }
+
+  .video-drawer {
+    .el-drawer__header {
+      margin-bottom: 20px;
+    }
+  }
+
+  .vtool-foot-box {
+    position: absolute;
+    width: 100%;
+    height: 10%;
+    bottom: 0;
+
+    .vtool-foot-m {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 48px;
+      line-height: 48px;
+      cursor: pointer;
+
+      .chongzhi {
+        width: 35%;
+        background-color: #fff;
+        border-top: 1px solid #ddd;
+      }
+
+      .queding {
+        background-color: #0082fc;
+        color: #fff;
+        width: 65%;
+        border-top: 1px solid #0082fc;
+      }
+    }
+  }
+
+  /* 移动端视频列表 */
+  .video-list-m {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    height: auto;
+    padding: 0 20px;
+    margin-top: 20px;
+
+    .item {
+      transition: all .3s;
+      width: 49% !important;
+      height: 110px !important;
+      border-radius: 8px;
+      background-color: #fff;
+      margin-bottom: 18px;
+
+      &:hover {
+        box-shadow: 0px 1px 12px 0px #DCE5FF;
+      }
+
+      .rtbox,
+      .rtbox-m {
+        display: flex;
+        justify-content: space-around;
+        flex-direction: column;
+        width: auto !important;
+        min-width: 55%;
+        padding: 18px 0;
+        flex: 1;
+      }
+
+      .saleprice {
+        font-size: 14px;
+        padding: 0 !important;
+      }
+    }
+
+    .item:hover .img {
+      margin-top: 0px !important;
+    }
+
+    .imgps {
+      width: auto !important;
+      min-width: 170px;
+      margin-right: 10px;
+      height: 110px !important;
+    }
+
+    .img {
+      position: static !important;
+      top: 0 !important;
+      width: 160px !important;
+      height: 110px !important;
+      border-radius: 8px;
+      transition: all .3s;
+
+    }
+
+    h2 {
+      font-size: 14px !important;
+      height: 26px !important;
+      width: 92% !important;
+      margin: 0 6px 0 0 !important;
+    }
+
+    .tag {
+      width: 50px !important;
+      height: 20px !important;
+      line-height: 20px !important;
+      font-size: 12px;
+      text-align: center;
+      background: rgba(40, 195, 70, 0.08);
+      border-radius: 12px;
+      color: #28C346;
+    }
+
+    .info {
+      width: 92% !important;
+      padding: 10px 4px 0 4px !important;
+      font-size: 14px;
+      margin-top: auto;
+
+      h5 {
+        color: #617288;
+      }
+    }
+  }
+
+  .v_lod_txt {
+    text-align: center;
+    color: #7E8FA3;
+    margin-top: 14px;
+    font-size: 14px;
+    letter-spacing: 2px;
+  }
+
+
+  @media screen and (max-width: 800px) {
+
+    /* 视频看列表 */
+    .video-list-m {
+      display: flex;
+      justify-content: space-around !important;
+      flex-wrap: wrap;
+      align-items: center;
+
+      .flex-3 {
+        justify-content: space-around;
+      }
+
+      .item {
+        transition: all .3s;
+        width: 100% !important;
+        height: 100px !important;
+        border-radius: 8px;
+        background-color: #fff;
+        margin-bottom: 16px;
+
+        &:hover {
+          box-shadow: 0px 1px 12px 0px #DCE5FF;
+        }
+
+        .rtbox,
+        .rtbox-m {
+          display: flex;
+          justify-content: space-around;
+          flex-direction: column;
+          padding: 14px 0;
+          flex: 1;
+        }
+
+        .saleprice {
+          font-size: 14px;
+          padding: 0 !important;
+        }
+      }
+
+      .item:hover .img {
+        margin-top: 0px !important;
+      }
+
+      .imgps {
+        width: auto !important;
+        min-width: 160px;
+        margin-right: 2px;
+        height: 110px !important;
+      }
+
+      .img {
+        position: static !important;
+        top: 0 !important;
+        width: 150px !important;
+        height: 100px !important;
+        border-radius: 8px;
+        transition: all .3s;
+
+      }
+
+      h2 {
+        font-size: 14px !important;
+        height: 26px !important;
+        width: 94% !important;
+        margin: 0 6px 0 0 !important;
+      }
+
+      .tag {
+        width: 50px !important;
+        height: 20px !important;
+        line-height: 20px !important;
+        font-size: 12px;
+        text-align: center;
+        background: rgba(40, 195, 70, 0.08);
+        border-radius: 12px;
+        color: #28C346;
+      }
+
+      .info {
+        width: 96% !important;
+        padding: 0px 4px 10px 4px !important;
+        font-size: 14px;
+        margin-top: auto;
+
+        h5 {
+          color: #617288;
+        }
+
+        &.flex-3 {
+          justify-content: space-between;
+        }
+
+        .status {
+          &.status_0 {
+            color: #B3C1D3;
+
+            .playdate {
+              color: #0082FC;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* end-phone */
+</style>
+
+
+<style lang="scss">
+  @media screen and (max-width: 660px) {
+
+    /* 直播 */
+    .live-box {
+      margin-top: 2px;
+
+      .item {
+        background: #fff;
+        height: auto !important;
+        border-radius: 8px;
+        position: relative;
+        margin-top: 16px;
+        display: block;
+
+        .cover {
+          position: relative;
+          margin-top: 0 !important;
+          width: 100% !important;
+          height: 220px !important;
+          border-radius: 8px;
+          z-index: 1;
+        }
+
+        .cover-mask::after {
+          display: none;
+        }
+
+        .info {
+          width: auto !important;
+          margin: 0 18px !important;
+
+          .lfbox {
+            h2 {
+              padding: 12px 0 8px !important;
+            }
+          }
+
+          .rtbox {
+            height: auto !important;
+
+            .btn-hot {
+              margin: 14px 0 16px;
+              width: 100% !important;
+            }
+          }
+        }
+      }
+    }
+
+
+  }
+</style>
+
 <style lang="scss" scoped>
   .boxbg {
     position: relative;
@@ -549,9 +1189,6 @@
               color: #0082FC;
             }
           }
-
-
-
         }
 
         .info {

src/views/video/indexVideo.vue

@@ -59,7 +59,7 @@
   </div>
 
   <!-- v-if="onresize > 1200" 暂时不需要这个判断 -->
-  <el-skeleton :loading="loading" animated >
+  <el-skeleton :loading="loading" animated class="m-dn">
 
     <template #template>
       <div class="w1200 video-page">