培训系统响应式页面开发

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

@@ -617,6 +617,10 @@
         }
       }
     }
+    @media (max-width: 768px){
+      /* 网站banner */
+      .client-platform-banner .free-trial-default-btn{top: 95px;}
+    }
   }
 
   /********  describe: 课程开发 author: TX  date:2020-08-24  ********/

pages/trainsystem/index.vue

@@ -4,13 +4,13 @@
     <!-- 培训平台页 banner栏 -->
     <div class="client-platform-banner">
       <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/train/train-banner-background.png`)})`}" class="client-platform-banner"></div>
-      <a rel="nofollow" class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a>
+      <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
     </div>
     <!--  产品体验 -->
     <div class="platform-products-experience client-container">
       <h4 class="client-title">产品体验</h4>
       <p>无需注册，即可免费体验麦塔在线培训系统</p>
-      <ul class="experience-ul-box">
+      <ul class="experience-ul-box mta-hidden-xs">
         <li>
           <div @mouseenter="enterCode" @mouseleave="leaveCode" >
             <i></i><h5>手机学员端</h5>
@@ -25,6 +25,49 @@
         <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a @click="adminPxTy">后台体验</a></div></li>
         <li><div><i></i><h5>更新日志</h5><p>麦塔想您所想，不止于功能</p><p>我们一直在更新迭代</p><a class="client-default-Btn" @click="goCheckLog">查看日志</a></div></li>
       </ul>
+      <!-- 手机轮播 -->
+      <div class="experience-swiper-box mta-hidden-sm">
+        <div v-swiper:mySwiper="swiperOption" class="swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <div class="experience-content-box">
+                <i class="sjxyd-icon"></i>
+                <h5>手机学员端</h5>
+                <p>点击立即体验按钮，随时随地想学就学</p>
+                <a style="cursor: default" @click="FreeTrial">立即体验</a>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="experience-content-box">
+                <i  class="dnxyd-icon"></i>
+                <h5>电脑学员端</h5>
+                <p>学练考评一站式培训平台</p>
+                <p>支持市面各种主流浏览器</p>
+                <a @click="clientKsTy">立即体验</a>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="experience-content-box">
+                <i class="dngld-icon"></i>
+                <h5>电脑管理端</h5>
+                <p>欢迎体验麦塔系统后台</p>
+                <p>三步轻松组织一场考试</p>
+                <a @click="adminKsTy">后台体验</a></div>
+            </div>
+            <div class="swiper-slide">
+              <div class="experience-content-box">
+                <i class="skrz-icon"></i>
+                <h5>更新日志</h5>
+                <p>麦塔想您所想，不止于功能</p>
+                <p>我们一直在更新迭代</p>
+                <a  class="client-default-Btn" @click="goCheckLog">查看日志</a>
+              </div>
+            </div>
+          </div>
+          <div class="swiper-pagination swiper-pagination-style"></div>
+          <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+        </div>
+      </div>
     </div>
     <!--  产品优势 -->
       <div class="platform-products-services">
@@ -38,7 +81,7 @@
                 <h5>完善的课程学习体系</h5>
                 <i></i>
                 <p>培训计划，课件资源管理，课程安排，在线学习，互动问答，记录笔记，课程进度查看，课后测试，结业证书，共享资源，完整的学习流程协助您完成全流程的线上培训体系。</p>
-                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a></div>
+                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
               </div>
             </div>
           </div>
@@ -51,7 +94,7 @@
                 <h5>随时随地学习</h5>
                 <i></i>
                 <p>PC端与移动端无缝连接；全面支持安卓、IOS等操作系统；支持APP和微信学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务。</p>
-                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a></div>
+                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
               </div>
             </div>
           </div>
@@ -64,7 +107,7 @@
                 <h5>线上线下全面融合；<br>学习地图展示员工学习路径</h5>
                 <i></i>
                 <p>培训计划安排，线上学习和线下培训现场签到，评价汇总；很好地解决培训项目多元化管理；员工职位能力地图的绘制，匹配员工职位发展模型，通关式学习让学员循序渐进的提升学习能力</p>
-                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a></div>
+                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
               </div>
             </div>
           </div>
@@ -77,7 +120,7 @@
                 <h5>学，测，考，练，一体化学习模式</h5>
                 <i></i>
                 <p>包含了在线考试系统的全部功能；题库——组卷——考试——练习；学员学习后证书获取，学习积分累加清晰的检测学习效果</p>
-                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a></div>
+                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
               </div>
             </div>
           </div>
@@ -90,7 +133,7 @@
     <div class="platform-product-function">
       <div class="client-container">
         <h4 class="client-title">产品功能</h4>
-        <ul class="product-function-box">
+        <ul class="product-function-box mta-hidden-xs">
           <li>
             <div><i></i><h5>多层级独立管理</h5>
               <p>满足多层级的组织架构，多级子公司运营的需求，针对企业复杂的组织架构，可设置不限层级的树状管理权限</p></div>
@@ -101,7 +144,7 @@
           </li>
           <li>
             <div><i></i><h5>随时随地学习</h5>
-              <p title="适配PC端、手机端、PAD端，满足员工多场景下的学习方式；Web端：大块时间学习场景下，更丰富的学习体验；移动端：突破时间空间限制，利用碎片化时间学习；多端学习数据即时同步">适配PC端、手机端、PAD端，满足员工多场景下的学习方式；Web端：大块时间学习场景下，更丰富的学习体验；移动端：突破时间空间限制，利用碎片化时间学习；多端学习数据即时同步</p></div>
+              <p>适配PC端、手机端、PAD端，满足员工多场景下的学习方式；Web端：大块时间学习场景下，更丰富的学习体验；移动端：突破时间空间限制，利用碎片化时间学习；多端学习数据即时同步</p></div>
           </li>
           <li>
             <div><i></i><h5>稳定安全的数据保护</h5>
@@ -109,7 +152,7 @@
           </li>
           <li>
             <div><i></i><h5>完善的课程学习体系</h5>
-              <p title="培训计划，课件资源管理，课程安排，在线学习，互动问答，记录笔记，课程进度查看，课后测试，结业证书，共享资源，完整的学习流程协助你完成健全的在线培训体系">培训计划，课件资源管理，课程安排，在线学习，互动问答，记录笔记，课程进度查看，课后测试，结业证书，共享资源，完整的学习流程协助你完成健全的在线培训体系</p></div>
+              <p>培训计划，课件资源管理，课程安排，在线学习，互动问答，记录笔记，课程进度查看，课后测试，结业证书，共享资源，完整的学习流程协助你完成健全的在线培训体系</p></div>
           </li>
           <li>
             <div><i></i><h5>功能丰富的在线考试</h5>
@@ -124,7 +167,64 @@
               <p>界面自定义主题背景、品牌、logo，搭建您的专属在线培训平台</p></div>
           </li>
         </ul>
-        <a rel="nofollow" class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a>
+        <!-- 手机轮播 -->
+        <div class="experience-swiper-box mta-hidden-sm">
+          <div v-swiper:mySwiperGn="swiperOptionGn" class="swiper-container">
+            <ul class="swiper-wrapper">
+              <li class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="product-function-icon1"></i><h5>多层级独立管理</h5>
+                  <p>满足多层级的组织架构，多级子公司运营的需求，针对企业复杂的组织架构，可设置不限层级的树状管理权限</p>
+                </div>
+              </li>
+              <li class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="product-function-icon2"></i><h5>培训记录与监管</h5>
+                  <p>登录记录、学习时长、考核记录、学习状况实时监控、督学体系、学习能力分析体系强大</p>
+                </div>
+              </li>
+              <li class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="product-function-icon3"></i><h5>随时随地学习</h5>
+                  <p>适配PC端、手机端、PAD端，满足员工多场景下的学习方式；Web端：大块时间学习场景下，更丰富的学习体验；移动端：突破时间空间限制，利用碎片化时间学习；多端学习数据即时同步</p>
+                </div>
+              </li>
+              <li class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="product-function-icon4"></i><h5>稳定安全的数据保护</h5>
+                  <p>采用多层次多安全防护措施，顺利通过阿里渗透式测试，使系统最大限度地不被黑客和有意破坏者攻击</p>
+                </div>
+              </li>
+              <li class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="product-function-icon5"></i><h5>完善的课程学习体系</h5>
+                  <p>培训计划，课件资源管理，课程安排，在线学习，互动问答，记录笔记，课程进度查看，课后测试，结业证书，共享资源，完整的学习流程协助你完成健全的在线培训体系</p>
+                </div>
+              </li>
+              <li class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="product-function-icon6"></i><h5>功能丰富的在线考试</h5>
+                  <p>强大的题库管理和丰富的考试控制功能，随机组卷考试，稳定大并发考试</p>
+                </div>
+              </li>
+              <li class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="product-function-icon7"></i><h5>与第三方系统无缝集成</h5>
+                  <p>基于Java语言开发Springcloud框架；支持人脸识别、单点登录、组织架构及用户数据的同步；支持与EAP/EIP、OA、HR系统的集成</p>
+                </div>
+              </li>
+              <li class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="product-function-icon8"></i><h5>个性化定制</h5>
+                  <p>界面自定义主题背景、品牌、logo，搭建您的专属在线培训平台</p>
+                </div>
+              </li>
+            </ul>
+            <div class="swiper-pagination swiper-pagination-style"></div>
+            <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+          </div>
+        </div>
+        <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
       </div>
     </div>
 
@@ -132,7 +232,7 @@
     <div class="platform-application-scenarios train-application-scenarios">
       <div class="client-container">
         <h4 class="client-title">应用场景</h4>
-        <ul class="application-scenarios-box">
+        <ul class="application-scenarios-box mta-hidden-xs">
           <li>
             <div class="application-scenarios-content">
               <div class="application-scenarios-img"></div>
@@ -155,12 +255,39 @@
             </div>
           </li>
         </ul>
-        <a rel="nofollow" class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a>
+        <!-- 手机轮播 -->
+        <div class="experience-swiper-box mta-hidden-sm">
+          <div v-swiper:mySwiperCj="swiperOptionCj" class="swiper-container">
+            <ul class="swiper-wrapper">
+              <li class="swiper-slide">
+                <div class="experience-content-box scenarios-gwks-box">
+                  <i class="product-function-icon1"></i><h5>新员工入职培训</h5>
+                  <p>在职员工可以利用零散的时间在移动终端上学习企业文化和工作职责，培训主管可以通过后台的大数据实时监控新员工的学习进度。此外，可以设置特殊考试来测试新员工的学习效果</p>
+                </div>
+              </li>
+              <li class="swiper-slide">
+                <div class="experience-content-box scenarios-dxjs-box">
+                  <i class="product-function-icon2"></i><h5>技能考核</h5>
+                  <p>组织学员通过互联网或局域网开展网上学习、培训、考试、互动问答等活动，利用考核成绩智能分析功能进行针对性的培训考核，达到快速、有效地提升员工技能的目的</p>
+                </div>
+              </li>
+              <li class="swiper-slide">
+                <div class="experience-content-box scenarios-zgks-box">
+                  <i class="product-function-icon3"></i><h5>企业招聘</h5>
+                  <p>满足企业社招、校园招聘等需求，一个系统搞定各种行业的招聘在线测试，企业只需要将准备好的笔试题目用文档的方式，导入到考试系统当中，再创建试卷，完成后发送试卷的链接给应聘者即可完成考试。</p>
+                </div>
+              </li>
+            </ul>
+            <div class="swiper-pagination swiper-pagination-style"></div>
+            <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+          </div>
+        </div>
+        <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
       </div>
     </div>
 
     <!-- 新闻资讯 -->
-    <div class="platform-news-information">
+    <div class="platform-news-information mta-hidden-xs">
       <div class="client-container">
         <h4 class="client-title">新闻资讯</h4>
         <ul>
@@ -181,6 +308,8 @@
 </template>
 
 <script>
+  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
+  Swiper.use([Navigation, Pagination,Autoplay]);
   export default {
     name:     'trainsystem',
     layout:   'templateB',
@@ -211,6 +340,56 @@
         trainAdvantagesImg4:  require(`~/static/images/client/train/product-advantages-img4.png`),
         youkeFlag:false,// 控制游客系统是否维护中
         systemMaintainDl:false,// 系统维护弹窗
+        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
+        swiperOption: {
+          pagination: {
+            el: '.swiper-pagination',
+            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
+            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
+            clickable: true, // 点击当前滑块切换到对应的轮播图片
+          },
+          autoplay: {
+            delay: 5000,
+          },
+          paginationClickable: true,
+          speed: 800,
+          loop: true,
+          observer: true,
+          observeParents: true,
+        },
+        swiperOptionGn: {
+          pagination: {
+            el: '.swiper-pagination',
+            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
+            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
+            clickable: true, // 点击当前滑块切换到对应的轮播图片
+          },
+          autoplay: {
+            delay: 5000,
+          },
+          paginationClickable: true,
+          speed: 800,
+          loop: true,
+          observer: true,
+          observeParents: true,
+        },
+        swiperOptionCj: {
+          pagination: {
+            el: '.swiper-pagination',
+            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
+            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
+            clickable: true, // 点击当前滑块切换到对应的轮播图片
+          },
+          autoplay: {
+            delay: 100000,
+          },
+          paginationClickable: true,
+          speed: 800,
+          loop: true,
+          observer: true,
+          observeParents: true,
+          autoplayDisableOnInteraction: false,
+        },
       };
     },
     head(){
@@ -230,6 +409,25 @@
     },
     computed: {},
     methods:  {
+      // 免费试用
+      FreeTrial(){
+        this.getSystemWidth();
+        if(this.SystemWidthFlag){
+          window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
+        }else{
+          window.open('https://cdnks.mtavip.com/a/register?flug=2')
+
+        }
+      },
+      // 判断是否为移动端
+      getSystemWidth(){
+        var browserWidth=document.documentElement.clientWidth;
+        if(browserWidth <= 768){
+          this.SystemWidthFlag = true;
+        }else{
+          this.SystemWidthFlag = false;
+        }
+      },
       // 培训学员端体验
       clientPxTy(){
         if(this.youkeFlag) {
@@ -286,6 +484,7 @@
       });
     },
     mounted() {
+      this.getSystemWidth();
     },
     beforeDestroy() {
     },