行业学习需求改版3---许莹版--待完成

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

@@ -234,7 +234,8 @@
           .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);}
-
+          // 免费试用按钮
+          .client-default-Btn{width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;}
       }
       //覆盖饿了么样式
       .el-tabs__header{margin: 0 0 48px;}
@@ -245,61 +246,47 @@
 
       // 考试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;background: #2B5CFD;margin: 0 6px;}
+          // 蒙版
+          .demand-mask-box{
+            position: absolute;
+            top: 240px;
+            padding: 20px;
+            background:rgba(249,250,255,0.65);
+            transition: 0.5s;
+            h4{
+              @include setFontStyle(0);color: #fff;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);}
+            i{width: 16px;height: 16px;display: inline-block;background: red;vertical-align: middle;margin-left: 8px;}
+          }
+          // 图标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: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万家客户的信任之选 */

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,12 +324,30 @@
         certImg8:       require(`~/static/images/client/index/index-cert-img8.jpg`),
         activeIndex:    '首页',
         activeName:     'first',// tab页签
-        kaoshiClicked:  0,
-        kaoshiLiArray:  ['政府机构', '能源化工', '信息产业', '金融保险', '交通运输', '汽车制造'],
-        kaoshiDivArray: [
+        kaoshiLiArray: [
+          {
+            demandTitle:'政府机构',
+            demandHref:    '#',
+            demandText:    '无论是国企还是私企，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发等，成本较高，不能完全适应现代企业管理模式。',
+            demandLinkBox: [
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
+                href: '国家能源',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
+                href: '营口消防',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
+                href: '同煤社保',
+              },
+            ],
+          },
           {
-            demandText:    '为了适应市场经济的发展，越来越多的企业开始意识到人才选拔、培养的重要性，无论是国企还是私企，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发、监考，再到收卷、阅卷，程序繁杂，需要投入大量的时间、人力和物力，并且周期长、工作量大，成本较高，不能完全适应现代企业管理模式。',
+            demandTitle:'信息产业',
             demandHref:    '#',
+            demandText:    '近年来我国互联网继续保持增长态势，网络产业已经从过去的吸引眼球上逐渐转向以“盈利”为中心。如网络游戏、网上交易、网络广告、网络教育、网络短信等，新兴应用层出不穷，将推动产业融合发展和转型升级。',
             demandLinkBox: [
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
@@ -310,15 +357,27 @@
                 img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
                 demandName: '营口消防',
               },
+            ],
+          },
+          {
+            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-2.svg`),
-                demandName: '同煤社保',
+                demandName: '能源化工',
               },
             ],
           },
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'金融保险',
             demandHref:    '#',
+            demandText:    '金融无处不在并已形成一个庞大体系，金融学涉及的范畴、分支和内容非常广，对员工的知识储备要求较高，相对的考核难度也较大。所以金融保险业更需要考核数据来作为依据，帮助提升业务能力。',
             demandLinkBox: [
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
@@ -326,13 +385,14 @@
               },
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                demandName: '能源化工',
               },
             ],
           },
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'交通运输',
             demandHref:    '#',
+            demandText:    '由于交通行业以技术先行，企业越来越需要具有扎实的汽车运用技术、交通运输系统规划与管理、物流系统工程等方面专业知识，并能独立从事汽车运用与管理的复合型高级工程技术人才，人才的培养格外重要。',
             demandLinkBox: [
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
@@ -340,13 +400,14 @@
               },
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                demandName: '能源化工',
               },
             ],
           },
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'教育培训',
             demandHref:    '#',
+            demandText:    '教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，麦塔不仅是考试出题软件，还是在线教学考试系统，非常适合培训机构前期营销获客以及后期模拟考试的场景。',
             demandLinkBox: [
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
@@ -354,13 +415,35 @@
               },
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                demandName: '能源化工',
               },
             ],
           },
+        ],
+        peixunLiArray: [
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'政府机构',
             demandHref:    '#',
+            demandText:    '无论是国企还是私企，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发等，成本较高，不能完全适应现代企业管理模式。',
+            demandLinkBox: [
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
+                href: '国家能源',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
+                href: '营口消防',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
+                href: '同煤社保',
+              },
+            ],
+          },
+          {
+            demandTitle:'信息产业',
+            demandHref:    '#',
+            demandText:    '近年来我国互联网继续保持增长态势，网络产业已经从过去的吸引眼球上逐渐转向以“盈利”为中心。如网络游戏、网上交易、网络广告、网络教育、网络短信等，新兴应用层出不穷，将推动产业融合发展和转型升级。',
             demandLinkBox: [
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
@@ -373,8 +456,9 @@
             ],
           },
           {
-            demandText:    '今天，信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
+            demandTitle:'能源化工',
             demandHref:    '#',
+            demandText:    '信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。',
             demandLinkBox: [
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
@@ -382,13 +466,42 @@
               },
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
-                demandName: '营口消防',
+                demandName: '能源化工',
+              },
+            ],
+          },
+          {
+            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-2.svg`),
+                demandName: '能源化工',
+              },
+            ],
+          },
+          {
+            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-2.svg`),
+                demandName: '能源化工',
               },
             ],
           },
         ],
 
-
         btnTextDisabled: false,
         telDl: false,
         btnText:         '获取验证码',
@@ -624,13 +737,6 @@
         };
         this.$router.push({ name: 'news-id', params: opt });
       },
-      tabSwitch(data, index) {
-        this.kaoshiClicked = index;
-
-        // this.newsClassifyId = data.newsClassifyId
-        // this.getMessage();
-
-      },
     },
   };
 </script>