行业资讯详情页响应式开发

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

@@ -451,6 +451,29 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
       a:hover{color: rgba(43,92,253,0.85);cursor: pointer}
     }
   }
+  @media (max-width: 768px) {
+    padding: 0;
+    // 时间人数
+    .details-visits-box{
+      margin-bottom: 36px;text-align: center;
+      i{width: 16px;height: 16px;margin-right: 6px;background-size: cover;}
+      span{@include setFontStyle(-8);margin-right: 24px;line-height: 12px;}
+    }
+    //行业资讯详情外层box
+    .client-details-box{width: 100%;}
+    // 行业资讯详情
+    .client-details-wrap{
+      width: 100%;border: 0;padding-right:0;
+      >h1{@include setFontStyle(-4);margin: 16px 0;text-align: center;font-weight: bolder;}
+      //内容区域
+      .client-content-box{
+        min-height:unset;
+      }
+      // 上一篇下一篇按钮
+      .client-details-pagination a{border: 1px solid rgba(43, 92, 253, 0.85);padding: 4px 12px;border-radius: 4px;}
+
+    }
+  }
 }
 
 /* 网站通用轮播 */

pages/news/_id.vue

@@ -12,16 +12,18 @@
         <div class="client-content-box" v-html="infoData.content"></div>
         <div class="client-details-pagination">
           <a v-show="infoData.lastId" :href="`${baseUrl}/news/${infoData.lastId}`">
-            <span @click.prevent="changeNews(infoData.lastId)" :title="'上一篇：'+infoData.lastName">上一篇：{{infoData.lastName}}</span>
+            <span class="mta-hidden-xs" @click.prevent="changeNews(infoData.lastId)" :title="'上一篇：'+infoData.lastName">上一篇：{{infoData.lastName}}</span>
+            <span class="mta-hidden-sm details-phone-btn" @click.prevent="changeNews(infoData.lastId)">上一篇</span>
           </a>
           <a v-show="infoData.nextId" :href="`${baseUrl}/news/${infoData.nextId}`">
-            <span @click.prevent="changeNews(infoData.nextId)" :title="'下一篇：'+infoData.nextName">下一篇：{{infoData.nextName}}</span>
+            <span class="mta-hidden-xs" @click.prevent="changeNews(infoData.nextId)" :title="'下一篇：'+infoData.nextName">下一篇：{{infoData.nextName}}</span>
+            <span class="mta-hidden-sm details-phone-btn" @click.prevent="changeNews(infoData.lastId)">下一篇</span>
           </a>
         </div>
       </div>
 
       <!-- 最新新闻 -->
-      <div class="latest-news-box">
+      <div class="latest-news-box mta-hidden-xs">
         <h4>最新新闻</h4>
         <ul class="latest-news-list">
           <li v-for="(item, index) in newestData" :key="index">