行业资讯页面响应式开发

assets/scss/cus-client/cus-client-common.scss

@@ -655,7 +655,25 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   }
 }
 
-
+// 页面内部导航菜单（课程开发和客户案例）
+.platform-menu-ul{
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  background: #F7F9FB;
+  li{display: inline-block;@include setFontStyle(-2);padding:24px 32px;color: rgba(0,0,0,0.64);background: #F7F9FB;transition: all .3s;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);border-bottom: 1px solid rgba(52, 99, 253, 0.08);@include single-line-ellipsis;cursor: pointer}
+  li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
+  li:hover{
+    transform: scale(1.1);
+  }
+  @media (max-width: 768px){
+      background: #fff;margin: 20px 0 0;
+      li{width: 100px;height: 30px;line-height:30px;margin:0 10px;padding:0;border-radius:5px;border: 1px solid rgb(0, 102, 204);@include setFontStyle(-4);
+        color: rgb(0, 102, 204);background: #fff;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);box-sizing: border-box}
+      li.active{color: #fff;background: rgb(0, 102, 204);}
+      li:hover{transform: none;}
+    }
+}
 /********************************* 麦塔栅格**********************************/
 // 大于768的隐藏
   @media screen and (min-width: 769px) {

assets/scss/cus-client/cus-client-page.scss

@@ -634,18 +634,6 @@
       background-repeat: no-repeat;
     }
 
-    // 菜单 ul
-    .course-menu-ul{
-      display: block;
-      margin: 0 auto;
-      text-align: center;
-      background: #F7F9FB;
-      li{display: inline-block;@include setFontStyle(-2);padding:24px 32px;color: rgba(0,0,0,0.64);background: #F7F9FB;transition: all .3s;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);border-bottom: 1px solid rgba(52, 99, 253, 0.08);@include single-line-ellipsis;cursor: pointer}
-      li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
-      li:hover{
-        transform: scale(1.1);
-      }
-    }
     /* 调转菜单栏 */
     .course-service-nav{width: 100%;height: 72px;background: url("~static/images/client/course/course--nav-bg.png") repeat-x;padding-top: 15px;text-align: center;}
     .course-link-nav{
@@ -935,6 +923,37 @@
       }
     }
 
+    @media (max-width: 768px){
+      // banner
+      .newsInfor-banner{
+        height: 150px;
+        img{width: auto;height: 150px;}
+      }
+
+      // 页面主要内容区域
+      .newsInfor-content-box{
+          min-height: unset;padding: 20px 0 50px;
+        // 右侧内容区域
+        .newsInfor-content-ul{
+          padding: 0 6%;
+          li{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;margin-bottom: 20px;}
+          //图片
+          .newsInfor-img-box{width:100%;height:180px;display: block;margin-right:0;border-radius: 0;}
+          //内容区域
+          .newsInfor-list-content{
+            width: 100%;padding: 20px;box-sizing: border-box;
+            h5{@include setFontStyle(-4);color: rgb(16, 16, 16);margin-bottom: 12px;}
+            div{
+              span{margin-bottom: 0;@include setFontStyle(-8);color: rgb(16, 16, 16);}
+            }
+            p{height: auto;max-height: 60px;margin-bottom:0;font-size: 14px;color: rgb(16, 16, 16);line-height: 20px;}
+          }
+          // 分页
+          .client-el-pagination{margin-top: 24px}
+        }
+      }
+
+    }
 
   }
 

components/news/NewsList.vue

@@ -3,10 +3,11 @@
     <div class="newsInfor-img-box" :style="{backgroundImage: `url(${newsData.pic || newsInforImg})`}"></div>
     <div class="newsInfor-list-content">
       <h5>{{newsData.title}}</h5>
-      <div><i></i><span>{{newsData.startTime}}</span><i type="visits"></i><span>{{newsData.visits}}</span>
+      <div><span class="mta-hidden-sm">{{newsData.startTime}}</span></div>
+      <div class="mta-hidden-xs"><i></i><span>{{newsData.startTime}}</span><i type="visits"></i><span>{{newsData.visits}}</span>
       </div>
       <p>{{newsData.intro}}</p>
-      <a :href="`${baseUrl}/news/${newsData.code}`" >
+      <a class="mta-hidden-xs" :href="`${baseUrl}/news/${newsData.code}`" >
         <span>了解更多</span>
       </a>
 

pages/courseware/index.vue

@@ -4,7 +4,7 @@
     <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/course/course-banner-background.png`)})`}" class="client-course-banner"></div>
 
     <!-- 新闻资讯 -->
-    <ul class="course-menu-ul">
+    <ul class="platform-menu-ul">
       <li @click="btnClick('kckf')" :class="{'active':divType==='kckf'}">课程开发</li><li @click="btnClick('kczy')" :class="{'active':divType==='kczy'}">课程资源</li>
     </ul>
 

pages/news/index.vue

@@ -5,7 +5,7 @@
         <img  @click="clickBanner(bannerList[0].url)" :src="bannerList[0].pic" alt="新闻资讯">
     </div>
     <!-- 新闻资讯 -->
-    <ul class="newsInfor-menu-ul">
+    <ul class="platform-menu-ul">
       <li style="cursor: pointer"
           :class="{'active':activeIndex===index}"
           @click="btnClick(item,index)"
@@ -24,6 +24,17 @@
       <div class="client-el-pagination">
         <el-pagination
           background
+          small
+          class="mta-hidden-sm"
+          layout="prev, pager, next"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage"
+          :page-size="pageSize"
+          :total="totalLists">
+        </el-pagination>
+        <el-pagination
+          background
+          class="mta-hidden-xs"
           layout="prev, pager, next"
           @current-change="handleCurrentChange"
           :current-page.sync="currentPage"