Merge remote-tracking branch 'origin/master'

README.md

@@ -3,7 +3,7 @@
 ## 打包部署 需要文件夹
 - .nuxt
 - static
-- node_modules
+- assets
 - nuxt.config.js
 - package.json
 - package-lock.json

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

@@ -132,9 +132,6 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 .client-head{
   width: 100%;
   height: 80px;
-  position:fixed;
-  top: 0;
-  left: 0;
   z-index: 999;
   background: #fff;
 
@@ -164,7 +161,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   .head-left{
     display: flex;
     //头部图标
-    a>i{width: 160px;height: 70px;display: inline-block;background-image: url("~static/images/client/component/nav-logo.svg");background-repeat: no-repeat;background-position: center;}
+    >a{width: 160px;height: 80px;display: inline-block;background-image: url("~static/images/client/component/nav-logo.svg");background-repeat: no-repeat;background-position: center;}
   }
 
   //头部右侧区域
@@ -288,7 +285,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     >h1{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
     //内容区域
     .client-content-box{
-      height: calc(100vh - 517px);
+      min-height: calc(100vh - 517px);
       line-height: 24px;
       color: rgba(0,0,0,0.64);
       @include setFontStyle(-6);

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

@@ -9,7 +9,6 @@
     .client-index-banner{
       width: 100%;
       height: 480px;
-      margin-top: 80px;
       background-image: url("~static/images/client/index/index-banner-background.png");
       background-position-x: center;
       .banner-left{
@@ -229,77 +228,82 @@
       min-height: 720px;
       //tab
       .demand-box-tab{
-        margin-top: 16px;
-          .el-tabs__nav div:first-child{border-radius: 4px 0 0 4px;}
-          .el-tabs__nav div:last-child{border-radius: 0 4px 4px 0;}
-          .el-tabs__item{width:112px;height: 32px;line-height: 32px;@include setFontStyle(-4);color: rgba(0,0,0,0.85);padding: 0;text-align: center;border: 1px solid #FCA20E;}
-          .el-tabs__item.is-active{background: #FEBF11;border-color:#FEBF11;color: rgba(255,255,255,0.85);}
-
+        margin-top: 30px;
+          .el-tabs__item{width:124px;height: 40px;line-height: 40px;@include setFontStyle(-4);color: rgba(0,0,0,0.85);padding: 0;text-align: center;}
+          .el-tabs__item.is-active{background-image: url("~static/images/client/index/index-demand-btnBg.png");color: #fff;}
+          // 免费试用按钮
+          .client-default-Btn{width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;}
       }
       //覆盖饿了么样式
       .el-tabs__header{margin: 0 0 48px;}
       .demand-box-tab.el-tabs--card>.el-tabs__header{border: 0}
-      .demand-box-tab.el-tabs--card>.el-tabs__header .el-tabs__nav{border: 0}
+      .demand-box-tab.el-tabs--card>.el-tabs__header .el-tabs__nav{width: 72%;height: 40px;margin: 0 auto;border-color: #ccc;border-bottom: 1px solid #ccc;border-right:0;border-left:0;border-radius: 0;}
       .demand-box-tab .el-tabs__nav-scroll{text-align: center;}
       .demand-box-tab .el-tabs__nav{float: none;}
 
       // 考试ul
       .demand-tab-list{
-        margin-right: -34px;
-        margin-bottom: 24px;
         li{
-          width: 128px;height: 134px;margin-right: 34px;display: inline-block;background:#fff;text-align: center;box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
-          border-radius: 8px;transition: 0.3s;
-          i{width: 48px;height: 48px;display: inline-block;background-repeat: no-repeat;margin-top: 24px;transition: 0.3s;}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);margin-top: 16px;transition: 0.3s;}
-        }
-        li:last-child{margin-right: 0;}
-        li:hover,li.active{
-          background-image: url("~static/images/client/index/demand-li-bg.png");cursor: pointer;
-          p{color: rgba(255,255,255,0.85);}
-        }
-      }
-
-      .demand-kaoshi-list{
-        li:nth-child(1){i{background-image: url("~static/images/client/index/index-demand-img1.svg");}}
-        li:hover:nth-child(1),li.active:nth-child(1){i{background-image: url("~static/images/client/index/index-demand-img1-a.svg");} }
-        li:nth-child(2){i{background-image: url("~static/images/client/index/index-demand-img2.svg");}}
-        li:hover:nth-child(2),li.active:nth-child(2){i{background-image: url("~static/images/client/index/index-demand-img2-a.svg");} }
-        li:nth-child(3){i{background-image: url("~static/images/client/index/index-demand-img3.svg");}}
-        li:hover:nth-child(3),li.active:nth-child(3){i{background-image: url("~static/images/client/index/index-demand-img3-a.svg");} }
-        li:nth-child(4){i{background-image: url("~static/images/client/index/index-demand-img4.svg");}}
-        li:hover:nth-child(4),li.active:nth-child(4){i{background-image: url("~static/images/client/index/index-demand-img4-a.svg");} }
-        li:nth-child(5){i{background-image: url("~static/images/client/index/index-demand-img5.svg");}}
-        li:hover:nth-child(5),li.active:nth-child(5){i{background-image: url("~static/images/client/index/index-demand-img5-a.svg");} }
-        li:nth-child(6){i{background-image: url("~static/images/client/index/index-demand-img6.svg");}}
-        li:hover:nth-child(6),li.active:nth-child(6){i{background-image: url("~static/images/client/index/index-demand-img6-a.svg");} }
-      }
-      //考试详情（li对应div）
-      .demand-content-box{
-        padding: 16px;background: #1276FF;
-        border-radius: 8px;
-        margin-right: 22px;
-        h5{
-          @include setFontStyle(-4);
-          color: rgba(255,255,255,0.85);
-          margin-bottom: 8px;
-        }
-        p{min-height: 66px;@include setFontStyle(-6);color: rgba(255,255,255,0.65);line-height: 22px;@include multi-line-ellipsis(3);}
-        .content-top-box{
-          padding-bottom: 16px;
-          margin-bottom: 16px;
-          border-bottom:1px solid rgba(255,255,255,0.65);
-          span{@include setFontStyle(-4);float:right;color: #FFD04E;}
+          width: 33.33%;display: inline-block;position: relative;margin-bottom: 24px;overflow: hidden;
+
+          // 内容区域
+          .demand-content-box{height: 300px;margin: 0 6px;background-size: cover;background-repeat: no-repeat;}
+          // 蒙版
+          .demand-mask-box{
+            position: absolute;
+            top: 240px;
+            padding: 20px;
+            background:rgba(66,66,66,0.65);
+            transition: 0.5s;
+            margin: 0 6px;
+            color: #fff;
+            h4{
+              @include setFontStyle(0);margin-bottom: 24px;text-align: center;
+              >a{float: right;display: none;}
+            }
+            p{@include setFontStyle(-6);line-height: 24px;margin-bottom: 16px;@include multi-line-ellipsis(4);text-align: justify; }
+            span{@include setFontStyle(-6);color: #fff;}
+            i{width: 15px;height: 15px;display: inline-block;vertical-align: middle;margin-left: 8px;background-image: url("~static/images/client/index/index-demand-icon.png");}
+          }
+          // 图标div
+          .demand-icon-box{
+            padding: 16px 0;
+            border-top: 1px solid #fff;
+            a{margin-right: 8px}
+            a:last-child{margin-right: 0;}
+            img{width: 80px;height: 80px;}
+          }
+        }
+        li:nth-child(1){
+          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img1.png");}
+        }
+        li:nth-child(2){
+          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img2.png");}
+        }
+        li:nth-child(3){
+          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img3.png");}
+        }
+        li:nth-child(4){
+          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img4.png");}
+        }
+        li:nth-child(5){
+          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img5.png");}
+        }
+        li:nth-child(6){
+          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img6.png");}
+        }
+        li:hover{
+          // 蒙版
+          .demand-mask-box{
+            top:0;
+            h4{
+              text-align: left;
+              >a{display: inline-block;}
+            }
+          }
         }
       }
-      // 图标div
-      .demand-icon-box{
-        display: inline-block;
-        text-align: center;
-        margin-right: 40px;
-        img{width: 48px;height: 48px;border-radius: 4px;display: block;margin: 0 auto}
-        span{@include setFontStyle(-6);color: rgba(255,255,255,0.65);margin-top: 8px;}
-      }
+
     }
 
     /* 超过10万家客户的信任之选 */

components/header.vue

@@ -2,9 +2,7 @@
   <nav class="client-head">
     <div class="client-container head-layout">
       <div class="head-left">
-        <a>
-          <i></i>
-        </a>
+        <a></a>
         <el-menu
           :default-active="activeNav"
           class="el-menu-demo"

components/news/NewsList.vue

@@ -6,7 +6,7 @@
       <div><i></i><span>{{newsData.startTime}}</span><i type="visits"></i><span>{{newsData.visits}}</span>
       </div>
       <p>{{newsData.intro}}</p>
-      <a :href="`${baseUrl}/news/${newsData.iiId}`" >
+      <a :href="`${baseUrl}/news/${newsData.code}`" >
         <span @click.prevent="checkInfo(newsData)">
           了解更多
         </span>
@@ -45,7 +45,7 @@
         // console.log(self.localtion.href);
         // console.log(document.URL);
         const opt = {
-          id: data.iiId,
+          id: data.code,
         };
         this.$router.push({ name: 'news-id', params: opt });
 

layouts/templateA.vue

@@ -27,5 +27,5 @@
   }
 </script>
 <style lang="scss" scoped>
-  .nuxt-box:not(.client-index-page){width: 100%;margin-top: 80px;}
+  .nuxt-box:not(.client-index-page){width: 100%;}
 </style>

layouts/templateB.vue

@@ -27,5 +27,5 @@
   }
 </script>
 <style lang="scss" scoped>
-  .nuxt-box:not(.client-index-page){width: 100%;margin-top: 80px;}
+  .nuxt-box:not(.client-index-page){width: 100%;}
 </style>

nuxt.config.js

@@ -67,10 +67,7 @@ export default {
   /**
    * loading 进度条样式
    */
-  loading: {
-    color: '#2B5CFD',
-    height: '1px'
-  },
+  loading: false,
   /*
   ** Nuxt.js modules
   */

pages/index.vue

@@ -89,10 +89,10 @@
 
     <!-- 行业学习需求 -->
     <div class="client-demand-box">
-      <div class="client-container-middle">
+      <div class="client-container">
         <h4 class="client-title">满足不同行业学习需求</h4>
         <el-tabs v-model="activeName" type="card" class="demand-box-tab">
-          <el-tab-pane label="考试系统" name="first">
+          <!--<el-tab-pane label="考试系统" name="first">
             <ul class="demand-tab-list demand-kaoshi-list">
               <li :class="{'active':kaoshiClicked===index}" @click="tabSwitch(item,index)" v-for="(item,index) in kaoshiLiArray"><i></i><p>{{item}}</p></li>
             </ul>
@@ -109,8 +109,37 @@
                   </div>
                 </div>
               </div>
+          </el-tab-pane>-->
+          <el-tab-pane label="考试系统" name="first">
+            <ul class="demand-tab-list demand-kaoshi-list">
+              <li v-for="item in kaoshiLiArray">
+                <div class="demand-content-box"></div>
+                <div class="demand-mask-box">
+                  <h4>{{item.demandTitle}}<a :href="item.demandHref"><span>了解详情</span><i></i></a></h4>
+                  <p>{{item.demandText}}</p>
+                  <div class="demand-icon-box">
+                    <a v-for="item2 in item.demandLinkBox" :href="item2.href"><img :src="item2.img" alt="客户案例"></a>
+                  </div>
+                </div>
+              </li>
+            </ul>
+            <a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
+          </el-tab-pane>
+          <el-tab-pane label="培训系统" name="second">
+            <ul class="demand-tab-list demand-peixun-list">
+              <li v-for="item in peixunLiArray">
+                <div class="demand-content-box"></div>
+                <div class="demand-mask-box">
+                  <h4>{{item.demandTitle}}<a :href="item.demandHref"><span>了解详情</span><i></i></a></h4>
+                  <p>{{item.demandText}}</p>
+                  <div class="demand-icon-box">
+                    <a v-for="item2 in item.demandLinkBox" :href="item2.href"><img :src="item2.img" alt="客户案例"></a>
+                  </div>
+                </div>
+              </li>
+            </ul>
+            <a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a>
           </el-tab-pane>
-          <el-tab-pane label="培训系统" name="second">培训系统</el-tab-pane>
         </el-tabs>
       </div>
     </div>
@@ -295,100 +324,196 @@
         certImg8:       require(`~/static/images/client/index/index-cert-img8.jpg`),
         activeIndex:    '首页',
         activeName:     'first',// tab页签
-        kaoshiClicked:  0,
-        kaoshiLiArray:  ['政府机构', '能源化工', '信息产业', '金融保险', '交通运输', '汽车制造'],
-        kaoshiDivArray: [
+        kaoshiLiArray: [
           {
-            demandText:    '为了适应市场经济的发展，越来越多的企业开始意识到人才选拔、培养的重要性，无论是国企还是私企，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发、监考，再到收卷、阅卷，程序繁杂，需要投入大量的时间、人力和物力，并且周期长、工作量大，成本较高，不能完全适应现代企业管理模式。',
+            demandTitle:'政府机构',
             demandHref:    '#',
+            demandText:    '无论是国企还是私企，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发等，成本较高，不能完全适应现代企业管理模式。',
             demandLinkBox: [
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
-                demandName: '国家能源',
+                img:        require(`~/static/images/client/index/index-demand-icon1-1.png`),
+                href: '#',
               },
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                img:        require(`~/static/images/client/index/index-demand-icon1-2.png`),
+                href: '#',
+              },
+            ],
+          },
+          {
+            demandTitle:'信息产业',
+            demandHref:    '#',
+            demandText:    '近年来我国互联网继续保持增长态势，网络产业已经从过去的吸引眼球上逐渐转向以“盈利”为中心。如网络游戏、网上交易、网络广告、网络教育、网络短信等，新兴应用层出不穷，将推动产业融合发展和转型升级。',
+            demandLinkBox: [
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon2-1.png`),
+                href: '#',
               },
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '同煤社保',
+                img:        require(`~/static/images/client/index/index-demand-icon2-2.png`),
+                href: '#',
               },
             ],
           },
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'能源化工',
             demandHref:    '#',
+            demandText:    '信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。',
             demandLinkBox: [
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
-                demandName: '国家能源',
+                img:        require(`~/static/images/client/index/index-demand-icon3-1.png`),
+                href: '#',
               },
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                img:        require(`~/static/images/client/index/index-demand-icon3-2.png`),
+                href: '#',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon3-3.png`),
+                href: '#',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon3-4.png`),
+                href: '#',
               },
             ],
           },
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'金融保险',
             demandHref:    '#',
+            demandText:    '金融无处不在并已形成一个庞大体系，金融学涉及的范畴、分支和内容非常广，对员工的知识储备要求较高，相对的考核难度也较大。所以金融保险业更需要考核数据来作为依据，帮助提升业务能力。',
             demandLinkBox: [
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
-                demandName: '国家能源',
+                img:        require(`~/static/images/client/index/index-demand-icon4-1.png`),
+                href: '#',
               },
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                img:        require(`~/static/images/client/index/index-demand-icon4-2.png`),
+                href: '#',
               },
             ],
           },
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'交通运输',
             demandHref:    '#',
+            demandText:    '由于交通行业以技术先行，企业越来越需要具有扎实的汽车运用技术、交通运输系统规划与管理、物流系统工程等方面专业知识，并能独立从事汽车运用与管理的复合型高级工程技术人才，人才的培养格外重要。',
             demandLinkBox: [
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
-                demandName: '国家能源',
+                img:        require(`~/static/images/client/index/index-demand-icon5-1.png`),
+                href: '#',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon5-2.png`),
+                href: '#',
               },
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                img:        require(`~/static/images/client/index/index-demand-icon5-3.png`),
+                href: '#',
               },
             ],
           },
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'教育培训',
             demandHref:    '#',
+            demandText:    '教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，麦塔不仅是考试出题软件，还是在线教学考试系统，非常适合培训机构前期营销获客以及后期模拟考试的场景。',
             demandLinkBox: [
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
-                demandName: '国家能源',
+                img:        require(`~/static/images/client/index/index-demand-icon6-1.png`),
+                href: '#',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon6-2.png`),
+                href: '#',
               },
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                img:        require(`~/static/images/client/index/index-demand-icon6-3.png`),
+                href: '#',
               },
             ],
           },
+        ],
+        peixunLiArray: [
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'食品餐饮',
             demandHref:    '#',
+            demandText:    '随着社会经济的不断发展，餐饮文化的传播将越来越国际化和市场化。如何应对蓬勃发展的餐饮形势，不仅只是餐饮企业所面对的问题，同时也是烹饪教育应该思考的问题。',
             demandLinkBox: [
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
-                demandName: '国家能源',
+                img:        require(`~/static/images/client/index/index-demand-icon7-1.png`),
+                href: '#',
               },
               {
-                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                img:        require(`~/static/images/client/index/index-demand-icon7-2.png`),
+                href: '#',
+              },
+            ],
+          },
+          {
+            demandTitle:'教育培训',
+            demandHref:    '#',
+            demandText:    '教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，麦塔不仅是考试出题软件，还是在线教学考试系统，非常适合培训机构前期营销获客以及后期模拟考试的场景。',
+            demandLinkBox: [
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon8-1.png`),
+                href: '#',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon8-2.png`),
+                href: '#',
+              },
+            ],
+          },
+          {
+            demandTitle:'医疗行业',
+            demandHref:    '#',
+            demandText:    '医学类考试种类繁多，全国各级医学教育机构，如医学院，卫校，护校的本科，研究生，大中专教育培训考试等，一些医学高等院校的附属医院同时还有本科，研究生在校生的教学考试工作等。',
+            demandLinkBox: [
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon9-1.png`),
+                href: '#',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon9-2.png`),
+                href: '#',
+              },
+            ],
+          },
+          {
+            demandTitle:'政府机构',
+            demandHref:    '#',
+            demandText:    '无论是国企还是私企，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发等，成本较高，不能完全适应现代企业管理模式。',
+            demandLinkBox: [
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon10-1.png`),
+                href: '#',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon10-2.png`),
+                href: '#',
+              },
+            ],
+          },
+          {
+            demandTitle:'能源化工',
+            demandHref:    '#',
+            demandText:    '信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。',
+            demandLinkBox: [
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon11-1.png`),
+                href: '#',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon11-2.png`),
+                href: '#',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon11-3.png`),
+                href: '#',
               },
             ],
           },
         ],
 
-
         btnTextDisabled: false,
         telDl: false,
         btnText:         '获取验证码',
@@ -624,13 +749,6 @@
         };
         this.$router.push({ name: 'news-id', params: opt });
       },
-      tabSwitch(data, index) {
-        this.kaoshiClicked = index;
-
-        // this.newsClassifyId = data.newsClassifyId
-        // this.getMessage();
-
-      },
     },
   };
 </script>

pages/news/_id.vue

@@ -44,19 +44,19 @@
   export default {
     name:     'news_id',
     layout:   'templateB',
+
     async asyncData({ params, $axios, store }) {
       // 设置选中菜单
       store.commit('setActiveNav', '/news');
       try {
         const url = '/home/news/info';
         const opt = {
-          iiId: params.id,
+          code: params.id,
         };
         const res = await $axios.post(url, opt);
         const url2 = '/home/news/newest';
         const res2 = await $axios.post(url2);
-
-
+          console.log(res);
         return {
           infoData:   res.data.data,
           newestData: res2.data.data.data,
@@ -65,6 +65,18 @@
         return {};
       }
     },
+    head(){
+      return {
+        title: this.infoData.keyword,
+        meta: [
+          {
+            hid: this.infoData.keyword,
+            name: 'description',
+            content: this.infoData.intro
+          }
+        ]
+      }
+    },
     computed: {
       baseUrl() {
         return this.getBaseUrl;

static/images/client/index/index-demand-img1-a.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
-  <g fill="none" fill-rule="evenodd">
-    <path fill="#FFF" d="M3.30901699 42L45.6396204 42C45.8548356 42 46.045905 42.137715 46.113962 42.3418861L47.7806287 47.3418861C47.8679526 47.6038578 47.7263726 47.8870178 47.4644009 47.9743416 47.4134177 47.9913361 47.3600281 48 47.3062871 48L.809016994 48C.532874619 48 .309016994 47.7761424.309016994 47.5.309016994 47.4223775.32708954 47.3458209.361803399 47.2763932L2.8618034 42.2763932C2.94649941 42.1070012 3.11963097 42 3.30901699 42zM24.0861198.424001548L44.497631 15.1897756C44.9451055 15.5134806 45.0454406 16.1386452 44.7217356 16.5861198 44.5336906 16.8460643 44.2323415 17 43.9115112 17L3.08848882 17C2.53620408 17 2.08848882 16.5522847 2.08848882 16 2.08848882 15.6791697 2.24242448 15.3778206 2.50236904 15.1897756L22.9138802.424001548C23.2636627.170967429 23.7363373.170967429 24.0861198.424001548z"/>
-    <rect width="5" height="26" x="10" y="16" fill="#FFF"/>
-    <rect width="5" height="26" x="21" y="16" fill="#FFF"/>
-    <rect width="5" height="26" x="32" y="16" fill="#FFF"/>
-    <circle cx="24" cy="9" r="3" fill="#2B5CFD"/>
-  </g>
-</svg>

static/images/client/index/index-demand-img1.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
-  <g fill="none" fill-rule="evenodd">
-    <path fill="#2B5CFD" d="M3.30901699,42 L45.6396204,42 C45.8548356,42 46.045905,42.137715 46.113962,42.3418861 L47.7806287,47.3418861 C47.8679526,47.6038578 47.7263726,47.8870178 47.4644009,47.9743416 C47.4134177,47.9913361 47.3600281,48 47.3062871,48 L0.809016994,48 C0.532874619,48 0.309016994,47.7761424 0.309016994,47.5 C0.309016994,47.4223775 0.32708954,47.3458209 0.361803399,47.2763932 L2.8618034,42.2763932 C2.94649941,42.1070012 3.11963097,42 3.30901699,42 Z"/>
-    <path fill="#E8ECFF" d="M24.0861198,0.424001548 L44.497631,15.1897756 C44.9451055,15.5134806 45.0454406,16.1386452 44.7217356,16.5861198 C44.5336906,16.8460643 44.2323415,17 43.9115112,17 L3.08848882,17 C2.53620408,17 2.08848882,16.5522847 2.08848882,16 C2.08848882,15.6791697 2.24242448,15.3778206 2.50236904,15.1897756 L22.9138802,0.424001548 C23.2636627,0.170967429 23.7363373,0.170967429 24.0861198,0.424001548 Z"/>
-    <rect width="5" height="26" x="10" y="16" fill="#E8ECFF"/>
-    <rect width="5" height="26" x="21" y="16" fill="#E8ECFF"/>
-    <rect width="5" height="26" x="32" y="16" fill="#E8ECFF"/>
-    <circle cx="24" cy="9" r="3" fill="#7998FF"/>
-  </g>
-</svg>

static/images/client/index/index-demand-img2-a.svg

@@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48">
-  <defs>
-    <polygon id="能源化工-白-a" points="10 0 20 0 30 39 0 39"/>
-  </defs>
-  <g fill="none" fill-rule="evenodd">
-    <g transform="translate(10 7)">
-      <mask id="能源化工-白-b" fill="#fff">
-        <use xlink:href="#能源化工-白-a"/>
-      </mask>
-      <use fill="#FFF" xlink:href="#能源化工-白-a"/>
-      <rect width="22" height="1" x="4.508" y="2.732" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 15.508 3.232)"/>
-      <rect width="22" height="1" x="3.508" y="7.732" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 14.508 8.232)"/>
-      <rect width="25" height="1" x="2.417" y="14.245" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 14.917 14.745)"/>
-      <rect width="40" height="1" x="-10.035" y="19.81" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 9.965 20.31)"/>
-      <rect width="40" height="1" x=".965" y="32.81" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="rotate(20 20.965 33.31)"/>
-      <rect width="22" height="1" x="5.508" y="1.732" fill="#2B5CFD" mask="url(#能源化工-白-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -91.387)"/>
-      <rect width="22" height="1" x="3.508" y="7.732" fill="#2B5CFD" mask="url(#能源化工-白-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -74.045)"/>
-      <rect width="25" height="1" x="4.417" y="14.245" fill="#2B5CFD" mask="url(#能源化工-白-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -81.197)"/>
-      <rect width="40" height="1" x="-8.035" y="22.81" fill="#2B5CFD" mask="url(#能源化工-白-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -44.546)"/>
-      <rect width="40" height="1" x="-10.035" y="32.81" fill="#2B5CFD" mask="url(#能源化工-白-b)" transform="scale(-1 1) rotate(20 0 -23.203)"/>
-    </g>
-    <rect width="38.5" height="4" x="9.055" y="5.312" fill="#FFF" transform="rotate(10 28.305 7.312)"/>
-    <rect width="39" height="2" x="24.202" y="26.333" fill="#FFF" transform="rotate(101 43.702 27.333)"/>
-    <rect width="32" height="4" x="9" y="44" fill="#FFF"/>
-    <path fill="#FFF" d="M4.4534307,24 C6.91299256,24 8.9068614,18.627417 8.9068614,12 C8.9068614,5.372583 11.3664233,0 8.9068614,0 C6.44729954,0 0,5.372583 0,12 C0,18.627417 1.99386884,24 4.4534307,24 Z"/>
-    <rect width="2" height="25" x="4" y="23" fill="#FFF"/>
-  </g>
-</svg>

static/images/client/index/index-demand-img2.svg

@@ -1,28 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="49" viewBox="0 0 48 49">
-  <defs>
-    <polygon id="能源化工-蓝-a" points="10 0 20 0 30 39 0 39"/>
-  </defs>
-  <g fill="none" fill-rule="evenodd">
-    <g transform="translate(10 7)">
-      <mask id="能源化工-蓝-b" fill="#fff">
-        <use xlink:href="#能源化工-蓝-a"/>
-      </mask>
-      <use fill="#E8ECFF" xlink:href="#能源化工-蓝-a"/>
-      <rect width="22" height="1" x="4.508" y="2.732" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 15.508 3.232)"/>
-      <rect width="22" height="1" x="3.508" y="7.732" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 14.508 8.232)"/>
-      <rect width="25" height="1" x="2.417" y="14.245" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 14.917 14.745)"/>
-      <rect width="40" height="1" x="-10.035" y="19.81" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 9.965 20.31)"/>
-      <rect width="40" height="1" x=".965" y="32.81" fill="#7998FF" mask="url(#能源化工-蓝-b)" transform="rotate(20 20.965 33.31)"/>
-      <rect width="22" height="1" x="5.508" y="1.732" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -91.387)"/>
-      <rect width="22" height="1" x="3.508" y="7.732" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -74.045)"/>
-      <rect width="25" height="1" x="4.417" y="14.245" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -81.197)"/>
-      <rect width="40" height="1" x="-8.035" y="22.81" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -44.546)"/>
-      <rect width="40" height="1" x="-10.035" y="32.81" fill="#7998FF" mask="url(#能源化工-蓝-b)" opacity=".64" transform="scale(-1 1) rotate(20 0 -23.203)"/>
-    </g>
-    <rect width="38.5" height="4" x="9.055" y="5.312" fill="#2B5CFD" transform="rotate(10 28.305 7.312)"/>
-    <rect width="39" height="2" x="24.202" y="26.333" fill="#E8ECFF" transform="rotate(101 43.702 27.333)"/>
-    <rect width="32" height="4" x="9" y="44" fill="#2B5CFD"/>
-    <path fill="#E8ECFF" d="M4.4534307,24 C6.91299256,24 8.9068614,18.627417 8.9068614,12 C8.9068614,5.372583 11.3664233,0 8.9068614,0 C6.44729954,0 0,5.372583 0,12 C0,18.627417 1.99386884,24 4.4534307,24 Z"/>
-    <rect width="2" height="25" x="4" y="23" fill="#E8ECFF"/>
-  </g>
-</svg>

static/images/client/index/index-demand-img3-a.svg

@@ -1,27 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48">
-  <defs>
-    <circle id="信息产业-白-a" cx="24" cy="24" r="24"/>
-    <circle id="信息产业-白-c" cx="10" cy="10" r="10"/>
-  </defs>
-  <g fill="none" fill-rule="evenodd">
-    <mask id="信息产业-白-b" fill="#fff">
-      <use xlink:href="#信息产业-白-a"/>
-    </mask>
-    <use fill="#FFF" xlink:href="#信息产业-白-a"/>
-    <circle cx="9" cy="24" r="29" stroke="#7998FF" mask="url(#信息产业-白-b)" opacity=".64"/>
-    <circle cx="39" cy="24" r="29" stroke="#7998FF" mask="url(#信息产业-白-b)" opacity=".64" transform="matrix(-1 0 0 1 78 0)"/>
-    <circle cx="24" cy="-8" r="24" stroke="#2B5CFD" mask="url(#信息产业-白-b)"/>
-    <circle cx="24" cy="57" r="24" stroke="#2B5CFD" mask="url(#信息产业-白-b)"/>
-    <rect width="48.5" height="1" x="-.75" y="23.75" fill="#7998FF" mask="url(#信息产业-白-b)" transform="rotate(90 23.5 24.25)"/>
-    <rect width="48" height="1" y="24" fill="#2B5CFD" mask="url(#信息产业-白-b)"/>
-    <g transform="translate(28)">
-      <mask id="信息产业-白-d" fill="#fff">
-        <use xlink:href="#信息产业-白-c"/>
-      </mask>
-      <use fill="#2B5CFD" xlink:href="#信息产业-白-c"/>
-      <text fill="#FFF" font-family="CalistoMT-BoldItalic, Calisto MT" font-size="16" font-style="italic" font-weight="bold" mask="url(#信息产业-白-d)">
-        <tspan x="7" y="14">i</tspan>
-      </text>
-    </g>
-  </g>
-</svg>

static/images/client/index/index-demand-img3.svg

@@ -1,27 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="49" viewBox="0 0 48 49">
-  <defs>
-    <circle id="信息产业-蓝-a" cx="24" cy="24" r="24"/>
-    <circle id="信息产业-蓝-c" cx="10" cy="10" r="10"/>
-  </defs>
-  <g fill="none" fill-rule="evenodd">
-    <mask id="信息产业-蓝-b" fill="#fff">
-      <use xlink:href="#信息产业-蓝-a"/>
-    </mask>
-    <use fill="#E8ECFF" xlink:href="#信息产业-蓝-a"/>
-    <circle cx="9" cy="24" r="29" stroke="#7998FF" mask="url(#信息产业-蓝-b)" opacity=".64"/>
-    <circle cx="39" cy="24" r="29" stroke="#7998FF" mask="url(#信息产业-蓝-b)" opacity=".64" transform="matrix(-1 0 0 1 78 0)"/>
-    <circle cx="24" cy="-8" r="24" stroke="#7998FF" mask="url(#信息产业-蓝-b)"/>
-    <circle cx="24" cy="57" r="24" stroke="#7998FF" mask="url(#信息产业-蓝-b)"/>
-    <rect width="48.5" height="1" x="-.75" y="23.75" fill="#7998FF" mask="url(#信息产业-蓝-b)" transform="rotate(90 23.5 24.25)"/>
-    <rect width="48" height="1" y="24" fill="#7998FF" mask="url(#信息产业-蓝-b)"/>
-    <g transform="translate(28)">
-      <mask id="信息产业-蓝-d" fill="#fff">
-        <use xlink:href="#信息产业-蓝-c"/>
-      </mask>
-      <use fill="#2B5CFD" xlink:href="#信息产业-蓝-c"/>
-      <text fill="#FFF" fill-opacity=".85" font-family="CalistoMT-BoldItalic, Calisto MT" font-size="16" font-style="italic" font-weight="bold" mask="url(#信息产业-蓝-d)">
-        <tspan x="7" y="14">i</tspan>
-      </text>
-    </g>
-  </g>
-</svg>

static/images/client/index/index-demand-img5-a.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
-  <g fill="none" fill-rule="evenodd">
-    <rect width="40" height="33" x="4" y="4" fill="#FFF" rx="4"/>
-    <rect width="35" height="17" x="7" y="11" stroke="#2B5CFD" opacity=".64" rx="4"/>
-    <circle cx="10.5" cy="31.5" r="1.5" fill="#2B5CFD"/>
-    <circle cx="37.5" cy="31.5" r="1.5" fill="#2B5CFD"/>
-    <rect width="20" height="8" x="14" fill="#FFF" rx="2"/>
-    <rect width="18" height="1" x="15" y="4" fill="#2B5CFD" rx=".5"/>
-    <rect width="18" height="1" x="14.5" y="18.5" fill="#2B5CFD" rx=".5" transform="rotate(90 23.5 19)"/>
-    <path fill="#FFF" d="M13.2071068,35 L35.7810844,35 C35.9206334,35 36.0538328,35.0583188 36.1484861,35.1608599 L47.2254092,47.1608599 C47.4127111,47.3637703 47.4000579,47.6800998 47.1971475,47.8674017 C47.1047864,47.9526581 46.9837025,48 46.8580075,48 L1.20710678,48 C0.930964406,48 0.707106781,47.7761424 0.707106781,47.5 C0.707106781,47.3673918 0.759785201,47.2402148 0.853553391,47.1464466 L12.8535534,35.1464466 C12.9473216,35.0526784 13.0744985,35 13.2071068,35 Z"/>
-    <rect width="18" height="1" x="15" y="40" fill="#2B5CFD" rx=".5"/>
-    <rect width="24" height="1" x="12" y="44" fill="#2B5CFD" rx=".5"/>
-  </g>
-</svg>

static/images/client/index/index-demand-img5.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49">
-  <g fill="none" fill-rule="evenodd">
-    <rect width="40" height="33" x="4" y="4" fill="#E8ECFF" rx="4"/>
-    <rect width="35" height="17" x="7" y="11" stroke="#7998FF" opacity=".64" rx="4"/>
-    <circle cx="10.5" cy="31.5" r="1.5" fill="#7998FF"/>
-    <circle cx="37.5" cy="31.5" r="1.5" fill="#7998FF"/>
-    <rect width="20" height="8" x="14" fill="#7998FF" rx="2"/>
-    <rect width="18" height="1" x="15" y="4" fill="#E8ECFF" rx=".5"/>
-    <rect width="18" height="1" x="14.5" y="18.5" fill="#7998FF" rx=".5" transform="rotate(90 23.5 19)"/>
-    <path fill="#2B5CFD" d="M13.2071068,35 L35.7810844,35 C35.9206334,35 36.0538328,35.0583188 36.1484861,35.1608599 L47.2254092,47.1608599 C47.4127111,47.3637703 47.4000579,47.6800998 47.1971475,47.8674017 C47.1047864,47.9526581 46.9837025,48 46.8580075,48 L1.20710678,48 C0.930964406,48 0.707106781,47.7761424 0.707106781,47.5 C0.707106781,47.3673918 0.759785201,47.2402148 0.853553391,47.1464466 L12.8535534,35.1464466 C12.9473216,35.0526784 13.0744985,35 13.2071068,35 Z"/>
-    <rect width="18" height="1" x="15" y="40" fill="#E8ECFF" rx=".5"/>
-    <rect width="24" height="1" x="12" y="44" fill="#E8ECFF" rx=".5"/>
-  </g>
-</svg>