更新版本

components/bottomMenu.vue

@@ -31,14 +31,6 @@
         navClass:'head-nav-up',
         footerData: [
           {
-            name: '首页',
-            url: '/',
-          },
-          {
-            name: '体验中心',
-            url: '/tiyanCenter',
-          },
-          {
             name: '电话咨询',
             url: 'tel:400-052-2130',
           },

components/common/applicationDialog.vue

@@ -0,0 +1,285 @@
+<template>
+  <div>
+    <!--  申请方案弹窗 -->
+    <el-dialog
+      :close-on-click-modal="false"
+      :visible.sync="show"
+      @close="dialogClose"
+      @opened="dialogOpened"
+      class="application-scheme-dialog"
+      center>
+      <i></i>
+      <p>免费获得课程开发解决方案</p>
+      <el-form :model="formData" status-icon :rules="rules" ref="ruleTelForm" class="application-scheme-form">
+        <el-form-item prop="tel">
+          <el-input v-model="formData.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
+        </el-form-item>
+        <div id="your-dom-id" class="nc-container"></div>
+        <el-form-item prop="verification">
+          <div class="verification">
+            <el-input v-model="formData.verification" placeholder="请输入验证码" class="dialog-input-code"></el-input>
+            <el-button @click="checkVerification" :disabled="btnTextDisabled" class="dialog-code-btn">{{ btnText }}
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="application-scheme-btn" @click="applyFor">申请方案</div>
+      <span>免费热线：400-052-2130</span>
+      <a
+        href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd"
+        target="_blank">在线客服</a>
+    </el-dialog>
+    <el-dialog
+      :close-on-click-modal="false"
+      :visible.sync="apply_success_dl"
+      @closed="dialogResultClose"
+      class="application-scheme-result-dialog"
+      center
+    >
+      <img src="#" class="success_icon">
+      <h3>恭喜您申请成功</h3>
+      <p>请保持手机畅通，时候客服会和您联系</p>
+      <el-button @click="confirmBtn">确定</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "application",
+  props: {
+    visible: {
+      type: Boolean,
+      require: true
+    }
+  },
+  data() {
+    return {
+      show: false,
+      formData: {
+        tel: '',
+        verification: '',
+      },
+      rules: {
+        tel: [
+          {trigger: 'blur', required: true, message: '请输入手机号'},
+        ],
+        verification: [
+          {trigger: 'blur', required: true, message: '请输入验证码'},
+        ],
+      },
+      btnTextDisabled: false,
+      btnText: '获取验证码',
+      countdown: 60, // 60秒倒计时
+      sliderData: {},
+      appKey: 'FFFF0N00000000007EC0',
+      apply_success: false,
+      apply_success_dl: false,
+    }
+  },
+  watch: {
+    visible: {
+      handler(newVal) {
+        this.show = newVal;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /**
+     * 串联加载指定的脚本
+     * 串联加载[异步]逐个加载，每个加载完成后加载下一个
+     * 全部加载完成后执行回调
+     * @param array|string 指定的脚本们
+     * @param function 成功后回调的函数
+     * @return array 所有生成的脚本元素对象数组
+     * 异步加载js后运行回调函数callback / scripts 为数组或字符串
+     */
+    seriesLoadScripts(scripts, callback) {
+      if (typeof (scripts) != 'object') {
+        var scripts = [scripts];
+      }
+      var HEAD = document.getElementsByTagName('head').item(0) || document.documentElement;
+      var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
+        s[i] = document.createElement('script');
+        s[i].setAttribute('type', 'text/javascript');
+        s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
+          if (!/*@cc_on!@*/0 || this.readyState == 'loaded' || this.readyState == 'complete') {
+            this.onload = this.onreadystatechange = null;
+            this.parentNode.removeChild(this);
+            if (i != last) {
+              recursiveLoad(i + 1);
+            } else if (typeof (callback) == 'function') {
+              callback();
+            }
+          }
+        };
+        s[i].setAttribute('src', scripts[i]);
+        HEAD.appendChild(s[i]);
+      };
+      recursiveLoad(0);
+    },
+    dialogResultClose() {
+      this.apply_success = false;
+      this.apply_success_dl = false;
+      this.$emit('apply_success', true);
+    },
+    dialogOpened() {
+      // 初始化拖拽条
+      this.initSlide();
+    },
+    dialogClose() {
+      this.show = false;
+      this.countdown = -1;
+      this.$refs.ruleTelForm.resetFields();
+      __nc.reset();
+
+      if (this.apply_success === true) {
+        this.apply_success_dl = true;
+      }
+      this.$emit('update:visible', false);
+    },
+    // 倒计时60秒
+    setTime() {
+      if (this.countdown === 0) {
+        this.btnTextDisabled = false;
+        this.btnText = '获取验证码';
+        this.countdown = 60;
+      } else if (this.countdown === -1) {
+        this.btnTextDisabled = false;
+        this.btnText = '获取验证码';
+        this.countdown = 60;
+      } else {
+        this.btnTextDisabled = true;
+        this.btnText = '重新发送(' + this.countdown + 's)';
+        this.countdown--;
+        setTimeout(() => {
+          this.setTime();
+        }, 1000);
+      }
+    },
+    checkVerification() {
+      if (this.sliderData.appkey === undefined) {
+        this.$message.error('请先通过滑块校验');
+        return;
+      }
+      const {tel: phone} = this.telChangeDate;
+      this.$axios.$post(`/develop/exists`, {phone}).then(res => {
+        if (res.code === 0 && res.data) {
+          const {appkey, scene, csessionid: sessionid, sig, token} = this.sliderData;
+          let req = {appkey, scene, sig, token, sessionid, phone, type: 0}
+          this.$axios.$post('/sendCode', req).then(res => {
+            if (res.code === 0 && res.data) {
+              this.setTime();
+            } else {
+              this.$message.error(res.msg || '手机号已存在');
+            }
+          })
+        } else {
+          this.$message.error(res.msg || '手机号已存在');
+        }
+
+      })
+    },
+    applyFor() {
+      this.$refs.ruleTelForm.validate((valid) => {
+        if (valid) {
+          const {tel: phone, verification: code} = this.telChangeDate;
+          // 请求后台
+          const options = {phone, code};
+          this.$axios.$post('/develop/add', options).then(res => {
+            if (res.code === 0 && res.data) {
+              this.show = false;
+              this.apply_success = true;
+            } else {
+              this.$message.error('申请失败');
+            }
+          });
+        }
+      });
+    },
+    confirmBtn() {
+      this.$emit('success_confirm', true);
+      this.apply_success_dl = false;
+    },
+    initSlide() {
+      const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
+      const NC_Opt = {
+        //声明滑动验证需要渲染的目标元素ID。
+        renderTo: '#your-dom-id',
+        //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
+        appkey: this.appKey,
+        //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
+        scene: 'nc_message',
+        //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
+        token: nc_token,
+        //滑动条的宽度。
+        customWidth: 300,
+        //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
+        trans: {'key1': 'code0'},
+        //通过Dom的ID属性自动填写trans业务键，可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
+        elementID: ['usernameID'],
+        //是否自定义配置底层采集组件。如无特殊场景，请使用默认值（0），即不自定义配置底层采集组件。
+        is_Opt: 0,
+        //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
+        language: 'cn',
+        //是否启用。一般情况，保持默认值（true）即可。
+        isEnabled: true,
+        //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
+        timeout: 3000,
+        //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
+        times: 5,
+        //用于自定义滑动验证各项请求的接口地址。一般情况，请勿配置该参数。
+        apimap: {
+          // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
+          // 'get_captcha': '//b.com/get_captcha/ver3',
+          // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
+          // 'get_img': '//c.com/get_img',
+          // 'checkcode': '//d.com/captcha/checkcode.jsonp',
+          // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
+          // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
+          // 'umid_serUrl': 'https://g.com/service/um.json'
+        },
+        //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
+        callback: (data) => {
+          this.sliderData = Object.assign({}, data, {
+            appkey: NC_Opt.appkey,
+            scene: NC_Opt.scene,
+          });
+          console.log(this.sliderData);
+        },
+      };
+      let date11 = () => {
+
+        let _date = new Date();
+        let year = _date.getFullYear().toString();
+        let month = _date.getMonth().toString();
+        let day = _date.getDate().toString();
+        let a = _date.getHours().toString();
+        let b = _date.getMinutes().toString();
+        let c = _date.getSeconds().toString();
+
+        return year + month + day + a + b + c;
+      };
+      let c = date11();
+      const scripts = [
+        `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`,
+      ];
+      this.seriesLoadScripts(scripts, function () {
+        var nc = new noCaptcha(NC_Opt);
+        nc.upLang('cn', {
+          _startTEXT: '请按住滑块，拖动到最右边',
+          _yesTEXT: '验证通过',
+          _error300: '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
+          _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>',
+        });
+      });
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/applyBtn.vue

@@ -0,0 +1,37 @@
+<template>
+  <span v-bind="$attrs" @click="btnClick"> 申请方案 </span>
+</template>
+
+<script>
+export default {
+  name: "applyBtn",
+  props: {
+    myType: {
+      type: String,
+      default: 'kaoshi'
+    },
+  },
+  methods: {
+    // 判断是否为移动端
+    isPC() {
+      const browserWidth = document.documentElement.clientWidth;
+      if (browserWidth <= 768) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    btnClick() {
+      if (this.isPC()) {
+        this.$emit('active-pc', this.myType)
+      } else {
+        this.$emit('active-h5', this.myType);
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/chanPinTiYan.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <ul class="experience-ul-box mta-hidden-xs">
+      <li>
+        <div @mouseenter="enterCode" @mouseleave="leaveCode">
+          <h5>手机学员端</h5>
+          <img src="#">
+          <p>用手机扫描二维码，考生30秒体验答卷</p>
+          <a style="cursor: default">扫码试用</a>
+          <span ref="codeBtn" v-if="youkeFlag"><em></em></span>
+          <div ref="codeBtn" v-if="!youkeFlag">系统升级中...</div>
+        </div>
+      </li>
+      <li><div><h5>电脑管理端</h5><img src="#"><p>欢迎体验青谷系统后台，三步轻松组织一场考试</p><a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
+      <li><div><h5>电脑学员端</h5><img src="#"><p>支持市面各种主流浏览器，支持十万量级的考试并发</p><a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">免费体验</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">
+              <h5>手机学员端</h5>
+              <img src="#">
+              <p>用手机扫描二维码，考生30秒体验答卷</p>
+              <a style="cursor: default" @click="ykFreeTrial">立即体验</a>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="experience-content-box">
+              <h5>电脑管理端</h5>
+              <img src="#">
+              <p>欢迎体验青谷系统后台，三步轻松组织一场考试</p>
+              <a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <div class="experience-content-box">
+              <img src="#">
+              <h5>电脑学员端</h5>
+              <p>支持市面各种主流浏览器，支持十万量级的考试并发</p>
+              <a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">后台体验</a></div>
+          </div>
+        </div>
+        <div class="swiper-pagination swiper-pagination-style"></div>
+        <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+      </div>
+    </div>
+    <!--  系统维护  -->
+    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "chanPinTiYan",
+  data() {
+    return {
+      youkeFlag:false,// 控制游客系统是否维护中
+      systemMaintainDl: false,
+      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,
+      },
+    }
+  },
+  methods: {
+    enterCode() {
+      if(this.youkeFlag){
+        this.$refs.codeBtn.style.bottom ='90px';
+      }else{
+        this.$refs.codeBtn.style.bottom ='0';
+      }
+    },
+    leaveCode() {
+      this.$refs.codeBtn.style.bottom ='305px';
+    },
+    ykFreeTrial() {
+      if(this.youkeFlag){
+        // 没升级
+        window.open('https://youkeksc.mtavip.com/kscmdist/#/youke')
+      }else{
+        // 升级中
+        this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
+      }
+    },
+    // 判断是否为移动端
+    isH5(){
+      var browserWidth=document.documentElement.clientWidth;
+      if(browserWidth <= 768){
+        return true;
+      }else{
+        return false;
+      }
+    },
+    KsTyBtn(btnUrl) {
+      if(this.youkeFlag) {
+        if(this.isH5()){
+          this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
+        }else {
+          window.open(btnUrl);
+        }
+      }else{
+        if(this.isH5()){
+          // 升级中
+          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
+        }else{
+          this.systemMaintainDl = true;
+        }
+      }
+    },
+  },
+  created() {
+    // 页面初始化
+    this.$axios.$post('/home/youke/stop').then(res=>{
+      if (res.data === '1') {
+        this.youkeFlag = false;
+      }else{
+        this.youkeFlag = true;
+      }
+    });
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/freeTrialBtn.vue

@@ -0,0 +1,57 @@
+<template>
+  <span v-bind="$attrs" @click="btnClick"> 免费试用 </span>
+</template>
+
+<script>
+export default {
+  name: "freeTrialBtn",
+  props: {
+    myType: {
+      type: String,
+      default: 'kaoshi'
+    }
+  },
+  methods: {
+    isPC() {
+      const browserWidth = document.documentElement.clientWidth;
+      if (browserWidth <= 768) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    btnClick() {
+      // 执行业务
+      this.FreeTrial();
+      // 执行通知
+      if (this.isPC()) {
+        this.$emit('active-pc', this.myType)
+      } else {
+        this.$emit('active-h5', this.myType)
+      }
+    },
+    FreeTrial() {
+      if (!this.isPC()) {
+        // H5
+        if (this.myType === 'kaoshi') {
+          window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
+        } else {
+          window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
+        }
+      } else {
+        if (this.myType === 'kaoshi') {
+          window.open('https://cdnks.mtavip.com/a/register?flug=1')
+        } else {
+          window.open('https://cdnks.mtavip.com/a/register?flug=2')
+        }
+
+      }
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/liaoJieGengDuo.vue

@@ -0,0 +1,27 @@
+<template>
+  <span @click="btnClick"> 了解更多 </span>
+</template>
+
+<script>
+export default {
+  name: "liaoJieGengDuo",
+  methods: {
+    btnClick() {
+
+    },
+    // 判断是否为移动端
+    isPC() {
+      const browserWidth = document.documentElement.clientWidth;
+      if (browserWidth <= 768) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/mtaTable.vue

@@ -0,0 +1,51 @@
+<template>
+  <table>
+    <thead>
+    <tr>
+      <th v-for="item in config" :key="item.key">{{item.label}}</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr v-for="(itemTd,index) in data" :key="index">
+      <td v-for="item in config" :key="item.key">
+        <template v-if="item.key === 'name'">
+          <span>
+            {{itemTd[item.key]}}
+            <i  v-if="itemTd['shikanUrl']" @click="shikan(itemTd['shikanUrl'])">试看</i>
+          </span>
+        </template>
+        <template v-else>
+          <span>{{itemTd[item.key]}}</span>
+        </template>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  name: "mtaTable",
+  props: {
+    data: {
+      type: Array,
+      default: () => ([])
+    },
+    config: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  methods: {
+    shikan(url) {
+      this.$emit('shi-kan', {url})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shikan {
+  cursor: pointer;
+}
+</style>

components/common/newsComp.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <!-- 新闻资讯 PC-->
+    <div class="client-news-information mta-hidden-xs">
+      <h4 class="client-title">麦塔资讯</h4>
+      <div class="client-container">
+        <div class="industry-information-box">
+          <div class="industry-information-left">
+            <img :src="newsData[0].pic" alt="麦塔资讯"/>
+            <h4 @click="checkInfo(newsData[0])">{{ newsData[0].title }}<i></i></h4>
+            <div><b>{{ newsData[0].yyyy }}</b><span>{{ newsData[0].mmdd }}</span></div>
+            <p>{{ newsData[0].intro }}</p>
+          </div>
+          <div class="industry-information-right">
+            <ul>
+              <li v-for="(item, index) in newsData" v-if="index >= 1">
+                <h4 @click="checkInfo(item)">
+                  <a style="display: none" :href="`${baseUrl}/news/${item.code}`"></a>
+                  <span>{{ item.yyyy }}</span>{{ item.title }}
+                </h4>
+                <p><span>{{ item.mmdd }}</span>{{ item.intro }}</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- 新闻资讯 手机-->
+    <div class="client-newsInfo-phone mta-hidden-sm">
+      <h4 class="client-title">新闻资讯</h4>
+      <el-carousel :interval="5000" type="card" height="300px" indicator-position="none" arrow="never">
+        <el-carousel-item v-for="(item,index) in newsData" @click="checkInfo(item)" :key="index" class="el-row">
+          <img :src="item.pic" alt="新闻资讯"/>
+          <div class="newsInfo-card-content">
+            <a style="display: none" :href="`${baseUrl}/news/${item.code}`"></a>
+            <h4>{{ item.title }}<i></i></h4>
+            <span>{{ item.yyyy }}-{{ item.mmdd }}</span>
+            <p>{{ item.intro }}</p>
+          </div>
+
+        </el-carousel-item>
+      </el-carousel>
+
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+
+export default {
+  name: "newsComp",
+  props: {
+    newsData: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      checkIsPc: false,
+    }
+  },
+  computed: {
+    baseUrl() {
+      return this.getBaseUrl;
+    },
+    ...mapGetters(['getBaseUrl']),
+  },
+  methods: {
+    isPC() {
+      const browserWidth = document.documentElement.clientWidth;
+      if (browserWidth <= 768) {
+
+        return false;
+      } else {
+        return true;
+      }
+    },
+    checkInfo(data) {
+      const opt = {
+        id: data.code,
+      };
+      this.$router.push({name: 'news-id', params: opt});
+    }
+  },
+  mounted() {
+    this.checkIsPc = this.isPC();
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/newsComp2.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <!-- 新闻资讯 PC-->
+    <div class="platform-news-information mta-hidden-xs">
+      <!-- 新闻资讯 -->
+      <div class="client-container">
+        <h4 class="client-title">新闻资讯</h4>
+        <ul>
+          <li style="font-size: 16px" v-for="(item, index) in newsData" :key="index">
+            <div>
+              <img :src="item.pic" alt="新闻资讯" />
+              <h4 @click="checkInfo(item)">{{ item.title }}</h4>
+              <span>发布时间：{{item.yyyy }}-{{ item.mmdd }}</span>
+              <p>{{ item.intro }}</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- 新闻资讯 手机-->
+    <div class="client-newsInfo-phone mta-hidden-sm">
+      <h4 class="client-title">新闻资讯</h4>
+      <el-carousel :interval="5000" type="card" height="300px" indicator-position="none" arrow="never">
+        <el-carousel-item v-for="(item,index) in newsData" @click="checkInfo(item)" :key="index" class="el-row">
+          <img :src="item.pic" alt="新闻资讯"/>
+          <div class="newsInfo-card-content">
+            <a style="display: none" :href="`${baseUrl}/news/${item.code}`"></a>
+            <h4>{{ item.title }}<i></i></h4>
+            <span>{{ item.yyyy }}-{{ item.mmdd }}</span>
+            <p>{{ item.intro }}</p>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+
+export default {
+  name: "newsComp",
+  props: {
+    newsData: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      checkIsPc: false,
+    }
+  },
+  computed: {
+    baseUrl() {
+      return this.getBaseUrl;
+    },
+    ...mapGetters(['getBaseUrl']),
+  },
+  methods: {
+    isPC() {
+      const browserWidth = document.documentElement.clientWidth;
+      if (browserWidth <= 768) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    checkInfo(data) {
+      const opt = {
+        id: data.code,
+      };
+      this.$router.push({name: 'news-id', params: opt});
+    }
+  },
+  mounted() {
+    this.checkIsPc = this.isPC();
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/onlineInformationBtn.vue

@@ -0,0 +1,25 @@
+<template>
+  <span @click="btnClick"> 在线咨询 </span>
+
+</template>
+
+<script>
+export default {
+  name: "onlineInformation",
+  props: {
+    myType: {
+      type: String,
+      default: 'kaoshi'
+    }
+  },
+  methods: {
+    btnClick() {
+      this.$router.push({name: 'courseware'});
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/pingfen.vue

@@ -0,0 +1,57 @@
+<template>
+  <span class="component-pingfen">
+    <i v-for="(_,index) in myData"
+       :class="{'active': +myValue >= index,
+       'not-active': +myValue < index}">
+    </i>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "pingfen",
+  props: {
+    total: {
+      type: Number | String,
+      default: 10
+    },
+    value: {
+      type: Number | String,
+      default: 0
+    }
+  },
+  computed: {
+    myData() {
+      return Array(this.myTotal).fill('');
+    },
+    myTotal() {
+      return +this.total
+    },
+    myValue() {
+      return +this.value-1
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.component-pingfen {
+  display: flex;
+  justify-content: flex-start;
+
+  i {
+    margin:  0 10px ;
+    width:3px;
+
+    &.active {
+      background: red;
+    }
+
+    &.not-active {
+      background: #2c98f2;
+    }
+  }
+
+
+}
+</style>

components/common/videoCard.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="video-card" @click="cardClick">
+    <div></div>
+    <h3 v-if="cardData.title">{{cardData.title}}</h3>
+    <p v-if="cardData.des">{{cardData.des}}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "videoCard",
+  props: {
+    cardData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    cardClick() {
+      this.$emit('card-click', this.cardData)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/videoDialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <!--  视频播放弹窗 -->
+  <el-dialog
+    :title="title"
+    :visible.sync="show"
+    @close="closeVideoDialog"
+    class="course-video-dialog"
+    center>
+    <video controls :src="source" class="course-video-box"></video>
+    <p v-if="footerText">{{footerText}}</p>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "videoDialog",
+  props: {
+    source: {
+      type: String,
+      require: true
+    },
+    footerText: {
+      type: String,
+    },
+    visible: {
+      type: Boolean,
+      require: true
+    }
+  },
+  data() {
+    return {
+      title: '',
+      show: false,
+    }
+  },
+  watch: {
+    visible: {
+      handler(newVal) {
+        this.show = newVal;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    closeVideoDialog() {
+      this.$emit('update:visible',this.show)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/footer.vue

@@ -1,13 +1,24 @@
 <template>
   <div class="client-footer">
     <div class="client-container mta-hidden-xs">
+      <div class="link-box">
+        <h4>友情链接</h4>
+        <div class="link-a-box">
+          <a :href="item.url" v-for="(item,index) in requestData" :key="index">{{item.name}}</a>
+        </div>
+      </div>
       <div class="contact-box">
         <div class="contact-left-box">
           <dl>
+            <dd><img src="#"></dd>
+          </dl>
+
+          <dl>
             <dt>产品服务</dt>
-            <dd @click="goExamPage">考试平台</dd>
-            <dd @click="goPeixunPage">培训平台</dd>
-            <dd @click="goKechengPage">课程开发</dd>
+            <dd @click="goExamPage">在线考试系统</dd>
+            <dd @click="goPeixunPage">在线培训系统</dd>
+            <dd @click="goKechengPage">课程定制开发</dd>
+            <dd @click="goKechengPage">通用课程资源</dd>
             <div style="display: none">
               <a :href="`${baseUrl}/examsystem`"></a>
               <a :href="`${baseUrl}/trainsystem`"></a>
@@ -16,60 +27,35 @@
             </div>
           </dl>
           <dl>
-            <dt>关于麦塔</dt>
-            <dd @click="goaboutUs">公司简介</dd>
-            <dd @click="goaboutUs">加入麦塔</dd>
-            <dd @click="goaboutUs">联系我们</dd>
+            <dt>新闻资讯</dt>
+            <dd @click="goaboutUs">行业新闻</dd>
+            <dd @click="goaboutUs">成功案例</dd>
           </dl>
           <dl>
-            <dt>帮助中心</dt>
-            <dd><a rel="nofollow"
-                   href="https://www.kancloud.cn/yhm-122130/mtaks2020/content/%E4%BA%8C%E7%BA%A7%E7%AE%A1%E7%90%86%E5%91%98%E8%AE%BE%E7%BD%AE%E5%8A%9F%E8%83%BD%E8%AF%B4%E6%98%8E.md"
-                   target="_blank">考试文档</a></dd>
-            <dd><a rel="nofollow"
-                   href="https://www.kancloud.cn/yhm-122130/mtapx_new/content/%E4%BA%BA%E5%91%98%E7%AE%A1%E7%90%86%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D.md"
-                   target="_blank">培训文档</a></dd>
-            <!--<dd><a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">应用下载</a></dd>-->
-          </dl>
-          <!--  <dl>
-              <dt>法律声明</dt>
-              <dd>服务条款</dd>
-              <dd>隐私声明</dd>
-              <dd>知识维权</dd>
-            </dl>-->
-          <dl>
-            <dt>关注我们</dt>
-            <dd class="two-code-box">微信公众号<i class="two-dimensional-code"></i></dd>
-            <!--<dd>新浪微博</dd>-->
+            <dt>联系我们</dt>
+            <dd>
+              公司邮箱: service@llisoft.com
+            </dd>
+            <dd>
+              联系电话：400-0990-883
+            </dd>
+            <dd>
+              公司地址：大连市沙河口区数码路北段25号201室
+            </dd>
           </dl>
         </div>
         <div class="contact-right-box">
           <div class="right-sw-box">
-            <h4>商务合作微信</h4>
             <img :src="swTwoCodeImg" alt="商务合作扫微信"/>
           </div>
-          <div style="vertical-align: top;">
-            <h3>400-052-2130</h3>
-            <p>周一至周日9:00-18:00</p>
-            <a href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">联系客服</a>
-          </div>
         </div>
       </div>
-      <div class="link-box">
-        <h4>友情链接</h4>
-        <div class="link-a-box">
-          <a :href="item.url" v-for="(item,index) in requestData" :key="index">{{item.name}}</a>
-        </div>
-      </div>
-      <!--<h5>Copyright © 2019 llisoft.com All rights reserved 大连麦塔软件服务有限公司 版权所有 <a style="color: #B8B8BB"
-                                                                                href="https://beian.miit.gov.cn/#/Integrated/index">
-        辽ICP备09022904号-18</a></h5>-->
-      <h5>Copyright © 2021 mtaclass.com All rights reserved 大连麦塔软件服务有限公司 版权所有 辽ICP备2021011083号-1</h5>
+
+      <h5>版本所有 © 2021 大连青谷软件有限公司 备案号：辽ICP备15006970号-6</h5>
     </div>
     <div class="mta-hidden-sm phone-footer-box">
-      <p>Copyright © 2021 mtaclass.com All rights reserved </p>
-      <p>大连麦塔软件服务有限公司 版权所有</p>
-      <a href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备2021011083号-1</a>
+      <p>版本所有 © 大连青谷软件有限公司 </p>
+      <a href="https://beian.miit.gov.cn/#/Integrated/index">备案号：辽ICP备15006970号-6</a>
     </div>
   </div>
 </template>

components/footer2.vue

@@ -5,53 +5,44 @@
          <div class="contact-box">
            <div class="contact-left-box">
              <dl>
-               <dt>产品服务</dt>
-               <dd @click="goExamPage">考试平台</dd>
-               <dd @click="goPeixunPage">培训平台</dd>
-               <dd @click="goKechengPage">课程开发</dd>
+               <dd><img src="#"></dd>
              </dl>
              <dl>
-               <dt>关于麦塔</dt>
-               <dd @click="goaboutUs">公司简介</dd>
-               <dd @click="goaboutUs">加入麦塔</dd>
-               <dd @click="goaboutUs">联系我们</dd>
+               <dt>产品服务</dt>
+               <dd @click="goExamPage">在线考试系统</dd>
+               <dd @click="goPeixunPage">在线培训系统</dd>
+               <dd @click="goKechengPage">课程定制开发</dd>
+               <dd @click="goKechengPage">通用课程资源</dd>
              </dl>
              <dl>
-               <dt>帮助中心</dt>
-               <dd><a rel="nofollow" href="https://www.kancloud.cn/yhm-122130/mtaks2020/content/%E4%BA%8C%E7%BA%A7%E7%AE%A1%E7%90%86%E5%91%98%E8%AE%BE%E7%BD%AE%E5%8A%9F%E8%83%BD%E8%AF%B4%E6%98%8E.md" target="_blank">考试文档</a></dd>
-               <dd><a rel="nofollow" href="https://www.kancloud.cn/yhm-122130/mtapx_new/content/%E4%BA%BA%E5%91%98%E7%AE%A1%E7%90%86%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D.md" target="_blank">培训文档</a></dd>
-               <!--<dd><a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">应用下载</a></dd>-->
+               <dt>新闻资讯</dt>
+               <dd @click="goaboutUs">行业新闻</dd>
+               <dd @click="goaboutUs">成功案例</dd>
              </dl>
-             <!--<dl>
-               <dt>法律声明</dt>
-               <dd>服务条款</dd>
-               <dd>隐私声明</dd>
-               <dd>知识维权</dd>
-             </dl>-->
              <dl>
-               <dt>关注我们</dt>
-               <dd class="two-code-box">微信公众号<i class="two-dimensional-code"></i></dd>
-               <!--<dd>新浪微博</dd>-->
+               <dt>联系我们</dt>
+               <dd>
+                 公司邮箱: service@llisoft.com
+               </dd>
+               <dd>
+                 联系电话：400-0990-883
+               </dd>
+               <dd>
+                 公司地址：大连市沙河口区数码路北段25号201室
+               </dd>
              </dl>
            </div>
            <div class="contact-right-box">
              <div class="right-sw-box">
-               <h4>商务合作微信</h4>
                <img :src="swTwoCodeImg" alt="商务合作扫微信"/>
              </div>
-             <div style="vertical-align: top;">
-               <h3>400-052-2130</h3>
-               <p>周一至周日9:00-18:00</p>
-               <a href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">联系客服</a>
-             </div>
            </div>
          </div>
-         <h5>Copyright © 2021 mtaclass.com All rights reserved 大连麦塔软件服务有限公司 版权所有 辽ICP备2021011083号-1</h5>
+         <h5>版本所有 © 2021 大连青谷软件有限公司 备案号：辽ICP备15006970号-6</h5>
        </div>
         <div class="mta-hidden-sm phone-footer-box">
-          <p>Copyright © 2021 mtaclass.com All rights reserved</p>
-          <p>大连麦塔软件服务有限公司 版权所有</p>
-          <a href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备2021011083号-1</a>
+          <p>版本所有 © 大连青谷软件有限公司</p>
+          <a href="https://beian.miit.gov.cn/#/Integrated/index">备案号：辽ICP备15006970号-6</a>
         </div>
      </div>
 </template>

components/header.vue

@@ -1,74 +1,38 @@
 <template>
   <nav class="client-head">
     <div class="client-container head-layout">
+
+      <!--   H5   -->
       <div class="head-left mta-hidden-sm">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
-        <div  @click="navChange">
-          <el-menu
-            :default-active="activeNav"
-            :class="navClass"
-            mode="horizontal"
-            :router="false"
-          >
-            <template v-for="(item,index) in headerArr">
-              <el-submenu :index="`${item.keyPath}`" v-if="item.children && item.children.length > 0"
-                          popper-class="mta-menu-two">
-                <template slot="title">{{item.content}}</template>
-                <el-menu-item :index="`${child.keyPath}`" v-for="child of item.children"
-                              :key="child.keyPath">
-                  <mtaLink :path="child.keyPath" :instation="true" :content="child.content"></mtaLink>
-                </el-menu-item>
-              </el-submenu>
-
-              <el-menu-item :index="`${item.keyPath}`" v-else>
-                <mtaLink :path="item.keyPath" :instation="true" :content="item.content"></mtaLink>
-              </el-menu-item>
-            </template>
-          </el-menu>
-        </div>
-        <a class="phone-tel-box mta-hidden-sm" href="tel:400-052-2130">咨询电话：400-052-2130</a>
+        <h5Nav :class="navClass" @click="navChange"></h5Nav>
         <!-- 手机按钮 -->
-        <div class="phone-nav-btn mta-hidden-sm" @click="changeHeadNav"></div>
+        <div class="phone-nav-btn mta-hidden-sm" :class="{open: isOpen, close: !isOpen}" @click="changeHeadNav"></div>
       </div>
+
+      <!--   PC   -->
       <div class="head-left mta-hidden-xs">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
         <div>
           <div class="header-left-container">
-            <a class="phone-tel-box" href="tel:400-052-2130"> <i class="phone-tel-box-icon"></i> <span>咨询电话：400-052-2130</span></a>
             <div class="head-right mta-hidden-xs">
               <a class="right-tel-btn">免费注册</a>
               <div class="system-box">
                 <div>
-                  <a  rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank"><i></i><p>考试系统</p></a>
+                  <a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank"><i></i>
+                    <p>考试系统</p></a>
                   <span></span>
-                  <a   rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank"><i></i><p>培训系统</p></a>
+                  <a rel="nofollow" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank"><i></i>
+                    <p>培训系统</p></a>
                 </div>
               </div>
               <a rel="nofollow" href="https://cdnks.mtavip.com/a/registerLogin" target="_blank">登录</a>
-            </div></div>
+            </div>
+          </div>
           <div>
-            <div @click="navChange">
-              <el-menu
-                :default-active="activeNav"
-                :class="navClass"
-                mode="horizontal"
-                :router="false"
-              >
-                <template v-for="(item,index) in headerArr">
-                  <el-submenu :index="`${item.keyPath}`" v-if="item.children && item.children.length > 0"
-                              popper-class="mta-menu-two">
-                    <template slot="title">{{item.content}}</template>
-                    <el-menu-item :index="`${child.keyPath}`" v-for="child of item.children"
-                                  :key="child.keyPath">
-                      <mtaLink :path="child.keyPath" :instation="true" :content="child.content"></mtaLink>
-                    </el-menu-item>
-                  </el-submenu>
-
-                  <el-menu-item :index="`${item.keyPath}`" v-else>
-                    <mtaLink :path="item.keyPath" :instation="true" :content="item.content"></mtaLink>
-                  </el-menu-item>
-                </template>
-              </el-menu>
+            <!--      FIXME 自定义样式      -->
+            <div style="margin-top: 20px;">
+              <qgNav></qgNav>
             </div>
           </div>
         </div>
@@ -80,88 +44,96 @@
 </template>
 
 <script>
-  import mtaLink        from '~/components/mtaLink/index';
-  import { mapGetters } from 'vuex';
+import mtaLink from '~/components/mtaLink/index';
+import qgNav from "~/components/qgNav";
+import H5Nav from "~/components/qgNav/H5Nav";
+
+import {mapGetters} from 'vuex';
 
-  let _ = require('lodash');
-  export default {
-    name:       'mtaHeader',
-    components: {
-      mtaLink,
+let _ = require('lodash');
+export default {
+  name: 'mtaHeader',
+  components: {
+    mtaLink,
+    qgNav,
+    H5Nav
+  },
+  computed: {
+    activeNav() {
+      return this.getActiveNav;
     },
-    computed: {
-      activeNav() {
-        return this.getActiveNav;
-      },
-      baseUrl() {
-        return this.getBaseUrl;
-      },
-      ...mapGetters(['getActiveNav','getBaseUrl'])
+    isOpen() {
+      return this.navClass === 'head-nav-up'
     },
-    data() {
-      return {
-        navClass:'head-nav-up',
-        headerArr:   [
-          {
-            content: '首页',
-            keyPath: '/',
-          },
-          {
-            content:  '考试系统',
-            keyPath:  '/examsystem',
-            children: [],
-          },
-          {
-            content:  '培训系统',
-            keyPath:  '/trainsystem',
-            children: [],
-          },
-       /*   {
-            content:  '课程资源',
-            keyPath:  '/resources',
-            children: [],
-          },*/
-          {
-            content:  '体验中心',
-            keyPath:  '/tiyanCenter',
-            children: [],
-          },
-          {
-            content:  '课程开发',
-            keyPath:  '/courseware',
-            children: [],
-          },
-          {
-            content:  '客户案例',
-            keyPath:  '/news',
-            children: [],
-          },
-          /*      {
-                  content:  '帮助中心',
-                  keyPath:  '/helpCenter',
-                  children: [],
-                },*/
-          {
-            content:  '关于我们',
-            keyPath:  '/introduction',
-            children: [],
-          },
-
-        ],
-      };
+    baseUrl() {
+      return this.getBaseUrl;
     },
-    methods:{
-      // 点击按钮菜单变化
-      changeHeadNav(){
-          if(this.navClass ==='head-nav-up' ){
-              this.navClass = 'head-nav-down'
-          }else{
-            this.navClass = 'head-nav-up'
-        }
-      },
-      navChange(){
+    ...mapGetters(['getActiveNav', 'getBaseUrl'])
+  },
+  data() {
+    return {
+      navClass: 'head-nav-up',
+      headerArr: [
+        {
+          content: '首页',
+          keyPath: '/',
+        },
+        {
+          content: '考试系统',
+          keyPath: '/examsystem',
+          children: [],
+        },
+        {
+          content: '培训系统',
+          keyPath: '/trainsystem',
+          children: [],
+        },
+        /*   {
+             content:  '课程资源',
+             keyPath:  '/resources',
+             children: [],
+           },*/
+        {
+          content: '体验中心',
+          keyPath: '/tiyanCenter',
+          children: [],
+        },
+        {
+          content: '课程开发',
+          keyPath: '/courseware',
+          children: [],
+        },
+        {
+          content: '客户案例',
+          keyPath: '/news',
+          children: [],
+        },
+        /*      {
+                content:  '帮助中心',
+                keyPath:  '/helpCenter',
+                children: [],
+              },*/
+        {
+          content: '关于我们',
+          keyPath: '/introduction',
+          children: [],
+        },
+
+      ],
+    };
+  },
+  methods: {
+    // 点击按钮菜单变化
+    changeHeadNav() {
+      if (this.navClass === 'head-nav-up') {
+        this.navClass = 'head-nav-down'
+      } else {
         this.navClass = 'head-nav-up'
-      },
+      }
+    },
+    navChange() {
+      this.navClass = 'head-nav-up'
     },
-  };
+  },
+};
 </script>

components/qgNav/H5Nav.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="h5-menu-container">
+    <nuxt-link to="/"> 首页 </nuxt-link>
+    <el-collapse>
+      <el-collapse-item title="产品与服务">
+        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index">
+          <div class="popover-left">
+            <img :src="item.img">
+          </div>
+          <div class="popover-left">
+            <span class="popover-left-title">{{ item.title }}</span>
+            <span class="popover-left-des">{{ item.des }}</span>
+          </div>
+        </nuxt-link>
+      </el-collapse-item>
+      <el-collapse-item title="解决方案">
+          <div>
+            <h3>场景解决方案</h3>
+            <nuxt-link :to="item.url" v-for="item in changjing" :key="item.url">
+              {{item.title}}
+            </nuxt-link>
+          </div>
+        <div>
+          <h3>行业解决方案</h3>
+          <nuxt-link :to="item.url" v-for="item in hangye" :key="item.url">
+            {{item.title}}
+          </nuxt-link>
+        </div>
+
+
+      </el-collapse-item>
+    </el-collapse>
+    <nuxt-link to="/news"> 新闻资讯 </nuxt-link>
+    <nuxt-link to="/introduction"> 关于我们 </nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "H5Nav",
+  data() {
+    return {
+      chanpinfuwu: [
+        {
+          img: '#',
+          title: '考试系统',
+          des: '一款简单、好用的考试系统',
+          url: '/product/exam'
+        },
+        {
+          img: '#',
+          title: '培训系统',
+          des: '企业一站式在线培训系统',
+          url: '/product/peixun'
+        },
+        {
+          img: '#',
+          title: '课程定制',
+          des: '为企业量身定做专属课程',
+          url: '/product/courseCustom'
+        },
+        {
+          img: '#',
+          title: '通用课程',
+          des: '企业优质通用课程资源',
+          url: '/product/courseResource'
+        }
+      ],
+      changjing: [
+        {
+          img: '#',
+          title: '严肃考试',
+          des: '智能防作弊解决方案',
+          url: '/solution/exam',
+        },
+        {
+          img: '#',
+          title: '企业培训',
+          des: '企业在线培训解决方案',
+          url: '/solution/peixun'
+        },
+        {
+          img: '#',
+          title: '万人高并发',
+          des: '系统高并发解决方案',
+          url: '/solution/erupt'
+        },
+        {
+          img: '#',
+          title: '私有化部署',
+          des: '企业私有化解决方案',
+          url: '/solution/privatization'
+        }
+      ],
+      hangye: [
+        {
+          img: '#',
+          title: '政府机构',
+          des: '政府机构培训解决方案',
+          url: '/solution/government'
+        },
+        {
+          img: '#',
+          title: '教育机构',
+          des: '教育培行业解决方案',
+          url: '/solution/education'
+        },
+        {
+          img: '#',
+          title: '能源化工',
+          des: '能源化工行业解决方案',
+          url: '/solution/energy'
+        },
+        {
+          img: '#',
+          title: '金融保险',
+          des: '金融保险行业解决方案',
+          url: '/solution/financial'
+        },
+        {
+          img: '#',
+          title: '食品餐饮',
+          des: '食品餐饮行业解决方案',
+          url: '/solution/biteAndSup'
+        },
+        {
+          img: '#',
+          title: '交通运输',
+          des: '交通运输行业解决方案',
+          url: '/solution/transportation'
+        },
+        {
+          img: '#',
+          title: '医疗行业',
+          des: '医疗行业解决方案',
+          url: '/solution/medical'
+        }
+      ],
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.h5-menu-container {
+  position: absolute;
+  top: 60px;
+  background: #fff;
+  width: 90%;
+  height: auto;
+}
+</style>

components/qgNav/index.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="header-nav">
+    <nuxt-link to="/" :class="{active : curActive === 'shouye'}">首页</nuxt-link>
+
+    <el-popover
+      placement="bottom-start"
+      width="200"
+      trigger="hover"
+    >
+      <div>
+        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index">
+          <div class="popover-left">
+            <img :src="item.img">
+          </div>
+          <div class="popover-left">
+            <span class="popover-left-title">{{ item.title }}</span>
+            <span class="popover-left-des">{{ item.des }}</span>
+          </div>
+        </nuxt-link>
+      </div>
+      <span class="nav-btn" slot="reference" :class="{active: curActive === 'chanpinyufuwu'}">产品与服务<i class="el-icon-arrow-down el-icon--right"></i></span>
+    </el-popover>
+
+    <el-popover
+      placement="bottom-start"
+      width="200"
+      trigger="hover"
+    >
+      <div class="menu-container">
+        <div class="menu-item">
+          <h3>场景解决方案</h3>
+          <div class="menu-item-container">
+            <nuxt-link :to="item.url" v-for="(item,index) in changjing" :key="index">
+              <div class="popover-left">
+                <img src="#">
+              </div>
+              <div class="popover-left">
+                <span class="popover-left-title">{{ item.title }}</span>
+                <span class="popover-left-des">{{ item.des }}</span>
+              </div>
+            </nuxt-link>
+          </div>
+        </div>
+        <div class="menu-item">
+          <h3>行业解决方案</h3>
+          <div class="menu-item-container">
+            <nuxt-link :to="item.url" v-for="(item,index) in hangye" :key="index">
+              <div class="popover-left">
+                <img :src="item.img">
+              </div>
+              <div class="popover-left">
+                <span class="popover-left-title">{{ item.title }}</span>
+                <span class="popover-left-des">{{ item.des }}</span>
+              </div>
+            </nuxt-link>
+          </div>
+        </div>
+      </div>
+      <span class="nav-btn" slot="reference" :class="{active: curActive === 'jiejuefangan'}">解决方案<i class="el-icon-arrow-down el-icon--right"></i></span>
+    </el-popover>
+
+    <nuxt-link to="/news" :class="{active: curActive === 'news'}">新闻资讯</nuxt-link>
+    <nuxt-link to="/introduction" :class="{active: curActive === 'introduction'}">关于我们</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "qg-nav",
+  data() {
+    return {
+      chanpinfuwu: [
+        {
+          img: '#',
+          title: '考试系统',
+          des: '一款简单、好用的考试系统',
+          url: '/product/exam'
+        },
+        {
+          img: '#',
+          title: '培训系统',
+          des: '企业一站式在线培训系统',
+          url: '/product/peixun'
+        },
+        {
+          img: '#',
+          title: '课程定制',
+          des: '为企业量身定做专属课程',
+          url: '/product/courseCustom'
+        },
+        {
+          img: '#',
+          title: '课程资源',
+          des: '企业优质通用课程资源',
+          url: '/product/courseResource'
+        }
+      ],
+      changjing: [
+        {
+          img: '#',
+          title: '严肃考试',
+          des: '智能防作弊解决方案',
+          url: '/solution/exam',
+        },
+        {
+          img: '#',
+          title: '企业培训',
+          des: '企业在线培训解决方案',
+          url: '/solution/peixun'
+        },
+        {
+          img: '#',
+          title: '万人高并发',
+          des: '系统高并发解决方案',
+          url: '/solution/erupt'
+        },
+        {
+          img: '#',
+          title: '私有化部署',
+          des: '企业私有化解决方案',
+          url: '/solution/privatization'
+        }
+      ],
+      hangye: [
+        {
+          img: '#',
+          title: '政府机构',
+          des: '政府机构培训解决方案',
+          url: '/solution/government'
+        },
+        {
+          img: '#',
+          title: '教育机构',
+          des: '教育培行业解决方案',
+          url: '/solution/education'
+        },
+        {
+          img: '#',
+          title: '能源化工',
+          des: '能源化工行业解决方案',
+          url: '/solution/energy'
+        },
+        {
+          img: '#',
+          title: '金融保险',
+          des: '金融保险行业解决方案',
+          url: '/solution/financial'
+        },
+        {
+          img: '#',
+          title: '食品餐饮',
+          des: '食品餐饮行业解决方案',
+          url: '/solution/biteAndSup'
+        },
+        {
+          img: '#',
+          title: '交通运输',
+          des: '交通运输行业解决方案',
+          url: '/solution/transportation'
+        },
+        {
+          img: '#',
+          title: '医疗行业',
+          des: '医疗行业解决方案',
+          url: '/solution/medical'
+        }
+      ],
+    }
+  },
+  computed: {
+    curActive() {
+      const chanpinyufuwu = this.chanpinfuwu.map(item => item.url);
+      const jiejuefangan = this.changjing.map(item => item.url);
+      const jiejuefangan2 = this.hangye.map(item => item.url);
+      const routerPath = this.$route.path
+      // 首页
+      if (routerPath === '/') {
+        return 'shouye'
+      } else if (routerPath === '/news') {
+        return 'news'
+      } else if (routerPath === '/introduction') {
+        return 'introduction'
+      } else if (chanpinyufuwu.some(path => path === routerPath)) {
+        return 'chanpinyufuwu'
+      } else if (jiejuefangan.some(path => path === routerPath)) {
+        return 'jiejuefangan'
+      } else if (jiejuefangan2.some(path => path === routerPath)) {
+        return 'jiejuefangan'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.active {
+  color: #f0bd16;
+}
+
+.nav-btn {
+  cursor: pointer;
+}
+</style>

defaultConfig.js

@@ -0,0 +1,71 @@
+const BannerImgs = {
+  // 首页
+  'shouye': 1, // 首页
+
+  // 产品与服务
+  'kaoshixitong': 2, // 考试系统
+  'peixunxitong': 3,// 培训系统
+  'kechengdingzhi': 4,// 课程定制
+  'tongyongkecheng': 5,// 通用课程
+
+  // 解决方案
+  'yansukaoshi': 6, // 严肃考试
+  'qiyepeixun': 7,// 企业培训
+  'wanrengaobingfa': 8,// 万人高并发
+  'siyouhuabushu': 9,// 私有化部署
+  'zhengfujigou': 10,// 政府机构
+  'jiaoyujigou': 11,// 教育机构
+  'nengyuanhuagong': 12,// 能源化工
+  'jinrongbaoxian': 13,// 金融保险
+  'shipincanyin': 14,// 食品餐饮
+  'jiaotongyunshu': 15,// 交通运输
+  'yiliaohangye': 16,// 医疗保险
+
+  // 新闻 + 关于
+  'xinwenzixun': 17,// 新闻资讯
+  'guanyuwomen': 18,// 关于我们
+
+  // 子页面
+  'zhiyesuyang': 19,// 职业素养
+  'lingdaonengli': 20,// 领导能力
+  'renliziyuan': 21,// 人力资源
+  'shichangyingxiao': 22,// 市场营销
+  'xingzhenguanli': 23,// 行政管理
+  'caiwuguanli': 24,// 财务管理
+  'kefufuwu': 25,// 客服服务
+  'chanpinyunying': 26,// 产品运营
+  'shengcancaigou': 27,// 生产采购
+}
+
+const classifys = {
+  shouye: { // 首页
+    classify: 0,
+    keyword: ''
+  },
+  kaoshixitong: {
+    classify: 0,
+    keyword: '考试'
+  },
+  kechengdingzhi: {
+    classify: 0,
+    keyword: '课程'
+  },
+  kechengziyuan: {
+    classify: 0,
+    keyword: '课程'
+  },
+  peixunxitong: {
+    classify: 0,
+    keyword: '课程'
+  }
+}
+
+/**
+ * 申请方案
+ * @page 首页 课程定制 课程资源
+ */
+
+export {
+  BannerImgs,
+  classifys
+}

nuxt.config.js

@@ -100,7 +100,7 @@ export default {
   axios:        {
     // node连接服务器地址（调用后台接口地址）
     // baseURL: 'http://182.92.186.22:83/api',
-    baseURL: isPro?pro.baseURL:'http://192.168.0.179:8100',
+    baseURL: isPro?pro.baseURL:'http://192.168.0.179:9106',
 
   },
 };

pages/CourseDevelopPhone.vue

@@ -31,7 +31,7 @@
     data() {
       return {
         telChangeDate:   {},
-        pageName:'',// 跳进来的页面名称
+        redirectUrl:'',// 跳进来的页面名称
         btnTextDisabled: false,
         btnText:         '获取验证码',
         countdown:       60, // 60秒倒计时
@@ -57,21 +57,10 @@
               if (res.code === 0 && res.data) {
                 this.$message({customClass:'phone-message-box',type: 'success',message: '申请成功'});
                 // 根据跳进来的页面跳出去
-                switch (this.pageName) {
-                  case 'shouye':
-                    this.$router.push({ name: 'index' });
-                    break;
-                  case 'course':
-                    this.$router.push({ name: 'courseware' });
-                    break;
-                  case 'resources':
-                    this.$router.push({ name: 'resources' });
-                    break;
-                  case 'education':
-                    this.$router.push({ name: 'indexEducation' });
-                    break;
-                  default:
-                    this.$router.push({ name: 'index' });
+                if (this.redirectUrl) {
+                  this.$router.push({ path: this.redirectUrl });
+                } else {
+                  this.$router.push({ path: '/' });
                 }
               }else{
                 this.$message({customClass:'phone-message-box',type: 'error',message: res.msg});
@@ -246,7 +235,7 @@
       },
     },
     created() {
-      this.pageName = this.$route.query.pageName;
+      this.redirectUrl = this.$route.query.redirectUrl;
     },
     mounted() {
       this.sliderFun();

pages/examsystem/index.vue

@@ -314,7 +314,7 @@
                                                return res;
                                              })
                                            ]);
-      console.log(res2.data.data);
+      console.log('333 =>', res2.data.data);
       return {
         bannerList: res1.data.data||[],
         topCarousels: res2.data.data||[],

pages/index.vue

@@ -2,26 +2,15 @@
 
   <div class="client-index-page">
     <div style="display: none">
-      <!--<a :href="`${baseUrl}/pcdituye.html`"></a>-->
       <a :href="`${baseUrl}/dalianmaita/pcsitemap.xml`"></a>
     </div>
 
-    <h1 style='display:none;'>在线考试系统在线培训系统组卷系统答题系统考试软件</h1>
-    <div style='display:none;'>
-      麦塔在线考试系统稳定，高效的在线考试系统，智能题库管理丨灵活组卷方式丨考试防作弊丨智能监考丨自动阅卷判分。打通“教学练测评”学习闭环。
-      麦塔在线考试系统、麦塔在线培训系统、麦塔组卷系统、麦塔答题系统、麦塔考试软件；
-      提供不同场景的考试培训解决方案，更智能的在线考试系统；行业解决方案1+x教育；
-      专注教与学，构建企业考试培训新生态；
-      麦塔考试软件打造核心竞争力；
-      多终端学习丨记录学习轨迹丨智能培训考试报表，课件定制开发服务，量身定制方案，助力企业内容建设，提升课程品质，标准课件类丨微课类丨MG动画类丨后期视频类。
-      麦塔答题系统组卷系统助力企业腾飞！
-    </div>
-
     <!-- 首页banner栏 -->
     <div class="client-banner-box">
       <el-carousel trigger="click">
         <el-carousel-item v-for="(item,index) in bannerList" :key="index">
-            <div @click="clickBanner(item)" :style="{backgroundImage: 'url(' + item.pic + ')'}" class="index-carousel-box"></div>
+          <div @click="clickBanner(item)" :style="{backgroundImage: 'url(' + item.pic + ')'}"
+               class="index-carousel-box"></div>
         </el-carousel-item>
       </el-carousel>
     </div>
@@ -30,10 +19,18 @@
     <div class="client-company-history mta-hidden-xs">
       <div class="client-container">
         <ul>
-          <li><div><p>2008<span>年</span></p><h4>公司创立于2008年</h4></div></li>
-          <li><div><p>3000<span>+</span></p><h4>已与3000多家企业建立了合作关系</h4></div></li>
-          <li><div><p>124,799<span>+</span></p><h4>平台用户已达到124799</h4></div></li>
-          <li><div><p>30,000<span>+</span></p><h4>课件开发超30000课时</h4></div></li>
+          <li><img src="#">
+            <div><p>在线考试系统</p><h4>让考试变得更轻松</h4></div>
+          </li>
+          <li><img src="#">
+            <div><p>在线培训系统</p><h4>为企业解决培训痛点</h4></div>
+          </li>
+          <li><img src="#">
+            <div><p>课程定制开发</p><h4>打造专业定制化服务</h4></div>
+          </li>
+          <li><img src="#">
+            <div><p>通用课程资源</p><h4>企业构建自主课程体系</h4></div>
+          </li>
         </ul>
       </div>
     </div>
@@ -43,162 +40,91 @@
       <div class="client-container">
         <h4 class="client-title">产品和服务</h4>
         <div class="products-services-box">
-          <img :src="productsImg1" alt="易用/稳定/高效的在线考试系统" />
           <div class="products-services-content">
-              <h5>更智能/更专业/更稳定的在线考试系统</h5>
-              <i></i>
-              <p class="p-before-circle">拥有灵活的出题策略，满足各种组卷需求</p>
-              <p class="p-before-circle">支持使用电脑、手机、Pad参加考试，可与微信公众号、钉钉无缝集成</p>
-              <p class="p-before-circle">支持考试防作弊、试题乱序、试题保护、人脸识别等参数设置</p>
-              <p class="p-before-circle">拥有灵活的出题策略、多样化的参数设置，能够随机应变适应不同的考场环境</p>
-              <p class="p-before-circle">系统支持大并发，万人以上同时在线考试也能轻松应对无压力</p>
-              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial(1)">免费试用</div><span  class="client-default-Btn" @click="goExamPage">了解详情</span></div>
+            <h5>在线考试系统一建立无纸化考试通道</h5>
+            <p>深谙在线考试系统搭建精髓，全场景模拟考试环境，企业微信/钉钉等平台同步开发搭建，实现移动端，PC端同步考试，APP/小程序/云平台独立开发</p>
+            <p class="p-before-circle">试题批量导入</p>
+            <p class="p-before-circle">多种题型支持</p>
+            <p class="p-before-circle">随机组卷抽题</p>
+            <p class="p-before-circle">考试时间设定</p>
+            <p class="p-before-circle">360°防作弊监考</p>
+            <p class="p-before-circle">自动阅卷判卷</p>
+            <p class="p-before-circle">成绩统计查询</p>
+            <p class="p-before-circle">证书办法打印</p>
+            <div class="client-btn-box">
+              <div rel="nofollow" class="client-default-Btn">
+                <freeTrialBtn myType="kaoshi"/>
+              </div>
+              <span class="client-default-Btn">
+                 <onlineInformationBtn/>
+              </span></div>
           </div>
+          <img :src="productsImg1" alt="易用/稳定/高效的在线考试系统"/>
         </div>
         <div class="products-services-box products-contrary-box">
-            <img :src="productsImg2" alt="高灵活/多种学习场景的在线培训学习系统" />
-            <div class="products-services-content">
-              <h5>高灵活/多种学习场景的在线培训学习系统</h5>
-              <i></i>
-              <p class="p-before-circle">碎片化学习，学员可以随时随地通过手机、PC进行在线学习，高效便捷</p>
-              <p class="p-before-circle">支持课件录播在线学习、讲师直播课程、互动知识问答等多种学习形式</p>
-              <p class="p-before-circle">灵活的课件结构设计，可以自定义课程章节，助力企业不同的人才培养需要</p>
-              <p class="p-before-circle">智能统计学习情况，通过在线学习和考试相结合，双向考核学员的学习能力</p>
-              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial(2)">免费试用</div><span class="client-default-Btn" @click="goPeixunPage">了解详情</span></div>
-            </div>
+          <div class="products-services-content">
+            <h5>在线培训系统 一 3步帮您搭建企业专属培训系统</h5>
+            <p>专注企业员工提升解决方案，不止是简单的培训系统开发，1V1部署资讯与百人课程开发团队，帮您解决后顾之忧。</p>
+            <p class="p-before-circle">在线直播教学</p>
+            <p class="p-before-circle">课后直播回放</p>
+            <p class="p-before-circle">阶段测评考试</p>
+            <p class="p-before-circle">课堂互动交流</p>
+            <p class="p-before-circle">视频课程教学</p>
+            <p class="p-before-circle">课程设置管理</p>
+            <p class="p-before-circle">课程结束考试</p>
+            <p class="p-before-circle">学员统计分析</p>
+            <div class="client-btn-box">
+              <div rel="nofollow" class="client-default-Btn">
+                <freeTrialBtn myType="peixun"/>
+              </div>
+              <span class="client-default-Btn">
+                <onlineInformationBtn/>
+              </span></div>
+          </div>
+          <img :src="productsImg2" alt="高灵活/多种学习场景的在线培训学习系统"/>
         </div>
         <div class="products-services-box">
-            <img :src="productsImg3" alt="数字课程开发服务" />
-            <div class="products-services-content">
-              <h5>数字课程开发服务</h5>
-              <i></i>
-              <p>在线培训学习离不开优秀的课程，麦塔软件汇聚优质的课程开发团队，在开发课程中不断更新适应社会、文化、科学等最新变化，让课程与时俱进。截止目前已为企事业单位、医疗行业、教育培训行业、金融行业、煤炭化工行业等12大行业定制开发了超过30000课时。</p>
-              <div class="client-btn-box"><div class="client-default-Btn" @click="applyFun">申请方案</div><span class="client-default-Btn" @click="goKechengPage">了解详情</span></div>
-            </div>
+          <img :src="productsImg3" alt="数字课程开发服务"/>
+          <div class="products-services-content">
+            <h5>课程定制开发一打造专业定制化服务</h5>
+            <p>百人制作团队，涉及900个行业，深入各大领域，专注课程开发9年，累积定制3万+小时课程</p>
+            <p class="p-before-circle">E-learning课程</p>
+            <p class="p-before-circle">微课程制作</p>
+            <p class="p-before-circle">宣传片制作</p>
+            <p class="p-before-circle">PPT定制</p>
+            <p class="p-before-circle">情景动画开发</p>
+            <p class="p-before-circle">H5平面设计</p>
+            <p class="p-before-circle">视频后期制作</p>
+            <div class="client-btn-box">
+              <div class="client-default-Btn">
+                <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5" />
+              </div>
+              <span class="client-default-Btn"><onlineInformationBtn/></span></div>
+          </div>
         </div>
-      </div>
-    </div>
-
-    <!-- 行业学习需求 -->
-    <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 :title="item.demandText">{{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 :title="item.demandText">{{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>
-      </div>
-    </div>
-
-    <!-- 您坚决选择我们的理由 -->
-    <div class="client-chose-box">
-      <div class="client-container">
-        <h4 class="client-title">您坚决选择我们的理由</h4>
-        <ul class="chose-img-box">
-          <li>
-            <div>
-              <span><img :src="choseImg1" alt="1v1专属顾问服务" /></span>
-              <h5>1v1专属顾问服务</h5>
-            </div>
-          </li>
-          <li>
-            <div>
-              <span><img :src="choseImg3" alt="完善智能的培训体系" /></span>
-              <h5>完善智能的培训体系</h5>
-            </div>
-          </li>
-          <li>
-            <div>
-              <span><img :src="choseImg2" alt="可靠领先的开发技术"/></span>
-              <h5>可靠领先的开发技术</h5>
-            </div>
-          </li>
-          <li>
-            <div>
-              <span><img :src="choseImg4" alt="成熟的运营支持团队" /></span>
-              <h5>成熟的运营支持团队</h5>
-            </div>
-          </li>
-        </ul>
-        <div rel="nofollow" class="free-trial-default-btn" @click="FreeTrial(1)">免费试用</div>
-      </div>
-    </div>
-
-    <!-- 新闻资讯 PC-->
-    <div class="client-news-information mta-hidden-xs">
-      <h4 class="client-title">麦塔资讯</h4>
-      <div class="client-container">
-          <div class="industry-information-box">
-            <div class="industry-information-left">
-                <img :src="topCarousels[0].pic" alt="麦塔资讯" />
-                <h4 @click="checkInfo(topCarousels[0])">{{ topCarousels[0].title }}<i></i></h4>
-                <div><b>{{ topCarousels[0].yyyy }}</b><span>{{ topCarousels[0].mmdd }}</span></div>
-                <p>{{ topCarousels[0].intro }}</p>
-            </div>
-            <div class="industry-information-right">
-              <ul>
-                <li v-for="(item, index) in topCarousels" v-if="index >= 1">
-                  <h4 @click="checkInfo(item)">
-                    <a style="display: none" :href="`${baseUrl}/news/${item.code}`"></a>
-                    <span>{{ item.yyyy }}</span>{{ item.title }}
-                  </h4>
-                  <p><span>{{ item.mmdd}}</span>{{ item.intro }}</p>
-                </li>
-              </ul>
+        <div class="products-services-box">
+          <div class="products-services-content">
+            <h5>通用课程资源一帮助企业构建自主课程体系</h5>
+            <p>基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。</p>
+            <p class="p-before-circle">职业素养</p>
+            <p class="p-before-circle">领导能力</p>
+            <p class="p-before-circle">人力资源</p>
+            <p class="p-before-circle">市场营销</p>
+            <p class="p-before-circle">行政管理</p>
+            <p class="p-before-circle">财务管理</p>
+            <p class="p-before-circle">客服服务</p>
+            <p class="p-before-circle">产品运营</p>
+            <p class="p-before-circle">生产采购</p>
+            <div class="client-btn-box">
+              <div class="client-default-Btn">
+                <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5" />
+              </div>
+              <span class="client-default-Btn"><onlineInformationBtn/></span>
             </div>
           </div>
+          <img :src="productsImg3" alt="数字课程开发服务"/>
+        </div>
       </div>
-
-    </div>
-
-    <!-- 新闻资讯 手机-->
-    <div class="client-newsInfo-phone mta-hidden-sm">
-      <h4 class="client-title">新闻资讯</h4>
-      <el-carousel :interval="5000" type="card" height="300px" indicator-position="none" arrow="never">
-        <el-carousel-item v-for="(item,index) in topCarousels" :key="index" class="el-row">
-          <img :src="item.pic" alt="新闻资讯"  @click="checkInfo(item)"/>
-          <div class="newsInfo-card-content"  @click="checkInfo(item)">
-            <a style="display: none" :href="`${baseUrl}/news/${item.code}`"></a>
-            <h4>{{ item.title }}<i></i></h4>
-            <span>{{ item.yyyy }}-{{ item.mmdd }}</span>
-            <p>{{ item.intro }}</p>
-          </div>
-
-        </el-carousel-item>
-      </el-carousel>
-
     </div>
 
     <!-- 超过10万家客户的信任之选 -->
@@ -206,696 +132,450 @@
       <div class="client-container">
         <h4 class="client-title">他们都在用</h4>
         <ul class="customer-img-box">
-          <li><img :src="customerImg1" alt="中国人民银行" /></li>
-          <li><img :src="customerImg2" alt="汇丰" /></li>
-          <li><img :src="customerImg3" alt="中国银行" /></li>
-          <li><img :src="customerImg4" alt="中信银行" /></li>
-          <li><img :src="customerImg5" alt="中国民生银行" /></li>
-          <li><img :src="customerImg6" alt="astellas" /></li>
-          <li><img :src="customerImg7" alt="今日头条" /></li>
-          <li><img :src="customerImg8" alt="华图教育" /></li>
-          <li><img :src="customerImg9" alt="步步高" /></li>
-          <li><img :src="customerImg10" alt="小天才" /></li>
-          <li><img :src="customerImg11" alt="华发股份" /></li>
-          <li><img :src="customerImg12" alt="上海航空" /></li>
-          <li><img :src="customerImg13" alt="中国国际航空公司" /></li>
-          <li><img :src="customerImg14" alt="中国东方航空" /></li>
-          <li><img :src="customerImg15" alt="深圳航空" /></li>
-          <li><img :src="customerImg16" alt="中建八局" /></li>
-          <li><img :src="customerImg17" alt="SANOFI" /></li>
-          <li><img :src="customerImg18" alt="大连海事大学" /></li>
-          <li><img :src="customerImg19" alt="南京银行" /></li>
-          <li><img :src="customerImg20" alt="中国人民银行" /></li>
+          <li><img :src="customerImg1" alt="中国人民银行"/></li>
+          <li><img :src="customerImg2" alt="汇丰"/></li>
+          <li><img :src="customerImg3" alt="中国银行"/></li>
+          <li><img :src="customerImg4" alt="中信银行"/></li>
+          <li><img :src="customerImg5" alt="中国民生银行"/></li>
+          <li><img :src="customerImg6" alt="astellas"/></li>
+          <li><img :src="customerImg7" alt="今日头条"/></li>
+          <li><img :src="customerImg8" alt="华图教育"/></li>
+          <li><img :src="customerImg9" alt="步步高"/></li>
+          <li><img :src="customerImg10" alt="小天才"/></li>
+          <li><img :src="customerImg11" alt="华发股份"/></li>
+          <li><img :src="customerImg12" alt="上海航空"/></li>
+          <li><img :src="customerImg13" alt="中国国际航空公司"/></li>
+          <li><img :src="customerImg14" alt="中国东方航空"/></li>
+          <li><img :src="customerImg15" alt="深圳航空"/></li>
+          <li><img :src="customerImg16" alt="中建八局"/></li>
+          <li><img :src="customerImg17" alt="SANOFI"/></li>
+          <li><img :src="customerImg18" alt="大连海事大学"/></li>
+          <li><img :src="customerImg19" alt="南京银行"/></li>
+          <li><img :src="customerImg20" alt="中国人民银行"/></li>
         </ul>
       </div>
     </div>
-
-    <!-- 我们始终专注教育系统研发更懂用户需求 -->
-    <div class="client-cert-box">
-      <div class="client-container">
-        <h4 class="client-title">多年专业累积，更懂您的需求</h4>
-        <div class="cert-img-box">
-          <span><img :src="certImg3" alt="麦塔课程管理系统" /></span>
-          <span><img :src="certImg4" alt="麦塔用户管理系统" /></span>
-          <span><img :src="certImg7" alt="麦塔培训系统" /></span>
-          <span><img :src="certImg6" alt="麦塔考试系统" /></span>
-          <span><img :src="certImg8" alt="知识产权管理体系认证证书" /></span>
-        </div>
-        <a class="client-default-Btn" :href="`${baseUrl}/introduction`">了解更多</a>
-      </div>
-    </div>
-
-    <el-dialog
-      :close-on-click-modal="false"
-      :visible.sync="telDl"
-      @close="delDlClose"
-      class="application-scheme-dialog"
-      center>
-      <i></i>
-      <p>免费获得课程开发解决方案</p>
-      <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
-        <el-form-item  prop="tel">
-          <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
-        </el-form-item>
-        <div id="your-dom-id" class="nc-container"></div>
-        <el-form-item prop="verification">
-          <div class="verification">
-            <el-input v-model="telChangeDate.verification" placeholder="请输入验证码" class="dialog-input-code"></el-input>
-            <el-button  @click="checkVerification" :disabled="btnTextDisabled" class="dialog-code-btn">{{btnText}}</el-button>
-          </div>
-        </el-form-item>
-      </el-form>
-      <div class="application-scheme-btn" @click="dialogSave">申请方案</div>
-      <span>免费热线：400-052-2130</span><a href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">在线客服</a>
-    </el-dialog>
+    <!--  新闻资讯  -->
+    <newsComp :newsData="topCarousels"></newsComp>
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
 
   </div>
 </template>
 
 <script>
-  import { mapGetters } from 'vuex';
-  export default {
-    name:       'index',
-    layout:     'templateA',
-    watchQuery: true,
-    async fetch({ $axios, store, query }) {
-      try {
-        const { data } = await $axios.post('/home/links/list');
-        store.commit('SetFooterYouQingLianJie', data.data.data);
-      } catch (e) {
-
-      }
-
-    },
-    async asyncData({ $axios, store }) {
-      // 设置选中菜单
-      store.commit('setActiveNav', '/');
-
-      let [res1, res2] = await Promise.all([
-                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0 }).then(res => {
-                                               return res;
-                                             }),
-                                             await $axios.$post(`/home/banner/list`, { 'code': 1 }).then(res => {
-                                               return res;
-                                             }),
-                                           ]);
-      return {
+import {mapGetters} from 'vuex';
+import applyBtn from "~/components/common/applyBtn";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import applicationDialog from "~/components/common/applicationDialog";
+import newsComp from "~/components/common/newsComp";
+import {BannerImgs, classifys} from "~/defaultConfig"
+
+/**
+ * @ 首页
+ */
+export default {
+  name: 'index',
+  layout: 'templateA',
+  watchQuery: true,
+  async fetch({$axios, store, query}) {
+    try {
+      const {data} = await $axios.post('/home/links/list');
+      store.commit('SetFooterYouQingLianJie', data.data.data);
+    } catch (e) {
 
-         topCarousels: res1.data.data||[],
-         bannerList: res2.data.data||[],
-
-      };
-    },
-    data() {
-      return {
-        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
-        topCarousels2:  [],
-        // 产品和服务
-        productsImg1:   require(`~/static/images/client/index/index-products-kaoshi.png`),
-        productsImg2:   require(`~/static/images/client/index/index-products-peixun.png`),
-        productsImg3:   require(`~/static/images/client/index/index-products-kejian.png`),
-        // 您坚决选择我们的理由
-        choseImg1:   require(`~/static/images/client/index/index-chose-service-icon.png`),
-        choseImg2:   require(`~/static/images/client/index/index-chose-system-icon.png`),
-        choseImg3:   require(`~/static/images/client/index/index-chose-tech-icon.png`),
-        choseImg4:   require(`~/static/images/client/index/index-chose-operate-icon.png`),
-        // 客户logo
-        customerImg1:   require(`~/static/images/client/index/index-customer-img1.png`),
-        customerImg2:   require(`~/static/images/client/index/index-customer-img2.png`),
-        customerImg3:   require(`~/static/images/client/index/index-customer-img3.png`),
-        customerImg4:   require(`~/static/images/client/index/index-customer-img4.png`),
-        customerImg5:   require(`~/static/images/client/index/index-customer-img5.png`),
-        customerImg6:   require(`~/static/images/client/index/index-customer-img6.png`),
-        customerImg7:   require(`~/static/images/client/index/index-customer-img7.png`),
-        customerImg8:   require(`~/static/images/client/index/index-customer-img8.png`),
-        customerImg9:   require(`~/static/images/client/index/index-customer-img9.png`),
-        customerImg10:  require(`~/static/images/client/index/index-customer-img10.png`),
-        customerImg11:  require(`~/static/images/client/index/index-customer-img11.png`),
-        customerImg12:  require(`~/static/images/client/index/index-customer-img12.png`),
-        customerImg13:  require(`~/static/images/client/index/index-customer-img13.png`),
-        customerImg14:  require(`~/static/images/client/index/index-customer-img14.png`),
-        customerImg15:  require(`~/static/images/client/index/index-customer-img15.png`),
-        customerImg16:  require(`~/static/images/client/index/index-customer-img16.png`),
-        customerImg17:  require(`~/static/images/client/index/index-customer-img17.png`),
-        customerImg18:  require(`~/static/images/client/index/index-customer-img18.png`),
-        customerImg19:  require(`~/static/images/client/index/index-customer-img19.png`),
-        customerImg20:  require(`~/static/images/client/index/index-customer-img20.png`),
-        // 证书图片
-        certImg3:       require(`~/static/images/client/index/index-cert-img3.jpg`),
-        certImg4:       require(`~/static/images/client/index/index-cert-img4.jpg`),
-        certImg6:       require(`~/static/images/client/index/index-cert-img6.jpg`),
-        certImg7:       require(`~/static/images/client/index/index-cert-img7.jpg`),
-        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:    '互联网经济在中国GDP中占比持续攀升，面对日益庞大和复杂的业务需求，也渐渐将业务重心向“盈利”为核心的网络游戏、网上交易、网络广告、网络教育、网络短信等产业转移，驱动互联网行业加速创新，推动中国互联网的发展与进步。',
-            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:         '获取验证码',
-        countdown:       60, // 60秒倒计时
-        sliderData:      {},
-        appKey:          'FFFF0N00000000007EC0',
-        telChangeDate:   {},
-        telRules:        {
-          tel:          [
-            { trigger: 'blur', required: true, message: '请输入手机号' },
+  },
+  async asyncData({$axios, store}) {
+    let [res1, res2] = await Promise.all([
+      await $axios.$post(`/home/news/carousel`, {newsClassifyId: classifys.shouye.classify}).then(res => {
+        return res;
+      }),
+      await $axios.$post(`/home/banner/list`, {code: BannerImgs.shouye}).then(res => {
+        return res;
+      }),
+    ]);
+    return {
+
+      topCarousels: res1.data.data || [],
+      bannerList: res2.data.data || [],
+
+    };
+  },
+  data() {
+    return {
+      SystemWidthFlag: false,// 判断是否是手机端，默认为false，默认为PC端
+      topCarousels2: [],
+      // 产品和服务
+      productsImg1: require(`~/static/images/client/index/index-products-kaoshi.png`),
+      productsImg2: require(`~/static/images/client/index/index-products-peixun.png`),
+      productsImg3: require(`~/static/images/client/index/index-products-kejian.png`),
+      // 您坚决选择我们的理由
+      choseImg1: require(`~/static/images/client/index/index-chose-service-icon.png`),
+      choseImg2: require(`~/static/images/client/index/index-chose-system-icon.png`),
+      choseImg3: require(`~/static/images/client/index/index-chose-tech-icon.png`),
+      choseImg4: require(`~/static/images/client/index/index-chose-operate-icon.png`),
+      // 客户logo
+      customerImg1: require(`~/static/images/client/index/index-customer-img1.png`),
+      customerImg2: require(`~/static/images/client/index/index-customer-img2.png`),
+      customerImg3: require(`~/static/images/client/index/index-customer-img3.png`),
+      customerImg4: require(`~/static/images/client/index/index-customer-img4.png`),
+      customerImg5: require(`~/static/images/client/index/index-customer-img5.png`),
+      customerImg6: require(`~/static/images/client/index/index-customer-img6.png`),
+      customerImg7: require(`~/static/images/client/index/index-customer-img7.png`),
+      customerImg8: require(`~/static/images/client/index/index-customer-img8.png`),
+      customerImg9: require(`~/static/images/client/index/index-customer-img9.png`),
+      customerImg10: require(`~/static/images/client/index/index-customer-img10.png`),
+      customerImg11: require(`~/static/images/client/index/index-customer-img11.png`),
+      customerImg12: require(`~/static/images/client/index/index-customer-img12.png`),
+      customerImg13: require(`~/static/images/client/index/index-customer-img13.png`),
+      customerImg14: require(`~/static/images/client/index/index-customer-img14.png`),
+      customerImg15: require(`~/static/images/client/index/index-customer-img15.png`),
+      customerImg16: require(`~/static/images/client/index/index-customer-img16.png`),
+      customerImg17: require(`~/static/images/client/index/index-customer-img17.png`),
+      customerImg18: require(`~/static/images/client/index/index-customer-img18.png`),
+      customerImg19: require(`~/static/images/client/index/index-customer-img19.png`),
+      customerImg20: require(`~/static/images/client/index/index-customer-img20.png`),
+      // 证书图片
+      certImg3: require(`~/static/images/client/index/index-cert-img3.jpg`),
+      certImg4: require(`~/static/images/client/index/index-cert-img4.jpg`),
+      certImg6: require(`~/static/images/client/index/index-cert-img6.jpg`),
+      certImg7: require(`~/static/images/client/index/index-cert-img7.jpg`),
+      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',
+            },
           ],
-          verification: [
-            { trigger: 'blur', required: true, message: '请输入验证码' },
+        },
+        {
+          demandNumber: '02',
+          demandTitle: '信息产业',
+          demandHref: 'information',
+          demandText: '互联网经济在中国GDP中占比持续攀升，面对日益庞大和复杂的业务需求，也渐渐将业务重心向“盈利”为核心的网络游戏、网上交易、网络广告、网络教育、网络短信等产业转移，驱动互联网行业加速创新，推动中国互联网的发展与进步。',
+          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: '获取验证码',
+      countdown: 60, // 60秒倒计时
+      sliderData: {},
+      appKey: 'FFFF0N00000000007EC0',
+      telChangeDate: {},
+      telRules: {
+        tel: [
+          {trigger: 'blur', required: true, message: '请输入手机号'},
+        ],
+        verification: [
+          {trigger: 'blur', required: true, message: '请输入验证码'},
+        ],
+      },
 
 
-      };
-
-
-    },
-
-    head(){
-      return {
-        title: '在线考试系统_在线培训系统_组卷答题系统_考试软件',
-        meta: [
-          {
-            name: 'description',
-            content: '麦塔在线考试系统和在线培训系统拥有完全自主知识产权，专注于解决在线考试、在线培训难题，拥有防作弊系统，支持试题乱序、试题保护、人脸识别等参数设置；致力于高质量完成培训、考试任务，麦塔10余年专注打造多学习场景、安全稳定易用的在线考试系统、在线培训系统，能为企业节省30%的学习费用！'
-          },
-          {
-            name: 'keywords',
-            content: '考试系统,培训系统,答题系统,组卷系统,考试管理系统'
-          },
+    };
+
+
+  },
+  components: {
+    applyBtn,
+    freeTrialBtn,
+    onlineInformationBtn,
+    applicationDialog,
+    newsComp
+  },
+  head() {
+    return {
+      title: '在线考试系统_在线培训系统_组卷答题系统_考试软件',
+      meta: [
+        {
+          name: 'description',
+          content: '麦塔在线考试系统和在线培训系统拥有完全自主知识产权，专注于解决在线考试、在线培训难题，拥有防作弊系统，支持试题乱序、试题保护、人脸识别等参数设置；致力于高质量完成培训、考试任务，麦塔10余年专注打造多学习场景、安全稳定易用的在线考试系统、在线培训系统，能为企业节省30%的学习费用！'
+        },
+        {
+          name: 'keywords',
+          content: '考试系统,培训系统,答题系统,组卷系统,考试管理系统'
+        },
         /*  {
             name: 'mobile-agent',
             content: 'format=html5;url=https://m.mtavip.com'
           },*/
-          {
-            name: 'bytedance-verification-code',
-            content: 'EoTQ4NuK4pxkCu7efFJH'
-          },
-          {
-            'http-equiv': 'Cache-Control',
-            content: 'no-transform'
-          },
-        ],
-        link:[
-         /* {
-            rel:'alternate',
-            media:'only screen and(max-width: 640px)',
-            href:'https://m.mtavip.com'
-          },*/
-          {
-            rel:'canonical',
-            href:'http://www.mtaclass.com/'
-          }
-        ]
+        {
+          name: 'bytedance-verification-code',
+          content: 'EoTQ4NuK4pxkCu7efFJH'
+        },
+        {
+          'http-equiv': 'Cache-Control',
+          content: 'no-transform'
+        },
+      ],
+      link: [
+        /* {
+           rel:'alternate',
+           media:'only screen and(max-width: 640px)',
+           href:'https://m.mtavip.com'
+         },*/
+        {
+          rel: 'canonical',
+          href: 'http://www.mtaclass.com/'
+        }
+      ]
+    }
+  },
+  methods: {
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: 'shouye',}});
+    },
+    clickBanner(data) {
+      if (data.url) {
+        window.open(data.url)
       }
     },
-    methods:    {
-      // 移动端跳转详情页
-      goDetailsPage(data){
-        this.$router.push({ name: data});
-      },
-      // 判断是否为移动端
-      getSystemWidth(){
-        var browserWidth=document.documentElement.clientWidth;
-        if(browserWidth <= 768){
-          this.SystemWidthFlag = true;
-        }else{
-          this.SystemWidthFlag = false;
-        }
 
-      },
-      clickBanner(data){
-      /*  console.log(data);
-
-*/      if(data.url){
-          window.open(data.url)
+    // 免费试用
+    FreeTrial(type) {
+      var registerType = type;
+      if (this.SystemWidthFlag) {
+        if (registerType === 1) {
+          window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
+        } else {
+          window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
         }
-        // this.$router.push({ name: 'indexEducation' });
-      },
-
-      // 免费试用
-      FreeTrial(type){
-        var registerType = type;
-        this.getSystemWidth();
-        if(this.SystemWidthFlag){
-          if(registerType===1) {
-            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
-          }else {
-            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
-          }
-        }else{
-          if(registerType===1){
-            window.open('https://cdnks.mtavip.com/a/register?flug=1')
-          }else{
-            window.open('https://cdnks.mtavip.com/a/register?flug=2')
-          }
-
+      } else {
+        if (registerType === 1) {
+          window.open('https://cdnks.mtavip.com/a/register?flug=1')
+        } else {
+          window.open('https://cdnks.mtavip.com/a/register?flug=2')
         }
-      },
-      // 申请方案
-      applyFun() {
-        this.getSystemWidth();
-        if(this.SystemWidthFlag){
-          this.$router.push({ name: 'CourseDevelopPhone', query: {pageName: 'shouye',} });
-        }else{
-          this.telDl = true;
-          this.sliderFun();
-        }
-
-      },
-
-      dialogSave(){
-        this.$refs.ruleTelForm.validate((valid) => {
-          if (valid) {
-            // 请求后台
-            const options = {
-              phone:  this.telChangeDate.tel,
-              code: this.telChangeDate.verification,
-            };
-
-            this.$axios.$post('/develop/add',options).then(res=>{
-              if (res.code === 0 && res.data) {
-                this.telDl = false;
-                this.$message.success('申请成功');
-              } else {
-                this.$message.error('申请失败');
-              }
-            });
-          }
-        });
-
-      },
-
-
-      delDlClose(){
-        this.telDl  =false;
-        this.countdown = -1;
-        this.$refs.ruleTelForm.resetFields();
-        __nc.reset();
-
-
-      },
-
-      /**
-       * 串联加载指定的脚本
-       * 串联加载[异步]逐个加载，每个加载完成后加载下一个
-       * 全部加载完成后执行回调
-       * @param array|string 指定的脚本们
-       * @param function 成功后回调的函数
-       * @return array 所有生成的脚本元素对象数组
-       * 异步加载js后运行回调函数callback / scripts 为数组或字符串
-       */
-      seriesLoadScripts(scripts, callback) {
-        if (typeof (scripts) != 'object') {
-          var scripts = [scripts];
-        }
-        var HEAD = document.getElementsByTagName('head').item(0) || document.documentElement;
-        var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
-          s[i] = document.createElement('script');
-          s[i].setAttribute('type', 'text/javascript');
-          s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
-            if (!/*@cc_on!@*/0 || this.readyState == 'loaded' || this.readyState == 'complete') {
-              this.onload = this.onreadystatechange = null;
-              this.parentNode.removeChild(this);
-              if (i != last) {
-                recursiveLoad(i + 1);
-              } else if (typeof (callback) == 'function') {
-                callback();
-              }
-            }
-          };
-          s[i].setAttribute('src', scripts[i]);
-          HEAD.appendChild(s[i]);
-        };
-        recursiveLoad(0);
-      },
-      // 滑块
-      sliderFun() {
-        const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
-        console.log(nc_token);
-        const NC_Opt = {
-          //声明滑动验证需要渲染的目标元素ID。
-          renderTo:    '#your-dom-id',
-          //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
-          appkey:      this.appKey,
-          //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
-          scene:       'nc_message',
-          //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
-          token:       nc_token,
-          //滑动条的宽度。
-          customWidth: 300,
-          //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
-          trans:       { 'key1': 'code0' },
-          //通过Dom的ID属性自动填写trans业务键，可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
-          elementID:   ['usernameID'],
-          //是否自定义配置底层采集组件。如无特殊场景，请使用默认值（0），即不自定义配置底层采集组件。
-          is_Opt:      0,
-          //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
-          language:    'cn',
-          //是否启用。一般情况，保持默认值（true）即可。
-          isEnabled:   true,
-          //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
-          timeout:     3000,
-          //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
-          times:       5,
-          //用于自定义滑动验证各项请求的接口地址。一般情况，请勿配置该参数。
-          apimap:      {
-            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
-            // 'get_captcha': '//b.com/get_captcha/ver3',
-            // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
-            // 'get_img': '//c.com/get_img',
-            // 'checkcode': '//d.com/captcha/checkcode.jsonp',
-            // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
-            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
-            // 'umid_serUrl': 'https://g.com/service/um.json'
-          },
-          //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
-          callback:    (data) => {
-            this.sliderData = Object.assign({}, data, {
-              appkey: NC_Opt.appkey,
-              scene:  NC_Opt.scene,
-            });
-            console.log( this.sliderData);
-          },
-        };
-        let date11 = () => {
-
-          let _date = new Date();
-          let year = _date.getFullYear().toString();
-          let month = _date.getMonth().toString();
-          let day = _date.getDate().toString();
-          let a = _date.getHours().toString();
-          let b = _date.getMinutes().toString();
-          let c = _date.getSeconds().toString();
-
-          return year + month + day + a + b + c;
-        };
-        let c = date11();
-        const scripts = [
-          `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`,
-        ];
-        this.seriesLoadScripts(scripts, function () {
-          var nc = new noCaptcha(NC_Opt);
-          nc.upLang('cn', {
-            _startTEXT:    '请按住滑块，拖动到最右边',
-            _yesTEXT:      '验证通过',
-            _error300:     '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
-            _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>',
-          });
-        });
-
-      },
-
-      // 倒计时60秒
-      setTime() {
-        if (this.countdown === 0) {
-          this.btnTextDisabled = false;
-          this.btnText = '获取验证码';
-          this.countdown = 60;
-        }else if(this.countdown === -1){
-          this.btnTextDisabled = false;
-          this.btnText = '获取验证码';
-          this.countdown = 60;
-        }else {
-          this.btnTextDisabled = true;
-          this.btnText = '重新发送(' + this.countdown + 's)';
-          this.countdown--;
-          setTimeout(() => {
-            this.setTime();
-          }, 1000);
-        }
-      },
-      // 验证码
-      checkVerification() {
-        if (this.sliderData.appkey === undefined) {
-          this.$message.error('请先通过滑块校验');
-          return;
-        }
-        this.$axios.$post(`/develop/exists`,{  phone: this.telChangeDate.tel}).then(res=>{
-
-          if (res.code === 0 && res.data) {
-
-            let req = {
-              'appkey':    this.sliderData.appkey,
-              'phone':     this.telChangeDate.tel,
-              'scene':     this.sliderData.scene,
-              'sessionid': this.sliderData.csessionid,
-              'sig':       this.sliderData.sig,
-              'token':     this.sliderData.token,
-              'type':      0,
-            }
-            this.$axios.$post('/sendCode',req).then(res=>{
-              if (res.code === 0 && res.data) {
-                this.setTime();
-              }else {
-                this.$message.error(res.msg||'手机号已存在');
-              }
-            })
-          } else {
-            this.$message.error(res.msg||'手机号已存在');
-            return false;
-          }
-
-        })
-      },
-
-
 
+      }
+    },
 
-      goExamPage(){
-        this.$router.push({ name: 'examsystem' });
-      },
-      goPeixunPage(){
-        this.$router.push({ name: 'trainsystem' });
-      },
-      goKechengPage(){
-        this.$router.push({ name: 'courseware' });
-      },
-      checkInfo(data) {
-        const opt = {
-          id: data.code,
-        };
-        this.$router.push({ name: 'news-id', params: opt });
-      },
+    goExamPage() {
+      this.$router.push({name: 'examsystem'});
     },
-    computed: {
-      baseUrl() {
-        return this.getBaseUrl;
-      },
-      ...mapGetters(['getBaseUrl']),
+    goPeixunPage() {
+      this.$router.push({name: 'trainsystem'});
     },
-    mounted() {
-      this.getSystemWidth();
-    }
-  };
+    goKechengPage() {
+      this.$router.push({name: 'courseware'});
+    },
+    checkInfo(data) {
+      const opt = {
+        id: data.code,
+      };
+      this.$router.push({name: 'news-id', params: opt});
+    },
+  },
+  computed: {
+    baseUrl() {
+      return this.getBaseUrl;
+    },
+    ...mapGetters(['getBaseUrl']),
+  },
+};
 </script>
 
 <style></style>

pages/introduction/index.vue

@@ -2,114 +2,66 @@
   <div class="client-aboutUs-page">
     <!-- 关于我们banner栏 -->
     <div class="aboutUs-banner">
-      <span><img :src="aboutUsBannerImg" alt="关于我们"></span>
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <div>
+        <h4>关于青谷软件</h4>
+        <p>移动化、平台化、知识化、智能化</p>
+      </div>
     </div>
 
     <!-- 公司简介 -->
     <div class="company-profile-box">
+      <img src="#" alt="">
       <div class="client-container">
-          <!--<img :src="companyProfileImg" alt="公司简介">-->
-          <p>大连麦塔软件服务有限公司，是专业的教育软件与数字化资源服务供应商，总部位于大连软件园。</p>
-          <p>麦塔软件基于新型互联网技术融合在线教育，致力于为用户提供全方位的在线教育解决方案，其中包括：软件SaaS服务、在线考试培训平台、数字化内容解决方案、企业通用岗位培训方案。</p>
-          <p>麦塔软件以智能易用、安全稳定、功能完善、可定制化等优势，持续创新，为用户创造价值。</p>
+          <h4>公司介绍</h4>
+          <p>大连青谷软件有限公司成立于2013年10月。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、智能化学系管理模式，让学系变得更轻松。</p>
+          <p>目前，青谷软件70%的员工拥有技术背景，这样可以保障我们在项目实施的各个环节（特别是售后服务），能第一时间为客户提供技术支持，让客户无后顾之忧。</p>
       </div>
     </div>
 
-    <!-- 品牌介绍 -->
+    <!-- 我们提供什么 -->
     <div class="brand-introduction-box">
-      <div class="client-container fn-clear">
-        <div class="brand-introduction-content">
-          <div class="brand-introduction-left">
-            <h4>品牌介绍</h4>
-            <img :src="brandIntroductionImg" alt="品牌介绍">
-          </div>
-          <span>MTA是Master of Training Administration的缩写，含义是培训管理专家，麦塔致力于为客户提供覆盖全学习场景式的在线教育解决方案。麦塔品牌，率先实现了移动化、平台化、知识化、智能化的学习管理模式，基于SaaS+移动互联+开发平台技术，可以无缝融入企业的业务流程，为用户提供一体化的培训学习解决方案。麦塔肩负着“改变互联网教育未来”的使命，持续创新、创造价值，与客户和合作伙伴共享共赢。</span>
-        </div>
-      </div>
+      <h4>我们提供什么</h4>
+      <ul>
+        <li>
+          <i></i>
+          <span>在线考试系统租赁/采购</span>
+        </li>
+        <li>
+          <i></i>
+          <span>在线培训系统租赁/采购</span>
+        </li>
+        <li>
+          <i></i>
+          <span>课件定制开发服务</span>
+        </li>
+        <li>
+          <i></i>
+          <span>行业通用类课程资源</span>
+        </li>
+      </ul>
     </div>
 
-    <!-- 企业发展历程 -->
-    <!--<div class="enterprise-development-box mta-hidden-xs">
-      <h4 class="client-title mb40">企业发展历程</h4>
-      <div class="client-container fn-clear">
-        <el-tabs v-model="activeName" class="enterprise-development-tab">
-          <el-tab-pane label="2008年-2014年" name="first">
-            <ul>
-              <li>
-                  <div><img :src="enterpriseDevImg1" alt="企业发展历程"></div>
-                  <p><i>3月</i><span>麦塔软件正式注册成立</span></p>
-                  <p><i>5月</i><span>公司课件开发部门组建完毕</span></p>
-              </li>
-              <li>
-                <div><img :src="enterpriseDevImg2" alt="企业发展历程"></div>
-                <p><i>5月</i><span>麦塔1.0考培系统发布</span></p>
-                <p><i>6月</i><span>正式进军企培行业</span></p>
-              </li>
-              <li>
-                <div><img :src="enterpriseDevImg3" alt="企业发展历程"></div>
-                <p><i>3月</i><span>与步步高展开合作</span></p>
-                <p><i>6月</i><span>麦塔网校版正式研发成功</span></p>
-              </li>
-              <li>
-                <div><img :src="enterpriseDevImg4" alt="企业发展历程"></div>
-                <p><i>3月</i><span>麦塔2.0产品发布</span></p>
-                <p><i>8月</i><span>成立全国推广事业部</span></p>
-              </li>
-            </ul>
-          </el-tab-pane>
-          <el-tab-pane label="2016年-现在" name="second">
-            <ul class="enterprise-second-ul">
-              <li>
-                <div><img :src="enterpriseDevImg5" alt="企业发展历程"></div>
-                <p><i>8月</i><span>麦塔3.0产品发布</span></p>
-                <p><i>12月</i><span>企业用户突破4万</span></p>
-              </li>
-              <li>
-                <div><img :src="enterpriseDevImg6" alt="企业发展历程"></div>
-                <p><i>7月</i><span>麦塔4.0产品发布</span></p>
-                <p><i>12月</i><span>课程开发时长超2万小时</span></p>
-              </li>
-              <li>
-                <div><img :src="enterpriseDevImg7" alt="企业发展历程"></div>
-                <p><i>4月</i><span>麦塔SaaS版产品发布</span></p>
-                <p><i>8月</i><span>企业用户已突破15万</span></p>
-              </li>
-              <li></li>
-            </ul>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-
-
-
-    </div>-->
 
-    <!-- 企业文化 -->
+    <!-- 我么你始终专注教育系统研发，更懂用户需求 -->
     <div class="corporate-culture-box">
-      <div class="client-container">
-        <h4 class="client-title mb40">企业文化</h4>
-        <ul>
-          <li><div><i></i><h5>核心价值观</h5><p>共同成长，相伴一生</p></div></li>
-          <li><div><i></i><h5>企业愿景</h5><p>成为一流的教育软件公司</p></div></li>
-          <li><div><i></i><h5>企业使命</h5><p>让学习变得更轻松</p></div></li>
-          <li><div><i></i><h5>服务标准</h5><p>只有客户的成功，才有我们的成功</p></div></li>
-        </ul>
-      </div>
+      <h4>我们始终专注教育系统研发</h4>
+      <ul>
+        <li><img src="#" alt=""></li>
+        <li><img src="#" alt=""></li>
+        <li><img src="#" alt=""></li>
+        <li><img src="#" alt=""></li>
+      </ul>
     </div>
 
 
-    <!-- 联系我们 -->
+    <!-- 地图 -->
     <div class="client-container">
       <div class="contact-us-box fn-clear">
-        <ul class="contact-container-box">
-          <h4>联系我们</h4>
-          <h5>咨询及商务合作</h5>
-          <li><i></i><span>400-052-2130</span></li>
-<!--          <li><i></i><span>1713483622/3205144194</span></li>-->
-          <li><i></i><span> service@llisoft.com</span></li>
-          <li><i></i><span>大连市沙河口区数码路北段25号201-2室</span></li>
-        </ul>
-        <img :src="contactUsImg" alt="联系我们" />
+        <img src="#" alt="背景图">
+        <img src="#" alt="地图" />
       </div>
     </div>
 
@@ -119,33 +71,22 @@
 </template>
 
 <script>
+  import {BannerImgs} from "@/defaultConfig";
+
   export default {
     name:     'introduction',
     layout:   'templateB',
-    asyncData({ store }) {
-      // 设置选中菜单
-      store.commit('setActiveNav', '/introduction');
+    async asyncData({$axios, store}) {
+      const arr = [
+        $axios.$post(`/home/banner/list`, {'code': BannerImgs.guanyuwomen}),
+      ];
+      const [res2] = await Promise.all(arr);
+      return {
+        bannerList: res2.data.data || [],
+      }
     },
     data() {
-      return {
-        // banner 图片
-        aboutUsBannerImg:    require(`~/static/images/client/aboutUs/aboutUs-banner-img.png`),
-        // 公司简介图片
-        companyProfileImg:    require(`~/static/images/client/aboutUs/company-profile-img.png`),
-        brandIntroductionImg: require(`~/static/images/client/aboutUs/aboutUs-logo.png`),
-        // 企业发展历程
-        enterpriseDevImg1:  require(`~/static/images/client/aboutUs/enterprise-development-img1.png`),
-        enterpriseDevImg2:  require(`~/static/images/client/aboutUs/enterprise-development-img2.png`),
-        enterpriseDevImg3:  require(`~/static/images/client/aboutUs/enterprise-development-img3.png`),
-        enterpriseDevImg4:  require(`~/static/images/client/aboutUs/enterprise-development-img4.png`),
-        enterpriseDevImg5:  require(`~/static/images/client/aboutUs/enterprise-development-img5.png`),
-        enterpriseDevImg6:  require(`~/static/images/client/aboutUs/enterprise-development-img6.png`),
-        enterpriseDevImg7:  require(`~/static/images/client/aboutUs/enterprise-development-img7.png`),
-        // 联系我们
-        contactUsImg:  require(`~/static/images/client/aboutUs/contact-us-img.png`),
-        // 企业发展历程默认tab页
-        activeName: 'first'
-      };
+      return {};
     },
     head(){
       return {

pages/news/_id.vue

@@ -10,6 +10,9 @@
         <p class="details-visits-box"><i></i><span>{{infoData.startTime}}</span><i type="visits"></i><span>{{infoData.visits}}</span>
         </p>
         <div class="client-content-box" v-html="infoData.content"></div>
+        <div class="client-link-json">
+          <a :href="item.url" v-for="item in linkJson">{{item.text}}</a>
+        </div>
         <div class="client-details-pagination">
           <a v-show="infoData.lastId" :href="`${baseUrl}/news/${infoData.lastId}`">
             <span class="mta-hidden-xs" @click.prevent="changeNews(infoData.lastId)" :title="'上一篇：'+infoData.lastName">上一篇：{{infoData.lastName}}</span>
@@ -58,10 +61,12 @@
         const res = await $axios.post(url, opt);
         const url2 = '/home/news/newest';
         const res2 = await $axios.post(url2);
-          console.log(res);
+        const linkJson = res.data.data['linkJson'] ? JSON.parse(res.data.data['linkJson']) : [];
+
         return {
           infoData:   res.data.data,
           newestData: res2.data.data.data,
+          linkJson
         };
       } catch (e) {
         return {};

pages/news/index.vue

@@ -44,6 +44,13 @@
       </div>
     </div>
 
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+
   </div>
 </template>
 

pages/product/caiWuGuanLi.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>财务管理</h3>
+      <p>加强财务队伍专注性，开创企业财务管理新局面</p>
+      <span>财务部</span>
+    </div>
+
+    <!--  文本框  -->
+    <div class="client-caiwu-text">
+      财务部主要负责企业的财务管理，主要只能是在本企业一定的整体目标下，
+      关于资本的购置，资本的融通和经营中现金流量，以及利润分配的管理。
+    </div>
+
+    <!--  岗位职责  -->
+    <div class="client-caiwu-gangwei">
+      <ul>
+        <li>
+          <i></i>
+          <span>财务制度的建设</span>
+        </li>
+        <li>
+          <i></i>
+          <span>财务规划与计划</span>
+        </li>
+        <li>
+          <i></i>
+          <span>现金出纳</span>
+        </li>
+        <li>
+          <i></i>
+          <span>日常会计核算</span>
+        </li>
+        <li>
+          <i></i>
+          <span>财务分析与报告</span>
+        </li>
+        <li>
+          <i></i>
+          <span>财务审计</span>
+        </li>
+      </ul>
+    </div>
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list">
+      <h4>部分课程列表</h4>
+      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <freeTrialBtn  myType="kaoshi"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+  </div>
+</template>
+
+<script>
+import mtaTable from "~/components/common/mtaTable";
+import videoDialog from "~/components/common/videoDialog";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import {BannerImgs} from "~/defaultConfig";
+/**
+ * @ 产品与服务 -> 课程资源 -> 财务管理
+ */
+export default {
+  name: "professionalQuality",
+  layout:   'templateB',
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.caiwuguanli}),
+    ]
+    const [res1] = await Promise.all(arr);
+    return {
+      bannerList: res1.data.data || [],
+    }
+  },
+  components: {
+    mtaTable, videoDialog,
+    freeTrialBtn,onlineInformationBtn},
+  data() {
+    return {
+      tableConfig: [
+        {
+          label: '课程名称',
+          key: 'name'
+        },
+        {
+          label: '使用行业',
+          key: 'hangye'
+        },
+        {
+          label: '使用人群',
+          key: 'renqun'
+        }
+      ],
+      tableData: [
+        {
+          name: '人际沟通： 如何更好地表达自己',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '职场生活游刃有余',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '个人形象管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '高效沟通',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+      ],
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/product/chanPinYunYing.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>产品运营</h3>
+      <p>紧随市场趋势，接轨企业需求，获得产品运营技能</p>
+      <span>产品部、运营部</span>
+    </div>
+
+    <!--  岗位职责  -->
+    <div class="client-gangwei-box">
+      <h4>岗位职责</h4>
+      <ul>
+        <li>
+          <i></i>
+          <span>
+            需求管理
+          </span>
+        </li>
+        <li>
+          <i></i>
+          <span>
+            产品生命周期管理
+          </span>
+        </li>
+        <li>
+          <i></i>
+          <span>
+            数据分析
+          </span>
+        </li>
+        <li>
+          <i></i>
+          <span>
+            项目写作
+          </span>
+        </li>
+        <li>
+          <i></i>
+          <span>
+            市场调研
+          </span>
+        </li>
+        <li>
+          <i></i>
+          <span>
+            团队管理
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <!--  能力提升  -->
+    <div class="client-nengli-box">
+      <h4>能力提升</h4>
+      <img src="#" alt="能力提升">
+    </div>
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list">
+      <h4>部分课程列表</h4>
+      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <freeTrialBtn  myType="kaoshi"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import mtaTable from "~/components/common/mtaTable";
+import videoDialog from "~/components/common/videoDialog";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import {BannerImgs} from "~/defaultConfig";
+/**
+ * @ 产品与服务 -> 课程资源 -> 产品运营
+ */
+export default {
+  name: "professionalQuality",
+  layout:   'templateB',
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.chanpinyunying}),
+    ]
+    const [res1] = await Promise.all(arr);
+    return {
+      bannerList: res1.data.data || [],
+    }
+  },
+  components: {
+    mtaTable, videoDialog,
+    freeTrialBtn,onlineInformationBtn},
+  data() {
+    return {
+      tableConfig: [
+        {
+          label: '课程名称',
+          key: 'name'
+        },
+        {
+          label: '使用行业',
+          key: 'hangye'
+        },
+        {
+          label: '使用人群',
+          key: 'renqun'
+        }
+      ],
+      tableData: [
+        {
+          name: '助你获得客户资源（运营实战课）',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+        {
+          name: '不再为流量发愁',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+        {
+          name: '5G开启新互联网时代',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+        {
+          name: '创新思维课',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+      ],
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/product/courseCustom.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告图位置  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>个性定制优质课程</h3>
+      <p>未用户打造专业优质的课程定制服务</p>
+    </div>
+
+    <!--  专业团队满足客户需求  -->
+    <div class="platform-products-experience client-container">
+      <h4> 专业团队满足客户需求 </h4>
+      <p>服务企业 <i>100+</i>，累计开发课时 <i>30,000+</i></p>
+      <p>青谷是国内专业、成熟的课程设计、开发团队、拥有丰富的电子课程制作经验，
+        业务方向包括教学设计体验、动画设计、视频拍摄等，涉及的行业有教育培训、零售连锁、机械制造、金融保险等。</p>
+      <ul>
+        <li>
+          <img src="#">
+          <span>员工技能培训</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>中小学教育课程</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>高校专业理论知识</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>领导干部培训</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>企业宣传片</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>语言类学习培训</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>专家讲座数字化</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>公务员理论学习</span>
+        </li>
+      </ul>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn"/>
+      </div>
+    </div>
+
+    <!--  动画类课程  -->
+    <div class="platform-animation">
+      <h4> 动画类课程 </h4>
+      <p>动画类课程不受限于人员和场地，比较方便、生动形象地呈现知识内容。
+        主要包含：图文课程、情景动画课程、交互式课程、三分屏课程、SCORM框架式课程。适用各种行业：</p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '生产制造业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '信息通讯业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '汽车销售业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+
+        </a>
+        <onlineInformationBtn class="client-default-Btn"/>
+      </div>
+    </div>
+
+    <!--  视频类课程  -->
+    <div class="platform-animation">
+      <h4> 视频类课程 </h4>
+      <p>视频类课程可以直观形象地呈现知识内容。主要包含有：企业宣传片、实验操作课程、课堂实录课程、会议访谈等等。
+        动画类课程也可以导出成MP4视频格式文件呈现。适用各种行业：
+      </p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: '能源化工业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '管理培训业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '服装零售业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+
+        </a>
+        <onlineInformationBtn class="client-default-Btn"/>
+      </div>
+    </div>
+
+    <!--  H5类课程  -->
+    <div class="platform-animation">
+      <h4> H5类课程 </h4>
+      <p>通用HTML5技术、将图文、互动测试、动画视频、游戏等多种形式结合在一起，课程交互性强、学员参与程度高。主要包含有：图文H5、游戏H5等。
+      </p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+
+        </a>
+        <onlineInformationBtn class="client-default-Btn"/>
+      </div>
+    </div>
+
+    <!--  PPT定制及美化  -->
+    <div class="platform-animation">
+      <h4> PPT定制及美化 </h4>
+      <p>
+        现在PPT正成为人们工作生活的重要组成部分，在工作汇报、企业宣传、产品推介、婚礼庆典、项目竞标、管理咨询等领域发挥重大的作用。
+        青谷曾多次为客户在各种大赛中取得前三甲的优异成绩。
+      </p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn"/>
+      </div>
+    </div>
+
+    <!--  新闻资讯  -->
+    <newsComp2 :newsData="topCarousels"></newsComp2>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
+
+  </div>
+</template>
+
+<script>
+import applyBtn from "~/components/common/applyBtn";
+import applicationDialog from "~/components/common/applicationDialog";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import videoDialog from "~/components/common/videoDialog";
+import videoCard from "~/components/common/videoCard"
+import {BannerImgs, classifys} from "~/defaultConfig"
+
+/**
+ * @ 产品与服务 -> 课程定制
+ */
+export default {
+  name: "courseCustom",
+  layout: 'templateB',
+  components: { onlineInformationBtn, newsComp2, chanPinTiYan, videoDialog, videoCard, applyBtn, applicationDialog},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/news/carousel`, {
+        'newsClassifyId': classifys.kechengdingzhi.classify,
+        'keyword': classifys.kechengdingzhi.keyword
+      }),
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.kechengdingzhi}),
+    ]
+    const [res1, res2] = await Promise.all(arr);
+    return {
+      topCarousels: res1.data.data || [],
+      bannerList: res2.data.data || [],
+    }
+  },
+  head() {
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name: 'description',
+          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      curVideo: '',
+      visible: false,
+      telDl: false,
+    }
+  },
+  methods: {
+    showVideo({url}) {
+      this.curVideo = url;
+      this.visible = true;
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/courseCustom',}});
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.client-exam-page {
+  margin-top: 70px;
+}
+
+.client-banner-box {
+  height: 200px;
+  background: green;
+  text-align: center;
+  color: #fff;
+}
+
+.btns-group {
+  display: flex;
+  text-align: center;
+
+  .client-default-Btn {
+    width: 120px;
+    margin-right: 20px;
+  }
+}
+
+.platform-animation {
+  ul {
+    font-size: 16px;
+  }
+}
+</style>

pages/product/courseResource.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!--  广告位置  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${ bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>青谷，专业的企业培训课程资源解决方案供应商</h3>
+      <p>基于岗位胜任力模型，提供通用岗位培训方案，满足企业内训需求</p>
+    </div>
+
+    <!--  企业通用岗位培训方案  -->
+    <div class="platform-animation">
+      <h4 class="client-title">企业通用岗位培训方案</h4>
+      <ul>
+        <li @click="goChildPage('zhiYeSuYang')">
+          <i></i>
+          <span>职业素养</span>
+        </li>
+        <li @click="goChildPage('lingDaoNengLi')">
+          <i></i>
+          <span>领导能力</span>
+        </li>
+        <li @click="goChildPage('renLiZiYuan')">
+          <i></i>
+          <span>人力资源</span>
+        </li>
+        <li @click="goChildPage('shiCHangYingXiao')">
+          <i></i>
+          <span>市场营销</span>
+        </li>
+        <li @click="goChildPage('xingZhengGuanLi')">
+          <i></i>
+          <span>行政管理</span>
+        </li>
+        <li @click="goChildPage('caiWuGuanLi')">
+        <i></i>
+          <span>财务管理</span>
+        </li>
+        <li @click="goChildPage('keFuFuWu')">
+          <i></i>
+          <span>客服服务</span>
+        </li>
+        <li @click="goChildPage('chanPinYunYing')">
+          <i></i>
+          <span>产品运营</span>
+        </li>
+        <li @click="goChildPage('shengChanCaiGou')">
+          <i></i>
+          <span>生产采购</span>
+        </li>
+
+      </ul>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+    <!--  为企业培训打造学习矩阵  -->
+    <div class="platform-animation">
+      <h4>为企业培训打造学习矩阵</h4>
+      <ul>
+        <li>
+          <i></i>
+          <span>课程总数近 <i>5000门</i></span>
+        </li>
+        <li>
+          <i></i>
+          <span>涵盖 <i>2000个</i>知识要点</span>
+        </li>
+        <li>
+          <i></i>
+          <span>提供 <i>9大</i>通用岗位培训方案</span>
+        </li>
+        <li>
+          <i></i>
+          <span>课程资源 <i>每月</i>持续更新</span>
+        </li>
+      </ul>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+    <!--  课程内容形式多样  -->
+    <div class="platform-animation">
+      <h4>为企业培训打造学习矩阵</h4>
+      <ul>
+        <li>
+          <video-card :card-data="{title: 'FLASH动画课程',
+          des:'主要以图文动画的形式表现教学者的作用和教与学之间的关系，从而改变学习的本质',
+          url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '视频课程',
+          des:'把教师视频与PowerPoint课件一并摄制下来，生成为视频课件',
+          url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '名师讲堂',
+          des:'各行各业讲师汇聚一堂，为不同专属领域打造明星级课堂',
+          url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+    </div>
+
+    <!--  新闻咨询  -->
+    <newsComp2 :newsData="topCarousels"></newsComp2>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
+  </div>
+</template>
+
+<script>
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import videoDialog from "~/components/common/videoDialog";
+import videoCard from "~/components/common/videoCard";
+import {BannerImgs, classifys} from "~/defaultConfig";
+
+/**
+ * @ 产品与服务 -> 课程资源
+ */
+
+export default {
+  name: "courseResource",
+  layout:   'templateB',
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  components: {applyBtn, onlineInformationBtn, newsComp2, chanPinTiYan, videoDialog, videoCard, applicationDialog},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.kechengziyuan.classify, 'keyword': classifys.kechengziyuan.keyword}),
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.tongyongkecheng}),
+    ]
+    const [res1, res2] = await Promise.all(arr);
+    return {
+      topCarousels: res1.data.data || [],
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      curVideo: '',
+      visible: false,
+      telDl: false,
+    }
+  },
+  methods: {
+    goChildPage(key) {
+      this.$router.push({ path: `/product/${key}` })
+    },
+    showVideo({url}) {
+      this.curVideo = url;
+      this.visible = true;
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: 'shouye',}});
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.client-exam-page {
+  margin-top: 70px;
+}
+
+.client-banner-box {
+  height: 200px;
+  background: green;
+  text-align: center;
+  color: #fff;
+}
+
+.btns-group {
+  display: flex;
+  text-align: center;
+  .client-default-Btn {
+    width: 120px;
+    margin-right: 20px;
+  }
+}
+
+.platform-animation {
+  ul {
+    font-size: 16px;
+  }
+}
+</style>

pages/product/exam.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>在线考试就用青谷</h3>
+      <p>一款简单好用的考试系统</p>
+      <liaoJieGengDuo/>
+    </div>
+
+    <!--  产品体验  -->
+    <div class="platform-products-experience client-container">
+      <h4 class="client-title">产品体验</h4>
+      <p>无序注册，即可免费体验青谷在线考试系统</p>
+      <!--   多端体验   -->
+      <chanPinTiYan></chanPinTiYan>
+
+    </div>
+
+    <!--  产品优势  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">产品优势</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <h5>青谷云在线考试服务</h5>
+                <p class="p-before-circle">考试系统使用方便,操作简单，节约成本，无需独立开发</p>
+                <p class="p-before-circle">在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务</p>
+                <p class="p-before-circle">支持万人同时在线，超高并发安全稳定运行</p>
+                <div>
+                  <a class="client-default-Btn">
+                    <freeTrialBtn myType="kaoshi"/>
+                  </a>
+                  <onlineInformationBtn class="client-default-Btn" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>强大的人员管理和考试功能</h5>
+                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决企业人员多且分散的问题</p>
+                <p class="p-before-circle">六大常用题型，批量导入；固定组卷，随机组卷，固定+随机综合组卷，涵盖错题，按难度程度抽题</p>
+                <p class="p-before-circle">支持客观题自动判断，主观题后台人工阅卷。有效减少人力成本，提升时间小楼，降低费用成本</p>
+                <div><a rel="nofollow" class="client-default-Btn">
+                  <freeTrialBtn myType="kaoshi"/>
+                </a><span class="client-default-Btn">
+                  <onlineInformationBtn/>
+                </span></div>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="严格的考试监控防作弊体系"/>
+              <div class="products-services-content">
+                <h5>全流程AI监考防作弊体系</h5>
+                <p class="p-before-circle">人脸识别身份核验成功方可考试，防替考作弊行为</p>
+                <p class="p-before-circle">多屏监控画面展现考试全过程，考生的面部表情、一举一动在后台实时呈现</p>
+                <p class="p-before-circle">随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制</p>
+                <div><a rel="nofollow" class="client-default-Btn">
+                  <freeTrialBtn myType="kaoshi"/>
+                </a><span class="client-default-Btn">
+                  <onlineInformationBtn/>
+                </span></div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>多端口个性化设置随心选择</h5>
+                <p class="p-before-circle">支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统</p>
+                <p class="p-before-circle">与三方平台无缝集成、支持OA、HR、ERP、教务、微信、钉钉等应用的对接</p>
+                <p class="p-before-circle">PC、APP、H5统一管理，数据互通，充分利用水平化时间，塑造学员高频率使用习惯</p>
+                <div><a rel="nofollow" class="client-default-Btn">
+                  <freeTrialBtn myType="kaoshi"/>
+                </a><span class="client-default-Btn">
+                  <onlineInformationBtn/>
+                </span></div>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  更多辅助功能  -->
+    <div>
+      <h3>更多辅助功能</h3>
+      <ul>
+        <li>
+          <img src="#">
+          <span>报名审核</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>发布证书</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>数据统计</span>
+        </li>
+        <li>
+          <img src="#">
+          <span>断电续考</span>
+        </li>
+      </ul>
+
+    </div>
+
+    <!--  新闻资讯  -->
+    <newsComp2 :newsData="topCarousels"></newsComp2>
+  </div>
+</template>
+
+<script>
+import liaoJieGengDuo from "~/components/common/liaoJieGengDuo";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import {BannerImgs, classifys} from "~/defaultConfig"
+
+/**
+ * @ 产品与服务 -> 考试系统
+ */
+export default {
+  name: "exam",
+  layout: 'templateB',
+  components: {liaoJieGengDuo, freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.kaoshixitong.classify, 'keyword': classifys.kaoshixitong.keyword}),
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.kaoshixitong}),
+    ]
+    const [res1, res2] = await Promise.all(arr);
+    return {
+      topCarousels: res1.data.data || [],
+      bannerList: res2.data.data || [],
+    }
+  },
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      youkeFlag: false,// 控制游客系统是否维护中
+      SystemWidthFlag: false,
+      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,
+      },
+    }
+  },
+  methods: {
+    // 游客系统试用
+    ykFreeTrial() {
+      if (this.youkeFlag) {
+        // 没升级
+        window.open('https://youkeksc.mtavip.com/kscmdist/#/youke')
+      } else {
+        // 升级中
+        this.$message({customClass: 'phone-message-box', type: 'warning', message: '系统升级中，请稍后再试...'});
+      }
+    },
+    // 判断是否为移动端
+    isH5() {
+      var browserWidth = document.documentElement.clientWidth;
+      if (browserWidth <= 768) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    // 鼠标移入
+    enterCode() {
+      if (this.youkeFlag) {
+        this.$refs.codeBtn.style.bottom = '90px';
+      } else {
+        this.$refs.codeBtn.style.bottom = '0';
+      }
+    },
+    // 鼠标移出
+    leaveCode() {
+      this.$refs.codeBtn.style.bottom = '305px';
+    },
+    // 考试体验按钮
+    KsTyBtn(btnUrl) {
+      if (this.youkeFlag) {
+        if (this.isH5()) {
+          this.$router.push({name: 'copyUrl', query: {url: btnUrl,}});
+        } else {
+          window.open(btnUrl);
+        }
+      } else {
+        if (this.isH5()) {
+          // 升级中
+          this.$message({customClass: 'phone-message-box', type: 'warning', message: '系统升级中，请稍后再试...'});
+        } else {
+          this.systemMaintainDl = true;
+        }
+      }
+    },
+  },
+  created() {
+    // 页面初始化
+    this.$axios.$post('/home/youke/stop').then(res => {
+      if (res.data === '1') {
+        this.youkeFlag = false;
+      } else {
+        this.youkeFlag = true;
+      }
+    });
+  },
+}
+</script>
+
+<style scoped>
+.client-exam-page {
+  margin-top: 70px;
+}
+
+.client-banner-box {
+  height: 200px;
+  background: green;
+  text-align: center;
+  color: #fff;
+}
+</style>

pages/product/keFuFuWu.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>产品运营</h3>
+      <p>紧随市场趋势，接轨企业需求，获得产品运营技能</p>
+      <span>产品部、运营部</span>
+    </div>
+
+    <!--  岗位职责  -->
+    <div class="client-gangwei-box">
+      <h4>岗位职责</h4>
+      <ul>
+        <li>
+          <i></i>
+          <span>客户咨询工作</span>
+        </li>
+        <li>
+          <i></i>
+          <span>记录客户信息</span>
+        </li>
+        <li>
+          <i></i>
+          <span>处理客户投诉</span>
+        </li>
+        <li>
+          <i></i>
+          <span>后期回访工作</span>
+        </li>
+        <li>
+          <i></i>
+          <span>收集客户意见及建议</span>
+        </li>
+        <li>
+          <i></i>
+          <span>维护企业形象</span>
+        </li>
+      </ul>
+    </div>
+
+    <!--  能力提升  -->
+    <div class="client-nengli-box">
+      <h4>能力提升</h4>
+      <img src="#" alt="能力提升">
+    </div>
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list">
+      <h4>部分课程列表</h4>
+      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <freeTrialBtn  myType="kaoshi"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mtaTable from "~/components/common/mtaTable";
+import videoDialog from "~/components/common/videoDialog";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import {BannerImgs} from "~/defaultConfig";
+/**
+ * @ 产品与服务 -> 课程资源 -> 课程服务
+ */
+export default {
+  name: "professionalQuality",
+  layout:   'templateB',
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.kefufuwu}),
+    ]
+    const [res1] = await Promise.all(arr);
+    return {
+      bannerList: res1.data.data || [],
+    }
+  },
+  components: {
+    mtaTable, videoDialog,
+    freeTrialBtn,onlineInformationBtn},
+  data() {
+    return {
+      tableConfig: [
+        {
+          label: '课程名称',
+          key: 'name'
+        },
+        {
+          label: '使用行业',
+          key: 'hangye'
+        },
+        {
+          label: '使用人群',
+          key: 'renqun'
+        }
+      ],
+      tableData: [
+        {
+          name: '沟通中如何聆听',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+        {
+          name: '处理顾客抱怨的技巧',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+        {
+          name: '如何增强对客户的影响力',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+        {
+          name: '客户服务价值的四个层次',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+        {
+          name: '提升客户服务的三项技能',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+        {
+          name: '以客户为中心',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '客户专员'
+        },
+      ],
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/product/lingDaoNengLi.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>领导能力</h3>
+      <p>针对企业各级管理人员,设置体系化的领导力培训方案</p>
+      <span>基层、中层、高层管理者</span>
+    </div>
+
+    <!--  学习受益  -->
+    <div class="client-xuexishouyi-box">
+      <h4 class="client-title">学习收益</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <div class="products-services-content">
+                <h5>能力提升</h5>
+                <p><span>角色定位：</span><pingfen value="5"></pingfen></p>
+                <p><span>变革管理：</span><pingfen value="5"></pingfen></p>
+                <p><span>人际关系：</span><pingfen value="5"></pingfen></p>
+                <p><span>能力修炼：</span><pingfen value="5"></pingfen></p>
+                <p><span>部署培养：</span><pingfen value="5"></pingfen></p>
+                <p><span>识人用人：</span><pingfen value="5"></pingfen></p>
+                <p><span>战略执行：</span><pingfen value="5"></pingfen></p>
+              </div>
+              <img src="#" alt="能力提升">
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+              <div class="products-services-content">
+                <h5>掌握知识</h5>
+                <p class="p-before-circle">明确企业管理者的角色定位及岗位使命</p>
+                <p class="p-before-circle">针对企业管理中的难点及关键点，掌握相应的处理策略解决问题</p>
+                <p class="p-before-circle">全面提升企业管理者的岗位必备能力</p>
+                <p class="p-before-circle">了解团队管理及引领团队变革的关键点</p>
+                <p class="p-before-circle">帮助管理者掌握部署培养的方法及战略执行</p>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list">
+      <h4>部分课程列表</h4>
+      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <freeTrialBtn  myType="kaoshi"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+  </div>
+</template>
+
+<script>
+import mtaTable from "~/components/common/mtaTable";
+import videoDialog from "~/components/common/videoDialog";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import pingfen from "~/components/common/pingfen";
+import {BannerImgs} from "~/defaultConfig";
+
+/**
+ * @ 产品与服务 -> 课程资源 -> 领导能力
+ */
+export default {
+  name: "professionalQuality",
+  layout:   'templateB',
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.lingdaonengli}),
+    ]
+    const [res1] = await Promise.all(arr);
+    return {
+      bannerList: res1.data.data || [],
+    }
+  },
+  components: {
+    mtaTable, videoDialog,
+    freeTrialBtn,onlineInformationBtn, pingfen},
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      tableConfig: [
+        {
+          label: '课程名称',
+          key: 'name'
+        },
+        {
+          label: '使用行业',
+          key: 'hangye'
+        },
+        {
+          label: '使用人群',
+          key: 'renqun'
+        }
+      ],
+      tableData: [
+        {
+          name: '职场沟通-这样表达更有效',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '基层领导'
+        },
+        {
+          name: '教练型领导力',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '基层领导'
+        },
+        {
+          name: '如何塑造领导魅力',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '基层领导'
+        },
+        {
+          name: '管理者的四种角色定位',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '中层领导'
+        },
+        {
+          name: '团队沟通管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '中层领导'
+        },
+        {
+          name: '激活团队六项实战技能',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '中层领导'
+        },
+        {
+          name: '弱势管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '高层领导'
+        },
+        {
+          name: '阿米巴经营：让员工比你操心更多',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '高层领导'
+        },
+        {
+          name: 'NLP总裁商战智慧',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '高层领导'
+        },
+        {
+          name: '领袖兵法',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '高层领导'
+        },
+      ],
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/product/peixun.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="client-platform-page client-train-page">
+    <!--  培训平台页 banner栏  -->
+    <div class="client-platform-banner">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <span class="client-platform-content">
+         <h3>在线考试就用青谷</h3>
+         <p>一款简单好用的考试系统</p>
+         <liaoJieGengDuo/>
+      </span>
+    </div>
+
+    <!--  产品体验  -->
+    <div class="platform-products-experience client-container">
+      <h4 class="client-title">产品体验</h4>
+      <p>无序注册，即可免费体验青谷在线考试系统</p>
+      <!--   多端体验   -->
+      <chanPinTiYan></chanPinTiYan>
+    </div>
+
+    <!--  直播系列  -->
+    <div class="platform-products-experience">
+      <h4  class="client-title"> [青谷] 学测考练一站式在线培训系统 </h4>
+      <img src="#">
+    </div>
+
+    <!--  功能强大的培训系统  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">功能强大的培训系统</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <h5>一键搭建移动端和PC端专属培训平台</h5>
+                <p>只需一键注册青谷账号，即可拥有自己的专属培训平台。PC端与移动端无缝连接；全面支持安卓、IOS等操作系统；
+                支持APP和微信H5学习模式；为学习者提供真正的随地的、个性化的、开放式的学习服务。</p>
+                <div><a rel="nofollow" class="client-default-Btn">
+                  <freeTrialBtn myType="kaoshi"/>
+                </a><span class="client-default-Btn">
+                  <onlineInformationBtn/>
+                </span></div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>丰富的文本/音频/视频课程内容上传服务</h5>
+                <p> 全面支持本地文本PDF、Word、Excel、PPT，音频MP3，视频MP4的课程内容上传服务；
+                  同时还支持视频服务器链接、第三方链接的课程内容上传服务。 </p>
+                <div><a rel="nofollow" class="client-default-Btn">
+                  <freeTrialBtn myType="kaoshi"/>
+                </a><span class="client-default-Btn">
+                  <onlineInformationBtn/>
+                </span></div>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="严格的考试监控防作弊体系"/>
+              <div class="products-services-content">
+                <h5>无延迟、高互动、全终端的线上直播学习</h5>
+                <p>
+                  线上直播课程支持录播视频、PPT直播、桌面共享直播等类型，满足讲师个性化直播场景需求；
+                  播放终端全覆盖，学员可通过PC/手机/平板等设备，随时随地观看线上直播学习。
+                </p>
+                <div><a rel="nofollow" class="client-default-Btn">
+                  <freeTrialBtn myType="kaoshi"/>
+                </a><span class="client-default-Btn">
+                  <onlineInformationBtn/>
+                </span></div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>互动助学工具提升学员活跃度</h5>
+                <p>
+                  自定义导入题库和试卷库，实现考试、作业本、练习及随堂测验，强化学习效果；
+                  可创建每日练习、日常作业、随堂考试等玩法，形成督学玩法。提高学员活跃度。
+                </p>
+                <div><a rel="nofollow" class="client-default-Btn">
+                  <freeTrialBtn myType="kaoshi"/>
+                </a><span class="client-default-Btn">
+                  <onlineInformationBtn/>
+                </span></div>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  青谷在线培训系统四大优势  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">青谷在线培训系统四大优势</h4>
+      <ul>
+        <li>
+          <div class="card-container">
+            <h3>课程支持</h3>
+            <i></i>
+            <p>提供丰富的企业通用课程资源，助力企业快速搭建企业培训体系</p>
+          </div>
+        </li>
+        <li>
+          <div class="card-container">
+            <h3>服务保障</h3>
+            <i></i>
+            <p>完善的服务支持体系，7*12小时1对1在线为您解答指导问题</p>
+          </div>
+        </li>
+        <li>
+          <div class="card-container">
+            <h3>多种部署方式</h3>
+            <i></i>
+            <p>公有云、私有云、本地服务器部署，根据需求随心选择</p>
+          </div>
+        </li>
+        <li>
+          <div class="card-container">
+            <h3>安全保障</h3>
+            <i></i>
+            <p>采用多层次多安全防护措施，使系统最大限度地不被黑客和有意破坏者攻击</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  新闻资讯  -->
+    <newsComp2 :newsData="topCarousels"></newsComp2>
+
+  </div>
+</template>
+
+<script>
+import liaoJieGengDuo from "~/components/common/liaoJieGengDuo";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import {BannerImgs , classifys} from "~/defaultConfig"
+/**
+ * @ 产品与服务 -> 培训系统
+ */
+export default {
+  name: "cultivate",
+  layout: 'templateB',
+  components: {liaoJieGengDuo, chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.peixunxitong.classify,'keyword': classifys.peixunxitong.keyword}),
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.peixunxitong}),
+    ];
+    const [res1, res2] = await Promise.all(arr);
+    return {
+      topCarousels: res1.data.data || [],
+      bannerList: res2.data.data || [],
+    }
+  },
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  methods: {
+    clickBanner(url) {
+      if (url) {
+        window.open(url)
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.client-platform-page {
+  margin-top: 80px;
+}
+.client-platform-banner {
+  position: relative;
+}
+.client-platform-content {
+  color: #fff;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+}
+</style>

pages/product/renLiZiYuan.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>人力资源</h3>
+      <p>以职位架构为基础，搭建企业人资资源培训体系</p>
+      <span><i></i> 人力资源部 </span>
+    </div>
+
+    <!--  学习收益  -->
+    <div class="client-xuexishouyi-box">
+      <h4 class="client-title">学习收益</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <div class="products-services-content">
+                <h5>能力提升</h5>
+                <p><span>角色定位：</span> <pingfen value="5"></pingfen></p>
+                <p><span>能力修炼：</span> <pingfen value="5"></pingfen></p>
+                <p><span>情商管理：</span> <pingfen value="5"></pingfen></p>
+                <p><span>识人用人：</span> <pingfen value="5"></pingfen></p>
+                <p><span>团队管理：</span> <pingfen value="5"></pingfen></p>
+                <p><span>招聘面试：</span> <pingfen value="5"></pingfen></p>
+                <p><span>人才管理：</span> <pingfen value="5"></pingfen></p>
+              </div>
+              <img src="#" alt="能力提升">
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>掌握知识</h5>
+                <p class="p-before-circle">明确人力资源的角色定位及岗位使命</p>
+                <p class="p-before-circle">针对人力资源管理中的难点及关键点，掌握相应的处理策略解决问题</p>
+                <p class="p-before-circle">了解不同性格的团队成员的管理方式，提高员工管理能力</p>
+                <p class="p-before-circle">掌握人力资源规划、招聘面试、人才管理等日常业务工作的难点及关键点</p>
+                <p class="p-before-circle">帮助人力资源管理者部署培养的方法及战略执行</p>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list">
+      <h4>部分课程列表</h4>
+      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <freeTrialBtn  myType="kaoshi"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+  </div>
+</template>
+
+<script>
+import mtaTable from "~/components/common/mtaTable";
+import videoDialog from "~/components/common/videoDialog";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import {BannerImgs} from "~/defaultConfig";
+
+/**
+ * @ 产品与服务 -> 课程资源 -> 人力资源
+ */
+export default {
+  name: "professionalQuality",
+  layout:   'templateB',
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.renliziyuan}),
+    ]
+    const [res1] = await Promise.all(arr);
+    return {
+      bannerList: res1.data.data || [],
+    }
+  },
+  components: {
+    mtaTable, videoDialog,
+    freeTrialBtn,onlineInformationBtn},
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      tableConfig: [
+        {
+          label: '课程名称',
+          key: 'name'
+        },
+        {
+          label: '使用行业',
+          key: 'hangye'
+        },
+        {
+          label: '使用人群',
+          key: 'renqun'
+        }
+      ],
+      tableData: [
+        {
+          name: '招聘与面试技巧',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '人力专员'
+        },
+        {
+          name: '校园招聘实操训练营',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '人力专员'
+        },
+        {
+          name: '面试官的精准识人指南',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '人力专员'
+        },
+        {
+          name: '薪酬福利管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '人力经理'
+        },
+        {
+          name: '人力资源转型-HRBP的关键方法和实践演练',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '人力经理'
+        },
+        {
+          name: '全面掌握胜任力模型',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '人力经理'
+        },
+        {
+          name: '面试其实就是一场讲故事大赛',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '人力经理'
+        },
+        {
+          name: 'HR入职恳谈',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '人力经理'
+        },
+        {
+          name: '薪酬体系设计全解',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '人力总监'
+        },
+        {
+          name: '实战课-从人力资源到团队资本',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '人力总监'
+        },
+      ],
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.client-exam-page {
+  margin-top: 70px;
+}
+
+.client-banner-box {
+  height: 200px;
+  background: green;
+  text-align: center;
+  color: #fff;
+}
+.btns-group {
+  display: flex;
+  text-align: center;
+  .client-default-Btn {
+    width: 120px;
+    margin-right: 20px;
+  }
+}
+</style>

pages/product/shengCanCaiGou.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>生产采购</h3>
+      <p>理论讲解、实战剖析，指导团队落地实战</p>
+      <span><i></i> 生产部门、采购部门</span>
+    </div>
+
+    <!--  岗位职责  -->
+    <div class="client-gangwei-box">
+      <li>
+        <i></i>
+        <span>生产计划管理</span>
+      </li>
+      <li>
+        <i></i>
+        <span>生产质量管理</span>
+      </li>
+      <li>
+        <i></i>
+        <span>生产安全管理</span>
+      </li>
+      <li>
+        <i></i>
+        <span>生产团队建设</span>
+      </li>
+      <li>
+        <i></i>
+        <span>生产现场管理</span>
+      </li>
+      <li>
+        <i></i>
+        <span>生产设备管理</span>
+      </li>
+      <li>
+        <i></i>
+        <span>制定采购计划</span>
+      </li>
+      <li>
+        <i></i>
+        <span>采购制度建立</span>
+      </li>
+      <li>
+        <i></i>
+        <span>采购成本把控</span>
+      </li>
+      <li>
+        <i></i>
+        <span>供应商管理</span>
+      </li>
+      <li>
+        <i></i>
+        <span>采购团队建设</span>
+      </li>
+    </div>
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list">
+      <h4>部分课程列表</h4>
+      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <freeTrialBtn  myType="kaoshi"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+  </div>
+</template>
+
+<script>
+import mtaTable from "~/components/common/mtaTable";
+import videoDialog from "~/components/common/videoDialog";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import {BannerImgs} from "~/defaultConfig";
+/**
+ * @ 产品与服务 -> 课程资源 -> 生产采购
+ */
+export default {
+  name: "professionalQuality",
+  layout:   'templateB',
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.shengcancaigou}),
+    ]
+    const [res1] = await Promise.all(arr);
+    return {
+      bannerList: res1.data.data || [],
+    }
+  },
+  components: {
+    mtaTable, videoDialog,
+    freeTrialBtn,onlineInformationBtn},
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      tableConfig: [
+        {
+          label: '课程名称',
+          key: 'name'
+        },
+        {
+          label: '使用行业',
+          key: 'hangye'
+        },
+        {
+          label: '使用人群',
+          key: 'renqun'
+        }
+      ],
+      tableData: [
+        {
+          name: '人际沟通： 如何更好地表达自己',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '职场生活游刃有余',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '个人形象管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '高效沟通',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+      ],
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.client-exam-page {
+  margin-top: 70px;
+}
+
+.client-banner-box {
+  height: 200px;
+  background: green;
+  text-align: center;
+  color: #fff;
+}
+.btns-group {
+  display: flex;
+  text-align: center;
+.client-default-Btn {
+  width: 120px;
+  margin-right: 20px;
+}
+}
+
+</style>

pages/product/shiChangYingXiao.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>市场营销</h3>
+      <p>从专员到经理，为企业龙头部门全面赋能</p>
+      <span>市场部、销售部</span>
+    </div>
+
+    <!--  市场部 销售部  -->
+    <div class="client-shichang-xiaoshou">
+      <div>
+        <span @click="changeStatus('shichang')" :class="{active: curActive}">市场部</span>
+        <span @click="changeStatus('xiaoshou')" :class="{active: !curActive}">销售部</span>
+      </div>
+
+      <p v-if="curActive">
+        市场部是销售决策部门信息的提供者和参谋，是把产品、服务信息传达给目标客户的企划者和执行者。
+        在变幻莫测的市场上，市场部为企业辩路、寻路、带路，对企业的发展起着至关重要的作用。
+      </p>
+
+      <p v-else>
+        销售部是以产品销售为主要工作的部门。负责总体的营销活动，决定公司的营销策略和措施，
+        并对营销工作进行评估和监控，包括公共关系、销售、客户服务等。
+      </p>
+    </div>
+
+    <!--  岗位职责  -->
+    <div class="client-gangwei-box">
+      <h4>岗位职责</h4>
+
+      <ul v-if="curActive">
+        <li>
+          <i></i>
+          <span>策划市场推广方案</span>
+        </li>
+        <li>
+          <i></i>
+          <span>开展市场调研活动</span>
+        </li>
+        <li>
+          <i></i>
+          <span>品牌推广与运营</span>
+        </li>
+        <li>
+          <i></i>
+          <span>计划拓展市场预算</span>
+        </li>
+        <li>
+          <i></i>
+          <span>建立媒体运营矩阵</span>
+        </li>
+        <li>
+          <i></i>
+          <span>协助销售部门工作</span>
+        </li>
+      </ul>
+
+      <ul v-else>
+        <li>
+          <i></i>
+          <span>制定销售计划</span>
+        </li>
+        <li>
+          <i></i>
+          <span>销售信息收集</span>
+        </li>
+        <li>
+          <i></i>
+          <span>客户关系管理</span>
+        </li>
+        <li>
+          <i></i>
+          <span>严守职业道德</span>
+        </li>
+        <li>
+          <i></i>
+          <span>销售费用控制</span>
+        </li>
+        <li>
+          <i></i>
+          <span>协助市场开发</span>
+        </li>
+      </ul>
+    </div>
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list">
+      <h4>部分课程列表</h4>
+
+      <mtaTable v-if="curActive" :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+
+      <mtaTable v-else :data="tableData2" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <freeTrialBtn  myType="kaoshi"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+  </div>
+</template>
+
+<script>
+import mtaTable from "~/components/common/mtaTable";
+import videoDialog from "~/components/common/videoDialog";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import {BannerImgs} from "~/defaultConfig";
+/**
+ * @ 产品与服务 -> 课程资源 -> 市场营销
+ */
+
+export default {
+  name: "professionalQuality",
+  layout:   'templateB',
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.shichangyingxiao}),
+    ]
+    const [res1] = await Promise.all(arr);
+    return {
+      bannerList: res1.data.data || [],
+    }
+  },
+  components: {
+    mtaTable, videoDialog,
+    freeTrialBtn,onlineInformationBtn},
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      tableConfig: [
+        {
+          label: '课程名称',
+          key: 'name'
+        },
+        {
+          label: '使用行业',
+          key: 'hangye'
+        },
+        {
+          label: '使用人群',
+          key: 'renqun'
+        }
+      ],
+      tableData: [
+        {
+          name: '如何分析营销环境',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '市场调查必备知识',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '低成本营销策略',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '如何进行有效的品牌调查',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '铁军式营销',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '区域市场管理的重点',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+        {
+          name: '区域市场运作的认知与思考',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+        {
+          name: '创新营销',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+        {
+          name: '商务谈判的共赢之路',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+        {
+          name: '企业微信营销管理全攻略',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+      ],
+      tableData2: [
+        {
+          name: '高品质沟通与说服力',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '攻心销售',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '如何处理客户异议',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '如何客服沟通障碍',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '销售团队建设与管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场专员'
+        },
+        {
+          name: '大客户销售与管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+        {
+          name: '销量倍增--激活经销商',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+        {
+          name: '如何打造销售团队的激励体系',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+        {
+          name: '原来这样销售可以百分百成交',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+        {
+          name: '商务谈判锦囊妙计',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '市场经理'
+        },
+      ],
+      curVideo: '',
+      visible: false,
+      curActive: true,
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    },
+    changeStatus(code) {
+      if (code === 'shichang') {
+        this.curActive = true;
+      } else {
+        this.curActive = false;
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.client-exam-page {
+  margin-top: 70px;
+}
+
+.client-banner-box {
+  height: 200px;
+  background: green;
+  text-align: center;
+  color: #fff;
+}
+.btns-group {
+  display: flex;
+  text-align: center;
+.client-default-Btn {
+  width: 120px;
+  margin-right: 20px;
+}
+}
+</style>

pages/product/xingZhengGuanLi.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>行政管理</h3>
+      <p>基于胜任力素质模型，打造高效的企业行政部门</p>
+      <span>行政部</span>
+    </div>
+
+    <!--  部门描述  -->
+    <div class="client-description-box">
+      行政部门主要负责企业的行政管理工作，配合业务部门进行文案写作、协调组织会议，商务接待、办公品采购等业务。
+    </div>
+
+    <!--  岗位职责  -->
+    <div class="client-gangwei-box">
+      <li>
+        <i></i>
+        <span>公文写作</span>
+      </li>
+      <li>
+        <i></i>
+        <span>会议管理</span>
+      </li>
+      <li>
+        <i></i>
+        <span>员工关系管理</span>
+      </li>
+      <li>
+        <i></i>
+        <span>建立公司规章制度</span>
+      </li>
+      <li>
+        <i></i>
+        <span>商务接待</span>
+      </li>
+      <li>
+        <i></i>
+        <span>办公用品采购</span>
+      </li>
+    </div>
+
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list">
+      <h4>部分课程列表</h4>
+      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <freeTrialBtn  myType="kaoshi"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+  </div>
+</template>
+
+<script>
+import mtaTable from "~/components/common/mtaTable";
+import videoDialog from "~/components/common/videoDialog";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import pingfen from "~/components/common/pingfen";
+import {BannerImgs} from "~/defaultConfig";
+
+/**
+ * @ 产品与服务 -> 课程资源 -> 行政管理
+ */
+
+export default {
+  name: "professionalQuality",
+  layout:   'templateB',
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.xingzhenguanli}),
+    ]
+    const [res1] = await Promise.all(arr);
+    return {
+      bannerList: res1.data.data || [],
+    }
+  },
+  components: {
+    mtaTable, videoDialog,
+    freeTrialBtn,onlineInformationBtn, pingfen},
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      tableConfig: [
+        {
+          label: '课程名称',
+          key: 'name'
+        },
+        {
+          label: '使用行业',
+          key: 'hangye'
+        },
+        {
+          label: '使用人群',
+          key: 'renqun'
+        }
+      ],
+      tableData: [
+        {
+          name: 'B堂课让你成为公文写作高手',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '行政专员'
+        },
+        {
+          name: '商务礼仪，职场交往的加分利器',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '行政主管'
+        },
+        {
+          name: '职场能力方程组',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '行政主管'
+        },
+        {
+          name: '巧用思维导图、提高工作效率',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '行政主管'
+        },
+        {
+          name: '赢在执行',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '行政主管'
+        },
+        {
+          name: '时间管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '行政主管'
+        },
+        {
+          name: '信息安全',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '行政主管'
+        },
+        {
+          name: '高效主持会议',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '销售经理'
+        },
+      ],
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/product/zhiYeSuYang.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="client-platform-page client-exam-page">
+    <!--  广告  -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>职业素养</h3>
+      <p>培养基层员工综合素质，为企业打造职业化团队</p>
+      <span><i></i> 入职1~2年的基层员工</span>
+    </div>
+
+    <!--  学习收益  -->
+    <div class="client-xuexishouyi-box">
+      <h4 class="client-title">学习收益</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <div class="products-services-content">
+                <h5>能力提升</h5>
+                <p><spam>职业意识：</spam> <pingfen value="5"></pingfen></p>
+                <p><span>逻辑思维：</span> <pingfen value="5"></pingfen></p>
+                <p><span>情商管理：</span> <pingfen value="5"></pingfen></p>
+                <p><span>时间管理： </span><pingfen value="5"></pingfen></p>
+                <p><span>呈现能力：</span> <pingfen value="5"></pingfen></p>
+                <p><span>沟通能力：</span> <pingfen value="5"></pingfen></p>
+                <p><span>礼仪修养： </span><pingfen value="5"></pingfen></p>
+              </div>
+              <img src="#" alt="能力提升">
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>掌握知识</h5>
+                <p class="p-before-circle">了解职业素养的相关内容，提高职业意识和职业化程度</p>
+                <p class="p-before-circle">掌握时间管理的方法和技巧，提高办公效率和精准度</p>
+                <p class="p-before-circle">通过学习快速了解压力的来源及情绪的调度，帮助处理好职场人际关系</p>
+                <p class="p-before-circle">熟练掌握沟通表达，商务呈现等必备职业技能</p>
+                <p class="p-before-circle">提升职业礼仪及修养，养成良好的职业习惯</p>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list">
+      <h4>部分课程列表</h4>
+      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btns-group">
+        <a class="client-default-Btn">
+          <freeTrialBtn  myType="kaoshi"/>
+        </a>
+        <onlineInformationBtn class="client-default-Btn" />
+      </div>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+  </div>
+</template>
+
+<script>
+import mtaTable from "~/components/common/mtaTable";
+import videoDialog from "~/components/common/videoDialog";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import pingfen from "~/components/common/pingfen";
+import {BannerImgs} from "~/defaultConfig";
+
+/**
+ * @ 产品与服务 -> 课程资源 -> 职业素养
+ */
+
+export default {
+  name: "professionalQuality",
+  layout:   'templateB',
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.zhiyesuyang}),
+    ]
+    const [res1] = await Promise.all(arr);
+    return {
+      bannerList: res1.data.data || [],
+    }
+  },
+  components: {
+    mtaTable, videoDialog,
+    freeTrialBtn,onlineInformationBtn, pingfen},
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      tableConfig: [
+        {
+          label: '课程名称',
+          key: 'name'
+        },
+        {
+          label: '使用行业',
+          key: 'hangye'
+        },
+        {
+          label: '使用人群',
+          key: 'renqun'
+        }
+      ],
+      tableData: [
+        {
+          name: '人际沟通： 如何更好地表达自己',
+          shikanUrl: 'https://1111',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '职场生活游刃有余',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '个人形象管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '高效沟通',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+        {
+          name: '如何向领导汇报行业',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '职场新人'
+        },
+      ],
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.client-exam-page {
+  margin-top: 70px;
+}
+
+.client-banner-box {
+  height: 200px;
+  background: green;
+  text-align: center;
+  color: #fff;
+}
+.btns-group {
+  display: flex;
+  text-align: center;
+  .client-default-Btn {
+    width: 120px;
+    margin-right: 20px;
+  }
+}
+
+</style>

pages/solution/biteAndSup.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>食品餐饮</h3>
+      <p>青谷行业解决方案</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  视频餐饮培训现状  -->
+    <div class="client-xianzhuang-box">
+      <h4>食品餐饮培训现状</h4>
+      <p>随着社会经济的不断发展，餐饮消费的方式日益多元化与现代化，品牌化、规模化、连锁式、跨区域式餐饮经营是未来的趋势，餐饮文化的传播将越来越国际化和市场化。
+        如何应对蓬勃发展的餐饮形式，不仅知识餐饮企业所面对的问题，同时也是烹饪教育应该思考的问题。
+      </p>
+    </div>
+
+    <!--  视频餐饮培训的痛点  -->
+    <div class="client-tongdian-box">
+      <h4>食品餐饮培训的痛点</h4>
+      <ul>
+        <li>
+          <i></i>
+          <span>人力成本过大，员工素质普遍较低</span>
+        </li>
+        <li>
+          <i></i>
+          <span>连锁餐饮企业学习资源共享困难，造成浪费</span>
+        </li>
+        <li>
+          <i></i>
+          <span>餐饮卫生安全隐患问题严重，员工意识不强</span>
+        </li>
+      </ul>
+    </div>
+
+    <!--  青谷解决方案  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">青谷解决方案</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <span>01</span>
+                <h5>强大的人员管理和培训功能</h5>
+                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
+                <p class="p-before-circle">支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分</p>
+                <p class="p-before-circle">学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃</p>
+                <onlineInformationBtn />
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>02</span>
+                <h5>智能考试系统，保障考试公平公众</h5>
+                <p class="p-before-circle">考前人脸身份核酸，权威数据确保本人考试</p>
+                <p class="p-before-circle">支持多种组卷模式，随机组卷每个学员不同试卷，杜绝相互抄袭</p>
+                <p class="p-before-circle">系统自动阅卷，无需人工干预，节约不必要的人力资源</p>
+                <p class="p-before-circle">多维度、多角度分析考试结果，掌握学员考试情况</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="严格的考试监控防作弊体系"/>
+              <div class="products-services-content">
+                <span>03</span>
+                <h5>良好的高并发性，系统稳定性高</h5>
+                <p class="p-before-circle">采用的运行稳定、安全性很高的JAVA语言开发</p>
+                <p class="p-before-circle">拥有强大的考试并发负载能力，支持万人以上考生同时在线考试</p>
+                <p class="p-before-circle">分布式微服务架构、开放、安全、高能、高可靠的服务调用</p>
+                <p class="p-before-circle">为企业快速、灵活构建大规模分布式服务应用提供基础</p>
+                <onlineInformationBtn/>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>04</span>
+                <h5>多端口个性化设置随心选择</h5>
+                <p class="p-before-circle">支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统</p>
+                <p class="p-before-circle">与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接</p>
+                <p class="p-before-circle">PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  金融保险类课程案例  -->
+    <div class="client-anli-box">
+      <h4>金融保险类课程案例</h4>
+      <p>青谷软件可为金融保险行业定制电子化课程</p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+    </div>
+
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+
+  </div>
+</template>
+
+<script>
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import {BannerImgs} from "~/defaultConfig";
+import videoDialog from "~/components/common/videoDialog";
+import videoCard from "~/components/common/videoCard";
+
+/**
+ * @ 解决方案 -> 食品餐饮
+ */
+export default {
+  name: "biteAndSup",
+  layout:   'templateB',
+  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.shipincanyin}),
+    ];
+    const [ res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    showVideo({url}) {
+      this.curVideo = url;
+      this.visible = true;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/education.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>教育机构</h3>
+      <p>青谷行业解决方案</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  教育机构培训现状  -->
+    <div class="client-xianzhuang-box">
+      <h4>教育机构培训现状</h4>
+      <p>
+        教育机构的学员来自社会各界，学习的内容也各不相同，因此要像普通学校一般按照班级进行统一管理难如登天。
+        青谷已具备完善的培训学习与考试功能，支持电子课件、在线直播、在线考试、智能阅卷、统计分析等高效、全面的服务，是教育机构办学不可或缺的利器。
+      </p>
+    </div>
+
+    <!--  教育机构培训痛点  -->
+    <div class="client-tongdian-box">
+      <ul>
+        <li>
+          <i></i>
+          <p>学员分散，来源各异，组织通过的学习与考试非常困哪</p>
+        </li>
+        <li>
+          <i></i>
+          <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
+        </li>
+        <li>
+          <i></i>
+          <p>老师与学员之间缺乏有效的沟通，教学成果较难把控</p>
+        </li>
+      </ul>
+    </div>
+
+    <!--  青谷解决方案  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">青谷解决方案</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <span>01</span>
+                <h5>强大的人员管理和培训功能</h5>
+                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
+                <p class="p-before-circle">支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分</p>
+                <p class="p-before-circle">学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃</p>
+                <onlineInformationBtn />
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>02</span>
+                <h5>强大的AI防作弊，保障考试公平公正</h5>
+                <p class="p-before-circle">人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正</p>
+                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
+                <p class="p-before-circle">随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="严格的考试监控防作弊体系"/>
+              <div class="products-services-content">
+                <span>03</span>
+                <h5>多端口个性化设置随心选择</h5>
+                <p class="p-before-circle">支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统</p>
+                <p class="p-before-circle">与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接</p>
+                <p class="p-before-circle">PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯</p>
+                <onlineInformationBtn/>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>04</span>
+                <h5>智能阅卷，多维度、可视化学情分析</h5>
+                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
+                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  教育培训类型课程案例  -->
+    <div class="client-anli-box">
+      <h4>教育培训类课程案例</h4>
+      <p>青谷软件可为教育培训行业定制电子化课程</p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: 'FLASH动画课程', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '视频课程', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '名师讲堂', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+    </div>
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+  </div>
+</template>
+
+<script>
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import videoDialog from "~/components/common/videoDialog";
+import videoCard from "~/components/common/videoCard";
+import {BannerImgs} from "~/defaultConfig";
+
+/**
+ * @ 解决方案 -> 教育机构
+ */
+export default {
+  name: "education",
+  layout:   'templateB',
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  async asyncData({$axios}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.jiaoyujigou}),
+    ];
+    const [res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    showVideo({url}) {
+      this.curVideo = url;
+      this.visible = true;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/energy.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>能源化工</h3>
+      <p>青谷行业解决方案</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  能源化工培训现状  -->
+    <div class="client-xianzhuang-box">
+      <h4>能源化工培训现状</h4>
+      <p>今天，信息化在社会的各行各业迅速发展。在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，
+        加快企业信息化进城，提高信息技术应用水平。能源化工行业的企业普遍没有一个完整的学习体系，不能统一排考检测员工安全方面的信息掌握程度，无法分析员工的不足之处。
+        成为该行业亟待解决的问题。</p>
+    </div>
+
+    <!--  能源化工培训痛点  -->
+    <div class="client-tongdian-box">
+      <ul>
+        <li>
+          <i></i>
+          <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+        </li>
+        <li>
+          <i></i>
+          <p>员工数量庞大，组织培训考核的成本高昂</p>
+        </li>
+        <li>
+          <i></i>
+          <p>培训体系不健全，没有形成培养学习者的长效机制</p>
+        </li>
+      </ul>
+    </div>
+
+    <!--  青谷解决方案  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">青谷解决方案</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <span>01</span>
+                <h5>强大的人员管理和培训功能</h5>
+                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
+                <p class="p-before-circle">支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分</p>
+                <p class="p-before-circle">学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃</p>
+                <onlineInformationBtn />
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>02</span>
+                <h5>强大的AI防作弊，保障考试公平公正</h5>
+                <p class="p-before-circle">人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正</p>
+                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
+                <p class="p-before-circle">随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="严格的考试监控防作弊体系"/>
+              <div class="products-services-content">
+                <span>03</span>
+                <h5>多端口个性化设置随心选择</h5>
+                <p class="p-before-circle">支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统</p>
+                <p class="p-before-circle">与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接</p>
+                <p class="p-before-circle">PC、APP、H5统一管理，数据互通，充分利用碎片化时间，塑造学员高频率使用习惯</p>
+                <onlineInformationBtn/>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>04</span>
+                <h5>智能阅卷，多维度、可视化学情分析</h5>
+                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
+                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  能源化工类课程案例  -->
+    <div class="client-anli-box">
+      <h4>能源化工类课程案例</h4>
+      <p>青谷软件可为能源化工行业定制电子化课程</p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+    </div>
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+  </div>
+</template>
+
+<script>
+
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import videoDialog from "~/components/common/videoDialog";
+import videoCard from "~/components/common/videoCard";
+import {BannerImgs} from "~/defaultConfig";
+/**
+ * @ 解决方案 -> 能源化工
+ */
+export default {
+  name: "energy",
+  layout:   'templateB',
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.nengyuanhuagong}),
+    ];
+    const [res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    showVideo({url}) {
+      this.curVideo = url;
+      this.visible = true;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/erupt.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>万人在线，超高并发</h3>
+      <p>青谷为你提供大规模培训、考试优质解决方案</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  随机组卷算法  -->
+    <div class="client-suijizujuan-box">
+      <h4>随机组卷算法</h4>
+      <div>
+        <div>
+          <p>随机组卷算法是考试系统中最耗费性能的一项工作，因为在随机出卷的基础上，系统还要均衡试题被随机抽中的概率，避免试题被边缘化。</p>
+          <h3>解决方案</h3>
+          <p>青谷拥有一套全面、高效的随机组卷算法技术、通过优化数据算法结构和试题概率重组分配技术，能够快速计算抽中试题的随机率和分配率，极大地减轻了随机算法带来的压力。</p>
+          <onlineInformationBtn />
+        </div>
+        <img src="#">
+      </div>
+    </div>
+
+    <!--  同时请求次数  -->
+    <div class="client-suijizujuan-box">
+      <h4>同时请求次数</h4>
+      <div>
+        <img src="#">
+        <div>
+          <p>无论是企业还是学校在组织线上考试时，学员几乎都是同一时间进入考试的，这对于在线考试并发压力是一个很大的考验，这也是请求次数频繁导致的服务器压力过大，甚至崩溃的主要的原因</p>
+          <h3>解决方案</h3>
+          <p>青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率，如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。</p>
+          <onlineInformationBtn />
+        </div>
+      </div>
+    </div>
+
+    <!--  读写数据量大  -->
+    <div class="client-suijizujuan-box">
+      <h4>读写数据量大</h4>
+      <div>
+        <img src="#">
+        <div>
+          <p>读写数据量大也是影响在线并发考试压力的主要因素之一，尤其是在短时间内频繁地向数据库读取</p>
+          <h3>解决方案</h3>
+          <p>青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率，
+            如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。</p>
+          <onlineInformationBtn />
+        </div>
+      </div>
+    </div>
+
+    <!--  描述区域  -->
+    <div class="client-description-box">
+      <p>青谷将持续提升“服务器性能”，使之能满足高并发大数据的多人考试解决方案，
+      致力于让各企业、学校的大型考试更易于组织，真正有效！
+      </p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  客户案例  -->
+    <div class="client-kehuanli-box">
+      <!--   PC   -->
+      <el-carousel class="mta-hidden-xs" :interval="5000" type="card" height="200px">
+        <el-carousel-item v-for="item in anliList" :key="item.iild">
+          <div>
+            <img :src="item.pic">
+            <div>
+              <h3>{{item.title}}</h3>
+              <p>{{item.intro}}</p>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+      <!--   H5   -->
+      <div v-swiper:mySwiper="swiperOption" class="swiper-container mta-hidden-sm">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" v-for="item in anliList" :key="item.iild">
+            <div>
+              <img :src="item.pic">
+              <div>
+                <h3>{{item.title}}</h3>
+                <p>{{item.intro}}</p>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div class="swiper-pagination swiper-pagination-style"></div>
+        <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+      </div>
+    </div>
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import {BannerImgs} from "~/defaultConfig";
+/**
+ * @ 解决方案 -> 万人高并发
+ */
+export default {
+  name: "erupt",
+  layout:   'templateB',
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
+  async asyncData({$axios, store}) {
+    const opt = {
+      page:           1,
+      size:           5,
+      newsClassifyId: 2,
+    };
+
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.wanrengaobingfa}),
+      $axios.post('/home/news/list', opt)
+    ];
+    const [res2, res3] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+      anliList: res3.data.data.data || [],
+    }
+  },
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      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,
+      },
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/exam.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>全流程AI监考防作弊体系</h3>
+      <p>青谷为您打造专业的严肃性在线考试解决方案</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  常见严肃性考试场景  -->
+    <div class="client-changjian-kaoshi">
+      <h3>常见严肃性考试场景</h3>
+      <ul>
+        <li>
+          <i></i>
+          <span>招聘考试</span>
+        </li>
+        <li>
+          <i></i>
+          <span>升学考试</span>
+        </li>
+        <li>
+          <i></i>
+          <span>司法考试</span>
+        </li>
+        <li>
+          <i></i>
+          <span>知识竞赛</span>
+        </li>
+      </ul>
+    </div>
+
+    <!--  严肃性考试解决方案  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">严肃性考试解决方案</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <h5>强大的AI防作弊，保障考试公平公正</h5>
+                <p class="p-before-circle">人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正</p>
+                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
+                <p class="p-before-circle">随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
+                <div>
+                  <onlineInformationBtn class="client-default-Btn" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <div class="products-services-content">
+                <h5>数据加密保护，保障考试信息安全</h5>
+                <p class="p-before-circle">考生答卷时禁止复制、粘贴考题，防止试题和答案泄露</p>
+                <p class="p-before-circle">企业级技术框架；数据存储备份机制；算法、秘钥双重保险，数据安全可靠</p>
+                <p class="p-before-circle">支持私有服务器部署内网考试，让考试数据更安全</p>
+                <div>
+                  <onlineInformationBtn class="client-default-Btn" />
+                </div>
+              </div>
+              <img src="#" alt="强大的人员和试题管理"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <h5>良好的高并发性，系统稳定性高</h5>
+                <p class="p-before-circle">采用的运行稳定、安全性很高的JAVA语言开发</p>
+                <p class="p-before-circle">拥有强大的考试并发负载能力，支持万人以上考生同时在线考试</p>
+                <p class="p-before-circle">分布式微服务架构、开放、安全、高能、高可靠的服务调用</p>
+                <p class="p-before-circle">为企业快速，灵活构建大规模分布式服务应用提供基础</p>
+                <div>
+                  <onlineInformationBtn class="client-default-Btn" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <div class="products-services-content">
+                <h5>多维度统计分析，考试结果可视化</h5>
+                <p class="p-before-circle">采用的运行稳定、安全性很高的JAVA语言开发</p>
+                <p class="p-before-circle">拥有强大的考试并发负载能力，支持万人以上考生同时在线考试</p>
+                <p class="p-before-circle">分布式微服务架构、开放、安全、高能、高可靠的服务调用</p>
+                <p class="p-before-circle">为企业快速，灵活构建大规模分布式服务应用提供基础</p>
+                <div>
+                  <onlineInformationBtn class="client-default-Btn" />
+                </div>
+              </div>
+              <img src="#" alt="强大的人员和试题管理"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  宣传图  -->
+    <div class="client-xuanchuan-box">
+      <h4>青谷为您打造专业的严肃性在线考试解决方案</h4>
+      <onlineInformationBtn></onlineInformationBtn>
+    </div>
+
+    <!--  严肃性考试热门问答  -->
+    <div class="client-wenda-box">
+      <h4>严肃性考试热门问答</h4>
+      <div>
+        <ul>
+          <li :class="{active: curActive === 1}" @click="curActive = 1">1. 考试前开启身份证认证、人脸识别是否会耽误考试时间？</li>
+          <li :class="{active: curActive === 2}" @click="curActive = 2">2. 开启摄像头监控后，考生的摄像头遇到用不了的情况怎么解决？</li>
+          <li :class="{active: curActive === 3}" @click="curActive = 3">3. 考试人数多的情况下系统稳定有保障吗？</li>
+          <li :class="{active: curActive === 4}" @click="curActive = 4">4. 考生在考试中途遇到死机中断怎么办？</li>
+          <li :class="{active: curActive === 5}" @click="curActive = 5">5. 如果您还有更多的疑惑，请联立即联系我们</li>
+        </ul>
+
+        <div v-if="curActive === 1">
+          <span>问</span>考试前开启身份证、人脸识别是否会耽误考试时间？
+          <span>答</span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可
+        </div>
+
+        <div v-if="curActive === 2">
+          <span>问</span>开启摄像监考后，考生的摄像头遇到用不了的情况怎么解决？
+          <span>答</span>正常情况下摄像头都是可以使用的；当然如有无法使用的情况，其原因有多种，我们已提供相关的解决方案，考生可以根据操作指引启用电脑摄像头。
+        </div>
+
+        <div v-if="curActive === 3">
+          <span>问</span>考试人数多的情况下系统稳定有保障吗？
+          <span>答</span>如果考试人数过多，系统将采用分布式部署，保证系统稳定性。目前已有很多的企业使用青谷组织过超过万人高并发在线考试，我们会为您提供技术支持，考试人数再多页可保障系统稳定性。
+        </div>
+
+        <div v-if="curActive === 4">
+          <span>问</span>考生在考试中途遇到死机中断怎么办？？
+          <span>答</span>青谷考试带有每五分钟自动保存功能，时间节点内的答题数据都会保留。
+        </div>
+
+        <div v-if="curActive === 5">
+          <div>
+            <p>客服电话： 400-0990-883</p>
+            <p>QQ:227551695</p>
+          </div>
+          <img src="#">
+        </div>
+      </div>
+    </div>
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import {BannerImgs} from "~/defaultConfig";
+
+/**
+ * @ 解决方案 -> 严肃考试
+ */
+export default {
+  name: "exam.vue",
+  layout:   'templateB',
+  components: {
+     freeTrialBtn,onlineInformationBtn,newsComp2,chanPinTiYan
+  },
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/news/carousel`, {'newsClassifyId': 0, 'keyword': '考试'}),
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.yansukaoshi}),
+    ]
+    const [res1, res2] = await Promise.all(arr);
+    return {
+      topCarousels: res1.data.data || [],
+      bannerList: res2.data.data || [],
+    }
+  },
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+  data() {
+    return {
+      curActive: 1,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.active {
+  color: green;
+}
+</style>

pages/solution/financial.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>金融保险</h3>
+      <p>青谷行业解决方案</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  金融保险培训现状  -->
+    <div class="client-xianzhuang-box">
+      <h4>金融保险培训现状</h4>
+      <p>金融保险无处不在并已形成一个庞大体系，金融保险涉及的范畴、分支和内容非常广，如货币、证券、银行、保险、投资理财、风险管理等，
+        相互来说考核点多、信息量大、对员工的知识储备要求较高，相对的考核难度也较大。所以金融保险业更需要考核数据来作为依据，帮助提升业务能力。
+      </p>
+    </div>
+
+    <!--  金融保险培训痛点  -->
+    <div class="client-tongdian-box">
+      <h4>金融保险培训痛点</h4>
+      <ul>
+        <li>
+          <i></i>
+          <p>产品随政策变动、更新频率高，要求员工掌握最新工作政策</p>
+        </li>
+        <li>
+          <i></i>
+          <p>一线员工数量庞大，组织培训考核极难并且成本高昂</p>
+        </li>
+        <li>
+          <i></i>
+          <p>人数太多，及时勉强组织培训考核，也很难管控</p>
+        </li>
+      </ul>
+    </div>
+
+    <!--  青谷解决方案  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">青谷解决方案</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <span>01</span>
+                <h5>私有化专属服务器部署，数据加密更安全</h5>
+                <p class="p-before-circle">将青谷考培系统部署版部署到政府机构内部私有云服务器中，政府机构完全自主掌控，数据加密更安全</p>
+                <p class="p-before-circle">PC端与移动端无缝连接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务</p>
+                <onlineInformationBtn />
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>02</span>
+                <h5>构建培训闭环，打通线上线下教学场景</h5>
+                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
+                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
+                <p class="p-before-circle">在线课程支持反复学习，实现从“了解”到“理解”的飞跃</p>
+                <p class="p-before-circle">支持六大常用题型及批量导入题库</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="严格的考试监控防作弊体系"/>
+              <div class="products-services-content">
+                <span>03</span>
+                <h5>强大的AI防作弊，保障考试公平公正</h5>
+                <p class="p-before-circle">人脸识别、摄像头监控、有效防止替考代考，保障考试公平公正</p>
+                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
+                <p class="p-before-circle">随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
+                <onlineInformationBtn/>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>04</span>
+                <h5>智能阅卷，多维度、可视化学情分析</h5>
+                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
+                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  金融保险类课程案例  -->
+    <div class="client-anli-box">
+      <h4>金融保险类课程案例</h4>
+      <p>青谷软件可为金融保险行业定制电子化课程</p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+    </div>
+
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+
+  </div>
+</template>
+
+<script>
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import videoDialog from "~/components/common/videoDialog";
+import videoCard from "~/components/common/videoCard";
+import {BannerImgs} from "~/defaultConfig";
+
+/**
+ * @ 解决方案 -> 金融保险
+ */
+export default {
+  name: "financial",
+  layout:   'templateB',
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.jinrongbaoxian}),
+    ];
+    const [res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    showVideo({url}) {
+      this.curVideo = url;
+      this.visible = true;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/government.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>政府机构</h3>
+      <p>青谷行业解决方案</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  政府机构培训现状  -->
+    <div class="client-xianzhuang-box">
+      <h4>政府机构培训现状</h4>
+      <p>在政府机构中比较常见的培训项目通常就是党建方向 的内容，学习党史党务，会议精神、法律法规等是每一个中共党员的基本修养。政府机构的成员大多都是中共党员，势必要以身作则。
+      作为国家和人民的领导者，政府机构的党员们需要专注于习近平新时代中国特色社会主义的思想党建，做到和人民心心相印，才能更好地为人民服务。
+      </p>
+    </div>
+
+    <!--  政府机构培训痛点  -->
+    <div class="client-tongdian-box">
+      <h4>政府机构培训痛点</h4>
+      <ul>
+        <li>
+          <i></i>
+          <p>需要学习的文件材料较多，
+          不易把握学习要点</p>
+        </li>
+        <li>
+          <i></i>
+          <p>从即从公务员到各级干部，政府部门成员大多数勤于政务，
+            没有稳定的学习时间</p>
+        </li>
+        <li>
+          <i></i>
+          <p>各级政府的所在地各不相同，
+            很难统一组织学习党建材料</p>
+        </li>
+      </ul>
+    </div>
+
+    <!--  解决方案  -->
+    <div class="client-fangan-box">
+      <h4>青谷解决方案</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <h5>私有化专属服务器部署，数据加密更安全</h5>
+                <p class="p-before-circle">将青谷考培系统部署版部署到政府机构内部私有云服务器中，政府机构完全自主掌控，数据加密更安全</p>
+                <p class="p-before-circle">PC端与移动端无缝链接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务</p>
+                <onlineInformationBtn />
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+              <div class="products-services-content">
+                <h5>构建培训闭环，打通线上线下教学场景</h5>
+                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
+                <p class="p-before-circle">支持线上课程、直播、线下培训等多种培训形式</p>
+                <p class="p-before-circle">在线课程支持反复学习，实现从“了解”到“理解”的飞跃</p>
+                <p class="p-before-circle">支持六大常用题型及批量导入题库</p>
+                <onlineInformationBtn/>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="严格的考试监控防作弊体系"/>
+              <div class="products-services-content">
+                <h5>强大的AI防作弊，保障考试公平公正</h5>
+                <p class="p-before-circle">人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正</p>
+                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监控场景</p>
+                <p class="p-before-circle">随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
+                <onlineInformationBtn/>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>04</span>
+                <h5>智能阅卷，多维度、可视化学情分析</h5>
+                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
+                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  党建类课程案例  -->
+    <div class="client-anli-box">
+      <h4>党建类课程案例</h4>
+      <p>青谷软件可为政府机构定制电子化课程</p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: 'FLASH动画课程', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '视频课程', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '名师讲堂', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+    </div>
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+
+  </div>
+</template>
+
+<script>
+
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import {BannerImgs} from "~/defaultConfig";
+import videoDialog from "~/components/common/videoDialog";
+import videoCard from "~/components/common/videoCard";
+
+/**
+ * @ 解决方案 -> 政府机构
+ */
+export default {
+  name: "government",
+  layout:   'templateB',
+  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.zhengfujigou}),
+    ];
+    const [ res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    showVideo({url}) {
+      this.curVideo = url;
+      this.visible = true;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/medical.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>交通运输</h3>
+      <p>青谷行业解决方案</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  医疗行业培训现状  -->
+    <div class="client-xianzhuang-box">
+      <h4>医疗行业培训现状</h4>
+      <p>医学类培训考核种类繁多，如医疗工作者的执业医师资格考试，护士执业资格考试，卫生专业技术资格考试，
+        全国各级医院日常进行的医护人员招聘考试，“三基”，“三严”考试，全国各级医学教育机构，如医学院，卫校，护校的本科，
+        研究生，大中专教育培训考试等，一些医学高等院校的附属医院同时还有本科，研究生在校生的教学考试工作等。
+      </p>
+    </div>
+
+    <!--  交通运输培训痛点  -->
+    <div class="client-tongdian-box">
+      <h4>医疗行业培训痛点</h4>
+      <ul>
+        <li>
+          <i></i>
+          <p>需要学习的文件材料较多，不易把握学习要点</p>
+        </li>
+        <li>
+          <i></i>
+          <p>无法把有价值的提问保存下来，给未来其他用户提供参考</p>
+        </li>
+        <li>
+          <i></i>
+          <p>还在使用传统面授培训，无法组织更多的人一起听课，传播面太小</p>
+        </li>
+      </ul>
+    </div>
+
+    <!--  青谷解决方案  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">青谷解决方案</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <h5>强大的人员管理和培训功能</h5>
+                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题</p>
+                <p class="p-before-circle">支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分</p>
+                <p class="p-before-circle">学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃</p>
+                <onlineInformationBtn />
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>强大的AI防作弊，保障考试公平公正</h5>
+                <p class="p-before-circle">人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正</p>
+                <p class="p-before-circle">支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景</p>
+                <p class="p-before-circle">随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>04</span>
+                <h5>多端口个性化设置随心选择</h5>
+                <p class="p-before-circle">支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统</p>
+                <p class="p-before-circle">与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接</p>
+                <p class="p-before-circle">PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>04</span>
+                <h5>智能阅卷，多维度、可视化学情分析</h5>
+                <p class="p-before-circle">智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息</p>
+                <p class="p-before-circle">从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  医疗行业类课程案例  -->
+    <div class="client-anli-box">
+      <h4>医疗行业类课程案例</h4>
+      <p>青谷软件可为医疗行业定制电子化课程</p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+    </div>
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+  </div>
+</template>
+
+<script>
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import {BannerImgs} from "~/defaultConfig";
+import videoDialog from "~/components/common/videoDialog";
+import videoCard from "~/components/common/videoCard";
+
+/**
+ * @ 解决方案 -> 医疗行业
+ */
+export default {
+  name: "medical",
+  layout:   'templateB',
+  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.yiliaohangye}),
+    ];
+    const [res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    showVideo({url}) {
+      this.curVideo = url;
+      this.visible = true;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/peixun.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>企业培训</h3>
+      <p>青谷帮您解决企业内外培训管理难题</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  企业培训现状  -->
+    <div>
+      <h3>企业培训现状</h3>
+      <p>企业的发展在于人才比拼，而人才的比拼在于学习速度的比拼</p>
+      <p>为此，很多企业不惜重金去建设培训体系，对员工进行培训，但却起不到良好的成效</p>
+    </div>
+
+    <!--  企业培训痛点  -->
+    <div class="client-tongdian-box">
+      <h4>企业培训痛点</h4>
+      <ul>
+        <li>
+          <i></i>
+          <span>受时间、场地影响</span>
+          <span>无法随时随地学习</span>
+        </li>
+        <li>
+          <i></i>
+          <span>培训过度，学习不足</span>
+          <span>培训课程体系设置不合理</span>
+        </li>
+        <li>
+          <i></i>
+          <span>老员工离职，带走工作经验</span>
+          <span>新人需要重新摸索经验</span>
+        </li>
+        <li>
+          <i></i>
+          <span>不能快速响应业务变化</span>
+        </li>
+        <li>
+          <i></i>
+          <span>没有针对性，知识无法共享</span>
+        </li>
+        <li>
+          <i></i>
+          <span>成本高，导致企业不敢</span>
+          <span>进行员工培训</span>
+        </li>
+      </ul>
+    </div>
+
+    <!--  企业培训解决方案  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">企业培训解决方案</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <h5>一键导入组织成员名单</h5>
+                <p>支持一键批量导入企业组织成员，快速设置人员姓名、练习方式、职位等信息。支持分组设置培训权限</p>
+                <div>
+                  <onlineInformationBtn/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>多种课程形式及直播开展培训</h5>
+                <p> PC端与移动端无缝链接。支持在线课程、直播教学、评论点赞、互动答案等强大的培训功能。方便组织线上培训学习</p>
+                <div>
+                  <onlineInformationBtn/>
+                </div>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="严格的考试监控防作弊体系"/>
+              <div class="products-services-content">
+                <h5>考、练模块提升学员培训效果</h5>
+                <p>
+                  题库、练习、考试、课后检测等功能帮助学员巩固培训知识，方便提升培训学习效果
+                </p>
+                <div>
+                  <onlineInformationBtn/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>可视化的培训大数据展示</h5>
+                <p>
+                  直观分析学员学习时长、课程数、考试分数等数据结果，快速掌握整体学习情况
+                </p>
+                <div>
+                  <onlineInformationBtn/>
+                </div>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <img src="#" alt="实用便捷的判卷功能"/>
+              <div class="products-services-content">
+                <h5>快速搭建企业知识共享资源库库</h5>
+                <p>
+                  帮助企业搭建知识资源库，完成企业员工的知识分享
+                </p>
+                <div>
+                  <onlineInformationBtn/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  如何快速学习平台  -->
+    <div class="client-study-box">
+      <h4>如何搭建学习平台</h4>
+
+      <ul>
+        <li>
+          <span>提升培训速度</span>
+          <span>↑ 95%</span>
+        </li>
+        <li>
+          <span>提升培训速度</span>
+          <span>↓ 90%</span>
+        </li>
+        <li>
+          <span>降低费用成本</span>
+          <span>↓ 75%</span>
+        </li>
+        <li>
+          <span>降低时间成本</span>
+          <span>↓ 80%</span>
+        </li>
+      </ul>
+
+      <ul>
+        <li>
+          <i></i>
+          <p>云端部署</p>
+          <span>云端部署，按需配置</span>
+          <span>免硬件与IT运维投入</span>
+          <span>PC、H5、APP多端兼容</span>
+        </li>
+        <li>
+          <i></i>
+          <p>AI智能学习</p>
+          <span>内容智能推荐系统</span>
+          <span>大数据与学习行为分析</span>
+          <span>提供个性化培训</span>
+        </li>
+        <li>
+          <i></i>
+          <p>人才发展体系</p>
+          <span>支持复杂岗位设置</span>
+          <span>职业发展与胜任力体系</span>
+          <span>只能体系</span>
+        </li>
+        <li>
+          <i></i>
+          <p>混合式培训管理</p>
+          <span>线上线下混合式培训</span>
+          <span>社交学习与分享</span>
+          <span>多维度洞察培训效果</span>
+        </li>
+        <li>
+          <i></i>
+          <p>海量优质课程资源</p>
+          <span>各领域行业专家</span>
+          <span>免硬件与IT运维投入</span>
+          <span>全方位覆盖企业培训体系</span>
+        </li>
+      </ul>
+    </div>
+
+    <!--  客户经理扫码  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <span>马上扫码添加客户经理</span>
+      <img src="#" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import {BannerImgs} from "~/defaultConfig";
+/**
+ * @ 解决方案 -> 企业培训
+ */
+export default {
+  name: "peixun",
+  layout:   'templateB',
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.qiyepeixun}),
+    ];
+    const [res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  head(){
+    return {
+      title: '在线考试平台_在线考试软件_试卷软件系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试平台,试卷系统,试卷软件'
+        },
+        {
+          name:'description',
+          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+        }
+      ],
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/privatization.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h4>青谷企业私有化部署</h4>
+      <p>专属服务器、数据加密，更安全稳定；独享云服务，速度更快</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  私有化部署优势  -->
+    <div class="client-private-youshi">
+      <ul>
+        <li>
+          <i></i>
+          <div>
+            <h4>数据私密安全</h4>
+            <p>企业级技术框架；数据私有化隔离；数据存储备份机制；算法、秘钥双重保险，数据安全可靠；独享云服务，速度更快，性能更优。</p>
+          </div>
+        </li>
+        <li>
+          <i></i>
+          <div>
+            <h4>企业自主掌握</h4>
+            <p>企业可完全自主掌握，轻松实现人员管理、权限管理；账号与席位轻松绑定，入职迅速，离职安全，避免认为数据事故。</p>
+          </div>
+        </li>
+        <li>
+          <i></i>
+          <div>
+            <h4>第三方接口对接</h4>
+            <p>支持和第三方OA、HR、ERP、教务系统、微信、钉钉等对接。</p>
+          </div>
+        </li>
+        <li>
+          <i></i>
+          <div>
+            <h4>可定制开发</h4>
+            <p>系统拥有极其强大的扩展技术。在这套扩展技术体系中，企业可以在此基础上定制任意功能，扩充目前的功能架构，满足企业自身发展的需求。</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  私有化部署方案  -->
+    <div class="client-private-fangan">
+      <h4>私有化部署解决方案</h4>
+      <div>
+        <span :class="{active: curActive === 1}" @click="curActive === 1">专属服务器部署</span>
+        <span :class="{active: curActive === 2}" @click="curActive === 2">私有服务器部署</span>
+      </div>
+
+      <div v-if="curActive === 1">
+        <img src="#">
+        <div>
+          <p>将青谷考培系统部署版独立部署到企业专属阿里云/腾讯云服务器中，享受公有云功能与服务的同时，又具备数据隔离的优势，适用于大多数中小型企业。</p>
+          <ul>
+            <li>更易于拓展</li>
+            <li>数据安全可靠</li>
+            <li>降低人工成本，无需运维</li>
+          </ul>
+        </div>
+      </div>
+      <div v-if="curActive === 2">
+        <img src="#">
+        <div>
+          <p>将青谷考陪系统部署版部署到企业内部私有云服务器中，企业完全自主掌握，适用于通信，金融等对数据安全性要求更高的企业。</p>
+          <ul>
+            <li>公司内部局域网加速，编辑访问更丝滑</li>
+            <li>私有服务器企业自主管理，数据物理安全和防泄密风险进一步增强</li>
+          </ul>
+        </div>
+      </div>
+
+
+    </div>
+
+    <!--  保护服务  -->
+    <div class="client-private-service">
+      <ul>
+        <li>
+          <h4>企业需求诊断</h4>
+          <i></i>
+          <p>了解企业实际情况，设计专属需求解决方案</p>
+        </li>
+        <li>
+          <h4>实施项全员培训</h4>
+          <i></i>
+          <p>为企业培训讲解，全员快速上手系统，信息统一，沟通透明同步</p>
+        </li>
+        <li>
+          <h4>部署全程保障</h4>
+          <i></i>
+          <p>技术专家全程负责，提供完整的部署方案，完成高质量交付</p>
+        </li>
+        <li>
+          <h4>全周期服务指导</h4>
+          <i></i>
+          <p>高效运营团队使用支持，售后服务及时响应</p>
+        </li>
+      </ul>
+    </div>
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import {BannerImgs} from "~/defaultConfig";
+
+/**
+ * @ 解决方案 -> 私有化部署
+ */
+export default {
+  name: "privatization",
+  layout:   'templateB',
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.siyouhuabushu}),
+    ];
+    const [ res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      curActive: 1
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/solution/transportation.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="client-exam-page client-platform-page">
+    <!-- 广告图位置 -->
+    <div class="client-banner-box">
+      <div
+        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
+        class="client-platform-banner"></div>
+      <h3>交通运输</h3>
+      <p>青谷行业解决方案</p>
+      <onlineInformationBtn />
+    </div>
+
+    <!--  交通运输培训现状  -->
+    <div class="client-xianzhuang-box">
+      <h4>交通运输培训现状</h4>
+      <p>现代交通运输正朝着高速化，大型化，专业化和网络化方向发展，各种运输方式之间的市场竞争也已全面展开。
+      优于交通行业以技术先行，企业越来越需要具有扎实的汽车运用技术、交通运输与系统规划与管理、物流系统工程等方面专业知识，
+      并能独立从事汽车运用与管理、物流系统规划设计与管理的复合型高级工程技术人才，人才的培养格外重要。</p>
+    </div>
+
+    <!--  交通运输培训痛点  -->
+    <div class="client-tongdian-box">
+      <h4>交通运输培训痛点</h4>
+      <ul>
+        <li>
+          <i></i>
+          <p>员工分布各地，常年都在船上车上，集中培训考核非常困哪</p>
+        </li>
+        <li>
+          <i></i>
+          <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+        </li>
+        <li>
+          <i></i>
+          <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
+        </li>
+      </ul>
+    </div>
+
+    <!--  青谷解决方案  -->
+    <div class="platform-products-services">
+      <h4 class="client-title">青谷解决方案</h4>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="强大的人员和试题管理"/>
+              <div class="products-services-content">
+                <h5>高效智能的在线培训系统</h5>
+                <p class="p-before-circle">支持在线课程、学习地图、直播教学、培训计划等强大的企业培训系统功能</p>
+                <p class="p-before-circle">支持多类型课件，图文、文档、视频、音频及站外链接任意选择，在线学习形式更丰富</p>
+                <p class="p-before-circle">一键设置课程关联考试，实时记录学时进度，让学员学习状况一目了然</p>
+                <onlineInformationBtn />
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <h5>简单易上手的在线考试系统</h5>
+                <p class="p-before-circle">考试系统使用方便，操作简单，节约成本，无需独立开发</p>
+                <p class="p-before-circle">在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务</p>
+                <p class="p-before-circle">支持万人同时在线，超高并发安全稳定运行</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="多种终端支持，随时随地考试"/>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img src="#" alt="严格的考试监控防作弊体系"/>
+              <div class="products-services-content">
+                <h5>帮助企业构建自主课程体系</h5>
+                <p>基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。</p>
+                <p class="p-before-circle">职业素养</p>
+                <p class="p-before-circle">领导能力</p>
+                <p class="p-before-circle">人力资源</p>
+                <p class="p-before-circle">市场营销</p>
+                <p class="p-before-circle">行政管理</p>
+                <p class="p-before-circle">财务管理</p>
+                <p class="p-before-circle">客服服务</p>
+                <p class="p-before-circle">产品运营</p>
+                <p class="p-before-circle">生产采购</p>
+                <onlineInformationBtn/>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <div class="products-services-content">
+                <span>04</span>
+                <h5>多端口个性化设置随心选择</h5>
+                <p class="p-before-circle">支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统</p>
+                <p class="p-before-circle">与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接</p>
+                <p class="p-before-circle">PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯</p>
+                <onlineInformationBtn/>
+              </div>
+              <img src="#" alt="实用便捷的判卷功能"/>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!--  交通运输类课程案例  -->
+    <div class="client-anli-box">
+      <h4>交通运输类课程案例</h4>
+      <p>青谷软件可为交通运输行业行业定制电子化课程</p>
+      <ul>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+        <li>
+          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+        </li>
+      </ul>
+    </div>
+
+    <!--  立即咨询  -->
+    <div class="client-zixun-code">
+      <h4>立即扫码资讯，领取您的专属解决方案</h4>
+      <img src="#" alt="">
+      <p>扫码添加客服微信</p>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+  </div>
+</template>
+
+<script>
+import chanPinTiYan from "~/components/common/chanPinTiYan";
+import freeTrialBtn from "~/components/common/freeTrialBtn";
+import onlineInformationBtn from "~/components/common/onlineInformationBtn";
+import newsComp2 from "~/components/common/newsComp2";
+import {BannerImgs} from "~/defaultConfig";
+import videoDialog from "~/components/common/videoDialog";
+import videoCard from "~/components/common/videoCard";
+
+/**
+ * @ 解决方案 -> 交通运输
+ */
+export default {
+  name: "transportation",
+  layout:   'templateB',
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2,  videoDialog, videoCard},
+  async asyncData({$axios, store}) {
+    const arr = [
+      $axios.$post(`/home/banner/list`, {'code': BannerImgs.jiaotongyunshu}),
+    ];
+    const [res2] = await Promise.all(arr);
+    return {
+      bannerList: res2.data.data || [],
+    }
+  },
+  data() {
+    return {
+      curVideo: '',
+      visible: false,
+    }
+  },
+  methods: {
+    showVideo({url}) {
+      this.curVideo = url;
+      this.visible = true;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>