tanxue 4 年 前
コミット
fa1e72e0d2
2 ファイル変更77 行追加130 行削除
  1. 8 5
      assets/scss/cus-client/cus-client-page.scss
  2. 69 125
      pages/index.vue

+ 8 - 5
assets/scss/cus-client/cus-client-page.scss

@@ -165,7 +165,8 @@
             @include setFontStyle(-6);
             h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
             p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 70px;text-align: justify;@include multi-line-ellipsis(6);}
-            a{width: 120px;height: 32px;line-height: 32px;opacity:0;margin: 0 auto;}
+            a,div,span{width: 120px;height: 32px;display:inline-block;line-height: 32px;opacity:0;margin-right: 24px}
+            span{background: transparent;color: #2B5CFD;margin-right: 0}
           }
         }
         li:nth-child(1){
@@ -211,7 +212,7 @@
             cursor: default;
             box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
             border-radius: 8px;
-            a{opacity: 1;}
+            a,div,span{opacity: 1;}
           }
         }
     }
@@ -220,6 +221,7 @@
     .client-demand-box{
       background: #F9FAFF;
       padding-bottom: 80px;
+      min-height: 720px;
       //tab
       .demand-box-tab{
         margin-top: 16px;
@@ -239,6 +241,7 @@
       // 考试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;
@@ -268,7 +271,7 @@
       }
       //考试详情(li对应div)
       .demand-content-box{
-        padding: 16px;margin-top:24px;background: #1276FF;
+        padding: 16px;background: #1276FF;
         border-radius: 8px;
         margin-right: 22px;
         h5{
@@ -276,12 +279,12 @@
           color: rgba(255,255,255,0.85);
           margin-bottom: 8px;
         }
-        p{@include setFontStyle(-6);color: rgba(255,255,255,0.65);line-height: 22px;margin-bottom: 24px;}
+        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: #FEBF11;}
+          span{@include setFontStyle(-4);float:right;color: #FFD04E;}
         }
       }
       // 图标div

+ 69 - 125
pages/index.vue

@@ -64,7 +64,7 @@
             <div class="products-services-content">
               <h5>考试系统</h5>
               <p>麦塔考试平台满足不同行业考试考核需求:教育机构出题判卷、课后练习布置;企事业单位企业文化、业务水平提升</p>
-              <a class="client-default-Btn">了解详情</a>
+              <a class="client-default-Btn">免费试用</a><span>了解详情<i></i></span>
             </div>
           </li>
           <li>
@@ -72,7 +72,7 @@
             <div class="products-services-content">
               <h5>培训系统</h5>
               <p>麦塔培训平台满足企业全流程培训场景,支持移动web端、PC端、APP端答题和学习,多种学习模式保障学习效果,结果及时反馈</p>
-              <a class="client-default-Btn">了解详情</a>
+              <a class="client-default-Btn">免费试用</a><span>了解详情<i></i></span>
             </div>
           </li>
           <li>
@@ -80,7 +80,7 @@
             <div class="products-services-content">
               <h5>课件制作</h5>
               <p>麦塔能够快速搭建企业单位、教育机构学习资源库,满足学习平台需求,针对目标对象的学习习惯和学习方式个性化开发课程</p>
-              <a class="client-default-Btn">了解详情</a>
+              <div class="client-default-Btn">申请方案</div><span>了解详情<i></i></span>
             </div>
           </li>
         </ul>
@@ -94,12 +94,9 @@
         <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 :class="{'active':kaoshiClicked===index}" @click="tabSwitch(item,index)"
-                  v-for="(item,index) in kaoshiLiArray"><i></i>
-                <p>{{item}}</p></li>
+              <li :class="{'active':kaoshiClicked===index}" @click="tabSwitch(item,index)" v-for="(item,index) in kaoshiLiArray"><i></i><p>{{item}}</p></li>
             </ul>
-            <el-collapse-transition v-for="(item,index) in kaoshiDivArray" :key="index">
-              <div v-show="kaoshiClicked===index"  class="demand-content-box">
+              <div v-show="kaoshiClicked===index"  class="demand-content-box" v-for="(item,index) in kaoshiDivArray" :key="index">
                 <div class="content-top-box">
                   <h5>行业详情</h5>
                   <p>{{item.demandText}}</p>
@@ -107,119 +104,14 @@
                 </div>
                 <div>
                   <h5>客户案例</h5>
-                  <div v-for="item2 in item.demandLinkBox" class="demand-icon-box"><a><img :src="item2.img"
-                                                                                           alt="客户案例"><span>{{item2.demandName}}</span></a>
+                  <div v-for="item2 in item.demandLinkBox" class="demand-icon-box">
+                    <a><img :src="item2.img" alt="客户案例"><span>{{item2.demandName}}</span></a>
                   </div>
                 </div>
               </div>
-            </el-collapse-transition>
           </el-tab-pane>
           <el-tab-pane label="培训系统" name="second">培训系统</el-tab-pane>
         </el-tabs>
-        <!--<ul class="industry-box">
-          <li>
-            <img :src="demandImg1" alt="政府机构" />
-            <div>
-              <h5>政府机构</h5>
-              <p>提高行政服务人员的综合素质和能力的提升,党建知识的考核等</p>
-              <a @click="goThirdParty(0)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg2" alt="医药卫生" />
-            <div>
-              <h5>医药卫生</h5>
-              <p>
-                应对种类繁多的专业医疗资格考试,“三基、三严”考试,辅助人才队伍建设
-              </p>
-              <a @click="goThirdParty(1)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg3" alt="能源化工" />
-            <div>
-              <h5>能源化工</h5>
-              <p>提高安全生产培训效率,分析不足、排查隐患</p>
-              <a @click="goThirdParty(2)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg4" alt="信息产业" />
-            <div>
-              <h5>信息产业</h5>
-              <p>创新学习方式,打造在线学习品牌,提高全员移动学习的积极性</p>
-              <a @click="goThirdParty(3)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg5" alt="交通运输" />
-            <div>
-              <h5>交通运输</h5>
-              <p>推动技能领域交流互鉴,进一步培养和选拔高技能人才</p>
-              <a @click="goThirdParty(4)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg6" alt="机械机电" />
-            <div>
-              <h5>机械机电</h5>
-              <p>帮助用户创建优质工程,打造一流企业的管理方针</p>
-              <a @click="goThirdParty(5)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg7" alt="教育培训" />
-            <div>
-              <h5>教育培训</h5>
-              <p>
-                不受时间、地点等因素限制,学员与教师相隔万里也可以开展教学活动
-              </p>
-              <a @click="goThirdParty(6)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg8" alt="食品餐饮" />
-            <div>
-              <h5>食品餐饮</h5>
-              <p>定期培训考核,严格把控服务质量、食品安全标准</p>
-              <a @click="goThirdParty(7)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg9" alt="金融保险" />
-            <div>
-              <h5>金融保险</h5>
-              <p>
-                针对员工岗位性质、能力素质和业务需求,精心设计考试内容,选备了相应的题库,分岗位进行集中测试。
-              </p>
-              <a @click="goThirdParty(8)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg10" alt="汽车制造" />
-            <div>
-              <h5>汽车制造</h5>
-              <p>一线门店轻量化练习,边看边练,提高工作效率、增加企业利润</p>
-              <a @click="goThirdParty(9)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg11" alt="新闻出版" />
-            <div>
-              <h5>新闻出版</h5>
-              <p>推进编辑出版专业水平提高,出版专业技术人员职业资格考试等</p>
-              <a @click="goThirdParty(10)">了解更多</a>
-            </div>
-          </li>
-          <li>
-            <img :src="demandImg12" alt="更多" />
-            <div>
-              <h5>更多</h5>
-              <p>更多行业学习需求</p>
-              <a @click="goThirdParty(11)">了解更多</a>
-            </div>
-          </li>
-        </ul>-->
       </div>
     </div>
 
@@ -389,8 +281,8 @@
         kaoshiLiArray:  ['政府机构', '能源化工', '信息产业', '金融保险', '交通运输', '汽车制造'],
         kaoshiDivArray: [
           {
-            demandText:    '现如今,互联网教育正以迅雷不及掩耳之势搅动市场,“智能学习”成了一个新的市场。教培行业存在的教师教学水平参差不齐,教学质量难以提升等问题,现在都可以通过选择一套合理化的方案来得到解决,麦塔不仅是考试出题软',
-            demandHref:    'www.baidu.com',
+            demandText:    '为了适应市场经济的发展,越来越多的企业开始意识到人才选拔、培养的重要性,无论是国企还是私企,每年都要举行年度考核、党建考核等各种不同形式的考试。而传统考试方式,从出题、组卷、印刷,到安排场地、试卷分发、监考,再到收卷、阅卷,程序繁杂,需要投入大量的时间、人力和物力,并且周期长、工作量大,成本较高,不能完全适应现代企业管理模式。',
+            demandHref:    '#',
             demandLinkBox: [
               {
                 img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
@@ -407,20 +299,72 @@
             ],
           },
           {
-            demandText:    '23',
-            demandHref:    'www.baidu.com',
+            demandText:    '今天,信息化在社会的各行各业迅速发展,在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化,应用信息技术改造提升能源企业,加快企业信息化进程,提高信息技术应用水平。没有一个完整的学习体系,不能统一排考检测员工安全电力方面的信息掌握程度,无法分析员工的不足之处。',
+            demandHref:    '#',
+            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: '营口消防',
+              },
+            ],
+          },
+          {
+            demandText:    '今天,信息化在社会的各行各业迅速发展,在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化,应用信息技术改造提升能源企业,加快企业信息化进程,提高信息技术应用水平。没有一个完整的学习体系,不能统一排考检测员工安全电力方面的信息掌握程度,无法分析员工的不足之处。',
+            demandHref:    '#',
             demandLinkBox: [
               {
-                img:        '222',
-                demandName: '2222',
+                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
+                demandName: '国家能源',
+              },
+              {
+                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
+                demandName: '营口消防',
               },
+            ],
+          },
+          {
+            demandText:    '今天,信息化在社会的各行各业迅速发展,在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化,应用信息技术改造提升能源企业,加快企业信息化进程,提高信息技术应用水平。没有一个完整的学习体系,不能统一排考检测员工安全电力方面的信息掌握程度,无法分析员工的不足之处。',
+            demandHref:    '#',
+            demandLinkBox: [
               {
-                img:        '222',
-                demandName: '222',
+                img:        require(`~/static/images/client/index/index-demand-icon1-1.svg`),
+                demandName: '国家能源',
               },
               {
-                img:        '222',
-                demandName: '222',
+                img:        require(`~/static/images/client/index/index-demand-icon1-2.svg`),
+                demandName: '营口消防',
+              },
+            ],
+          },
+          {
+            demandText:    '今天,信息化在社会的各行各业迅速发展,在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化,应用信息技术改造提升能源企业,加快企业信息化进程,提高信息技术应用水平。没有一个完整的学习体系,不能统一排考检测员工安全电力方面的信息掌握程度,无法分析员工的不足之处。',
+            demandHref:    '#',
+            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: '营口消防',
+              },
+            ],
+          },
+          {
+            demandText:    '今天,信息化在社会的各行各业迅速发展,在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化,应用信息技术改造提升能源企业,加快企业信息化进程,提高信息技术应用水平。没有一个完整的学习体系,不能统一排考检测员工安全电力方面的信息掌握程度,无法分析员工的不足之处。',
+            demandHref:    '#',
+            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: '营口消防',
               },
             ],
           },