行业学习需求

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

@@ -53,125 +53,48 @@
 
     /* 行业学习需求 */
     .client-demand-box{
-      background: #f5f5f5;
-      padding-bottom: 80px;
-      min-height: 720px;
-      //tab
-      .demand-box-tab{
-        margin-top: 30px;
-          .el-tabs__item{width:124px;height: 40px;line-height: 40px;border-radius: 4px;border: 1px solid #3e7ee7;@include setFontStyle(-4);color: #3e7ee7;padding: 0;text-align: center;margin: 0 12px 32px;}
-          .el-tabs__item.is-active{background-color:#3e7ee7;color: #fff;position: relative}
-          .el-tabs__item.is-active:after{ width: 0; height: 0; content: "";display: inline-block;border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #3e7ee7;
-          position: absolute;bottom: -33px;left: 50%;margin-left: -8px;}
-          // 免费试用按钮
-          .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{margin: 0 auto;border-color: #ccc;border-bottom: 1px dotted #6c9ce1;border-right:0;border-left:0;border-top: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: 0 -18px;
-        li{
-          width: 33.33%;display: inline-block;position: relative;margin-bottom: 24px;overflow: hidden;
-
-          // 内容区域
-          .demand-content-box{height: 300px;margin: 0 18px;background-color: #fff;background-repeat: no-repeat;background-position: 5px 5px;}
-          //图片区域
-          .demand-img-box{
-            position: absolute;
-            top: 90px;
-            left: 50%;
-            margin-left: -50px;
-              i{width: 100px;height: 100px;display:block;margin-bottom: 24px;background-repeat: no-repeat;background-size: cover;}
-              h4{@include setFontStyle(-2);color: #272727;text-align: center;}
-          }
-          // 蒙版
-          .demand-mask-box{
-            position: absolute;
-            top: 300px;
-            padding: 20px;
-            background:rgba(66,66,66,0.65);
-            transition: 0.5s;
-            margin: 0 18px;
-            color: #fff;
-            h4{
-              @include setFontStyle(0);margin-bottom: 24px;text-align: center;
-              >a{float: right;display: none;}
-            }
-            p{max-height: 100px;overflow: hidden;@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: 77px;height: 77px;}
-          }
-        }
+      .demand-list-box{
+        margin-top: 24px;
+        li{width: 25%;display: inline-block;margin: 34px 0;text-align: center;cursor: default;}
+        span{width: 100px;height: 100px;border-radius: 50%;display: inline-block;text-align: center;transition: .3s;}
+        i{width: 60px;height: 60px;background-size: cover;display: inline-block;margin-top: 20px;}
+        p{font-weight: 700;font-size: 20px;color: rgb(16, 16, 16);margin: 12px 0;}
         li:nth-child(1){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
-          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img1.png");}
+          span{background-color: rgb(0, 150, 136);}
+          i{background-image: url("~static/images/client/index/index-demand-icon1.png");}
         }
         li:nth-child(2){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic2.png");}}
-          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img2.png");}
+          span{background-color: rgb(255, 152, 0);}
+          i{background-image: url("~static/images/client/index/index-demand-icon2.png");}
         }
         li:nth-child(3){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
-          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img3.png");}
+          span{background-color: rgb(234, 73, 79);}
+          i{background-image: url("~static/images/client/index/index-demand-icon3.png");}
         }
         li:nth-child(4){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic4.png");}}
-          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img4.png");}
+          span{background-color: rgb(64, 158, 255);}
+          i{background-image: url("~static/images/client/index/index-demand-icon4.png");}
         }
         li:nth-child(5){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic5.png");}}
-          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img5.png");}
+          span{background-color: rgb(255, 128, 108);}
+          i{background-image: url("~static/images/client/index/index-demand-icon5.png");}
         }
         li:nth-child(6){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
-          .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;}
-            }
-          }
-        }
-      }
-      .demand-peixun-list{
-        li:nth-child(1){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic7.png");}}
-        }
-        li:nth-child(2){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
-        }
-        li:nth-child(3){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic8.png");}}
+          span{background-color: rgb(179, 111, 238);}
+          i{background-image: url("~static/images/client/index/index-demand-icon6.png");}
         }
-        li:nth-child(4){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
+        li:nth-child(7){
+          span{background-color: rgb(72, 97, 132);}
+          i{background-image: url("~static/images/client/index/index-demand-icon7.png");}
         }
-        li:nth-child(5){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
+        li:nth-child(8){
+          span{background-color: rgb(160, 212, 104);}
+          i{background-image: url("~static/images/client/index/index-demand-icon8.png");}
         }
-        li:nth-child(6){
-          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic12.png");}}
+        li:hover{
+          span{transform: translateY(-8px);;}
         }
       }
-
     }
 
     /* 超过10万家客户的信任之选 */
@@ -293,41 +216,6 @@
         }
       }
 
-      /* 行业学习需求 */
-      .client-demand-box{
-        padding: 30px 0 0;
-        min-height: 610px;
-        //tab
-        .demand-box-tab{
-          margin-top: 20px;
-          .el-tabs__item{width:100px;height: 30px;line-height: 30px;border-radius: 5px;margin: 0 8px 12px;}
-          .el-tabs__item.is-active:after{border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #3e7ee7;bottom: -14px;}
-        }
-        //覆盖饿了么样式
-        .el-tabs__header{margin: 0 7px 15px;}
-
-        // 考试ul
-        .demand-tab-list{
-          margin: 0;
-          li{
-            width: 50%;margin-bottom: 12px;
-
-            // 内容区域
-            .demand-content-box{height: 125px;background-size: 25%;margin: 0 7px;}
-            //图片区域
-            .demand-img-box{
-              min-width: 70px;top: 30px;margin-left: -35px;
-              i{width: 40px;height: 40px;margin: 0 auto 15px;}
-              h4{@include setFontStyle(-6);color: rgb(16, 16, 16);}
-            }
-            // 蒙版
-            .demand-mask-box{display: none;}
-            // 点击按钮
-            .demand-onclick-btn{position: absolute;top: 0;left: 7px;right: 7px;bottom: 0;z-index: 99;}
-          }
-        }
-      }
-
       /* 为什么选择我们  */
       .client-chose-box{
         padding: 0;

pages/index.vue

@@ -37,42 +37,17 @@
     <div class="client-demand-box">
       <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">
-            <ul class="demand-tab-list demand-kaoshi-list">
-              <li v-for="item in kaoshiLiArray">
-                <div class="demand-content-box">{{item.demandNumber}}</div>
-                <a class="demand-onclick-btn mta-hidden-sm" @click="goDetailsPage(item.demandHref)"></a>
-                <div class="demand-img-box"><i></i><h4>{{item.demandTitle}}</h4></div>
-                <div class="demand-mask-box">
-                  <h4>{{item.demandTitle}}<a :href="`${baseUrl}/${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="`${baseUrl}/${item2.href}`"><img :src="item2.img" alt="客户案例"></a>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <div rel="nofollow" class="free-trial-default-btn" @click="FreeTrial(1)">免费试用</div>
-          </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">{{item.demandNumber}}</div>
-                <a class="demand-onclick-btn mta-hidden-sm" :href="`${baseUrl}/${item.demandHref}`"></a>
-                <div class="demand-img-box"><i></i><h4>{{item.demandTitle}}</h4></div>
-                <div class="demand-mask-box">
-                  <h4>{{item.demandTitle}}<a :href="`${baseUrl}/${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="`${baseUrl}/${item2.href}`"><img :src="item2.img" alt="客户案例"></a>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <div rel="nofollow" class="free-trial-default-btn"  @click="FreeTrial(2)">免费试用</div>
-          </el-tab-pane>
-        </el-tabs>
+          <ul class="demand-list-box">
+            <li><div><span><i></i></span><p>企事业单位</p></div></li>
+            <li><div><span><i></i></span><p>信息产业</p></div></li>
+            <li><div><span><i></i></span><p>能源化工</p></div></li>
+            <li><div><span><i></i></span><p>金融保险</p></div></li>
+            <li><div><span><i></i></span><p>交通运输</p></div></li>
+            <li><div><span><i></i></span><p>教育培训</p></div></li>
+            <li><div><span><i></i></span><p>食品餐饮</p></div></li>
+            <li><div><span><i></i></span><p>医疗卫生</p></div></li>
+          </ul>
+          <!--<div rel="nofollow" class="free-trial-default-btn" @click="FreeTrial(1)">免费试用</div>-->
       </div>
     </div>
 
@@ -376,215 +351,6 @@
         certImg8:       require(`~/static/images/client/index/index-cert-img8.jpg`),
         activeIndex:    '首页',
         activeName:     'first',// tab页签
-        kaoshiLiArray: [
-          {
-            demandNumber:'01',
-            demandTitle:'企事业单位',
-            demandHref:  'government',
-            demandText:    '无论是企业单位还是事业单位，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发等，成本较高，不能完全适应现代企业管理模式。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon1-1.png`),
-                href: 'government',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon1-2.png`),
-                href: 'government',
-              },
-            ],
-          },
-          {
-            demandNumber:'02',
-            demandTitle:'信息产业',
-            demandHref:  'information',
-            demandText:    '近年来我国互联网继续保持增长态势，网络产业已经从过去的吸引眼球上逐渐转向以“盈利”为核心。如网络游戏、网上交易、网络广告、网络教育、网络短信等，新兴应用层出不穷，将推动产业融合发展和转型升级。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon2-1.png`),
-                href: 'information',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon2-2.png`),
-                href: 'information',
-              },
-            ],
-          },
-          {
-            demandNumber:'03',
-            demandTitle:'能源化工',
-            demandHref:  'energy',
-            demandText:    '信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon3-1.png`),
-                href: 'energy',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon3-3.png`),
-                href: 'energy',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon3-4.png`),
-                href: 'energy',
-              },
-            ],
-          },
-          {
-            demandNumber:'04',
-            demandTitle:'金融保险',
-            demandHref:  'financial',
-            demandText:    '金融无处不在并已形成一个庞大体系，金融学涉及的范畴、分支和内容非常广，对员工的知识储备要求较高，相对的考核难度也较大。所以金融保险业更需要考核数据来作为依据，帮助提升业务能力。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon4-1.png`),
-                href: 'financial',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon4-2.png`),
-                href: 'financial',
-              },
-            ],
-          },
-          {
-            demandNumber:'05',
-            demandTitle:'交通运输',
-            demandHref:  'traffic',
-            demandText:    '由于交通行业以技术先行，企业越来越需要具有扎实的汽车运用技术、交通运输系统规划与管理、物流系统工程等方面专业知识，并能独立从事汽车运用与管理的复合型高级工程技术人才，人才的培养格外重要。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon5-1.png`),
-                href: 'traffic',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon5-2.png`),
-                href: 'traffic',
-              },
-            ],
-          },
-          {
-            demandNumber:'06',
-            demandTitle:'教育培训',
-            demandHref:  'education',
-            demandText:    '教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，麦塔不仅是考试出题软件，还是在线教学考试系统，非常适合培训机构前期营销获客以及后期模拟考试的场景。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon6-1.png`),
-                href: 'education',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon6-2.png`),
-                href: 'education',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon6-3.png`),
-                href: 'education',
-              },
-            ],
-          },
-        ],
-        peixunLiArray: [
-          {
-            demandNumber:'01',
-            demandTitle:'食品餐饮',
-            demandHref:  'restaurant',
-            demandText:    '随着社会经济的不断发展，餐饮文化的传播将越来越国际化和市场化。如何应对蓬勃发展的餐饮形势，不仅只是餐饮企业所面对的问题，同时也是烹饪教育应该思考的问题。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon7-1.png`),
-                href: 'restaurant',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon7-2.png`),
-                href: 'restaurant',
-              },
-            ],
-          },
-          {
-            demandNumber:'02',
-            demandTitle:'教育培训',
-            demandHref:  'trainEducation',
-            demandText:    '教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，麦塔不仅是考试出题软件，还是在线教学考试系统，非常适合培训机构前期营销获客以及后期模拟考试的场景。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon8-1.png`),
-                href: 'trainEducation',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon8-2.png`),
-                href: 'trainEducation',
-              },
-            ],
-          },
-          {
-            demandNumber:'03',
-            demandTitle:'医疗行业',
-            demandHref:  'medical',
-            demandText:    '医学类考试种类繁多，全国各级医学教育机构，如医学院，卫校，护校的本科，研究生，大中专教育培训考试等，一些医学高等院校的附属医院同时还有本科，研究生在校生的教学考试工作等。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon9-1.png`),
-                href: 'medical',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon9-2.png`),
-                href: 'medical',
-              },
-            ],
-          },
-          {
-            demandNumber:'04',
-            demandTitle:'企事业单位',
-            demandHref:  'trainGovernment',
-            demandText:    '无论是企业单位还是事业单位，每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发等，成本较高，不能完全适应现代企业管理模式。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon10-1.png`),
-                href: 'trainGovernment',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon10-2.png`),
-                href: 'trainGovernment',
-              },
-            ],
-          },
-          {
-            demandNumber:'05',
-            demandTitle:'能源化工',
-            demandHref:  'trainEnergy',
-            demandText:    '信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon11-1.png`),
-                href: 'trainEnergy',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon11-2.png`),
-                href: 'trainEnergy',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon11-3.png`),
-                href: 'trainEnergy',
-              },
-            ],
-          },
-          {
-            demandNumber:'06',
-            demandTitle:'制造行业',
-            demandHref:  '#',
-            demandText:    '传统制造行业往往都是人才密集型企业，人力资源的人才培训压力巨大，传统的线下培训方式人员集中，人力、财力、精力消耗过大，全新的在线培训系统的出现，很好解决了辅助企业人才培养的多元化发展，使培训计划可追溯，培训效果可检验，培训结果可视化。',
-            demandLinkBox: [
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon12-1.png`),
-                href: '#',
-              },
-              {
-                img:        require(`~/static/images/client/index/index-demand-icon12-2.png`),
-                href: '#',
-              },
-            ],
-          },
-        ],
-
         btnTextDisabled: false,
         telDl: false,
         btnText:         '获取验证码',