Merge remote-tracking branch 'origin/大连青谷网站' into 大连青谷网站

# Conflicts:
#	pages/product/exam.vue
#	pages/solution/exam.vue

assets/scss/cus-client/cus-client-common.scss

@@ -2,876 +2,2855 @@
 
 /************************ 通用class样式 author: TX  date:2020-07-30 **********************/
 /* 页面样式 */
-body, html, #app {padding: 0;margin: 0;@include setFontStyle(0);}
+body, html, #app {
+  padding: 0;
+  margin: 0;
+  @include setFontStyle(0);
+}
 
 /* 内外边距通常让各个浏览器样式的表现位置不同 */
-div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;}
+div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  margin: 0;
+  padding: 0;
+}
 
 /* HTML5 媒体文件跟 img 保持一致 */
-audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
+audio, canvas, video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
 
 /* 默认不显示下划线，保持页面简洁 */
-ins,a{text-decoration:none;cursor:pointer;}
+ins, a {
+  text-decoration: none;
+  cursor: pointer;
+}
 
 /* 去掉列表前的标识, li 会继承 */
-ol,ul,dl,dt,dd{
-  list-style:none;
+ol, ul, dl, dt, dd {
+  list-style: none;
   margin: 0;
   padding: 0;
   letter-spacing: 0;
   word-spacing: 0;
-  font-size: 0;}
+  font-size: 0;
+}
 
 /* 让标题都自定义, 适应多个系统应用 */
-h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
+h1, h2, h3, h4, h5, h6, p {
+  font-weight: normal;
+  margin: 0;
+}
 
 /* 外边距 */
-.m5{margin:5px;}
-.m10 {margin: 10px;}
-.m15 {margin: 15px;}
-.m20 {margin: 20px;}
-.m25 {margin: 25px;}
-.m30 {margin: 30px;}
-.m35 {margin: 35px;}
-.m40 {margin: 40px;}
+.m5 {
+  margin: 5px;
+}
+
+.m10 {
+  margin: 10px;
+}
+
+.m15 {
+  margin: 15px;
+}
+
+.m20 {
+  margin: 20px;
+}
+
+.m25 {
+  margin: 25px;
+}
+
+.m30 {
+  margin: 30px;
+}
+
+.m35 {
+  margin: 35px;
+}
+
+.m40 {
+  margin: 40px;
+}
 
 /* 外边距 上下边距 左右居中 */
-.ma0{margin:0 auto;}
-.ma5{margin:5px auto;}
-.ma10{margin:10px auto;}
-.ma15{margin:15px auto;}
-.ma20{margin:20px auto;}
-.ma25{margin:25px auto;}
-.ma30{margin:30px auto;}
-.ma35{margin:35px auto;}
-.ma40{margin:40px auto;}
+.ma0 {
+  margin: 0 auto;
+}
+
+.ma5 {
+  margin: 5px auto;
+}
+
+.ma10 {
+  margin: 10px auto;
+}
+
+.ma15 {
+  margin: 15px auto;
+}
+
+.ma20 {
+  margin: 20px auto;
+}
+
+.ma25 {
+  margin: 25px auto;
+}
+
+.ma30 {
+  margin: 30px auto;
+}
+
+.ma35 {
+  margin: 35px auto;
+}
+
+.ma40 {
+  margin: 40px auto;
+}
 
 /* 上外边距 */
-.mt5 {margin-top: 5px;}
-.mt10 {margin-top: 10px;}
-.mt15 {margin-top: 15px;}
-.mt20 {margin-top: 20px;}
-.mt25 {margin-top: 25px;}
-.mt30 {margin-top: 30px;}
-.mt35 {margin-top: 35px;}
-.mt40 {margin-top: 40px;}
-.mt48 {margin-top: 48px;}
+.mt5 {
+  margin-top: 5px;
+}
+
+.mt10 {
+  margin-top: 10px;
+}
+
+.mt15 {
+  margin-top: 15px;
+}
+
+.mt20 {
+  margin-top: 20px;
+}
+
+.mt25 {
+  margin-top: 25px;
+}
+
+.mt30 {
+  margin-top: 30px;
+}
+
+.mt35 {
+  margin-top: 35px;
+}
+
+.mt40 {
+  margin-top: 40px;
+}
+
+.mt48 {
+  margin-top: 48px;
+}
 
 /* 下外边距 */
-.mb5 {margin-bottom: 5px;}
-.mb10 {margin-bottom: 10px;}
-.mb15 {margin-bottom: 15px;}
-.mb20 {margin-bottom: 20px;}
-.mb25 {margin-bottom: 25px;}
-.mb30 {margin-bottom: 30px;}
-.mb35 {margin-bottom: 35px;}
-.mb40 {margin-bottom: 40px;}
+.mb5 {
+  margin-bottom: 5px;
+}
+
+.mb10 {
+  margin-bottom: 10px;
+}
+
+.mb15 {
+  margin-bottom: 15px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+
+.mb25 {
+  margin-bottom: 25px;
+}
+
+.mb30 {
+  margin-bottom: 30px;
+}
+
+.mb35 {
+  margin-bottom: 35px;
+}
+
+.mb40 {
+  margin-bottom: 40px;
+}
 
 /* 左外边距 */
-.ml5 {margin-left: 5px;}
-.ml10 {margin-left: 10px;}
-.ml15 {margin-left: 15px;}
-.ml20 {margin-left: 20px;}
-.ml25 {margin-left: 25px;}
-.ml30 {margin-left: 30px;}
-.ml35 {margin-left: 35px;}
-.ml40 {margin-left: 40px;}
+.ml5 {
+  margin-left: 5px;
+}
+
+.ml10 {
+  margin-left: 10px;
+}
+
+.ml15 {
+  margin-left: 15px;
+}
+
+.ml20 {
+  margin-left: 20px;
+}
+
+.ml25 {
+  margin-left: 25px;
+}
+
+.ml30 {
+  margin-left: 30px;
+}
+
+.ml35 {
+  margin-left: 35px;
+}
+
+.ml40 {
+  margin-left: 40px;
+}
 
 /* 右外边距 */
-.mr5 {margin-right: 5px;}
-.mr10 {margin-right: 10px;}
-.mr15 {margin-right: 15px;}
-.mr20 {margin-right: 20px;}
-.mr25 {margin-right: 25px;}
-.mr30 {margin-right: 30px;}
-.mr35 {margin-right: 35px;}
-.mr40 {margin-right: 40px;}
+.mr5 {
+  margin-right: 5px;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+
+.mr15 {
+  margin-right: 15px;
+}
+
+.mr20 {
+  margin-right: 20px;
+}
+
+.mr25 {
+  margin-right: 25px;
+}
+
+.mr30 {
+  margin-right: 30px;
+}
+
+.mr35 {
+  margin-right: 35px;
+}
+
+.mr40 {
+  margin-right: 40px;
+}
 
 /*文字对齐方式*/
-.tl{text-align:left;}
-.tr{text-align:right;}
-.tc{text-align:center;}
+.tl {
+  text-align: left;
+}
+
+.tr {
+  text-align: right;
+}
+
+.tc {
+  text-align: center;
+}
 
 /*字体大小*/
-.fs_12{font-size:12px;}
-.fs_14{font-size:14px;}
-.fs_16{font-size:16px;}
-.fs_18{font-size:18px;}
-.fs_20{font-size:20px;}
-.fs_22{font-size:22px;}
-.fs_24{font-size:24px;}
-.fs_26{font-size:26px;}
-.fs_28{font-size:28px;}
-.fs_30{font-size:30px;}
+.fs_12 {
+  font-size: 12px;
+}
+
+.fs_14 {
+  font-size: 14px;
+}
+
+.fs_16 {
+  font-size: 16px;
+}
+
+.fs_18 {
+  font-size: 18px;
+}
+
+.fs_20 {
+  font-size: 20px;
+}
+
+.fs_22 {
+  font-size: 22px;
+}
+
+.fs_24 {
+  font-size: 24px;
+}
+
+.fs_26 {
+  font-size: 26px;
+}
+
+.fs_28 {
+  font-size: 28px;
+}
+
+.fs_30 {
+  font-size: 30px;
+}
 
 /* 清除浮动-父级使用 */
-.fn-clear:after{content:" ";height:0;display:block;font-size:0;visibility:hidden;clear:both;}
+.fn-clear:after {
+  content: " ";
+  height: 0;
+  display: block;
+  font-size: 0;
+  visibility: hidden;
+  clear: both;
+}
 
 /* 清除元素间隙 */
-.fn-clear-gap{font-size:0;list-style:none;margin: 0;padding: 0;letter-spacing: 0;word-spacing: 0;}
+.fn-clear-gap {
+  font-size: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  letter-spacing: 0;
+  word-spacing: 0;
+}
 
 /* 隐藏, 通常用来与 JS 配合 */
-.fn-hide{display:none;}
+.fn-hide {
+  display: none;
+}
 
 /* 隐藏多余内容*/
-.fn-hidden{overflow: hidden}
+.fn-hidden {
+  overflow: hidden
+}
+
 /*  文本超出省略号显示 (一行) ------ 使用方式：@include single-line-ellipsis; */
-@mixin single-line-ellipsis {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;}
+@mixin single-line-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-wrap: break-word;
+  white-space: nowrap;
+  word-break: break-all;
+}
 
 /* 文本超出省略号显示 (多行)，括号里传行数 ------ 使用方式：@include multi-line-ellipsis(3); */
-@mixin multi-line-ellipsis($rows){-webkit-line-clamp:$rows;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;display: -webkit-box;white-space: normal !important;-webkit-box-orient: vertical;}
+@mixin multi-line-ellipsis($rows) {
+  -webkit-line-clamp: $rows;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  overflow: hidden;
+  word-wrap: break-word;
+  display: -webkit-box;
+  white-space: normal !important;
+  -webkit-box-orient: vertical;
+}
 
 
 /************************ 网站公共class样式 author: TX  date:2020-07-30 **********************/
-/* 网站框架 */
-.website-frame{
-  font-family: "Helvetica Neue", Helvetica, Arial, "微软雅黑", sans-serif;
+/**************** 网站框架 ****************/
+.website-frame {
+  font-family: "PingFang SC", "微软雅黑", Arial, sans-serif;
   color: #2C3E50;
   min-width: 1240px;
   // head移动端响应式
-  @media (max-width: 768px){min-width: unset;}
+  @media (max-width: 768px) {
+    min-width: unset;
+  }
 }
 
 /* 饿了么右侧生成的间距 */
-.el-popup-parent--hidden{
-  padding-right:0 !important
+.el-popup-parent--hidden {
+  padding-right: 0 !important
 }
 
 /*  网站主体部分 */
-.client-container{
-  width: 1200px;margin: 0 auto;
-  @media (max-width: 768px){width: auto;padding: 0 15px;max-width: 100%;box-sizing: border-box;}
+.client-container {
+  width: 1260px;
+  margin: 0 auto;
+  @media (max-width: 768px) {
+    width: auto;
+    padding: 0 15px;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+.client-container-middle {
+  width: 960px;
+  margin: 0 auto;
 }
-.client-container-middle{width: 960px;margin: 0 auto;}
 
+/**************** 网站头部 ****************/
 /* 网站头部导航栏 */
-.client-head{
+.client-head {
   width: 100%;
-  //height: 80px;
-  height: 120px;
+  height: 72px;
   z-index: 999;
   background: #fff;
   position: fixed;
-  top:0;
+  top: 0;
+  //box-shadow: -5px 0px 12px 4px #6bbf71;
 
   //头部布局
-  .head-layout{display: flex;justify-content: space-between;}
+  .head-layout {
+    height: 72px;
+    display: flex;
+    justify-content: space-between;
+    @include setFontStyle(-4);
+  }
 
   //头部导航
-  .el-menu--horizontal{
-    border: 0;
-    li:last-child{margin-right: 0}
-      >.el-menu-item {
-        color: rgba(0,0,0,0.85);
-        @include setFontStyle(-2);
-        height: 60px;
-        line-height: 60px;
-        margin: 0 30px;
-        padding: 0!important;
-        a{height: inherit;display: inline-block;padding: 0 6px;}
-      }
-      >.el-menu-item.is-active{
-        @include setThemeColorBase("color", 0);
-        @include setThemeColorBase("border-color", 0);
-        border-width:4px;
-      }
+  .header-nav {
+    > span, > a {
+      margin: 0 30px;
+      color: #333333;
+    }
+
+    > a:last-child {
+      margin-right: 0;
+    }
+
+    > a:visited {
+      color: #333333;
+    }
+
+    > a.active {
+      color: #00B96B;
+      position: relative;
+    }
+
+    .active:before {
+      content: '';
+      width: 88%;
+      height: 2px;
+      background-color: #00B96B;
+      display: block;
+      position: absolute;
+      bottom: -6px;
+      left: 6%;
+    }
+
+    // 导航按钮
+    .head-nav-btn.active {
+      position: relative;
+    }
+
+    .head-nav-btn.active:before {
+      width: 70%;
+      bottom: -10px;
+      left: 4%;
+    }
   }
 
   //头部左侧区域
-  .head-left{
+  .head-container-box {
     display: flex;
     width: 100%;
     justify-content: space-between;
     align-items: center;
     //头部图标
-    .client-head-img{width: 200px;height:79px;display: inline-block;background-image: url("~static/images/client/component/nav-logo.jpg");background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 40px;}
-  }
-
-  //头部右侧区域
-  .head-right{
-      line-height: 60px;position: relative;
-      >a{height: 40px;line-height: 40px;@include setFontStyle(-4);padding: 0 30px;border-radius: 4px;display: inline-block;border: 1px solid #0366cd;color:#0064cc;box-sizing: border-box;text-align: center;}
-      >a.right-tel-btn{width: 130px;color: #fff;background: #3e7ce7;border: 1px solid #3e7ce7;padding: 0 8px;margin-right:10px;position: relative;}
-      >a:hover{cursor: pointer;}
-      .system-box{width: 130px;height: 60px;position: absolute;top: 20px; z-index: 999}
-      .system-box{
-         div{
-          display: none;min-width:260px;height:120px;position: absolute;background: #fff;border: 1px solid #b5b5b5;border-radius: 4px;padding: 10px 8px;left: 0;top:57px;transition: 5s;
-          a{
-            display: inline-block;
-            i{width: 110px;height: 84px;display: block;background-size: cover;}
-          }
-          a:nth-child(1){i{background-image:url("~static/images/client/exam/product-function-icon3.png");} }
-          a:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon6.png");} }
-          span{width: 1px;min-height: 88px;display:inline-block;background:#e8e8e8;@include setFontStyle(-4);margin: 10px;}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);line-height: 24px;text-align: center;}
-        }
-        // 伪类气泡箭头
-        div:after,div:before {
-          width: 0;
-          height: 0;
-          font-size: 0;
-          overflow: hidden;
-          position: absolute;
-          content: ' ';
-          left: 60px;
-        }
-        div:after{
-          border-width: 10px;
-          border-style: dashed dashed solid ;
-          border-color: transparent transparent #ffffff;
-          top: -19px;
-        }
-        div:before{
-          border-width: 10px;
-          border-style: dashed dashed solid ;
-          border-color: transparent transparent #666 ;
-          top:-20px;
-        }
-      }
-    .system-box:hover{
-      >div{
-        display: block;
-      }
+    .client-head-img {
+      width: 112px;
+      height: 51px;
+      display: inline-block;
+      background-image: url("~static/images/client/component/nav-logo.png");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      margin-right: 40px;
     }
   }
 
-  .header-left-container {
+  //头部右侧区域
+  .head-right {
     display: flex;
-    justify-content: flex-end;
     align-items: center;
+    position: relative;
+    border: 1px solid #00B96B;
+    border-radius: 18px;
 
-    .phone-tel-box {
-      margin-right: 20px;
-      display: flex;
-      color: rgb(0, 84, 145);
-      align-items: center;
+    > a, .right-tel-btn {
+      width: 85px;
+      padding: 8px 0;
+      @include setFontStyle(-7);
+      display: inline-block;
+      color: #00B96B;
+      text-align: center;
+      cursor: pointer;
+    }
 
-      .phone-tel-box-icon {
-        width: 25px;
-        height: 25px;
-        display: inline-block;
-        margin-right: 5px;
-        background-image: url("~static/images/client/component/head-phone-icon.png");
-      }
+    .right-tel-btn {
+      color: #fff;
+      background: #00B96B;
+      position: relative;
+      border-radius: 0 18px 18px 0;
+      cursor: default;
+    }
+
+    > a:hover {
+      cursor: pointer;
     }
   }
 
+
   // head移动端响应式
-  @media (max-width: 768px){
+  @media (max-width: 768px) {
     // head
-    height: 60px;border-bottom: 1px solid #e7e7e7;
+    height: 60px;
+    box-shadow: unset;
+    border-bottom: 1px solid #e7e7e7;
+
+    //头部布局
+    .head-layout {
+      height: 60px;
+    }
+
+    //头部左侧区域 logo
+    .head-container-box {
+      justify-content: space-between;
+      height: 60px;
+      align-items: center;
+      padding: 0;
 
-      //头部左侧区域 logo
-    .head-left{
-        justify-content: space-between;height: 60px;align-items: center;padding:0;
-        .client-head-img{width: 92px;height: 46px;background-size: contain;margin:0;}
+      .client-head-img {
+        width: 92px;
+        height: 46px;
+        background-size: contain;
+        margin: 0;
+      }
     }
-      //头部导航
-    .el-menu{position: absolute;margin: 0;left: 0;right: 0;height: 100vh;transition: 0.5s;top: 61px;}
+
     // 手机菜单关闭
-    .head-nav-up{height: 0;display:none;opacity: 0;}
+    .head-nav-up {
+      height: 0;
+      display: none;
+      opacity: 0;
+    }
     // 手机菜单开启
-    .head-nav-down{height: 100vh;display:block;opacity: 1;}
-    // li
-    .el-menu--horizontal>.el-menu-item{float: none;height: 60px;line-height: 60px;border-bottom: 1px solid #e9e9e9;margin:0 18px;
-      border-bottom-color:#e9e9e9!important;font-weight: 700;font-size: 16px;color: rgb(16, 16, 16);}
-    .el-menu--horizontal>.el-menu-item a{width: 100%}
-    .el-menu--horizontal>.el-menu-item:last-child{border: 0;}
-    .el-menu--horizontal > .el-menu-item.is-active{border-bottom: 1px solid #e9e9e9;border-bottom-color: #e9e9e9 !important;}
+    .head-nav-down {
+      height: 100vh;
+      display: block;
+      opacity: 1;
+    }
+
     // 咨询电话
-    .phone-tel-box{color: rgb(0, 84, 145);font-size: 14px;font-weight: bold;line-height: 60px;}
+    .phone-tel-box {
+      color: rgb(0, 84, 145);
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 60px;
+    }
 
     // 按钮
-    .phone-nav-btn{width:30px;height:30px;background-image: url("~static/images/client/component/head-btn-icon.svg");}
+    .phone-nav-btn {
+      width: 30px;
+      height: 30px;
+      background-image: url("~static/images/client/component/head-btn-icon.svg");
+    }
 
     // 布局
-    .head-layout{display: block}
+    .head-layout {
+      display: block
+    }
   }
 }
 
-/* 网站头部导栏 - 面包屑 */
-.client-breadcrumb-box {
-  width: 1200px;
-  font-size: 16px;
-  margin: 24px auto;
-  .st-breadcrumb{
-    margin-left: 24px;
-    a:last-child{
-      .breadcrumb-div::after{display: none;}
-    }
-  }
-  .st-breadcrumb-item {display: inline-block;vertical-align: middle;color: #4a73fd;text-decoration: none;}
-  .st-breadcrumb-item:hover {cursor: pointer;}
-  .st-breadcrumb-item:after {width: 11px;height: 16px;content: '';display: inline-block;padding: 0 16px;vertical-align: middle;zoom:0.8;-moz-transform:scale(0.8,0.8);
-    background-image: url("~static/images/client/component/breadcrumb-icon.svg");background-repeat: no-repeat;background-position: center;}
-  .breadcrumb-div{display: inline-block;vertical-align: middle;}
-  .st-breadcrumb-item-last {display: inline-block;text-decoration: none;color: #333;vertical-align: middle;}
-  .st-breadcrumb-item-last:hover {cursor: default;}
-  // IE11兼容写法
-  @media all and (-ms-high-contrast:none) {
-    *::-ms-backdrop, .st-breadcrumb-item-last { margin-left: -10px;}
-  }
-  // IE10兼容写法
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .st-breadcrumb-item-last { margin-left: -10px;}
+/* 导航二级菜单 */
+.head-popper-box {
+  width: 940px;
+  display: flex;
+  align-items: center;
+  // 箭头
+  .popper__arrow::after {
+    content: ' ';
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    border-width: 6px;
+    border-style: dashed dashed solid;
+    border-color: transparent transparent #00B96B !important;
+    top: -12px;
   }
-}
 
-/* 网站标题 */
-.client-title{
-  @include setFontStyle(10);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;
-  // head移动端响应式
-  @media (max-width: 768px){@include setFontStyle(-4);padding-top: 20px;font-weight: 700;color: rgb(16, 16, 16);}
-}
+  // 列表
+  .head-popper-item {
+    width: 23%;
+    display: flex;
+    margin: 16px 1%;
+    align-items: center;
 
-/* 网站副标题 */
-.client-subtitle-title{
-  width: 650px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 30px;margin:0 auto;margin-top: 16px;text-align: center;
-  @media (max-width: 768px){width: 100%;text-align: justify;@include setFontStyle(-6);line-height: 24px;}
-}
-.client-subtitle-title-big{
-  width: 1000px;padding:0 100px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 30px;margin:0 auto;margin-top: 48px;text-align: center;
-  @media (max-width: 768px){width: 100%;text-align: justify;margin-top: 24px;padding: 0;@include setFontStyle(-6);line-height: 24px;}
+    i {
+      width: 34px;
+      height: 34px;
+      background-size: contain;
+      display: inline-block;
+      margin-right: 16px;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    .head-popper-title {
+      @include setFontStyle(-6);
+      color: #333;
+      margin-bottom: 4px;
+      display: inline-block;
+    }
+
+    .head-popper-des {
+      display: block;
+      @include setFontStyle(-8);
+      color: #9c9c9c;
+    }
+  }
 }
 
-/* 网站通用按钮 */
-.client-default-Btn{display: block;@include setFontStyle(-4);background: #2B5CFD;color: rgba(255, 255, 255, 0.85);border-radius: 4px;transition: .3s all linear;text-align: center;}
-.client-default-Btn:hover{background: #2249C9;cursor: pointer;}
-// 白色
-.client-default-white-Btn{display: block;@include setFontStyle(-4);background: #fff;color: #2B5CFD;border-radius: 4px;transition: .3s all linear;text-align: center;}
-.client-default-white-Btn:hover{background: #fff;cursor: pointer;}
-// 免费试用按钮
-.free-trial-default-btn{
-  width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;display: block;@include setFontStyle(-4);background: #3e7ee7;
-  color: rgba(255, 255, 255, 0.85);border-radius: 4px;transition: .3s all linear;text-align: center;
-  @media (max-width: 768px){width: 122px;height: 35px;line-height: 35px;margin: 16px auto 28px;}
+.head-popper-box:before {
+  content: ' ';
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: #00b96b;
+  border-radius: 4px 4px 0 0;
 }
-.free-trial-default-btn:hover{cursor: pointer;}
 
-  /* 网站底部footer */
-.client-footer{
-  background: #1E2534;padding-bottom: 50px;
-  //footer内容区域
-  .contact-box{
-    padding-top: 40px;
-    .contact-left-box{
-      display: inline-block;
-      dl{display: inline-block;margin-right: 48px;margin-bottom: 40px;vertical-align: top;}
-      dt{@include setFontStyle(-4);color: #FFFFFF;margin-bottom: 24px;}
-      dd,dd a{@include setFontStyle(-6);color: rgba(255,255,255,0.64);margin-bottom: 8px;}
-      dd:hover,dd a:hover{color: rgba(255,255,255,0.85);cursor: pointer}
-      // 二维码
-      .two-code-box{position: relative;}
-      .two-dimensional-code{width: 110px;height: 110px;background-color: #fff;background-image: url("~static/images/client/component/two-dimensional-code.jpg");display: none;position: absolute;left: 85px;top:-40px;background-size: cover;border-radius: 4px;transition: .5s; }
-      .two-dimensional-code:before{width: 0;height: 0;content: "";display: none;margin-left: -20px;margin-top: 40px;border-width: 10px;border-style: solid;border-color: transparent #fff transparent transparent;transition: .5s; }
-      .two-code-box:hover{
-        cursor: default;
-        .two-dimensional-code{display: block;}
-        .two-dimensional-code:before{display: block;}
-      }
+/*  产品 二级菜单 */
+.cp-popper-box {
+  margin-top: 24px !important;
+  // 列表
+  .head-popper-item:nth-child(1) {
+    i {
+      background-image: url("~static/images/client/component/head-cp-icon1.png");
     }
-    .contact-right-box{
-      //width: 170px;
-      float: right;
-      .right-sw-box{
-        margin-right: 24px;
-        h4{@include setFontStyle(-4);color: #FFFFFF;margin-bottom: 16px;text-align: center}
-        img{width: 100px}
-      }
-      div{display: inline-block}
-      h3{@include setFontStyle(4);color: #FFF;margin-bottom: 16px;}
-      p{@include setFontStyle(-6);color: rgba(255,255,255,0.64);margin-bottom: 8px;}
-      a{@include setFontStyle(-6);color: #2B5CFD;}
-      a:hover{cursor: pointer;}
+  }
+
+  .head-popper-item:nth-child(2) {
+    i {
+      background-image: url("~static/images/client/component/head-cp-icon2.png");
     }
   }
+
+  .head-popper-item:nth-child(3) {
+    i {
+      background-image: url("~static/images/client/component/head-cp-icon3.png");
+    }
+  }
+
+  .head-popper-item:nth-child(4) {
+    i {
+      background-image: url("~static/images/client/component/head-cp-icon4.png");
+    }
+  }
+}
+
+/*  解决方案 二级菜单 */
+.jj-popper-box {
+  padding: 24px 42px;
+  box-sizing: border-box;
+  margin-top: 24px !important;
+  // head-popper-content
+  .head-popper-content {
+    width: 100%;
+  }
+
+  // 横线
+  em {
+    width: 800px;
+    height: 1px;
+    display: block;
+    margin: 10px auto 24px;
+    background: #f2f2f2;
+  }
+
+  // 标题
+  h3 {
+    font-size: 16px;
+    font-weight: 700;
+    text-align: left;
+    color: #333333;
+    margin-left: 12px;
+  }
+
+  // 列表行
+  .head-popper-cj-row, .head-popper-hy-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  // 场景解决方案 - icon
+  .head-popper-cj-row {
+    .head-popper-item:nth-child(1) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon1.png");
+      }
+    }
+
+    .head-popper-item:nth-child(2) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon2.png");
+      }
+    }
+
+    .head-popper-item:nth-child(3) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon3.png");
+      }
+    }
+
+    .head-popper-item:nth-child(4) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon4.png");
+      }
+    }
+  }
+
+  // 行业解决方案 - icon
+  .head-popper-hy-row {
+    .head-popper-item:nth-child(1) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon5.png");
+      }
+    }
+
+    .head-popper-item:nth-child(2) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon6.png");
+      }
+    }
+
+    .head-popper-item:nth-child(3) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon7.png");
+      }
+    }
+
+    .head-popper-item:nth-child(4) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon8.png");
+      }
+    }
+
+    .head-popper-item:nth-child(5) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon9.png");
+      }
+    }
+
+    .head-popper-item:nth-child(6) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon10.png");
+      }
+    }
+
+    .head-popper-item:nth-child(7) {
+      i {
+        background-image: url("~static/images/client/component/head-jj-icon11.png");
+      }
+    }
+  }
+}
+
+/*  免费注册 二级菜单 */
+.system-popper-box {
+  width: 450px;
+  margin-top: 12px !important;
+
+  .head-popper-item {
+    width: 50%;
+    margin: 16px auto;
+  }
+
+  .head-popper-item:nth-child(1) {
+    i {
+      background-image: url("~static/images/client/component/head-exam-icon.png");
+    }
+  }
+
+  .head-popper-item:nth-child(2) {
+    i {
+      background-image: url("~static/images/client/component/head-train-icon.png");
+    }
+  }
+}
+
+/* 网站头部导栏 - 面包屑 */
+.client-breadcrumb-box {
+  width: 1260px;
+  font-size: 16px;
+  margin: 24px auto;
+
+  .st-breadcrumb {
+    margin-left: 24px;
+
+    a:last-child {
+      .breadcrumb-div::after {
+        display: none;
+      }
+    }
+  }
+
+  .st-breadcrumb-item {
+    display: inline-block;
+    vertical-align: middle;
+    color: #4a73fd;
+    text-decoration: none;
+  }
+
+  .st-breadcrumb-item:hover {
+    cursor: pointer;
+  }
+
+  .st-breadcrumb-item:after {
+    width: 11px;
+    height: 16px;
+    content: '';
+    display: inline-block;
+    padding: 0 16px;
+    vertical-align: middle;
+    zoom: 0.8;
+    -moz-transform: scale(0.8, 0.8);
+    background-image: url("~static/images/client/component/breadcrumb-icon.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .breadcrumb-div {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .st-breadcrumb-item-last {
+    display: inline-block;
+    text-decoration: none;
+    color: #333;
+    vertical-align: middle;
+  }
+
+  .st-breadcrumb-item-last:hover {
+    cursor: default;
+  }
+
+  // IE11兼容写法
+  @media all and (-ms-high-contrast: none) {
+    *::-ms-backdrop, .st-breadcrumb-item-last {
+      margin-left: -10px;
+    }
+  }
+  // IE10兼容写法
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .st-breadcrumb-item-last {
+      margin-left: -10px;
+    }
+  }
+}
+
+/**************** 网站内容 ****************/
+/* 网站标题 */
+.client-title {
+  @include setFontStyle(10);
+  color: #333;
+  letter-spacing: 0;
+  padding-top: 80px;
+  text-align: center;
+  font-weight: 800;
+  // head移动端响应式
+  @media (max-width: 768px) {
+    @include setFontStyle(-2);
+    padding-top: 20px;
+    font-weight: 700;
+    color: rgb(16, 16, 16);
+  }
+}
+
+/* 网站副标题 */
+.client-subtitle-title {
+  width: 650px;
+  @include setFontStyle(-4);
+  color: rgba(0, 0, 0, 0.65);
+  line-height: 30px;
+  margin: 0 auto;
+  margin-top: 16px;
+  text-align: center;
+  @media (max-width: 768px) {
+    width: 100%;
+    text-align: justify;
+    @include setFontStyle(-6);
+    line-height: 24px;
+  }
+}
+
+// 一行副标题
+.client-subtitle-one-row {
+  @include setFontStyle(-2);
+  color: #565656;
+  margin: 40px 0;
+  text-align: center;
+}
+
+.client-subtitle-title-big {
+  width: 1000px;
+  padding: 0 100px;
+  @include setFontStyle(-4);
+  color: rgba(0, 0, 0, 0.65);
+  line-height: 30px;
+  margin: 0 auto;
+  margin-top: 48px;
+  text-align: center;
+  @media (max-width: 768px) {
+    width: 100%;
+    text-align: justify;
+    margin-top: 24px;
+    padding: 0;
+    @include setFontStyle(-6);
+    line-height: 24px;
+  }
+}
+
+/* 网站通用按钮 */
+.client-default-Btn {
+  display: block;
+  @include setFontStyle(-4);
+  background: #2B5CFD;
+  color: rgba(255, 255, 255, 0.85);
+  border-radius: 4px;
+  transition: .3s all linear;
+  text-align: center;
+}
+
+.client-default-Btn:hover {
+  background: #2249C9;
+  cursor: pointer;
+}
+
+// 白色
+.client-default-white-Btn {
+  display: block;
+  @include setFontStyle(-4);
+  background: #fff;
+  color: #2B5CFD;
+  border-radius: 4px;
+  transition: .3s all linear;
+  text-align: center;
+}
+
+.client-default-white-Btn:hover {
+  background: #fff;
+  cursor: pointer;
+}
+
+// 免费试用按钮
+.free-trial-default-btn {
+  width: 238px;
+  height: 40px;
+  line-height: 40px;
+  margin: 40px auto 0;
+  display: block;
+  @include setFontStyle(-4);
+  background: #3e7ee7;
+  color: rgba(255, 255, 255, 0.85);
+  border-radius: 4px;
+  transition: .3s all linear;
+  text-align: center;
+  @media (max-width: 768px) {
+    width: 122px;
+    height: 35px;
+    line-height: 35px;
+    margin: 16px auto 28px;
+  }
+}
+
+.free-trial-default-btn:hover {
+  cursor: pointer;
+}
+
+/* 网站底部footer */
+.client-footer {
+  background: #1E2534;
+  padding-bottom: 50px;
+  //footer内容区域
+  .contact-box {
+    padding-top: 40px;
+
+    .contact-left-box {
+      display: inline-block;
+
+      dl {
+        display: inline-block;
+        margin-right: 48px;
+        margin-bottom: 40px;
+        vertical-align: top;
+      }
+
+      dt {
+        @include setFontStyle(-4);
+        color: #FFFFFF;
+        margin-bottom: 24px;
+      }
+
+      dd, dd a {
+        @include setFontStyle(-6);
+        color: rgba(255, 255, 255, 0.64);
+        margin-bottom: 8px;
+      }
+
+      dd:hover, dd a:hover {
+        color: rgba(255, 255, 255, 0.85);
+        cursor: pointer
+      }
+
+      // 二维码
+      .two-code-box {
+        position: relative;
+      }
+
+      .two-dimensional-code {
+        width: 110px;
+        height: 110px;
+        background-color: #fff;
+        background-image: url("~static/images/client/component/two-dimensional-code.jpg");
+        display: none;
+        position: absolute;
+        left: 85px;
+        top: -40px;
+        background-size: cover;
+        border-radius: 4px;
+        transition: .5s;
+      }
+
+      .two-dimensional-code:before {
+        width: 0;
+        height: 0;
+        content: "";
+        display: none;
+        margin-left: -20px;
+        margin-top: 40px;
+        border-width: 10px;
+        border-style: solid;
+        border-color: transparent #fff transparent transparent;
+        transition: .5s;
+      }
+
+      .two-code-box:hover {
+        cursor: default;
+
+        .two-dimensional-code {
+          display: block;
+        }
+
+        .two-dimensional-code:before {
+          display: block;
+        }
+      }
+
+      .logo {
+        width: 80px;
+        height: 120px;
+        display: inline-block;
+        background-image: url("~static/gangweiIcon/z146.png");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+      }
+    }
+
+    .contact-right-box {
+      //width: 170px;
+      float: right;
+
+      .right-sw-box {
+        margin-right: 24px;
+
+        h4 {
+          @include setFontStyle(-4);
+          color: #FFFFFF;
+          margin-bottom: 16px;
+          text-align: center
+        }
+
+        img {
+          width: 100px
+        }
+      }
+
+      div {
+        display: inline-block
+      }
+
+      h3 {
+        @include setFontStyle(4);
+        color: #FFF;
+        margin-bottom: 16px;
+      }
+
+      p {
+        @include setFontStyle(-6);
+        color: rgba(255, 255, 255, 0.64);
+        margin-bottom: 8px;
+      }
+
+      a {
+        @include setFontStyle(-6);
+        color: #2B5CFD;
+      }
+
+      a:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
   //友情链接区域
-  .link-box{
-    border-top: 1px solid  #333B4C;
+  .link-box {
+    border-top: 1px solid #333B4C;
     border-right: 0;
     border-left: 0;
     padding: 32px 0;
-    h4{@include setFontStyle(-4);color: #FFF;float: left;margin-right: 48px;line-height: 22px;}
-    .link-a-box{
+
+    h4 {
+      @include setFontStyle(-4);
+      color: #FFF;
+      float: left;
+      margin-right: 48px;
+      line-height: 22px;
+    }
+
+    .link-a-box {
       margin-left: 114px;
       line-height: 22px;
-      a{@include setFontStyle(-6);color: rgba(255,255,255,0.54);display:inline-block;margin-right: 32px;white-space: nowrap;}
-      a:hover{color: rgba(255,255,255,0.85);cursor: pointer;}
+
+      a {
+        @include setFontStyle(-6);
+        color: rgba(255, 255, 255, 0.54);
+        display: inline-block;
+        margin-right: 32px;
+        white-space: nowrap;
+      }
+
+      a:hover {
+        color: rgba(255, 255, 255, 0.85);
+        cursor: pointer;
+      }
     }
   }
+
   //底部版权
-  h5{@include setFontStyle(-8);color: #B8B8B8;text-align: center;padding: 16px 0 24px;border-top: 1px solid  #333B4C;}
+  h5 {
+    @include setFontStyle(-8);
+    color: #B8B8B8;
+    text-align: center;
+    padding: 16px 0 24px;
+    border-top: 1px solid #333B4C;
+  }
+
   @media (max-width: 768px) {
     .phone-footer-box {
-      text-align: center;padding: 20px 0;
-      a,p{@include setFontStyle(-10);color: #fff;padding: 6px 0}
-      a{display: block}
+      margin-bottom: 70px;
+      text-align: center;
+      padding: 20px 0;
+
+      a, p {
+        @include setFontStyle(-10);
+        color: #fff;
+        padding: 6px 0
+      }
+
+      a {
+        display: block
+      }
     }
   }
 }
 
 /* 网站分页 */
-.client-el-pagination{text-align: center;margin-top: 36px}
+.client-el-pagination {
+  text-align: center;
+  margin-top: 36px
+}
 
 /* 网站通用详情页布局 */
-.client-details-page{
+.client-details-page {
   background: #f9faff;
   width: 100%;
   padding: 24px 0;
   // 时间人数
-  .details-visits-box{
+  .details-visits-box {
     margin-bottom: 16px;
-    i{width: 20px;height: 20px;display: inline-block;margin-right: 14px;vertical-align: middle;background-image: url("~static/images/client/newsInfor/newsInfor-details-time.svg");}
-    i[type="visits"]{background-image: url("~static/images/client/newsInfor/newsInfor-details-visits.svg");}
-    span{@include setFontStyle(-6);display:inline-block;color: #666;margin-right: 60px;vertical-align: middle;}
+
+    i {
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      margin-right: 14px;
+      vertical-align: middle;
+      background-image: url("~static/images/client/newsInfor/newsInfor-details-time.svg");
+    }
+
+    i[type="visits"] {
+      background-image: url("~static/images/client/newsInfor/newsInfor-details-visits.svg");
+    }
+
+    span {
+      @include setFontStyle(-6);
+      display: inline-block;
+      color: #666;
+      margin-right: 60px;
+      vertical-align: middle;
+    }
   }
 
   //行业资讯详情外层box
-  .client-details-box{
-    width: 1200px;
+  .client-details-box {
+    width: 1260px;
     margin: 0 auto;
     padding: 24px;
     box-sizing: border-box;
     background: #FFFFFF;
     border-radius: 8px;
   }
+
   // 行业资讯详情
-  .client-details-wrap{
+  .client-details-wrap {
     width: 820px;
     display: inline-block;
     padding-right: 24px;
-    border-right:1px solid #DCE0E8;
+    border-right: 1px solid #DCE0E8;
     box-sizing: border-box;
     vertical-align: top;
-    >h1{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
+
+    > h1 {
+      @include setFontStyle(-2);
+      color: rgba(0, 0, 0, 0.85);
+      margin-bottom: 16px;
+    }
+
     //内容区域
-    .client-content-box{
+    .client-content-box {
       min-height: calc(100vh - 587px);
       line-height: 24px;
-      color: rgba(0,0,0,0.64);
+      color: rgba(0, 0, 0, 0.64);
       @include setFontStyle(-6);
       margin-bottom: 70px;
-      p{line-height: 22px;}
-      img{max-width: 100%;}
-      h1,h2,h3,h4,h5,h6,p{margin-bottom: 10px;}
+
+      p {
+        line-height: 24px;
+      }
+
+      img {
+        max-width: 100%;
+      }
+
+      h1, h2, h3, h4, h5, h6, p {
+        margin-bottom: 10px;
+      }
     }
+
     // 上一篇下一篇
-    .client-details-pagination{
-      a{max-width: 45%;float: left;@include setFontStyle(-4);color: rgba(43,92,253,0.85);display: inline-block;@include single-line-ellipsis;}
-      a:last-child{margin-left: 10%;float: right;}
-      a:hover{color: #1648EE;cursor: pointer}
+    .client-details-pagination {
+      a {
+        max-width: 45%;
+        float: left;
+        @include setFontStyle(-4);
+        color: rgba(43, 92, 253, 0.85);
+        display: inline-block;
+        @include single-line-ellipsis;
+      }
+
+      a:last-child {
+        margin-left: 10%;
+        float: right;
+      }
+
+      a:hover {
+        color: #1648EE;
+        cursor: pointer
+      }
     }
   }
 
-  // 最新新闻
-  .latest-news-box{
-    width: 300px;
-    padding-left: 24px;
-    display: inline-block;
-    vertical-align: top;
-    h4{@include setFontStyle(-4);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
-    .latest-news-list{
-      li{margin-bottom: 24px}
-      a{width: 100%;@include setFontStyle(-4);display:inline-block;color: rgba(43,92,253,0.65);margin-bottom: 8px;@include single-line-ellipsis;}
-      a:hover{color: rgba(43,92,253,0.85);cursor: pointer}
+  // 最新新闻
+  .latest-news-box {
+    width: 300px;
+    padding-left: 24px;
+    display: inline-block;
+    vertical-align: top;
+
+    h4 {
+      @include setFontStyle(-4);
+      color: rgba(0, 0, 0, 0.85);
+      margin-bottom: 16px;
+    }
+
+    .latest-news-list {
+      li {
+        margin-bottom: 23px
+      }
+
+      a {
+        width: 100%;
+        @include setFontStyle(-4);
+        display: inline-block;
+        color: #333;
+        @include single-line-ellipsis;
+      }
+
+      a:hover {
+        color: #00b96b;
+        cursor: pointer
+      }
+    }
+
+    // 时间人数
+    .details-visits-box span {
+      margin-right: 24px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: 0;
+    // 时间人数
+    .details-visits-box {
+      margin-bottom: 36px;
+      text-align: center;
+
+      i {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+        background-size: cover;
+      }
+
+      span {
+        @include setFontStyle(-8);
+        margin-right: 24px;
+        line-height: 12px;
+      }
+    }
+    //行业资讯详情外层box
+    .client-details-box {
+      width: 100%;
+    }
+    // 行业资讯详情
+    .client-details-wrap {
+      width: 100%;
+      border: 0;
+      padding-right: 0;
+
+      > h1 {
+        @include setFontStyle(-4);
+        margin: 16px 0;
+        text-align: center;
+        font-weight: bolder;
+      }
+
+      //内容区域
+      .client-content-box {
+        min-height: unset;
+      }
+
+      // 上一篇下一篇按钮
+      .client-details-pagination a {
+        border: 1px solid rgba(43, 92, 253, 0.85);
+        padding: 4px 12px;
+        border-radius: 4px;
+      }
+
+    }
+  }
+}
+
+/* 网站通用轮播 */
+/*.client-industry-information{
+  background-image: url("~static/images/client/index/index-industry-bg.png");
+  background-position: center;
+  padding-bottom: 80px;
+
+  // 标题
+  .client-title{
+    color: #fff;
+  }
+
+  // 轮播
+  .information-carousel-box{
+    width: 100%;
+    overflow: hidden;
+  }
+
+  // 轮播组件
+  .el-carousel--horizontal{
+    overflow: visible;
+  }
+  .el-carousel{
+    width: 1000px;
+    margin: 0 auto;
+    margin-top: 48px;
+    .el-carousel__container{width: 640px;height: 320px;margin: 0 auto;position: relative;}
+  }
+  .el-carousel__item{
+    width: 640px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    .industry-img-box{width: 50%;height: 320px;float: left;background-repeat: no-repeat;background-size: cover;}
+    .industry-content-box{
+      height: inherit;margin-left: 50%;padding:32px;box-sizing: border-box;position: relative;
+      h5{@include setFontStyle(2);color: rgba(0,0,0,0.85);margin-bottom: 16px;@include multi-line-ellipsis(2);line-height: 30px;max-height: 60px;}
+      p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(6);margin-bottom: 24px;max-height: 144px;}
+      a{width: 132px;height: 32px;line-height:32px;position: absolute;bottom: 32px;}
+    }
+  }
+  !*.el-carousel__item.is-active{
+    .industry-img-box{width: 50%;}
+    .industry-content-box{margin-left: 50%;}
+  }*!
+
+  // 左右按钮
+  .el-carousel__arrow{width: 50px;height: 50px;background-color: rgba(43, 92, 253, 0.22);@include setFontStyle(16);color: rgba(255,255,255,0.8);}
+
+  // 左箭头
+  .el-carousel__arrow--left{left:-200px;}
+
+  // 右箭头
+  .el-carousel__arrow--right{right:-200px;}
+
+  // 指示器
+  .el-carousel__indicators{display: none}
+}*/
+
+/* 网站通用弹窗-申请方案 */
+.application-scheme-dialog {
+  .el-dialog {
+    width: 610px;
+    border-radius: 8px;
+  }
+
+  .el-dialog__body {
+    padding: 30px 120px 60px;
+
+    > i {
+      width: 213px;
+      height: 92px;
+      display: block;
+      background-image: url("~static/images/client/component/nav-logo.png");
+      margin: 0 auto;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center
+    }
+
+    p {
+      @include setFontStyle(-2);
+      color: rgba(0, 0, 0, 0.85);
+      text-align: center;
+      margin: 24px 0 36px;
+    }
+
+    span {
+      @include setFontStyle(-6);
+      color: #fff
+    }
+
+    a {
+      @include setFontStyle(-6);
+      color: #2B5CFD;
+      float: right;
+    }
+
+    // 申请注册按钮
+    .application-scheme-btn {
+      height: 40px;
+      line-height: 40px;
+      @include setFontStyle(-4);
+      background: #1890FF;
+      border-radius: 4px;
+      color: #FFFFFF;
+      text-align: center;
+      margin-bottom: 16px;
+      cursor: pointer;
+    }
+  }
+
+  // 输入框上下间距
+  .el-form-item {
+    margin-bottom: 24px
+  }
+
+  // 输入框左右间距
+  .el-input .el-input__inner {
+    padding: 0 15px 0 35px;
+  }
+
+  //输入框图标
+  .dialog-input-tel:after, .dialog-input-code:after {
+    width: 16px;
+    height: 16px;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 12px;
+    left: 12px;
+  }
+
+  .dialog-input-tel:after {
+    background-image: url("~static/images/client/course/course-dialog-icon1.svg");
+  }
+
+  .dialog-input-code:after {
+    background-image: url("~static/images/client/course/course-dialog-icon2.svg");
+  }
+
+  // 输入框-验证码
+  .dialog-input-code {
+    width: calc(100% - 132px);
+  }
+
+  .dialog-code-btn.el-button {
+    width: 120px;
+    box-sizing: border-box;
+    padding: 12px 15px;
+    margin-left: 8px;
+  }
+
+  // 滑块px
+  .nc-container {
+    .nc_wrapper {
+      width: 100% !important;
+      margin-bottom: 24px;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .nc_scale {
+      .btn_slide {
+        color: #fff;
+      }
+
+      span {
+        width: 50px;
+        background: #00b96b;
+        border-radius: 0 4px 4px 0;
+        border: 1px solid transparent;
+      }
+    }
+  }
+}
+
+.application-scheme-result-dialog {
+  .el-dialog {
+    width: 512px;
+  }
+
+  .el-dialog__body {
+    position: relative;
+    height: 360px;
+    width: 460px;
+    text-align: center;
+    margin: 0 auto;
+  }
+
+  .success_icon {
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-70%);
+    width: 142px;
+    height: 142px;
+  }
+
+  h3 {
+    font-size: 36px;
+    font-weight: 800;
+    color: #333333;
+    margin-top: 28px;
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 500;
+    color: #565656;
+    margin-top: 28px;
+  }
+
+  .my-btn {
+    height: 57px;
+    width: 257px;
+    text-align: center;
+    line-height: 57px;
+    border-radius: 6px;
+    background-color: #00b96b;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 400;
+    margin: 80px auto 0;
+  }
+}
+
+
+/* 网站通用弹窗-视频播放 */
+.course-video-dialog {
+  .el-dialog {
+    width: 940px;
+    border-radius: 8px;
+  }
+
+  .el-dialog__body {
+    padding: 14px 40px 80px;
+  }
+
+  // 标题
+  .el-dialog__title {
+    @include setFontStyle(-2);
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  // 视频
+  .course-video-box {
+    width: 100%;
+    height: 480px;
+  }
+
+  p {
+    @include setFontStyle(-4);
+    color: rgba(0, 0, 0, 0.65);
+    margin-top: 16px;
+    line-height: 22px
+  }
+
+  @media (max-width: 768px) {
+    .el-dialog {
+      width: 90%;
+      border-radius: 8px;
+      margin: 0 5%;
+    }
+    .el-dialog__body {
+      padding: 18px 16px;
+    }
+    // 视频
+    .course-video-box {
+      height: 180px;
+    }
+    p {
+      @include setFontStyle(-6);
+      padding: 10px 0 16px;
+      margin: 0
+    }
+  }
+}
+
+/* 首页行业学习详情页-通用部分 */
+// banner
+.industrydetails-banner {
+  width: 100%;
+  height: 400px;
+  background-color: #042D85;
+  position: relative;
+
+  .industrydetails-banner-box {
+    width: inherit;
+    height: inherit;
+    background-position-x: center;
+    background-repeat: no-repeat;
+  }
+
+  .free-trial-default-btn {
+    position: absolute;
+    top: 280px;
+    left: 50%;
+    margin-left: -119px;
+  }
+
+  @media (max-width: 768px) {
+    height: 150px;
+    .industrydetails-banner-box {
+      background-size: cover;
+    }
+    .free-trial-default-btn {
+      top: 95px;
+      margin-left: -61px;
+    }
+  }
+}
+
+// 发展现状
+.industrydetails-develop-box {
+  .client-container {
+    padding: 48px 0 80px;
+    text-align: center;
+  }
+
+  p {
+    width: 480px;
+    display: inline-block;
+    @include setFontStyle(-5);
+    color: rgba(0, 0, 0, 0.65);
+    line-height: 30px;
+    vertical-align: middle;
+    margin-right: 120px;
+    text-align: justify;
+  }
+
+  img {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  @media (max-width: 768px) {
+    .client-container {
+      padding: 16px 30px 48px;
+      display: flex;
+      flex-direction: column-reverse;
+    }
+    p {
+      width: 100%;
+      display: block;
+      @include setFontStyle(-6);
+      color: rgba(85, 85, 85, 1);
+      line-height: 24px;
+      margin-right: 0;
+    }
+    img {
+      max-width: 100%;
+      display: block;
+      vertical-align: unset;
+      margin-bottom: 16px;
+    }
+  }
+}
+
+// 产品和服务
+.products-services-box {
+  width: 100%;
+  display: inline-block;
+  // 头部图片
+  img {
+    width: 640px;
+    height: 485px;
+    float: right;
+  }
+
+  // 内容区域
+  .products-services-content {
+    width: 520px;
+    float: right;
+    padding: 110px 12px 0;
+    box-sizing: border-box;
+    margin: 0 20px;
+    @include setFontStyle(-6);
+
+    h5 {
+      @include setFontStyle(4);
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    i {
+      width: 50px;
+      height: 5px;
+      display: block;
+      background: #3e7ce7;
+      margin: 24px 0;
+    }
+
+    p {
+      line-height: 24px;
+      color: rgba(0, 0, 0, 0.65);
+      margin-bottom: 56px;
+      text-align: justify;
+    }
+
+    .p-before-circle {
+      margin-bottom: 6px;
+    }
+
+    .p-before-circle:before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      display: inline-block;
+      border-radius: 3px;
+      margin-right: 8px;
+      background: #3e7ce7;
+      vertical-align: middle;
+    }
+
+    .client-btn-box {
+      margin: 40px 0
+    }
+
+    .client-default-Btn, .client-default-white-Btn {
+      width: 150px;
+      height: 40px;
+      line-height: 40px;
+      display: inline-block;
+      background: #3e7ce7;
+      border: 1px solid #3e7ce7;
+      box-sizing: border-box;
+    }
+
+    .client-default-white-Btn {
+      background: #fff;
+      color: #3e7ce7;
+    }
+
+    a, div.client-default-Btn {
+      margin-right: 24px
+    }
+
+    span.client-default-Btn {
+      background: #fff;
+      color: #3e7ce7;
+      margin-right: 0;
+    }
+  }
+
+  @media (max-width: 768px) {
+    // 头部图片
+    img {
+      width: 100%;
+      height: auto;
+      float: none;
+    }
+    // 内容区域
+    .products-services-content {
+      width: 100%;
+      float: none;
+      padding: 0 10px;
+      margin: 0;
+      @include setFontStyle(-6);
+
+      h5 {
+        @include setFontStyle(-6);
+        font-weight: 700;
+        color: rgba(0, 0, 0, 1);
+      }
+
+      i {
+        width: 34px;
+        height: 3px;
+        margin: 10px 0;
+      }
+
+      p {
+        margin-bottom: 30px;
+        color: rgba(85, 85, 85, 1);
+      }
+
+      .client-btn-box {
+        text-align: center;
+        margin: 40px 0;
+      }
+
+      .client-default-Btn, .client-default-white-Btn {
+        width: 120px;
+        height: 35px;
+        line-height: 35px;
+      }
+
+      a, div.client-default-Btn {
+        margin-right: 16px
+      }
+    }
+  }
+}
+
+.products-contrary-box {
+  // 头部图片
+  img {
+    float: left;
+  }
+
+  // 内容区域
+  .products-services-content {
+    float: right;
+  }
+}
+
+// 考试平台和培训平台样式--多下边线
+.platform-products-services {
+  li:not(:last-child) {
+    border-bottom: 1px solid #eee;
+  }
+}
+
+// 详情页内容
+.industrydetails-content {
+  li {
+    margin-bottom: 16px;
+  }
+
+  i {
+    width: 14px;
+    height: 14px;
+    float: left;
+    box-sizing: border-box;
+    opacity: 0.8;
+    display: block;
+    border: 1px solid #13192D;
+    transform: rotate(45deg);
+    margin-right: 16px;
+    margin-top: 4px;
+  }
+
+  h5 {
+    @include setFontStyle(-2);
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 24px;
+    text-align: center;
+  }
+
+  p {
+    @include setFontStyle(-5);
+    color: rgba(0, 0, 0, 0.65);
+    line-height: 22px;
+    text-align: left;
+  }
+
+  @media (max-width: 768px) {
+    li {
+      margin-bottom: 10px;
+    }
+    i {
+      width: 10px;
+      height: 10px;
+      margin-right: 8px;
+      margin-top: 8px;
+    }
+    h5 {
+      @include setFontStyle(-4);
+      color: rgba(255, 255, 255, 1);
+      margin-bottom: 16px;
+      text-align: center;
+      font-weight: 700;
+    }
+    p {
+      @include setFontStyle(-6);
+      color: rgba(255, 255, 255, 1);
+      line-height: 24px;
+      text-align: justify;
+    }
+  }
+}
+
+// 通用平台-新闻资讯样式
+.platform-news-information {
+  padding-bottom: 80px;
+  background: #f8f8f8;
+
+  ul {
+    margin-top: 48px;
+  }
+
+  li {
+    width: 50%;
+    display: inline-block;
+    vertical-align: top;
+
+    div {
+      margin: 10px;
+      padding: 10px 10px 10px 0;
+      border-bottom: 1px dashed #666;
+    }
+
+    img {
+      width: 190px;
+      height: 118px;
+      float: left;
+      margin-right: 24px;
+    }
+
+    h4 {
+      @include setFontStyle(-2);
+      color: rgba(0, 0, 0, 0.85);
+      @include single-line-ellipsis;
+      margin-bottom: 8px;
+    }
+
+    h4:hover {
+      color: #3e7ce7;
+      cursor: pointer;
+    }
+
+    span {
+      display: block;
+      @include setFontStyle(-6);
+      color: rgba(0, 0, 0, 0.65);
+      margin-bottom: 8px;
+    }
+
+    p {
+      @include setFontStyle(-6);
+      height: 66px;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.65);
+      @include multi-line-ellipsis(4);
+    }
+  }
+}
+
+// 页面内部导航菜单（课程开发和客户案例）
+.platform-menu-ul {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  background: #F7F9FB;
+
+  li {
+    display: inline-block;
+    @include setFontStyle(-2);
+    padding: 24px 32px;
+    color: rgba(0, 0, 0, 0.64);
+    background: #F7F9FB;
+    transition: all .3s;
+    box-shadow: 0 2px 4px 0 rgba(43, 92, 253, 0.16);
+    border-bottom: 1px solid rgba(52, 99, 253, 0.08);
+    @include single-line-ellipsis;
+    cursor: pointer
+  }
+
+  li.active {
+    color: #2B5CFD;
+    background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);
+  }
+
+  li:hover {
+    transform: scale(1.1);
+  }
+
+  @media (max-width: 768px) {
+    background: #fff;
+    margin: 20px 0 0;
+    li {
+      width: 100px;
+      height: 30px;
+      line-height: 30px;
+      margin: 0 10px;
+      padding: 0;
+      border-radius: 5px;
+      border: 1px solid #00b96b;
+      @include setFontStyle(-4);
+      color: #00b96b;
+      background: #fff;
+      box-shadow: 0 2px 4px 0 rgba(43, 92, 253, 0.16);
+      box-sizing: border-box
+    }
+    li.active {
+      color: #fff;
+      background: #00b96b;
+    }
+    li:hover {
+      transform: none;
+    }
+  }
+}
+
+/* 页面课程列表 */
+.course-learn-box {
+
+  // video列表
+  .learn-box-list {
+    margin: 54px -16px 0;
+
+    li {
+      width: 33.33%;
+      display: inline-block;
+      text-align: center;
+
+      a {
+        display: none;
+      }
+
+      div {
+        background: #fff;
+        border-radius: 8px;
+        margin: 0 16px 40px;
+      }
+
+      span {
+        width: 342px;
+        height: 192px;
+        display: inline-block;
+        margin-top: 16px;
+        border-radius: 4px;
+        overflow: hidden;
+        position: relative
+      }
+
+      i {
+        width: 48px;
+        height: 48px;
+        cursor: pointer;
+        background-image: url("~static/images/client/course/course-video-icon.svg");
+        display: inline-block;
+        position: absolute;
+        left: 50%;
+        margin-left: -24px;
+        z-index: 5;
+        top: 50%;
+        margin-top: -24px;
+        background-size: cover;
+        background-position: bottom;
+        transition: all 0.5s;
+      }
+
+      img {
+        transition: all 0.5s;
+      }
+
+      p {
+        @include setFontStyle(-4);
+        color: rgba(0, 0, 0, 0.65);
+        padding: 24px 0 24px;
+      }
+    }
+
+    li span:hover {
+      img {
+        transform: scale(1.1);
+      }
+    }
+
+    li i:hover {
+      background-image: url("~static/images/client/course/course-video-icon-a.svg");
+      background-size: cover;
+      background-position: bottom;
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 6%;
+    // video列表
+    .learn-box-list {
+      margin: 12px 0;
+
+      li {
+        width: 100%;
+        margin-bottom: 20px;
+
+        div {
+          margin: 0;
+          padding: 0;
+          box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;
+          border-radius: 0;
+        }
+
+        span {
+          width: 100%;
+          height: 180px;
+          margin-top: 0;
+          border-radius: 0;
+        }
+
+        img {
+          width: 100%;
+        }
+
+        p {
+          padding: 20px 0 20px;
+          @include setFontStyle(-6);
+          color: #101010;
+        }
+      }
+    }
+  }
+}
+
+/* 底部跳转 */
+.bottom-btn-box {
+  height: 65px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 0;
+  background: #fff;
+  z-index: 99999;
+  border-top: 1px solid #ccc;
+
+  li {
+    width: 50%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .el-menu {
+    box-sizing: border-box;
+    padding: 10px;
+    height: 65px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .el-menu-item {
+    a {
+      width: 100%;
+      height: 40px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      font-size: 13px;
+      color: #333;
+      border: 1px solid #00b96b;
+      border-radius: 8px;
+      box-sizing: border-box;
+    }
+  }
+
+  li:nth-child(1) {
+    margin-right: 20px;
+
+    span {
+      color: #00b96b;
+      font-size: 14px;
+    }
+  }
+
+  li:nth-child(2) a {
+    color: #fff;
+    background: #00b96b;
+
+    span {
+      color: #fff;
+    }
+  }
+
+  i {
+    width: 22px;
+    height: 22px;
+    background-size: cover;
+    display: inline-block;
+    margin-right: 8px;
+  }
+
+  li:nth-child(1) i {
+    background-image: url("~static/gangweiIcon/z140.png");
+  }
+
+  li:nth-child(2) i {
+    background-image: url("~static/gangweiIcon/z141.png");
+  }
+
+  li.is-active span {
+    color: #2881db;
+  }
+
+  li.is-active:nth-child(1) i {
+    background-image: url("~static/gangweiIcon/z140.png");
+  }
+
+  li.is-active:nth-child(2) i {
+    background-image: url("~static/gangweiIcon/z141.png");
+  }
+
+
+}
+
+/********************************* 麦塔栅格**********************************/
+/*
+栅格说明：
+  1.网站内容区域1200px;
+  2.手机端<=768
+  3.pad-------------------（769---992---1200）
+   pad768*1024（手机样式）
+   pad1024*1366（pad样式）
+  4.pc---1200以上
+*/
+
+// 大于768的隐藏
+@media screen and (min-width: 769px) {
+  .mta-hidden-sm {
+    display: none !important;
+  }
+}
+
+// 小于769的隐藏
+@media screen and (max-width: 769px) {
+  .mta-hidden-xs {
+    display: none !important;
+  }
+  // 提示框
+  .phone-message-box {
+    width: 88%;
+    min-width: unset;
+    top: 10% !important;
+    align-items: center;
+    text-align: center;
+    padding: 10px 0;
+    display: flex;
+    justify-content: center;
+
+    .el-message__icon {
+      margin-bottom: 0px;
+    }
+
+    .el-message__icon:before {
+      font-size: 16px;
+    }
+  }
+}
+
+/********************************* 麦塔移动端组件**********************************/
+@media (max-width: 768px) {
+  // 移动端点击a标签背景变色bug修复
+  a {
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    -webkit-user-select: none;
+    -moz-user-focus: none;
+    -moz-user-select: none;
+  }
+}
+
+
+/*************************** banner img *******************************/
+// 首页
+client-banner-box.client-banner-index {
+  height: 810px;
+}
+
+// 其他
+.client-banner-box {
+  height: 730px;
+  width: 100%;
+
+  .client-container {
+    position: relative;
+  }
+
+  div.client-platform-banner {
+    height: 730px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-color: #fff;
+
+    .banner-btn-groups {
+      position: absolute;
+      width: auto;
+      height: auto;
+      left: 50%;
+      top: 460px;
+      transform: translate(-50%);
     }
-    // 时间人数
-    .details-visits-box span{margin-right: 24px;}
   }
+
   @media (max-width: 768px) {
-    padding: 0;
-    // 时间人数
-    .details-visits-box{
-      margin-bottom: 36px;text-align: center;
-      i{width: 16px;height: 16px;margin-right: 6px;background-size: cover;}
-      span{@include setFontStyle(-8);margin-right: 24px;line-height: 12px;}
+    width: 100%;
+    height: auto;
+    > div.client-platform-banner {
+      width: 100%;
+      height: 200px;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
     }
-    //行业资讯详情外层box
-    .client-details-box{width: 100%;}
-    // 行业资讯详情
-    .client-details-wrap{
-      width: 100%;border: 0;padding-right:0;
-      >h1{@include setFontStyle(-4);margin: 16px 0;text-align: center;font-weight: bolder;}
-      //内容区域
-      .client-content-box{
-        min-height:unset;
-      }
-      // 上一篇下一篇按钮
-      .client-details-pagination a{border: 1px solid rgba(43, 92, 253, 0.85);padding: 4px 12px;border-radius: 4px;}
 
+    .el-carousel__indicators {
+      margin-bottom: 10px !important;
     }
   }
 }
 
-/* 网站通用轮播 */
-/*.client-industry-information{
-  background-image: url("~static/images/client/index/index-industry-bg.png");
+.client-new-platform-banner {
+  width: 100%;
+  height: 736px;
+  background-color: #fff;
   background-position: center;
-  padding-bottom: 80px;
-
-  // 标题
-  .client-title{
-    color: #fff;
+  background-repeat: no-repeat;
+  @media (max-width: 768px) {
+    height: 160px;
+    background-size: cover;
   }
+}
 
-  // 轮播
-  .information-carousel-box{
-    width: 100%;
-    overflow: hidden;
+/***************************** 解决方案 子页面 三个 video *************/
+.client-anli-box {
+  height: 600px;
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 80px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
   }
 
-  // 轮播组件
-  .el-carousel--horizontal{
-    overflow: visible;
-  }
-  .el-carousel{
+  p {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 36px;
     width: 1000px;
-    margin: 0 auto;
-    margin-top: 48px;
-    .el-carousel__container{width: 640px;height: 320px;margin: 0 auto;position: relative;}
-  }
-  .el-carousel__item{
-    width: 640px;
-    background: #FFFFFF;
-    border-radius: 8px;
-    .industry-img-box{width: 50%;height: 320px;float: left;background-repeat: no-repeat;background-size: cover;}
-    .industry-content-box{
-      height: inherit;margin-left: 50%;padding:32px;box-sizing: border-box;position: relative;
-      h5{@include setFontStyle(2);color: rgba(0,0,0,0.85);margin-bottom: 16px;@include multi-line-ellipsis(2);line-height: 30px;max-height: 60px;}
-      p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(6);margin-bottom: 24px;max-height: 144px;}
-      a{width: 132px;height: 32px;line-height:32px;position: absolute;bottom: 32px;}
-    }
+    margin: 0 auto 78px;
   }
-  !*.el-carousel__item.is-active{
-    .industry-img-box{width: 50%;}
-    .industry-content-box{margin-left: 50%;}
-  }*!
 
-  // 左右按钮
-  .el-carousel__arrow{width: 50px;height: 50px;background-color: rgba(43, 92, 253, 0.22);@include setFontStyle(16);color: rgba(255,255,255,0.8);}
-
-  // 左箭头
-  .el-carousel__arrow--left{left:-200px;}
+  ul {
+    display: flex;
+    justify-content: space-between;
 
-  // 右箭头
-  .el-carousel__arrow--right{right:-200px;}
+    li {
+      width: 370px;
 
-  // 指示器
-  .el-carousel__indicators{display: none}
-}*/
+      > div {
+        margin-right: 80px;
+      }
 
-/* 网站通用弹窗-申请方案 */
-.application-scheme-dialog{
-  .el-dialog{width: 610px;border-radius: 8px;}
-  .el-dialog__body{
-    padding: 30px 120px 60px;
-    >i{width:213px;height:92px;display: block;background-image: url("~static/images/client/course/course-dialog-img.png");margin: 0 auto;}
-    p{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin:24px 0 36px;}
-    span{@include setFontStyle(-6);color: rgba(0,0,0,0.65);}
-    a{@include setFontStyle(-6);color: #2B5CFD;float: right;}
-    // 申请注册按钮
-    .application-scheme-btn{height: 40px;line-height: 40px;@include setFontStyle(-4);background: #1890FF;border-radius: 4px;color: #FFFFFF;text-align: center;margin-bottom: 16px;cursor: pointer;}
+      &:last-child {
+        > div {
+          margin-right: 0;
+        }
+      }
+    }
   }
-  // 输入框上下间距
-  .el-form-item{margin-bottom: 24px}
 
-  // 输入框左右间距
-  .el-input .el-input__inner{padding: 0 15px 0 35px;}
+}
 
-  //输入框图标
-  .dialog-input-tel:after,.dialog-input-code:after{width: 16px;height: 16px;content: "";display: inline-block;position: absolute;top: 12px;left: 12px;}
-  .dialog-input-tel:after{background-image: url("~static/images/client/course/course-dialog-icon1.svg");}
-  .dialog-input-code:after{background-image: url("~static/images/client/course/course-dialog-icon2.svg");}
+@media (max-width: 768px) {
+  .client-anli-box {
+    height: 50%;
+    margin-bottom: 10%;
+
+    h4 {
+      font-size: 18px;
+      color: #333;
+      margin-top: 8%;
+      margin-bottom: 4%;
+      font-weight: 800;
+      text-align: center;
+    }
 
-  // 输入框-验证码
-  .dialog-input-code{width: calc(100% - 132px);}
-  .dialog-code-btn.el-button{width:120px;box-sizing:border-box;padding: 12px 15px;margin-left: 8px;}
+    p {
+      font-size: 14px;
+      font-weight: 500;
+      text-align: center;
+      line-height: 1.5;
+      width: 100%;
+      margin: 0 auto 5%;
+    }
 
-  // 滑块px
-  .nc-container{
-    .nc_wrapper{width:100%!important;margin-bottom: 24px;border-radius: 4px;overflow: hidden;}
-    .nc_scale{
-      .btn_slide{color: #fff;}
-      span{width:50px;background: #3893FE;border-radius: 0 4px 4px 0;border: 1px solid transparent;}
+    ul {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        width: 100%;
+
+        > div {
+          margin-right: 0;
+          margin-bottom: 5%;
+        }
+
+        &:last-child {
+          > div {
+            margin-bottom: 0;
+          }
+        }
+      }
     }
+
   }
 }
 
-/* 网站通用弹窗-视频播放 */
-.course-video-dialog{
-  .el-dialog{width: 940px;border-radius: 8px;}
-  .el-dialog__body{padding: 14px 40px 80px;}
-  // 标题
-  .el-dialog__title{@include setFontStyle(-2);color: rgba(0,0,0,0.85);}
-  // 视频
-  .course-video-box{width: 100%;height: 480px;}
-  p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);margin-top: 16px;line-height: 22px}
+/**************************** 解决方案 现状 *************************/
+.client-xianzhuang-box {
+  background-image: url("~static/gangweiIcon/z90.png");
+  width: 100%;
+  height: 560px;
+  margin-top: 150px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 120px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
+  }
 
-  @media (max-width: 768px){
-    .el-dialog{width: 90%;border-radius: 8px;margin:  0 5%;}
-    .el-dialog__body{padding: 0 16px;}
-    // 视频
-    .course-video-box{height: 180px;}
-    p{@include setFontStyle(-6);padding: 10px 0 16px;margin: 0}
+  p {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 36px;
+    width: 1000px;
+    margin: 0 auto;
   }
 }
 
-/* 首页行业学习详情页-通用部分 */
-// banner
-.industrydetails-banner{
-  width: 100%;
-  height: 400px;
-  background-color:#042D85;
-  position: relative;
-  .industrydetails-banner-box{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
-  .free-trial-default-btn{position: absolute;top:280px;left: 50%;margin-left: -119px;}
-  @media (max-width: 768px){
-    height: 150px;
-    .industrydetails-banner-box{background-size: cover;}
-    .free-trial-default-btn{top:95px;margin-left: -61px;}
+@media (max-width: 768px) {
+  .client-xianzhuang-box {
+    margin-top: 50px;
+    background-image: none;
+    width: 100%;
+    height: 30%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    h4 {
+      font-size: 18px;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 40px;
+      font-weight: 800;
+      text-align: center;
+    }
+
+    p {
+      font-size: 14px;
+      font-weight: 500;
+      text-align: center;
+      line-height: 1.5;
+      width: 100%;
+      margin: 0 auto;
+    }
   }
 }
-// 发展现状
-.industrydetails-develop-box{
-  .client-container{padding: 48px 0 80px;text-align: center;}
-  p{width: 480px;display: inline-block;@include setFontStyle(-5);color: rgba(0,0,0,0.65);line-height: 30px;vertical-align: middle;margin-right: 120px;text-align: justify;}
-  img{display: inline-block;vertical-align: middle;}
-  @media (max-width: 768px){
-    .client-container{padding: 16px 30px 48px;display: flex;flex-direction: column-reverse;}
-    p{width: 100%;display: block;@include setFontStyle(-6);color: rgba(85, 85, 85, 1);line-height: 24px;margin-right: 0;}
-    img{max-width: 100%;display: block;vertical-align:unset;margin-bottom: 16px;}
+
+/**************************** 解决方案 痛点 ************************/
+.client-tongdian-box {
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 80px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
   }
-}
-// 产品和服务
-.products-services-box{
-    width: 100%;display: inline-block;
-    // 头部图片
-    img{width: 640px;height: 485px;float: right;}
 
-    // 内容区域
-    .products-services-content{
-      width: 520px;
-      float: right;
-      padding: 110px 12px 0;
-      box-sizing: border-box;
-      margin: 0 20px;
-      @include setFontStyle(-6);
-      h5{@include setFontStyle(4);color: rgba(0,0,0,0.85);}
-      i{width:50px;height:5px;display: block;background: #3e7ce7;margin: 24px 0;}
-      p{line-height: 24px;color: rgba(0,0,0,0.65);margin-bottom: 56px;text-align: justify;}
-      .p-before-circle{margin-bottom: 6px;}
-      .p-before-circle:before{
-        content: '';
-        width: 6px;
-        height: 6px;
-        display: inline-block;
-        border-radius: 3px;
-        margin-right: 8px;
-        background: #3e7ce7;
-        vertical-align: middle;
-      }
-      .client-btn-box{margin: 40px 0}
-      .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box;}
-      .client-default-white-Btn{background: #fff;color: #3e7ce7;}
-      a,div.client-default-Btn{margin-right: 24px}
-      span.client-default-Btn{background: #fff;color: #3e7ce7;margin-right: 0;}
-    }
-  @media (max-width: 768px){
-    // 头部图片
-    img{width: 100%;height: auto;float: none;}
-    // 内容区域
-    .products-services-content{
-      width: 100%;float: none;padding: 0 10px;margin: 0;
-      @include setFontStyle(-6);
-      h5{@include setFontStyle(-6);font-weight: 700;color: rgba(0, 0, 0, 1);}
-      i{width:34px;height:3px;margin: 10px 0;}
-      p{margin-bottom: 30px;color: rgba(85, 85, 85, 1);}
-      .client-btn-box{text-align: center;margin:40px 0;}
-      .client-default-Btn,.client-default-white-Btn{width: 120px;height: 35px;line-height: 35px;}
-      a,div.client-default-Btn{margin-right: 16px}
+  ul {
+    display: flex;
+    justify-content: center;
+
+    li {
+      div {
+        margin: 0 51px 0 0;
+        width: 380px;
+        height: 280px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        text-align: center;
+
+        i {
+          width: 110px;
+          height: 88px;
+          margin-top: 50px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        p {
+          text-align: center;
+          color: #fffefe;
+          font-size: 18px;
+          font-weight: 800;
+          line-height: 30px;
+          width: 220px;
+          margin: 20px auto 0;
+        }
+      }
     }
   }
 }
-.products-contrary-box{
-  // 头部图片
-  img{float: left;}
-  // 内容区域
-  .products-services-content{float: right;}
-}
-// 考试平台和培训平台样式--多下边线
-.platform-products-services{
-  li:not(:last-child){border-bottom:1px solid #eee; }
+
+@media (max-width: 768px) {
+  .client-tongdian-box {
+    h4 {
+      font-size: 18px;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 40px;
+      font-weight: 800;
+      text-align: center;
+    }
+
+    ul {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        margin-bottom: 10px;
+        box-shadow: 0 2px 3px #ccc;
+
+        div {
+          margin: 0 20px 0 0;
+          width: 100%;
+          height: auto;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          text-align: center;
+          display: flex;
+          justify-content: flex-start;
+
+          i {
+            width: 90px;
+            height: 90px;
+            margin-top: 3%;
+            background-color: #ccc;
+            display: inline-block;
+            background-size: 70%;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+
+          p {
+            text-align: left;
+            color: #333;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 1.5;
+            width: 80%;
+            margin: 20px 0 0 20px;
+          }
+        }
+      }
+    }
+  }
+
 }
 
-// 详情页内容
-.industrydetails-content{
-  li{margin-bottom: 16px;}
-  i{width: 14px;height: 14px;float:left;box-sizing: border-box;opacity: 0.8;display: block;border: 1px solid #13192D;transform: rotate(45deg);margin-right: 16px;margin-top: 4px;}
-  h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 24px;text-align: center;}
-  p{@include setFontStyle(-5);color: rgba(0,0,0,0.65);line-height: 22px;text-align: left;}
-  @media (max-width: 768px) {
-    li{margin-bottom: 10px;}
-    i{width: 10px;height: 10px;margin-right: 8px;margin-top: 8px;}
-    h5{@include setFontStyle(-4);color: rgba(255, 255, 255, 1);margin-bottom: 16px;text-align: center;font-weight: 700;}
-    p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;text-align: justify;}
+/**************************** 按钮组 申请方案+在线咨询、免费使用+在线咨询 **************************/
+.btn-groups.center {
+  margin-top: 60px;
+  text-align: center;
+  margin-bottom: 120px;
+
+  .btn-item {
+    margin-right: 20px;
   }
 }
 
-// 通用平台-新闻资讯样式
-.platform-news-information{
-  padding-bottom: 80px;
-  background: #f8f8f8;
-  ul{margin-top: 48px;}
-  li{
-    width: 50%;display: inline-block;vertical-align: top;
-    div{margin: 10px;padding:10px 10px 10px 0;border-bottom:1px dashed #666;}
-    img{width: 190px;height: 118px;float: left;margin-right: 24px;}
-    h4{@include setFontStyle(-2);color: rgba(0, 0, 0, 0.85);@include single-line-ellipsis;margin-bottom: 8px;}
-    h4:hover{color: #3e7ce7;cursor: pointer;}
-    span{display: block;@include setFontStyle(-6);color: rgba(0, 0, 0, 0.65);margin-bottom: 8px;}
-    p{@include setFontStyle(-6);height: 66px;line-height: 22px;color: rgba(0, 0, 0, 0.65);@include multi-line-ellipsis(3);}
+@media (max-width: 768px) {
+  .btn-groups.center {
+    margin-top: 10%;
+    margin-bottom: 10%;
   }
 }
 
-// 页面内部导航菜单（课程开发和客户案例）
-.platform-menu-ul{
-  display: block;
-  margin: 0 auto;
-  text-align: center;
-  background: #F7F9FB;
-  li{display: inline-block;@include setFontStyle(-2);padding:24px 32px;color: rgba(0,0,0,0.64);background: #F7F9FB;transition: all .3s;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);border-bottom: 1px solid rgba(52, 99, 253, 0.08);@include single-line-ellipsis;cursor: pointer}
-  li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
-  li:hover{
-    transform: scale(1.1);
+// H5 按钮居中
+@media (max-width: 768px) {
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+    text-align: center;
   }
-  @media (max-width: 768px){
-      background: #fff;margin: 20px 0 0;
-      li{width: 100px;height: 30px;line-height:30px;margin:0 10px;padding:0;border-radius:5px;border: 1px solid rgb(0, 102, 204);@include setFontStyle(-4);
-        color: rgb(0, 102, 204);background: #fff;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);box-sizing: border-box}
-      li.active{color: #fff;background: rgb(0, 102, 204);}
-      li:hover{transform: none;}
-    }
 }
 
-/* 页面课程列表 */
-.course-learn-box{
+/******************************* 万人高并发 客户案例 **************************************/
 
-  // video列表
-  .learn-box-list{
-    margin: 54px -16px 0;
-    li{
-      width: 33.33%;display: inline-block;text-align: center;
-      a{display: none;}
-      div{background: #fff;border-radius: 8px;margin: 0 16px 40px;}
-      span{width:342px;height:192px;display: inline-block;margin-top: 16px;border-radius:4px;overflow: hidden;position: relative}
-      i{width: 48px;height: 48px;cursor: pointer;background-image: url("~static/images/client/course/course-video-icon.svg");display: inline-block;position: absolute;
-        left: 50%;margin-left: -24px;z-index: 5;top: 50%;margin-top: -24px;background-size: cover;background-position: bottom;transition: all 0.5s;}
-      img{transition: all 0.5s;}
-      p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);padding: 24px 0 24px;}
-    }
-    li span:hover{img{transform: scale(1.1);}}
-    li i:hover{background-image: url("~static/images/client/course/course-video-icon-a.svg");background-size: cover;background-position: bottom;}
-  }
-  @media (max-width: 768px){
-    margin: 0 6%;
-    // video列表
-    .learn-box-list{
-      margin: 12px 0;
-      li{
-        width: 100%;margin-bottom: 20px;
-        div{margin: 0;padding: 0;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;border-radius:0;}
-        span{width: 100%;height: 180px;margin-top: 0;border-radius:0;}
-        img{width: 100%;}
-        p{padding: 20px 0 20px;@include setFontStyle(-6);color: #101010;}
+.client-kehuanli-box.experience-swiper-box {
+  margin-top: 60px;
+  margin-bottom: 140px;
+
+  .experience-content-box {
+    height: 295px;
+    box-shadow: none;
+    padding: 16px;
+    box-sizing: border-box;
+    margin: 0 4% 40px;
+
+    .anli-content {
+      h3 {
+        text-align: center;
+        font-weight: 800;
+        font-size: 18px;
+        margin-top: 10px;
+      }
+
+      p {
+        font-weight: 400;
+        color: #333;
+        font-size: 14px;
+        -webkit-line-clamp: 3;
+        text-overflow: ellipsis;
+        -o-text-overflow: ellipsis;
+        overflow: hidden;
+        word-wrap: break-word;
+        display: -webkit-box;
+        white-space: normal !important;
+        -webkit-box-orient: vertical;
+      }
+
+      img {
+        width: 100%;
+        height: 200px;
       }
     }
   }
-}
 
-/* 底部跳转 */
-.bottom-btn-box{
-  height: 50px;position: fixed;bottom: 0;left: 0;right: 0;font-size: 0;background: #fff;z-index: 99999;border-top: 1px solid #ccc;
-  li{width: 25%;margin: 0;padding: 0;}
-  a{width: 100%;height: 50px;line-height: 1;display: inline-block;text-align: center;font-size: 13px;color: #333;margin: 6px 0;}
-  i{width:22px;height: 22px;background-size:cover;display: block;margin: 0 auto 3px;}
-  span{color: #333;}
-  li:nth-child(1) i{background-image: url("~static/images/icons/shouye.svg");}
-  li:nth-child(2) i{background-image: url("~static/images/icons/tiyan.svg");}
-  li:nth-child(3) i{background-image: url("~static/images/icons/dianhua.svg");}
-  li:nth-child(4) i{background-image: url("~static/images/icons/zixun.svg");}
-  li.is-active span{color: #2881db;}
-  li.is-active:nth-child(1) i{background-image: url("~static/images/icons/shouye-a.svg");}
-  li.is-active:nth-child(2) i{background-image: url("~static/images/icons/tiyan-a.svg");}
-  li.is-active:nth-child(3) i{background-image: url("~static/images/icons/dianhua-a.svg");}
-  li.is-active:nth-child(4) i{background-image: url("~static/images/icons/zixun-a.svg");}
+  // 分页
+  .swiper-pagination-style {
+    width: 76px;
+    margin-left: -30px;
+    bottom: 25px;
+  }
+
+  // 左右滑动
+  .experience-swiper-tip {
+    margin: 0 auto;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: center
+  }
+
+  @media (max-width: 768px) {
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    h4 {
+      text-align: center;
+      font-weight: 800;
+      font-size: 18px;
+      color: #333;
+      line-height: 1.5;
+    }
+
+    .experience-content-box {
+      padding: 0;
+      margin: 20px 0 20px;
+    }
+  }
 
 }
 
-/********************************* 麦塔栅格**********************************/
-/*
-栅格说明：
-  1.网站内容区域1200px;
-  2.手机端<=768
-  3.pad-------------------（769---992---1200）
-   pad768*1024（手机样式）
-   pad1024*1366（pad样式）
-  4.pc---1200以上
-*/
+.client-kehuanli-box {
+  position: relative;
 
-// 大于768的隐藏
-  @media screen and (min-width: 769px) {
-    .mta-hidden-sm{display: none!important;}
+  .anli-box-wrap {
+    width: 1100px;
+    height: 320px;
+    margin: 0 auto;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
   }
 
-// 小于769的隐藏
-  @media screen and (max-width: 769px) {
-    .mta-hidden-xs{display: none!important;}
-    // 提示框
-    .phone-message-box{
-        width: 88%;min-width: unset;top: 35% !important;display: block;text-align: center;padding: 36px 0;
-      .el-message__icon{margin-bottom: 20px;}
-      .el-message__icon:before{font-size: 50px;}
-    }
+  .anli-box {
+    width: 1100px;
+    height: 320px;
+    margin: 0 auto;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    z-index: 1;
   }
 
-/********************************* 麦塔移动端组件**********************************/
-@media (max-width: 768px) {
-  //  swiper
-  .experience-swiper-box {
-    position: relative;
-    // swiper--div
-    .swiper-slide {width: 100%;}
+  h4 {
+    text-align: center;
+    font-weight: 800;
+    font-size: 30px;
+    color: #333;
+    line-height: 50px;
+  }
 
-    .swiper-pagination-style {
-      width: 80px;position: absolute;bottom: 66px;left: 50%;margin-left: -30px;z-index: 99;
+  .left-bg {
+    width: 353px;
+    height: 293px;
+    background: #46C37B;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    opacity: 0.33;
+  }
 
-      // 小圆点
-      .my-bullet-swiper {width: 10px;height: 10px;border-radius: 5px;display: inline-block;background: rgba(0, 102, 204, 0.2);margin-right: 14px;}
+  .right-bg {
+    width: 270px;
+    height: 150px;
+    background: #A9D49C;
+    position: absolute;
+    right: 0;
+    bottom: -80px;
+    z-index: 0;
+    opacity: 0.33;
+  }
 
-      // 分页active
-      .my-bullet-active-swiper {background: rgb(0, 102, 204)}
-    }
+  .center-bg {
+    width: 160px;
+    height: 150px;
+    background: #A9D49C;
+    position: absolute;
+    left: 600px;
+    bottom: -80px;
+    z-index: 0;
+    opacity: 0.33;
+  }
 
-    // swiper 内容区
-    .experience-content-box {
-      height: 243px;display: flex;flex-direction: column;align-items: center;justify-content: center;
-      margin: 5px 4% 40px;box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;text-align: center;padding: 20px 0;
+  .el-carousel__container {
+    height: 100% !important;
+  }
+
+  .el-carousel__item {
+    background: #fff;
+    border-radius: 8px;
+  }
+}
 
-      i {width: 64px;height: 64px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;display: inline-block;flex-shrink: 0;}
-      h5 {font-weight: 700;font-size: 16px;color: rgb(16, 16, 16);margin-bottom: 30px;}
-      p {font-weight: 400;font-size: 14px;color: rgb(16, 16, 16);margin: 6px 0;}
-      a {width: 122px;height: 35px;line-height: 35px;background-color: rgb(0, 102, 204);color: rgb(255, 255, 255);border-radius: 5px;font-size: 14px;
-        padding: 0;text-align: center;display: inline-block;margin-top: 16px;
-      }
-    }
 
-    // swiper 提示
-    .experience-swiper-tip {font-weight: 400;font-size: 14px;color: rgb(96, 96, 96);text-align: center;margin: 0 0 42px;}
+/****************************** 青谷解决方案 ******************************************/
+.client-fangan-box {
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 80px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
   }
-  // 移动端点击a标签背景变色bug修复
-  a{-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-    -webkit-user-select: none;
-    -moz-user-focus: none;
-    -moz-user-select: none;}
+
+  .btn-groups {
+    margin-top: 50px;
+  }
+
+  @media (max-width: 768px) {
+    h4 {
+      font-size: 18px;
+      color: #333;
+      margin-top: 30px;
+      margin-bottom: 40px;
+      font-weight: 800;
+      text-align: center;
+    }
+    .btn-groups {
+      margin-top: 30px;
+    }
+  }
+}
+
+/******************************* 新闻关键词 *******************************************/
+a.keyword {
+  color: #00b96b !important;
+}
+
+/**************** 分页 ****************/
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: #00B96B;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled):hover {
+  color: #00B96B;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
+  color: #fff;
 }

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

@@ -8,7 +8,7 @@
     /* 网站banner */
     .client-index-banner{
       width: 100%;
-      height: 395px;
+      height: 730px;
       background-color:#031073;
       background-image: url("~static/images/client/index/index-banner-background.png");
       background-position-x: center;
@@ -16,33 +16,87 @@
     }
     /* banner-box */
     .client-banner-box{
-        .el-carousel__container{height: 395px;cursor: pointer;}
+        .el-carousel__container{height: 730px;cursor: pointer;}
         .el-carousel__item{
-          .index-carousel-box{width:100%;height: 395px;display: block;background-position: center;background-repeat: no-repeat;background-color: #010619;}
+          .index-carousel-box{width:100%;height: 730px;display: block;background-position: center;background-repeat: no-repeat;background-color: #fff;}
         }
+
+      .el-carousel__indicators {
+        margin-bottom: 100px;
+      }
     }
 
     /* 发展历程 - 移动端隐藏*/
     .client-company-history{
-      background:#f8f8f8;
-        li{
-          width: 25%;display: inline-block;text-align: center;
-          div{border-right:2px solid #e5e5e5;margin: 24px 0;}
-          p{@include setFontStyle(16);margin-bottom: 16px;color: #333;}
-          span{@include setFontStyle(6);}
-          h4{@include setFontStyle(-4);color: #666;}
+      padding: 20px;
+      background:#fff;
+      position: relative;
+      top: -80px;
+      z-index: 10;
+      border-radius: 6px;box-sizing: border-box;
+      box-shadow: 0.52px 4.97px 18px 5px rgba(230,230,230,0.32);
+
+      ul {
+        display: flex;justify-content: center;flex-direction: row;
+      }
+      li{
+       text-align: center;margin: 0 auto;
+        div{margin: 24px 0;text-align: left;}
+        p{@include setFontStyle(16);margin-bottom: 10px;color: #333;}
+        span{@include setFontStyle(6);};
+        h4{@include setFontStyle(-4);color: #666;};
+        i {
+          width: 82px;
+          height: 72px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+      }
+      li:last-child div{border-right: 0;}
+      li:nth-child(1) {
+        i {
+          background-image: url('~static/gangweiIcon/z139.png');
+        }
+      }
+      li:nth-child(2) {
+        i {
+          background-image: url('~static/gangweiIcon/z136.png');
+        }
+      }
+      li:nth-child(3) {
+        i {
+          background-image: url('~static/gangweiIcon/z137.png');
+        }
+      }
+      li:nth-child(4) {
+          i {
+            background-image: url('~static/gangweiIcon/z138.png');
+          }
         }
-        li:last-child div{border-right: 0;}
-    }
 
-    /* 产品和服务 */
-    .client-products-services{
-      .client-title{
-        margin-bottom: 48px;
+      .company-item {
+        display: flex;
+        align-items: center;
+        margin: 0 auto;
+        i {
+          margin-right: 10px;
+        }
+        p {
+          font-size: 20px;
+          font-weight: 800;
+          color: #333;
+        }
+
+        h4 {
+          font-size: 14px;
+          font-weight: 500;
+          color: #565656;
+        }
       }
     }
 
-
     /* 行业学习需求 */
     .client-demand-box{
       background: #f5f5f5;
@@ -168,16 +222,15 @@
 
     /* 超过10万家客户的信任之选 */
     .client-customer-box{
+      // 副标题
+      .client-subtitle-one-row{margin: 22px 0 50px;}
       .customer-img-box{
         padding-bottom: 80px;
         li{
-          width: 20%;
-          display: inline-block;
-        }
-        img{margin: 48px 30px 0;transition: all 0.5s;}
-        li:hover{
-          img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
+          width: 200px;height: 60px;margin: 24px 16px;
+          display: inline-block;background: #ffffff;
         }
+        img{transition: all 0.5s;margin: 3px auto;display: block;}
       }
     }
 
@@ -230,7 +283,7 @@
       .industry-information-box {
         margin-top: 48px;
         h4{color: #333;}
-        h4:hover {cursor: pointer;color: #3e7ce7;}
+        h4:hover {cursor: pointer;color: #00B96B;}
         // 左
         .industry-information-left {
           width: 520px;
@@ -278,13 +331,6 @@
         .el-carousel__button {width: 6px;height: 6px;border-radius: 3px;}
       }
 
-      /* 产品和服务 */
-      .client-products-services{
-        .client-title{
-          margin-bottom: 0;
-        }
-      }
-
       /* 行业学习需求 */
       .client-demand-box{
         padding: 30px 0 0;
@@ -364,11 +410,15 @@
       }
 
       /* 超过10万家客户的信任之选 */
-      .client-customer-box{padding-top: 50px;
+      .client-customer-box{
+        padding-top: 50px;
+        .client-subtitle-one-row {
+          margin: 10px 0 24px;
+        }
         .customer-img-box{
           padding-bottom: 50px;
-          li{width: 50%;text-align: center;}
-          img{max-width:90%;margin: 10px 0;}
+          li{width: 50%;text-align: center;margin: 0;padding: 0 10px;box-sizing: border-box;}
+          img{max-width:100%;margin: 10px 0;}
           li:hover{
             img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
           }
@@ -399,39 +449,12 @@
       .client-platform-banner{
         width: 100%;
         height: 396px;
-        background-color:#042D85;
+        background-color:#00b96b;
         position: relative;
-        div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
+        //div{width:auto;height:auto;background-position-x: center;background-repeat: no-repeat;}
         .free-trial-default-btn{position: absolute;top:260px;left: 50%;margin-left: -119px;}
       }
 
-      /* 产品体验*/
-      .platform-products-experience{
-        >p{font-size: 20px;line-height: 20px;text-align: center;margin: 30px 0 42px;}
-        .experience-ul-box{
-          margin: 0 -16px;text-align: center;
-          li{
-            width:25%;display: inline-block;text-align: center;font-size: 16px;
-            >div{
-              margin: 0 16px;padding:32px 18px;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;border-radius: 10px;position: relative;
-              div{font-size:20px;color:#fff;position: absolute;right: 0;left: 0;top: 0;bottom: 305px;box-sizing: border-box;transition: 0.5s;overflow: hidden;border-radius: 10px;line-height: 305px;background: rgba(0,0,0,.6);cursor: default;}
-            }
-            i{display: inline-block;width: 46px;height: 46px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;}
-            h5{font-size: 22px;color: rgb(16, 16, 16);margin-bottom: 24px;}
-            p{font-size: 16px;padding: 0;margin: 0;color: #101010;line-height: 26px;}
-            a{width: 180px;height: 40px;line-height: 40px;display: inline-block;margin-top: 24px;text-align: center;background-color: #3e7ce7;
-              border-color: rgba(255, 0, 0, 0);border-width: 1px;border-style: solid;color: rgb(255, 255, 255);border-radius:4px;font-weight: normal;cursor: pointer}
-            span{display: block;transition: 0.5s;position: absolute;top: 0;bottom: 305px;left: 0;right: 0;overflow: hidden;}
-            em{width:180px;height:180px;display: block;margin: 24px auto;background-image:url("~static/images/client/exam/exam-code-img.png")}
-            em.px-img-box{background-image:url("~static/images/client/train/train-code-img.png")}
-          }
-          li:nth-child(1) i{background-image:url("~static/images/client/exam/exam-tel-icon.png")}
-          li:nth-child(2) i{background-image:url("~static/images/client/exam/exam-pc-icon.png")}
-          li:nth-child(3) i{background-image:url("~static/images/client/exam/exam-sz-icon.png")}
-          li:nth-child(4) i{background-image:url("~static/images/client/exam/exam-sx-icon.svg")}
-        }
-      }
-
       /* 产品优势 */
       .platform-products-services{
           li:not(:last-child){border-bottom:1px solid #eee; }
@@ -503,11 +526,7 @@
 
       // 产品体验
       .platform-products-experience{
-        .sjxyd-icon {background-image: url("~static/images/client/exam/exam-tel-icon.png")}
-        .dnxyd-icon {background-image: url("~static/images/client/exam/exam-pc-icon.png")}
-        .dngld-icon {background-image: url("~static/images/client/exam/exam-sz-icon.png")}
-        .skrz-icon {background-image: url("~static/images/client/exam/exam-sx-icon.svg")}
-        >p{font-weight: 400;font-size: 14px;color: rgba(85, 85, 85, 1);margin: 24px 0 16px;}
+
       }
 
       // 产品优势
@@ -516,25 +535,6 @@
         .products-services-content div{text-align: center;margin-bottom: 40px;}
       }
 
-      // 产品功能
-      .platform-product-function{
-        padding-bottom: 16px;
-        // swiper
-        .experience-swiper-box{
-          // swiper 内容区域
-          .experience-content-box{
-            height:328px;margin: 16px 4% 20px;padding: 16px 16px 46px;box-sizing: border-box;box-shadow: rgb(170, 209, 249) 0 0 6px -1px;background-color: #fff;
-            i{width: 150px;height: 122px;}
-            h5{width: 100%;text-align: left;margin-bottom: 12px;}
-            p{text-align: justify;line-height: 24px;margin: 0;@include multi-line-ellipsis(4);}
-          }
-          // 分页
-          .swiper-pagination-style {width: 200px;margin-left: -90px;bottom: 50px;}
-          // 左右滑动
-          .experience-swiper-tip{margin: 0}
-        }
-      }
-
       // 应用场景
       .platform-application-scenarios{
         padding-bottom: 16px;
@@ -572,18 +572,6 @@
   /********  describe: 培训平台--图片（和考试默认图片不同） author: TX  date:2020-08-14  ********/
   .client-train-page{
 
-    /* 产品体验*/
-    .platform-products-experience{
-      .experience-ul-box li{
-          em{background-image:url("~static/images/client/train/train-code-img.png")}
-      }
-    }
-
-    /* 网站banner */
-    .client-platform-banner{
-      background-color:#1F2772;
-    }
-
     /* 产品功能 */
     .platform-product-function{
       // ul
@@ -706,197 +694,13 @@
   }
 
   /********  describe: 关于我们 author: TX  date:2020-08-07  ********/
-  .client-aboutUs-page{
-
-    // banner
-    .aboutUs-banner{width: 100%;height: 305px;background-image: url("~static/images/client/aboutUs/aboutUs-banner-bg.png");
-        span{width: 1200px;overflow: hidden;display: block;margin: 0 auto;}
-        img{width: 1200px;overflow: hidden;margin: 0 auto;display: block}
-      }
-
-    // 公司简介
-    .company-profile-box{
-      padding: 48px 0;
-      font-size: 0;
-
-      img{margin: 48px auto;display: block;}
-      p{@include setFontStyle(-2);color: rgba(0,0,0,0.65);line-height: 40px;text-align: justify;margin: 0 60px}
-    }
-
-    // 品牌介绍
-    .brand-introduction-box{
-      .brand-introduction-content{
-        width: 100%;
-        padding: 42px;
-        box-sizing: border-box;
-        background: #fbfbfb;
-        border-radius: 8px;
-        float: right;
-        .brand-introduction-left{
-          display: inline-block;
-          vertical-align: middle;
-          padding-right: 42px;
-          border-right: 1px solid #ddd;
-          h4{@include setFontStyle(6);color: rgba(0,0,0,0.75);margin-bottom: 36px}
-          img{margin-bottom: 36px;}
-        }
-        span{width: 740px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 40px;display: inline-block;vertical-align: middle;padding-left: 42px;text-align: justify;}
-
-      }
-    }
-
-    // 企业文化
-    .corporate-culture-box{
-      padding-bottom: 80px;
-      li{
-        width:25%;
-        display: inline-block;
-        vertical-align: middle;
-        div{
-          margin-right: 16px;
-          margin-bottom: 16px;
-          padding: 40px 0;
-          border: 6px solid #f7f7f7;
-          text-align: center;
-          i{width: 70px;height: 70px;display:inline-block;margin-bottom: 16px;}
-          h5{@include setFontStyle(0);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;}
-        }
-      }
-      li:nth-child(1){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon1.png");} }
-      li:nth-child(2){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon2.png");} }
-      li:nth-child(3){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon3.png");} }
-      li:nth-child(4){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon4.png");} }
-      li:last-child{
-        div{margin-right: 0;}
-      }
-    }
-
-    // 企业发展历程
-    .enterprise-development-box{
-      // 覆盖饿了么tab样式
-      .enterprise-development-tab{
-        .el-tabs__nav-wrap::after,.el-tabs__active-bar{display: none;}
-        .el-tabs__header{
-          margin: 0;
-          .el-tabs__nav{width: 100%;padding-bottom: 20px;border-bottom: 1px dotted #6c9ce1;}
-          .el-tabs__nav-wrap,.el-tabs__nav-scroll{overflow: visible}
-        }
-        .el-tabs__item{width: 170px;height: 45px;line-height:45px;border: 1px solid #3e7ee7;background: #fff;padding: 0;text-align: center;border-radius: 4px;margin-right: 24px;position: relative;}
-        .el-tabs__item.is-active{background: #3e7ee7;color: #fff}
-        .el-tabs__item:after{width: 14px;height: 14px;content: "";display: inline-block;border-radius: 50%;background: #888;position: absolute;bottom: -28px;left: 50%;margin-left: -7px;}
-        .el-tabs__item.is-active:after{background: #3e7ee7;}
-        .el-tabs__content{overflow: visible}
-      }
-
-      // 企业发展历程内容部分
-      li{
-        width: 25%;display: inline-block;padding: 36px 24px 60px;background:#fbfbfb;box-sizing: border-box;min-height: 196px;vertical-align: top;
-        div{width: 250px;border-bottom: 1px solid #eee;}
-        img{margin-bottom: 14px;}
-        i{min-width:34px;display:inline-block;color: #3e7ee7;font-style: normal;margin-right: 10px;}
-        p{@include setFontStyle(-4);color: rgba(0,0,0,.65);margin-top: 14px;}
-      }
-    }
-
-    // 联系我们
-    .contact-us-box{
-      padding: 80px 0;
-      border-top: 1px solid #ddd;
-      .contact-container-box{
-        width: 460px;
-        padding: 0 40px;
-        box-sizing: border-box;
-        color: rgba(0,0,0,0.85);
-        float: left;
-        h4{@include setFontStyle(10);color: #3e7ee7;margin-bottom: 60px;margin-top: 20px;}
-        h5{@include setFontStyle(0);color: #333;margin-bottom: 32px;}
-        li{
-          margin-bottom: 24px;
-          i{width: 22px;height: 24px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 16px;vertical-align: middle;}
-          span{@include setFontStyle(-4);color: rgba(0,0,0,0.64);vertical-align: middle;}
-        }
-        li:nth-child(3) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.png");}
-        }
-        li:nth-child(4) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon3.png");}
-        }
-        li:nth-child(5) {
-          i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");}
-        }
-        li:nth-child(6) {
-          //i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");}
-        }
-      }
-      img{float: right}
-    }
-    @media (max-width: 768px){
-      // banner
-      .aboutUs-banner{
-        height: 150px;
-        span{width: 100%;}
-        img{width: auto;height: 150px;}
-      }
-      // 公司简介
-      .company-profile-box{
-        img{margin: 20px auto;max-width: 100%;}
-        p{@include setFontStyle(-6);color: rgba(85, 85, 85, 1);line-height: 24px;margin: 0 10px 6px;}
-      }
-
-      // 品牌介绍
-      .brand-introduction-box{
-        background-color: rgb(238, 238, 238);
-        .brand-introduction-content{
-          background-color: transparent;padding: 24px 10px;
-          .brand-introduction-left{
-            display: block;border-right:0;padding-right:0;
-            h4{font-size: 18px;color: rgba(0, 0, 0, 1);text-align: center;margin-bottom: 20px;font-weight: 700;}
-            img{margin: 0 auto 24px;max-width: 230px;display: block;}
-          }
-          span{width: 100%;display: block;padding-left: 0;font-size: 14px;color: rgba(85, 85, 85, 1);line-height: 24px;}
-        }
-      }
-
-      // 企业文化
-      .corporate-culture-box{
-        padding: 50px 0 0;
-        li{
-          width:100%;
-          div{
-            height: 70px;margin: 0 10px 16px;border: 0;box-shadow: rgb(206, 206, 206) 0 0 6px -1px;padding: 14px 0;
-            i{display: unset;float: left;margin-left: 30px;margin-bottom: 0;}
-            h5{font-weight: 700;font-size: 16px;color: #101010;margin: 12px 0;}
-            p{font-size: 14px;color: #101010;}
-          }
-        }
-      }
-
-      // 联系我们
-      .contact-us-box{
-        padding: 54px 10px 0;border: 0;line-height: 1;font-size: 0;
-        .contact-container-box{
-          width: 100%;
-          padding: 0;
-          color: rgba(0,0,0,0.85);
-          float: unset;
-          h4{@include setFontStyle(-2);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;margin-top:0;text-align: center;}
-          h5{@include setFontStyle(-4);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;}
-          li{
-            span{color: rgba(0,0,0,0.54);}
-          }
-        }
-        img{float: unset;width: calc(100% + 50px);margin: 0 -25px;}
-      }
-    }
-  }
 
   /********  describe: 新闻资讯  author: TX  date:2020-08-10  ********/
   .client-newsInfor-page{
     // banner
     .newsInfor-banner{
-      width: 100%;height: 305px;background-image: url("~static/images/client/newsInfor/newsInfor-banner-bg.png");overflow: hidden;
-      img{width: 1200px;overflow: hidden;margin: 0 auto;display: block}
+      width: 100%;height: 475px;overflow: hidden;
+      img{max-width:100%;overflow: hidden;margin: 0 auto;display: block;height: 475px;}
     }
 
     // 菜单 ul
@@ -921,7 +725,7 @@
       // 右侧内容区域
       .newsInfor-content-ul{
         padding: 0 32px;
-        li{margin-bottom: 40px;cursor: pointer}
+        li{margin-bottom: 40px;cursor: pointer;display: flex;align-items: center;}
         li:last-child{margin-bottom: 0;}
         //图片
         .newsInfor-img-box{width:318px;height:178px;display: inline-block;margin-right: 32px;border-radius: 8px;overflow: hidden;vertical-align: top;background-repeat: no-repeat;background-size: cover;background-position: center;}
@@ -931,14 +735,14 @@
           display: inline-block;
           vertical-align: top;
 
-          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;}
+          h5{@include setFontStyle(4);color: #333333;margin-bottom: 15px;}
           div{
             margin-bottom: 8px;
-            i{width: 20px;height: 20px;display: inline-block;margin-right: 14px;vertical-align: middle;background-image: url("~static/images/client/newsInfor/newsInfor-details-time.svg");}
-            i[type="visits"]{background-image: url("~static/images/client/newsInfor/newsInfor-details-visits.svg");}
+            i{width: 20px;height: 20px;display: inline-block;margin-right: 14px;vertical-align: middle;background-image: url("~static/gangweiIcon/z148.png");background-repeat: no-repeat;background-position: center;background-size: contain;}
+            i[type="visits"]{background-image: url("~static/gangweiIcon/z147.png");background-repeat: no-repeat;background-position: center;background-size: contain}
             span{@include setFontStyle(-6);display:inline-block;color: #666;margin-right: 60px;vertical-align: middle;}
           }
-          p{height: 72px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin-bottom: 32px;text-align: justify;@include multi-line-ellipsis(3);overflow: hidden;}
+          p{max-height: 72px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;text-align: justify;@include multi-line-ellipsis(3);overflow: hidden;margin-top: 36px;}
           a{@include setFontStyle(-6);color: #4A73FD;}
           a:after{content: "";width: 14px;height: 12px;display:inline-block;background-image: url("~static/images/client/newsInfor/newsInfor-list-icon.svg");margin-left: 8px;}
           a:hover{cursor: pointer;}
@@ -1300,7 +1104,7 @@
     .medical-change-box{
       background: #F9FAFF;
       padding-bottom: 80px;
-      .industrydetails-content{width: 1200px;height: 316px;background-image: url("~static/images/client/industrydetails/medical-change-bg.png");}
+      .industrydetails-content{width: 1260px;height: 316px;background-image: url("~static/images/client/industrydetails/medical-change-bg.png");}
       .change-content-left,.change-content-right{
         width: 600px;display:inline-block;vertical-align: top;
         ul{margin-left: 42px;}
@@ -1507,7 +1311,7 @@
         // 关闭图标
         .el-icon-close:before{color: #fff}
         // 弹窗头部
-        .el-dialog__header{height: 100px;background: #363fdc;}
+        .el-dialog__header{height: 100px;background: #00b96b;}
         // 弹窗body
         .el-dialog__body{
           height:200px;position: relative;background: #fff;
@@ -1516,7 +1320,7 @@
             >p{font-size: 18px;color: #fff;text-align: center;line-height: 24px;margin-bottom: 8px}
             >span{
               margin-top: 36px;color: #666;font-size: 16px;display: block;text-align: center;
-              .tel-code{font-size: 30px;color:#1f68b4;font-weight: bold;}
+              .tel-code{font-size: 30px;color:#00b96b;font-weight: bold;}
             }
           }
         }
@@ -1530,8 +1334,8 @@
           span{width: 1px;min-height: 100px;display:inline-block;background:#e8e8e8;@include setFontStyle(-4);margin: 10px;}
           p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);line-height: 24px;text-align: center;}
         }
-        .system-box:nth-child(1){i{background-image:url("~static/images/client/exam/product-function-icon3.png");} }
-        .system-box:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon6.png");} }
+        .system-box:nth-child(1){i{background-image:url("~static/gangweiIcon/z134.png");} }
+        .system-box:nth-child(3){i{background-image:url("~static/gangweiIcon/z135.png");} }
       }
   }
 
@@ -1543,7 +1347,7 @@
   /********  describe: 课程开发解决方案  author: TX  date:2021-08-06  ********/
   .course-develop-page{
     // 标题
-    .course-develop-title{background-color: rgb(39, 68, 98);padding: 50px 0 100px;font-weight: 700;font-size: 24px;color: rgb(255, 255, 255);text-align: center;}
+    .course-develop-title{background-color: #00b96b;padding: 50px 0 100px;font-weight: 700;font-size: 24px;color: rgb(255, 255, 255);text-align: center;}
 
     // form
     .course-develop-form{width: 90%;min-height: 380px;background: #fff;margin: -50px auto 0;padding: 40px 24px;box-sizing: border-box;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px -1px;}
@@ -1562,7 +1366,7 @@
 
     // 输入框-验证码
     .course-develop-input-code{width: calc(100% - 122px);}
-    .course-develop-code-btn.el-button{width:110px;box-sizing:border-box;padding: 12px;margin-left: 8px;background-color: rgb(0, 102, 204);color: #fff;}
+    .course-develop-code-btn.el-button{width:110px;box-sizing:border-box;padding: 12px;margin-left: 8px;background-color: #00b96b;color: #fff;}
 
     // 公司名称
     .dialog-input-company{
@@ -1574,8 +1378,8 @@
        width: 100%;height: 50px;line-height: 50px;color: rgb(255, 255, 255);border-radius: 5px;@include setFontStyle(-4);text-align: center;border: 1px solid transparent;
     }
 
-    .form-blue-btn{background-color: rgb(0, 102, 204);border-color:rgb(0, 102, 204);}
-    .form-border-btn{display:block;border-color:rgb(0, 102, 204);color:rgb(0, 102, 204);margin-top: 20px; }
+    .form-blue-btn{background-color: #00b96b;border-color:#00b96b;}
+    .form-border-btn{display:block;border-color:#00b96b;color:#00b96b;margin-top: 20px; }
 
     // 咨询电话
     .course-develop-tel{display:block;text-align: center;margin: 60px 0;font-weight: 700;@include setFontStyle(-2);color: #101010;}

components/bottomMenu.vue

@@ -32,13 +32,12 @@
         footerData: [
           {
             name: '电话咨询',
-            url: 'tel:400-052-2130',
+            url: 'tel:400-099-0883',
           },
           {
             name: '在线咨询',
-            url: 'https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493',
+            url: 'https://p.qiao.baidu.com/cps/chat?siteId=17851606&userId=39739427&siteToken=0288c259e4ac8be07c4c238fcc91760f',
           }
-
         ]
       }
     },

components/common/applicationDialog.vue

@@ -24,10 +24,10 @@
         </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>
+<!--      <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"
@@ -36,10 +36,10 @@
       class="application-scheme-result-dialog"
       center
     >
-      <img src="#" class="success_icon">
+      <img :src="success_img" class="success_icon">
       <h3>恭喜您申请成功</h3>
-      <p>请保持手机畅通，时候客服会和您联系</p>
-      <el-button @click="confirmBtn">确定</el-button>
+      <p>请保持手机畅通，稍后客服会和您联系</p>
+      <div class="my-btn confirm-btn" @click="confirmBtn">确定</div>
     </el-dialog>
   </div>
 </template>
@@ -55,6 +55,7 @@ export default {
   },
   data() {
     return {
+      success_img: require(`~/static/productImage/p60.png`),
       show: false,
       formData: {
         tel: '',
@@ -163,11 +164,11 @@ export default {
         this.$message.error('请先通过滑块校验');
         return;
       }
-      const {tel: phone} = this.telChangeDate;
+      const {tel: phone} = this.formData;
       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}
+          let req = {appkey, scene, sig, token, sessionid, phone, type: 1}
           this.$axios.$post('/sendCode', req).then(res => {
             if (res.code === 0 && res.data) {
               this.setTime();
@@ -184,7 +185,7 @@ export default {
     applyFor() {
       this.$refs.ruleTelForm.validate((valid) => {
         if (valid) {
-          const {tel: phone, verification: code} = this.telChangeDate;
+          const {tel: phone, verification: code} = this.formData;
           // 请求后台
           const options = {phone, code};
           this.$axios.$post('/develop/add', options).then(res => {
@@ -280,6 +281,29 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.verification {
+  display: flex;
+  justify-content: space-between;
 
+  .dialog-code-btn {
+    background: #00b96b;
+    span {
+      color : #fff !important;
+    }
+  }
+}
+.application-scheme-dialog .el-dialog__body {
+  .dialog-code-btn {
+    background: #00b96b;
+    span {
+      color : #fff !important;
+    }
+  }
+}
+
+.application-scheme-dialog .el-dialog__body .application-scheme-btn {
+  background: #00b96b;
+  color: #fff;
+}
 </style>

components/common/applyBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <span v-bind="$attrs" @click="btnClick"> 申请方案 </span>
+  <span class="appley-btn" v-bind="$attrs" @click="btnClick">申请方案</span>
 </template>
 
 <script>
@@ -32,6 +32,29 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss">
+.appley-btn{
+  width: 154px;
+  height: 48px;
+  line-height: 48px;
+  background: #00b96b;
+  border-radius: 24px;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  @media (max-width: 768px) {
+    width: 44%;height:35px;line-height:35px;max-width: 120px;margin: 0 3%;display: inline-block;
+    padding: 0;text-align: center;font-size: 14px;
+  }
+}
 
+
+.appley-btn.shouye {
+  height: 55px;
+  width: 180px;
+  line-height: 55px;
+  color: #00b96b;
+  background: #fff;
+}
 </style>

components/common/chanPinTiYan.vue

@@ -2,26 +2,32 @@
   <div>
     <ul class="experience-ul-box mta-hidden-xs">
       <li>
-        <div @mouseenter="enterCode" @mouseleave="leaveCode">
+        <div>
           <h5>手机学员端</h5>
-          <img src="#">
+          <i></i>
           <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>
+      <li><div><h5>电脑管理端</h5><i></i>
+        <p v-if="curType === 'kaoshi'">欢迎体验青谷系统后台，三步轻松组织一场考试</p>
+        <p v-if="curType === 'peixun'">学练考试一站式培训系统，支持市面各种主流浏览器</p>
+        <a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
+      <li><div><h5>电脑学员端</h5><i></i>
+        <p v-if="curType === 'kaoshi'">支持市面各种主流浏览器，支持十万量级的考试并发</p>
+        <p v-if="curType === 'peixun'">欢迎体验青谷系统后台，三步轻松组织一场培训</p>
+        <a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">免费体验</a></div></li>
     </ul>
     <!-- 手机轮播 -->
-    <div class="experience-swiper-box mta-hidden-sm">
+    <div class="experience-phone-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="#">
+              <i class="sjxyd-icon"></i>
               <p>用手机扫描二维码，考生30秒体验答卷</p>
               <a style="cursor: default" @click="ykFreeTrial">立即体验</a>
             </div>
@@ -29,16 +35,18 @@
           <div class="swiper-slide">
             <div class="experience-content-box">
               <h5>电脑管理端</h5>
-              <img src="#">
-              <p>欢迎体验青谷系统后台，三步轻松组织一场考试</p>
+              <i class="dnxyd-icon"></i>
+              <p v-if="curType === 'kaoshi'">欢迎体验青谷系统后台，三步轻松组织一场考试</p>
+              <p v-if="curType === 'peixun'">学练考试一站式培训系统，支持市面各种主流浏览器</p>
               <a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a>
             </div>
           </div>
           <div class="swiper-slide">
             <div class="experience-content-box">
-              <img src="#">
+              <i class="dngld-icon"></i>
               <h5>电脑学员端</h5>
-              <p>支持市面各种主流浏览器，支持十万量级的考试并发</p>
+              <p v-if="curType === 'kaoshi'">支持市面各种主流浏览器，支持十万量级的考试并发</p>
+              <p v-if="curType === 'peixun'">欢迎体验青谷系统后台，三步轻松组织一场培训</p>
               <a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">后台体验</a></div>
           </div>
         </div>
@@ -55,6 +63,12 @@
 <script>
 export default {
   name: "chanPinTiYan",
+  props: {
+    curType: {
+      type: String,
+      default: 'kaoshi'
+    }
+  },
   data() {
     return {
       youkeFlag:false,// 控制游客系统是否维护中
@@ -78,16 +92,6 @@ export default {
     }
   },
   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){
         // 没升级
@@ -136,6 +140,75 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss">
+  .experience-ul-box{
+    margin: 0 -60px;text-align: center;
+    li{
+      width:33.33%;display: inline-block;text-align: center;font-size: 16px;
+      >div{
+        height: 476px;margin: 0 60px;padding:46px 36px;border: 1px solid #eaeaea;
+        border-radius: 10px;position: relative;overflow: hidden;box-sizing: border-box;
+        div{font-size:20px;color:#fff;position: absolute;right: 0;left: 0;top: 0;bottom: 0;box-sizing: border-box;transition: 0.5s;overflow: hidden;border-radius: 10px;line-height: 476px;background: rgba(0,0,0,.6);cursor: default;}
+        i{display: inline-block;width: 200px;height: 180px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;background-position: center;}
+        h5{font-size: 20px;color: #565656;margin-bottom: 24px;}
+        p{min-height: 52px;font-size: 14px;padding: 0;margin: 0;color: #565656;line-height: 24px;}
+        a{width: 180px;height: 45px;line-height: 45px;display: inline-block;margin-top: 24px;text-align: center;background-color: #00B96B;
+          border-color: rgba(255, 0, 0, 0);border-width: 1px;border-style: solid;color: rgb(255, 255, 255);border-radius:4px;font-weight: normal;cursor: pointer}
+        span{display: none;transition: 0.5s;position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;}
+        em{width:200px;height:200px;display: block;margin: 90px auto;background-image:url("~static/images/client/exam/exam-code-img.png");background-size: cover;}
+        em.px-img-box{background-image:url("~static/images/client/train/train-code-img.png")}
+      }
+      >div:after{
+        content: "";width: 100%;height: 4px;position: absolute;bottom: 0;background: #00b96b;left: 0;
+      }
+      >div:hover{
+        padding:0;box-shadow: 0 0 13px 0 rgba(223,223,223,0.60);
+        h5{background: #00b96b;color: #fff;padding: 27px 0 17px;}
+        p{padding: 0 36px;}
+        span{display: block;}
+      }
+
+    }
+    li:nth-child(1) i{background-image:url("~static/images/client/exam/exam-tel-icon.png")}
+    li:nth-child(2) i{background-image:url("~static/images/client/exam/exam-pc-icon.png")}
+    li:nth-child(3) i{background-image:url("~static/images/client/exam/exam-xy-icon.png")}
+  }
+  /**************** 手机样式 ****************/
+  .experience-phone-box {
+    position: relative;
+    // swiper--div
+    .swiper-slide {width: 100%;}
+
+    .swiper-pagination-style {
+      width: 80px;position: absolute;bottom: 66px;left: 50%;margin-left: -30px;z-index: 99;
+
+      // 小圆点
+      .my-bullet-swiper {width: 10px;height: 10px;border-radius: 5px;display: inline-block;background: rgba(17,221,71, 0.2);margin-right: 14px;}
+
+      // 分页active
+      .my-bullet-active-swiper {background: #00B96B;}
+    }
+
+    // swiper 内容区
+    .experience-content-box {
+      height: 243px;display: flex;flex-direction: column;align-items: center;justify-content: center;
+      margin: 5px 4% 40px;box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;text-align: center;padding: 20px 0;
+
+      i {width: 120px;height: 70px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;display: inline-block;flex-shrink: 0;}
+      h5 {font-weight: 700;font-size: 16px;color: rgb(16, 16, 16);margin-bottom: 30px;}
+      p {font-weight: 400;font-size: 14px;color: rgb(16, 16, 16);margin: 0 48px;line-height: 24px;}
+      a {width: 122px;height: 35px;line-height: 35px;background-color: #00B96B;color: rgb(255, 255, 255);border-radius: 5px;font-size: 14px;
+        padding: 0;text-align: center;display: inline-block;margin-top: 16px;
+      }
+    }
+
+    // swiper 提示
+    .experience-swiper-tip {font-weight: 400;font-size: 14px;color: rgb(96, 96, 96);text-align: center;margin: 0 0 42px;}
+    // 图片
+    .sjxyd-icon {background-image:url("~static/images/client/exam/exam-tel-icon.png")}
+    .dnxyd-icon {background-image:url("~static/images/client/exam/exam-pc-icon.png")}
+    .dngld-icon {background-image:url("~static/images/client/exam/exam-xy-icon.png")}
+  }
+
 
 </style>

components/common/freeTrialBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <span v-bind="$attrs" @click="btnClick"> 免费试用 </span>
+  <span class="free-btn" @click.stop.prevent="btnClick">免费试用</span>
 </template>
 
 <script>
@@ -9,6 +9,15 @@ export default {
     myType: {
       type: String,
       default: 'kaoshi'
+    },
+    select: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      visible: false,
     }
   },
   methods: {
@@ -21,6 +30,11 @@ export default {
       }
     },
     btnClick() {
+
+      if (this.select) {
+        this.$emit('need-select')
+        return false;
+      }
       // 执行业务
       this.FreeTrial();
       // 执行通知
@@ -34,24 +48,44 @@ export default {
       if (!this.isPC()) {
         // H5
         if (this.myType === 'kaoshi') {
-          window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
+          window.open('https://qg.qtavip.com/mdistqg/#/webRegisterQg?flug=1')
         } else {
-          window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
+          window.open('https://qg.qtavip.com/mdistqg/#/webRegisterQg?flug=2')
         }
       } else {
         if (this.myType === 'kaoshi') {
-          window.open('https://cdnks.mtavip.com/a/register?flug=1')
+          window.open('https://qg.qtavip.com/a/register?flug=1')
         } else {
-          window.open('https://cdnks.mtavip.com/a/register?flug=2')
+          window.open('https://qg.qtavip.com/a/register?flug=2')
         }
-
       }
     },
-
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss">
+.free-btn {
+  width: 154px;
+  height: 48px;
+  line-height: 48px;
+  background: #00b96b;
+  border-radius: 24px;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  @media (max-width: 768px) {
+    width: 44%;height:35px;line-height:35px;max-width: 120px;margin: 0 3%;display: inline-block;
+    padding: 0;text-align: center;font-size: 14px;
+  }
+}
 
+.free-btn.shouye {
+  height: 55px;
+  width: 180px;
+  line-height: 55px;
+  color: #00b96b;
+  background: #fff;
+}
 </style>

components/common/iconGangwei.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="gangwei-icon">
+    <div class="gangwei-icon-content">
+      <i :style="iconStyle"></i>
+      <p>{{ des.text }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "iconGangwei",
+  props: {
+    des: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    iconStyle() {
+      return `background-image: url(${this.des.icon})`;
+    }
+  }
+}
+</script>

components/common/layout/desComp/desWithCode.vue

@@ -0,0 +1,112 @@
+<template>
+  <!--  立即咨询  -->
+  <div class="service-code-box mta-hidden-xs" :class="pageData.topClass" :style="pageData.topStyle">
+    <h4>{{ pageData.title }}</h4>
+    <p v-if="pageData.p1" class="jinglu-weixin">{{ pageData.p1 }}</p>
+    <img :src="imgUrl" alt="">
+    <p v-if="pageData.p2" class="kefu-weixin">{{ pageData.p2 }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "desWithCode",
+  props: {
+    source: {
+      type: String,
+    }
+  },
+  data() {
+    return {
+      imgUrl: require('static/codeImage/code-jingli.png'), // 客服二维码
+      imgUrl2: require('static/codeImage/code-jingli.png'), // 经理二维码
+      bg1: require('static/codeImage/code-bj01.png'), // 企业培训
+      bg2: require('static/codeImage/code-bj02.png'), // 教育机构+食品餐饮
+    }
+  },
+  computed: {
+    pageData() {
+      const title = '立即扫码咨询，领取您的专属解决方案';
+      const p1 = '马上扫码添加客户经理';
+      const p2 = '扫码添加客服微信';
+      let result = {};
+      switch (this.source) {
+        case 'exam':
+          // 严肃考试
+           result = Object.assign({title, p2}, {topClass: 'kefu'}, {topStyle: ''}, {imgUrl: this.imgUrl});
+           break;
+        case 'peixun':
+          // 企业培训
+          result = Object.assign({
+            title,
+            p1
+          }, {topClass: 'jingli'}, {topStyle: `background-image: url(${this.bg1})`}, {imgUrl: this.imgUrl2});
+          break;
+        case 'education':
+          // 解决方案 -> 教育机构
+        case 'biteAndSup':
+          // 解决方案 -> 食品餐饮
+        case 'erupt':
+          // 解决方案 -> 万人高并发
+        case 'transportation':
+          // 解决方案 -> 交通运输
+        case 'financial':
+          // 解决方案 -> 金融保险
+        case 'medical':
+          // 解决方案 -> 医疗行业
+        case 'privatization':
+          // 解决方案 -> 私有化部署
+        case 'government':
+        // 解决方案 -> 政府机构
+        case 'news':
+        // 客户案例
+        case 'energy':
+          // 解决方案 -> 能源化工
+          result = Object.assign({
+            title,
+            p2
+          }, {topClass: 'kefu-leve-bj'}, {topStyle: `background-image: url(${this.bg2})`}, {imgUrl: this.imgUrl});
+          break;
+      }
+      return result;
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.service-code-box {
+  width: 100%;
+  height: 440px;
+  text-align: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  padding: 100px 0 83px;
+  background-size: cover;
+
+  h4 {font-size: 30px;text-align: center;margin: 0 0 45px;color: #fff;}
+
+  img {width: 142px;height: 142px;margin: 0 auto;border: 1px solid #46c37b;padding: 5px;}
+
+  p {font-size: 18px;text-align: center;margin: 24px 0 0;color: #fff;}
+
+  // 客服---(纯白色背景)
+  &.kefu {
+    background-color: #FAFAFA;
+    h4,p {color: #333;}
+  }
+
+  // 经理---（/背景为弧形的光）
+  &.jingli {
+    height: 360px;padding: 62px 0 62px;
+    h4 {margin: 0 0 30px;}
+    p{margin: 0 0 16px;}
+  }
+
+  // 客服带背景图---(背景为菱形的光)
+  &.kefu-leve-bj {}
+
+
+}
+</style>

components/common/layout/desComp/gangweiList.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="client-gangwei-box">
+    <div class="client-container">
+    <h4 class="gangwei-title" v-if="label">{{label}}</h4>
+
+      <div class="gangwei-cp-row mta-hidden-xs" :class="rowClassPc" v-for="(rowList,index) in myListPc" :key="`pc-${index}`">
+        <template v-for="(des,ind) in rowList">
+          <!--    站位div    -->
+          <div v-if="des.type === 'empty'"></div>
+          <iconGangwei v-else  :key="ind" :des="des" ></iconGangwei>
+        </template>
+      </div>
+      <div class="gangwei-phone-row mta-hidden-sm" :class="rowClassH5"v-for="(rowList,index) in myListH5" :key="`h5${index}`">
+        <template  v-for="(des,ind) in rowList">
+          <!--    站位div    -->
+          <div v-if="des.type === 'empty'"></div>
+          <iconGangwei v-else :key="ind" :des="des" ></iconGangwei>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import iconGangwei from "@/components/common/iconGangwei";
+
+export default {
+  name: "gangweiList",
+  props: {
+    label: {
+      type: String,
+    },
+    list: {
+      type: Array,
+      default: () => ([])
+    },
+    pcNum: {
+      type: Number,
+      default: 4
+    },
+    h5Num: {
+      type: Number,
+      default: 2
+    },
+  },
+  computed: {
+    myListPc() {
+      const count = this.pcNum;
+      const row = Math.ceil(this.list.length / count);
+      const result = [];
+      for (let i = 1; i <= row; i++) {
+        const start = (i - 1) * count;
+        const end = (i * count)
+        const curList = this.list.slice(start, end);
+        if (curList.length < count) {
+          curList.push({type: 'empty'});
+        }
+        result.push(curList)
+      }
+      return result;
+    },
+    myListH5() {
+      const count = this.h5Num;
+      const row = Math.ceil(this.list.length / count);
+
+      const result = [];
+      for (let i = 1; i <= row; i++) {
+        const start = (i - 1) * count;
+        const end = (i * count)
+        const curList = this.list.slice(start, end)
+        if (curList.length < count) {
+          curList.push({type: 'empty'});
+        }
+        result.push(curList)
+      }
+      return result;
+    },
+    rowClassPc() {
+      const obj = {
+        4: 'four',
+        3: 'three',
+        2: 'two'
+      }
+      return [`gangwei-icon-${obj[this.pcNum]}`]
+    },
+    rowClassH5() {
+      const obj = {
+        4: 'four',
+        3: 'three',
+        2: 'two'
+      }
+      return [`gangwei-icon-${obj[this.h5Num]}`]
+    },
+  },
+  components: {
+    iconGangwei
+  }
+}
+</script>
+
+<style lang="scss">
+  .client-gangwei-box {
+    // 标题
+    .gangwei-title {font-size: 30px;color: #333;font-weight: 800;text-align: center;margin: 92px 0 105px;}
+
+    /**************** pc样式 ****************/
+    .gangwei-cp-row{display: flex;flex-wrap: wrap;}
+    // 图标列表
+    .gangwei-icon-three,.gangwei-icon-four{
+      text-align: center;
+      .gangwei-icon{margin-bottom: 80px}
+      .gangwei-icon-content{
+        display: inline-block;margin: 0 auto;text-align: center;
+        i{width:164px;height:164px;margin:0 auto 22px;display: block;
+          background-repeat: no-repeat;background-position: center;background-size: contain;}
+        p{font-size: 18px;font-weight: 800;color: #333333;}
+      }
+    }
+
+    // 一行三个
+    .gangwei-icon-three{
+      .gangwei-icon{width: 33.33%;}
+    }
+
+    // 一行四个
+    .gangwei-icon-four{
+      .gangwei-icon{width: 25%;}
+    }
+
+    /**************** 手机样式 ****************/
+    @media (max-width: 768px){
+      // 标题
+      .gangwei-title {font-size: 18px;margin: 50px 0 26px;}
+      .gangwei-phone-row{display: flex;flex-wrap: wrap;}
+      .gangwei-icon-two{
+        text-align: center;
+        .gangwei-icon{width: 50%;margin-bottom: 25px;}
+        .gangwei-icon-content{
+          display: inline-block;margin: 0 auto;text-align: center;
+          i{width:75px;height:75px;margin:0 auto 10px;display: block;
+            background-repeat: no-repeat;background-position: center;background-size: contain;}
+          p{font-size: 16px;font-weight: normal;color: #333333;}
+        }
+      }
+    }
+  }
+
+</style>

components/common/layout/imgDes/imgCardLv1.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="mta-card-lv1">
+    <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order>contentOrder ? 'img-left': 'img-right']">
+      <img :style="`order:${img.order}`" :src="img.url">
+      <div class="card-info" :style="`order: ${contentOrder}`">
+        <h5>{{title}}</h5>
+        <p class="card-des">{{description}}</p>
+        <div class="mta-card-row" v-for="(rowList,index) in tagesPc" :key="`pc-${index}`">
+          <template v-for="(des,ind) in rowList">
+            <!--    站位div    -->
+            <span class="mta-card-row-item" v-if="des.type == 'empty'" :key="ind"></span>
+            <span v-else class="mta-card-row-item" :key="ind"><i></i><span>{{des.value}}</span></span>
+          </template>
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+    <div class="mta-card-content-h5 mta-hidden-sm">
+      <img :src="img.url">
+      <div class="card-info">
+        <h5>{{title}}</h5>
+        <em></em>
+        <p class="card-des" v-if="description">{{description}}</p>
+        <div class="mta-card-row" v-for="(rowList,index) in tagesH5" :key="`h5-${index}`">
+          <template v-for="(des,ind) in rowList">
+            <!--    站位div    -->
+            <span class="mta-card-row-item" v-if="des.type == 'empty'" :key="ind"></span>
+            <span v-else class="mta-card-row-item" :key="ind"><i></i><span>{{des.value}}</span></span>
+          </template>
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "imgCardLv1",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+    colPc: {
+      type: Number,
+      default: 3
+    },
+    colH5: {
+      type: Number,
+      default: 3
+    }
+  },
+  computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    description() {
+      return this.option.content.des;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      const count = this.colPc;
+      const list = this.option.content.list;
+      const row = Math.ceil(list.length / count);
+      const result = [];
+      for (let i = 1; i <= row; i++) {
+        const start = (i - 1) * count;
+        const end = (i * count)
+        const curList = list.slice(start, end);
+        if (curList.length < count) {
+          curList.push({type: 'empty'});
+        }
+        result.push(curList)
+      }
+      return result;
+    },
+    tagesH5() {
+      const count = this.colH5;
+      const list = this.option.content.list;
+      const row = Math.ceil(list.length / count);
+      const result = [];
+      for (let i = 1; i <= row; i++) {
+        const start = (i - 1) * count;
+        const end = (i * count)
+        const curList = list.slice(start, end);
+        if (curList.length < count) {
+          curList.push({type: 'empty'});
+        }
+        result.push(curList)
+      }
+      return result;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv1 {
+  margin: 0 auto 120px;
+
+  .mta-card-content-pc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 480px;
+      height: 370px;
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+  .card-info {
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin-top: 40px;
+      margin-bottom: 30px;
+    }
+    .card-des {
+      font-size: 14px;
+      line-height: 24px;
+      color: #333;
+      font-weight: 500;
+      text-align: left;
+      margin-bottom: 30px;
+    }
+  }
+
+  .mta-card-row-item {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    width: 160px;
+    margin-bottom: 24px;
+
+    i {
+      display: inline-block;
+      width:8px;
+      height: 8px;
+      background: #00b96b;
+      margin-right: 13px;
+      border-radius: 50%;
+    }
+
+    span  {
+      line-height: 24px;
+    }
+  }
+
+  .mta-card-row {
+    display: flex;
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto 60px;
+
+    .mta-card-content-h5 {
+      img {
+        width: 80%;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+      }
+
+      .card-info {
+        width: 100%;
+
+        h5 {
+          font-size: 16px;
+          margin: 20px 0 10px;
+        }
+
+        em {
+          width: 35px;
+          height: 3px;
+          background: #00b96b;
+          display: block;
+          margin-bottom: 20px;
+        }
+
+        .card-des {
+          font-size: 14px;
+          margin: 20px 0 10px;
+          text-align: justify;
+          line-height: 22px;
+        }
+      }
+
+      .mta-card-row {
+        margin-bottom: 10px;
+
+        > span {
+          width: 44%;
+          font-size: 14px;
+          margin: 0 3%;
+        }
+      }
+    }
+  }
+}
+
+
+</style>

components/common/layout/imgDes/imgCardLv1_index.vue

@@ -0,0 +1,231 @@
+<template>
+  <div>
+    <div class="mta-card-lv1 client-container">
+      <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order>contentOrder ? 'img-left': 'img-right']">
+        <img :style="`order:${img.order}`" :src="img.url">
+        <div class="card-info" :style="`order: ${contentOrder}`">
+          <h5>{{ title }}</h5>
+          <p class="card-des">{{ description }}</p>
+          <div class="mta-card-row" v-for="(rowList,index) in tagesPc" :key="`pc-${index}`">
+            <template v-for="(des,ind) in rowList">
+              <!--    站位div    -->
+              <span class="mta-card-row-item" v-if="des.type == 'empty'" :key="ind"></span>
+              <span v-else class="mta-card-row-item" :key="ind"><i></i><span>{{ des.value }}</span></span>
+            </template>
+          </div>
+          <slot></slot>
+        </div>
+      </div>
+      <div class="mta-card-content-h5 mta-hidden-sm">
+        <img :src="img.url">
+        <div class="card-info">
+          <h5>{{ title }}</h5>
+          <em></em>
+          <p class="card-des" v-if="description">{{ description }}</p>
+          <div class="mta-card-row" v-for="(rowList,index) in tagesH5" :key="`h5-${index}`">
+            <template v-for="(des,ind) in rowList">
+              <!--    站位div    -->
+              <span class="mta-card-row-item" v-if="des.type == 'empty'" :key="ind"></span>
+              <span v-else class="mta-card-row-item" :key="ind"><i></i><span>{{ des.value }}</span></span>
+            </template>
+          </div>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "imgCardLv1",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+    colPc: {
+      type: Number,
+      default: 3
+    },
+    colH5: {
+      type: Number,
+      default: 3
+    },
+    isRow: Boolean
+  },
+  computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    description() {
+      return this.option.content.des;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      const count = this.colPc;
+      const list = this.option.content.list;
+      const row = Math.ceil(list.length / count);
+      const result = [];
+      for (let i = 1; i <= row; i++) {
+        const start = (i - 1) * count;
+        const end = (i * count)
+        const curList = list.slice(start, end);
+        if (curList.length < count) {
+          curList.push({type: 'empty'});
+        }
+        result.push(curList)
+      }
+      return result;
+    },
+    tagesH5() {
+      const count = this.colH5;
+      const list = this.option.content.list;
+      const row = Math.ceil(list.length / count);
+      const result = [];
+      for (let i = 1; i <= row; i++) {
+        const start = (i - 1) * count;
+        const end = (i * count)
+        const curList = list.slice(start, end);
+        if (curList.length < count) {
+          curList.push({type: 'empty'});
+        }
+        result.push(curList)
+      }
+      return result;
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv1 {
+  padding: 60px 0 60px 0;
+
+  .mta-card-content-pc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+  .card-info {
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin-top: 40px;
+      margin-bottom: 30px;
+    }
+
+    .card-des {
+      font-size: 14px;
+      line-height: 24px;
+      color: #333;
+      font-weight: 500;
+      text-align: left;
+      margin-bottom: 30px;
+    }
+  }
+
+  .mta-card-row-item {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    width: 160px;
+    margin-bottom: 24px;
+
+    i {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background: #00b96b;
+      margin-right: 13px;
+      border-radius: 50%;
+    }
+
+    span {
+      line-height: 24px;
+    }
+  }
+
+  .mta-card-row {
+    display: flex;
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto 3%;
+    padding: 0 20px;
+
+    .mta-card-content-h5 {
+      img {
+        width: 80%;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+      }
+
+      .card-info {
+        width: 100%;
+
+        h5 {
+          font-size: 16px;
+          margin: 20px 0 10px;
+        }
+
+        em {
+          width: 35px;
+          height: 3px;
+          background: #00b96b;
+          display: block;
+          margin-bottom: 20px;
+        }
+
+        .card-des {
+          font-size: 14px;
+          margin: 20px 0 10px;
+          text-align: justify;
+          line-height: 22px;
+        }
+      }
+
+      .mta-card-row {
+        margin-bottom: 10px;
+
+        > span {
+          width: 44%;
+          font-size: 14px;
+          margin: 0 3%;
+        }
+      }
+    }
+  }
+}
+
+
+</style>

components/common/layout/imgDes/imgCardLv2.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="mta-card-lv2">
+
+    <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order> contentOrder ? 'img-left': 'img-right']">
+      <img :style="`order:${img.order}`" :src="img.url">
+      <div class="card-info" :style="`order: ${contentOrder}`">
+        <span class="card-info-num" v-if="num">{{ num }}</span>
+        <h5>{{ title }}</h5>
+        <div class="mta-card-row" v-for="(rowItem,index) in tagesPc" :key="`pc-${index}`">
+          <i></i><span>{{ rowItem.value }}</span>
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+
+
+    <div class="mta-card-content-h5 mta-hidden-sm">
+      <img :src="img.url">
+      <div class="card-info">
+        <h5>{{ title }}</h5>
+        <em></em>
+        <div class="mta-card-row" v-for="(rowItem,index) in tagesH5" :key="`H5-${index}`">
+          <i></i><span>{{ rowItem.value }}</span>
+        </div>
+        <slot></slot>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "imgCardLv2",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    num() {
+      return this.option.content.num;
+    },
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      return this.option.content.list;
+    },
+    tagesH5() {
+      return this.option.content.list;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv2 {
+  margin: 0 auto 120px;
+
+  .mta-card-content-pc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      max-width: 100%;
+      height: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 150px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 150px;
+    }
+  }
+
+  .card-info {
+    width: 490px;
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin:0 0 23px;
+    }
+    .card-info-num {
+      font-size: 36px;
+      font-weight: 500;
+      color: #00B96B;
+      margin-bottom: 16px;
+      display: block;
+    }
+  }
+
+
+  .mta-card-row {
+    margin-bottom: 23px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    text-align: left;
+
+
+    &:last-child{
+      margin-bottom: 0px;
+    }
+    i {
+      display: inline-block;
+      width:8px;
+      height: 8px;
+      background: #00b96b;
+      margin-right: 13px;
+      border-radius: 50%;
+    }
+
+    span  {
+      line-height: 24px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto 60px;
+    .mta-card-content-h5 {
+      img {
+        width: 80%;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+      }
+      // card--info
+      .card-info {
+        width: 100%;
+
+        h5 {font-size: 18px;margin: 20px 0 10px;}
+        em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
+        .card-des{
+          font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+        }
+      }
+    }
+  }
+}
+
+
+</style>

components/common/layout/imgDes/imgCardLv2_exam.vue

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div class="mta-card-lv2 client-container" :class="classArr">
+      <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order> contentOrder ? 'img-left': 'img-right']">
+        <img :style="`order:${img.order}`" :src="img.url">
+        <div class="card-info" :style="`order: ${contentOrder}`">
+          <span class="card-info-num" v-if="num">{{ num }}</span>
+          <h5>{{ title }}</h5>
+          <div class="mta-card-row" v-for="(rowItem,index) in tagesPc" :key="`pc-${index}`">
+            <i></i><span>{{ rowItem.value }}</span>
+          </div>
+          <slot></slot>
+        </div>
+      </div>
+      <div class="mta-card-content-h5 mta-hidden-sm">
+        <img :src="img.url">
+        <div class="card-info">
+          <h5>{{ title }}</h5>
+          <em></em>
+          <div class="mta-card-row" v-for="(rowItem,index) in tagesH5" :key="`H5-${index}`">
+            <i></i><span>{{ rowItem.value }}</span>
+          </div>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "imgCardLv2",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    num() {
+      return this.option.content.num;
+    },
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      return this.option.content.list;
+    },
+    tagesH5() {
+      return this.option.content.list;
+    },
+    classArr() {
+      return this.isRow ? ['client-container'] : []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv2 {
+  padding: 100px 0 100px 0;
+
+  .mta-card-content-pc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      max-width: 100%;
+      height: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+  .card-info {
+    width: 490px;
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin:0 0 23px;
+    }
+    .card-info-num {
+      font-size: 36px;
+      font-weight: 500;
+      color: #00B96B;
+      margin-bottom: 16px;
+      display: block;
+    }
+  }
+
+
+  .mta-card-row {
+    margin-bottom: 23px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+    text-align: left;
+
+
+    &:last-child{
+      margin-bottom: 0px;
+    }
+    i {
+      display: inline-block;
+      width:8px;
+      height: 8px;
+      background: #00b96b;
+      margin-right: 13px;
+      border-radius: 50%;
+    }
+
+    span  {
+      line-height: 24px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto 3%;
+    padding: 0 20px;
+
+    .mta-card-content-h5 {
+      img {
+        width: 80%;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+      }
+      // card--info
+      .card-info {
+        width: 100%;
+
+        h5 {font-size: 18px;margin: 20px 0 10px;}
+        em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
+        .card-des{
+          font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+        }
+      }
+    }
+  }
+}
+
+
+</style>

components/common/layout/imgDes/imgCardLv3.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="mta-card-lv3">
+    <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order > contentOrder ? 'img-left': 'img-right']">
+      <img :style="`order:${img.order}`" :src="img.url">
+      <div class="card-info" :style="`order: ${contentOrder}`">
+        <h5>{{ title }}</h5>
+        <p>{{des}}</p>
+        <slot></slot>
+      </div>
+    </div>
+    <div class="mta-card-content-h5 mta-hidden-sm">
+      <img :src="img.url">
+      <div class="card-info">
+        <h5>{{ title }}</h5>
+        <em></em>
+        <p>{{des}}</p>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "imgCardLv3",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    des() {
+      return this.option.content.des;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      return this.option.content.list;
+    },
+    tagesH5() {
+      return this.option.content.list;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv3 {
+  margin: 0 auto 120px;
+
+  .mta-card-content-pc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+  .card-info {
+    width: 490px;
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin: 0 0 36px;
+    }
+
+    p {
+      font-size: 14px;
+      color: #333;
+      line-height: 24px;
+      text-align: justify;
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto 60px;
+    .mta-card-content-h5 {
+      img {
+        width: 80%;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+      }
+      // card--info
+      .card-info {
+        width: 100%;
+        h5 {font-size: 16px;margin: 20px 0 10px;}
+        em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
+        .card-des{
+          font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+        }
+      }
+    }
+
+  }
+}
+</style>

components/common/layout/imgDes/imgCardLv3_peixun.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div class="mta-card-lv3 client-container">
+      <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order > contentOrder ? 'img-left': 'img-right']">
+        <img :style="`order:${img.order}`" :src="img.url">
+        <div class="card-info" :style="`order: ${contentOrder}`">
+          <h5>{{ title }}</h5>
+          <p>{{des}}</p>
+          <slot></slot>
+        </div>
+      </div>
+      <div class="mta-card-content-h5 mta-hidden-sm">
+        <img :src="img.url">
+        <div class="card-info">
+          <h5>{{ title }}</h5>
+          <em></em>
+          <p>{{des}}</p>
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "imgCardLv3",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    des() {
+      return this.option.content.des;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      return this.option.content.list;
+    },
+    tagesH5() {
+      return this.option.content.list;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv3 {
+  padding: 100px 0 100px 0;
+
+  .mta-card-content-pc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+  .card-info {
+    width: 490px;
+    h5 {
+      font-size: 24px;
+      font-weight: 800;
+      text-align: left;
+      color: #333;
+      margin: 0 0 36px;
+    }
+
+    p {
+      font-size: 14px;
+      color: #333;
+      line-height: 24px;
+      text-align: justify;
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto 3%;
+    padding: 0 20px;
+
+    .mta-card-content-h5 {
+      img {
+        width: 80%;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+      }
+      // card--info
+      .card-info {
+        width: 100%;
+        h5 {font-size: 16px;margin: 20px 0 10px;}
+        em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
+        .card-des{
+          font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+        }
+      }
+    }
+
+  }
+}
+</style>

components/common/layout/imgDes/imgCardLv4.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="mta-card-lv4">
+
+    <div class="mta-card-content-pc mta-hidden-xs" :class="[img.order > contentOrder ? 'img-left': 'img-right']">
+      <img :style="`order:${img.order}`" :src="img.url" style="width: 540px;height: 315px">
+      <div class="card-info" :style="`order: ${contentOrder}`">
+        <p class="p-top">{{ des1 }}</p>
+        <h5>解决方案</h5>
+        <p class="p-bottom">{{des}}</p>
+        <slot></slot>
+      </div>
+    </div>
+
+
+    <div class="mta-card-content-h5 mta-hidden-sm">
+      <img :src="img.url" style="width: 100%;height: auto">
+      <div class="card-info">
+        <p class="p-top">{{ des1 }}</p>
+        <h5>解决方案</h5>
+        <em></em>
+        <p class="p-bottom">{{des}}</p>
+        <slot></slot>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "imgCardLv4",
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    img() {
+      return {url: this.option.img.url, order: this.option.img.order}
+    },
+    title() {
+      return this.option.content.title;
+    },
+    des() {
+      return this.option.content.des;
+    },
+    des1() {
+      return this.option.content.des1;
+    },
+    contentOrder() {
+      return this.option.content.order;
+    },
+    tagesPc() {
+      return this.option.content.list;
+    },
+    tagesH5() {
+      return this.option.content.list;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mta-card-lv4 {
+  margin: 0 auto 120px;
+
+  .mta-card-content-pc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      max-width: 100%;
+      height: auto;
+      flex-shrink: 0;
+    }
+
+    .card-info {
+      width: 503px;
+      h5 {
+        font-size: 24px;
+        font-weight: 800;
+        text-align: left;
+        color: #333;
+        margin: 0 0 20px;
+        position: relative;
+
+        &:before {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          width: 100px;
+          height: 3px;
+          background: #00b96b;
+        }
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+        line-height: 24px;
+      }
+
+      p.p-top {
+        margin-top: 30px;
+        margin-bottom: 30px;
+      }
+
+      p.p-bottom {
+        margin-top: 20px;
+        margin-bottom: 40px;
+      }
+    }
+  }
+
+  .img-left {
+    img {
+      margin-left: 100px;
+    }
+
+  }
+
+  .img-right {
+    img {
+      margin-right: 100px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 auto 60px;
+    .mta-card-content-h5 {
+      img {
+        width: 80%;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+      }
+      // card--info
+      .card-info {
+        width: 100%;
+        h5 {font-size: 16px;margin: 20px 0 10px;font-weight: 800}
+        em{width: 35px;height: 3px;background: #00b96b;display: block;margin-bottom: 20px;}
+        p{
+          font-size: 14px;margin: 20px 0 10px;text-align: justify;line-height: 22px;
+        }
+      }
+    }
+
+  }
+
+}
+</style>

components/common/mtaTable.vue

@@ -1,9 +1,9 @@
 <template>
-  <table>
+  <table class="mta-table">
     <thead>
-    <tr>
-      <th v-for="item in config" :key="item.key">{{item.label}}</th>
-    </tr>
+      <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">
@@ -11,7 +11,7 @@
         <template v-if="item.key === 'name'">
           <span>
             {{itemTd[item.key]}}
-            <i  v-if="itemTd['shikanUrl']" @click="shikan(itemTd['shikanUrl'])">试看</i>
+            <i class="table-shikan mta-hidden-xs" v-if="itemTd['shikanUrl']" @click="shikan(itemTd['shikanUrl'])">试看</i>
           </span>
         </template>
         <template v-else>
@@ -44,8 +44,77 @@ export default {
 }
 </script>
 
-<style scoped>
-.shikan {
+<style lang="scss" scoped>
+.table-shikan {
   cursor: pointer;
+  color: #00b96b;
+  font-size: 14px;
+  font-weight: 500;
+  margin-left: 20px;
+}
+.mta-table {
+  width: 100%;
+  border: 1px solid #E8E8E8;
+  border-collapse: collapse;
+
+  td {
+    font-size: 14px;
+    font-weight: 500;
+    color: #565656;
+    line-height: 60px;
+    padding: 5px 20px;
+    border: 1px solid #E8E8E8;
+  }
+
+  th {
+    padding: 5px 20px;
+    color: #565656;
+    line-height: 60px;
+    font-size: 14px;
+    border: 1px solid #E8E8E8;
+  }
+}
+
+@media (max-width: 768px) {
+  .mta-table {
+    td {
+      line-height: 14px;
+      padding: 5px 5px ;
+      font-size: 12px;
+      display: inline-block;
+      box-sizing: border-box;
+      span {
+        display: inline-block;
+        width: 100%;
+        text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;
+      }
+      &:first-child {
+        width: 60%;
+      }
+      &:nth-child(2) {
+        width: 20%;
+      }
+      &:last-child {
+        width: 20%;
+      }
+    }
+    th {
+      line-height: 14px;
+      padding: 5px 5px;
+      font-size: 12px;
+      display: inline-block;
+      box-sizing: border-box;
+      &:first-child {
+        width: 60%;
+      }
+      &:nth-child(2) {
+        width: 20%;
+      }
+      &:last-child {
+        width: 20%;
+      }
+    }
+
+  }
 }
 </style>

components/common/newsComp.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <!-- 新闻资讯 PC-->
-    <div class="client-news-information mta-hidden-xs">
-      <h4 class="client-title">麦塔资讯</h4>
+    <div class="client-news-information mta-hidden-xs" v-if="newsData.length">
+      <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="麦塔资讯"/>
+            <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>
@@ -24,25 +24,26 @@
           </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 class="client-newsInfo-phone mta-hidden-sm" v-if="newsData.length">
+        <div class="client-container">
+        <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.native="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>
   </div>
 
@@ -93,6 +94,25 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.client-news-information {
+  background: #fafafa;
 
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-bottom: 70px;
+  }
+
+  .industry-information-left {
+    img {
+      width: 605px;
+      height: 180px;
+    }
+    h4:hover {
+      color: #00b96b;
+    }
+  }
+}
 </style>

components/common/newsComp2.vue

@@ -4,14 +4,14 @@
     <div class="platform-news-information mta-hidden-xs">
       <!-- 新闻资讯 -->
       <div class="client-container">
-        <h4 class="client-title">新闻资讯</h4>
+        <h4 class="client-title-news">新闻资讯</h4>
         <ul>
-          <li style="font-size: 16px" v-for="(item, index) in newsData" :key="index">
+          <li style="font-size: 16px" v-for="(item, index) in curNewsData" :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>
+              <img :src="item.pic" alt="新闻资讯"/>
+              <h4 class="new_title" @click="checkInfo(item)">{{ item.title }}</h4>
+              <span class="new_date">发布时间：{{ item.yyyy }}-{{ item.mmdd }}</span>
+              <p class="new_des">{{ item.intro }}</p>
             </div>
           </li>
         </ul>
@@ -19,19 +19,21 @@
     </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 class="client-newsInfo-phone mta-hidden-sm">
+        <div class="client-container">
+        <h4 class="client-title-news">新闻资讯</h4>
+        <el-carousel :interval="5000" type="card" height="300px" indicator-position="none" arrow="never">
+          <el-carousel-item v-for="(item,index) in curNewsData" @click.native="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>
   </div>
 
@@ -57,6 +59,9 @@ export default {
     baseUrl() {
       return this.getBaseUrl;
     },
+    curNewsData() {
+      return this.newsData && this.newsData.length<4?this.newsData:this.newsData.slice(0,4)
+    },
     ...mapGetters(['getBaseUrl']),
   },
   methods: {
@@ -81,6 +86,104 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.platform-news-information {
+  overflow: hidden;
+  h4.client-title-news {
+    font-size: 30px;
+    font-weight: 800;
+    text-align: center;
+    color: #333;
+    margin-top: 90px;
+    margin-bottom: 60px;
+  }
+
+  ul > li {
+    .new_title {
+      font-size: 18px;
+      color: #333;
+      text-align: left;
+      font-weight: 800;
+      margin-bottom: 8px;
+    }
+
+    .new_date {
+      font-size: 12px;
+      font-weight: 500;
+      color: #565656;
+      position: relative;
+      margin-bottom: 20px;
+
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -10px;
+        left: 250px;
+        width: 60px;
+        height: 2px;
+        background: #00B96B;
+      }
+    }
+
+    .new_des {
+      height: 96px;
+      font-size: 14px;
+      line-height: 24px;
+      font-weight: 500;
+      color: #565656;
+      text-align: justify;
+    }
+  }
 
+  ul > li > div {
+    border-bottom: none;
+    margin-bottom: 66px;
+
+    img {
+      width: 226px;
+      height: 154px;
+    }
+  }
+}
+
+.client-newsInfo-phone{
+  background-color: rgb(238, 238, 238);
+  padding-top: 20px;
+
+  .client-title-news {
+    text-align: center;
+    font-weight: 800;
+    font-size: 18px;
+  }
+  // 轮播外层
+  .el-carousel{
+    padding: 20px 0 40px;
+    // card
+    .el-carousel__item{
+      width: 80%;left: -15%;color: rgb(16, 16, 16);background: #fff;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;
+      img{width: 100%;height: 135px;}
+    }
+    // 文字区域
+    .newsInfo-card-content{
+      padding: 24px 20px;
+      h4{
+        font-size: 14px;
+        color: #333;
+        font-weight: 400;
+      }
+      span{margin-top: 16px; font-size: 12px; display: block}
+      p{min-height: 40px;margin-top: 16px; font-size: 12px;
+        -webkit-line-clamp:4;
+        text-overflow: ellipsis;
+        -o-text-overflow: ellipsis;
+        overflow: hidden;
+        word-wrap: break-word;
+        display: -webkit-box;
+        white-space: normal !important;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+
+}
 </style>

components/common/onlineInformationBtn.vue

@@ -1,25 +1,76 @@
 <template>
-  <span @click="btnClick"> 在线咨询 </span>
-
+  <a v-if="isPC" class="zxzx-btn" @click="btnClick">在线咨询</a>
 </template>
 
 <script>
+import {linkForKefu} from "~/defaultConfig"
+
 export default {
   name: "onlineInformation",
   props: {
     myType: {
       type: String,
-      default: 'kaoshi'
+      default: '1'
+    }
+  },
+  data() {
+    return {
+      linkForKefu
     }
   },
   methods: {
+    isPC() {
+      const browserWidth = document.documentElement.clientWidth;
+      if (browserWidth <= 768) {
+        return false;
+      } else {
+        return true;
+      }
+    },
     btnClick() {
-      this.$router.push({name: 'courseware'});
+      if (this.isPC()) {
+        window.open(this.linkForKefu)
+      } else {
+        window.location.href = this.linkForKefu
+      }
+
     }
-  }
+  },
 }
 </script>
 
-<style scoped>
+<style lang="scss">
+.zxzx-btn {
+  width: 154px;
+  height: 48px;
+  line-height: 48px;
+  border-radius: 24px;
+  border: 1px solid #00b96b;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  color: #00b96b;
 
+  @media (max-width: 768px) {
+    width: 44%;
+    height: 35px;
+    line-height: 35px;
+    max-width: 120px;
+    margin: 0 3%;
+    font-size: 14px;
+  }
+}
+
+.zxzx-btn.shouye {
+  height: 55px;
+  width: 180px;
+  line-height: 55px;
+  color: #fff;
+  background: #00b96b;
+}
+
+.zxzx-btn.green {
+  background-color: #00B96B;
+  color: #fff;
+}
 </style>

components/common/selectDialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <!--  立即注册弹窗 -->
+  <el-dialog
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    class="register-now-dialog"
+    @close="onCloseDl"
+    center>
+    <div class="register-now-box">
+      <p>在线考培，就用麦塔</p>
+      <p>现在注册立享30人纯免费版本3年使用权限</p>
+      <div class="system-box">
+        <a href="https://qg.qtavip.com/a/register?flug=1" target="_blank"><i></i><p>考试系统</p></a>
+        <span></span>
+        <a href="https://qg.qtavip.com/a/register?flug=2" target="_blank"><i></i><p>培训系统</p></a>
+      </div>
+      <span>免费咨询电话：<span class="tel-code">400-0990-883</span></span>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "selectDialog",
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  },
+  methods: {
+    onCloseDl() {
+      this.$emit('update:show', false);
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        this.visible = newVal;
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

components/common/videoCard.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="video-card" @click="cardClick">
-    <div></div>
-    <h3 v-if="cardData.title">{{cardData.title}}</h3>
+  <div class="video-card" >
+    <div class="img-box">
+      <img :src="cardData.imgUrl">
+      <i @click="cardClick"></i>
+    </div>
+    <h4 v-if="cardData.title" :title="cardData.title">{{cardData.title}}</h4>
     <p v-if="cardData.des">{{cardData.des}}</p>
   </div>
 </template>
@@ -23,6 +26,96 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.video-card {
+    width: 370px;
+    height: 230px;
 
+  .img-box {
+    position: relative;
+    background: greenyellow;
+    width: inherit;
+    height: inherit;
+    overflow: hidden;
+    border-radius: 10px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      transition: all .5s ease;
+    }
+
+    &:hover{img{transform: scale(1.1);}}
+
+    i {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-30px,-30px);
+      display: inline-block;
+      width: 60px;
+      height: 60px;
+      background-image: url("~static/images/client/course/course-video-icon.svg");
+      background-repeat: no-repeat;
+      cursor: pointer;
+    }
+  }
+  h4 {
+    font-size: 24px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-top: 25px;
+    width: 100%;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    white-space: nowrap;
+  }
+  p {
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+    margin-top: 25px;
+  }
+}
+@media (max-width: 768px) {
+  .video-card {
+    width: 100%;
+    height: 100%;
+
+    .img-box {
+      position: relative;
+      background: greenyellow;
+      width: inherit;
+      height: inherit;
+      overflow: hidden;
+      border-radius: 10px;
+
+      img {
+        width: 100%;
+        min-height: 160px;
+        transition: all .5s ease;
+      }
+    }
+
+    h4 {
+      font-size: 16px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-top: 15px;
+    }
+
+    p {
+      font-size: 12px;
+      font-weight: 500;
+      color: #333;
+      text-align: center;
+      margin-top: 15px;
+    }
+  }
+}
 </style>

components/common/videoDialog.vue

@@ -4,9 +4,10 @@
     :title="title"
     :visible.sync="show"
     @close="closeVideoDialog"
+    @open="openVideoDialog"
     class="course-video-dialog"
     center>
-    <video controls :src="source" class="course-video-box"></video>
+    <video controls :src="videoUrl" class="course-video-box" ref="myVideo"></video>
     <p v-if="footerText">{{footerText}}</p>
   </el-dialog>
 </template>
@@ -31,6 +32,7 @@ export default {
     return {
       title: '',
       show: false,
+      videoUrl: '',
     }
   },
   watch: {
@@ -42,8 +44,13 @@ export default {
     }
   },
   methods: {
+    openVideoDialog() {
+      this.videoUrl = this.source;
+    },
     closeVideoDialog() {
-      this.$emit('update:visible',this.show)
+      this.$refs.myVideo.pause();
+      this.$emit('update:visible',false);
+      this.videoUrl = "";
     }
   }
 }

components/footer.vue

@@ -10,14 +10,14 @@
       <div class="contact-box">
         <div class="contact-left-box">
           <dl>
-            <dd><img src="#"></dd>
+            <dd><i class="logo"></i></dd>
           </dl>
 
           <dl>
             <dt>产品服务</dt>
             <dd @click="goExamPage">在线考试系统</dd>
             <dd @click="goPeixunPage">在线培训系统</dd>
-            <dd @click="goKechengPage">课程定制开发</dd>
+            <dd @click="goKechengCusPage">课程定制开发</dd>
             <dd @click="goKechengPage">通用课程资源</dd>
             <div style="display: none">
               <a :href="`${baseUrl}/examsystem`"></a>
@@ -88,7 +88,7 @@
           },
           {
             name: '电话咨询',
-            url: 'tel:400-052-2130',
+            url: 'tel:400-099-0883',
           },
           {
             name: '在线咨询',
@@ -104,20 +104,31 @@
       },
       // 考试链接
       goExamPage() {
-        this.$router.push({name: 'examsystem'});
+        this.$router.push({path: '/product/exam'});
       },
       // 培训链接
       goPeixunPage() {
-        this.$router.push({name: 'trainsystem'});
+        this.$router.push({path: '/product/peixun'});
       },
       // 课程开发链接
       goKechengPage() {
-        this.$router.push({name: 'courseware'});
+        this.$router.push({path: '/product/courseResource'});
+      },
+      goKechengCusPage(){
+        this.$router.push({path: '/product/courseCustom'});
       },
       // 关于帮助中心
       goaboutUs() {
         this.$router.push({name: 'introduction'});
       },
+      // 新闻
+      goaboutNews(){
+        this.$router.push({ name: 'news' });
+      },
+      // 案例
+      goaboutAnli(){
+        this.$router.push({ name: 'news' });
+      },
     },
   }
 </script>

components/footer2.vue

@@ -5,19 +5,19 @@
          <div class="contact-box">
            <div class="contact-left-box">
              <dl>
-               <dd><img src="#"></dd>
+               <dd><i class="logo"></i></dd>
              </dl>
              <dl>
                <dt>产品服务</dt>
                <dd @click="goExamPage">在线考试系统</dd>
                <dd @click="goPeixunPage">在线培训系统</dd>
-               <dd @click="goKechengPage">课程定制开发</dd>
+               <dd @click="goKechengCusPage">课程定制开发</dd>
                <dd @click="goKechengPage">通用课程资源</dd>
              </dl>
              <dl>
                <dt>新闻资讯</dt>
-               <dd @click="goaboutUs">行业新闻</dd>
-               <dd @click="goaboutUs">成功案例</dd>
+               <dd @click="goaboutNews">行业新闻</dd>
+               <dd @click="goaboutAnli">成功案例</dd>
              </dl>
              <dl>
                <dt>联系我们</dt>
@@ -62,20 +62,31 @@
     methods: {
       // 考试链接
       goExamPage(){
-        this.$router.push({ name: 'examsystem' });
+        this.$router.push({path: '/product/exam'});
       },
       // 培训链接
       goPeixunPage(){
-        this.$router.push({ name: 'trainsystem' });
+        this.$router.push({path: '/product/peixun'});
       },
       // 课程开发链接
       goKechengPage(){
-        this.$router.push({ name: 'courseware' });
+        this.$router.push({path: '/product/courseResource'});
+      },
+      goKechengCusPage(){
+        this.$router.push({path: '/product/courseCustom'});
       },
       // 关于帮助中心
       goaboutUs(){
         this.$router.push({ name: 'introduction' });
       },
+      // 新闻
+      goaboutNews(){
+        this.$router.push({ name: 'news' });
+      },
+      // 案例
+      goaboutAnli(){
+        this.$router.push({ name: 'news' });
+      },
     },
   }
 </script>

components/header.vue

@@ -3,42 +3,37 @@
     <div class="client-container head-layout">
 
       <!--   H5   -->
-      <div class="head-left mta-hidden-sm">
+      <div class="head-container-box mta-hidden-sm">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
-        <h5Nav :class="navClass" @click="navChange"></h5Nav>
+        <!-- H5菜单 -->
+        <h5Nav :class="navClass" @navChange="navChange"></h5Nav>
         <!-- 手机按钮 -->
         <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">
+      <div class="head-container-box mta-hidden-xs">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
-        <div>
-          <div class="header-left-container">
-            <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>
-                  <span></span>
-                  <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>
-            <!--      FIXME 自定义样式      -->
-            <div style="margin-top: 20px;">
-              <qgNav></qgNav>
-            </div>
-          </div>
+        <!-- PC菜单 -->
+        <qgNav></qgNav>
+        <div class="head-right">
+          <a rel="nofollow" href="https://qg.qtavip.com/a/registerLogin" target="_blank">登录</a>
+          <el-popover
+            placement="bottom"
+            trigger="hover"
+            popper-class="head-popper-box system-popper-box"
+          >
+            <a :href="item.url" v-for="(item,index) in systemList" :key="index" class="head-popper-item">
+              <i></i>
+              <p>
+                <span class="head-popper-title">{{ item.title }}</span>
+                <span class="head-popper-des">{{ item.des }}</span>
+              </p>
+            </a>
+            <a class="right-tel-btn" slot="reference">免费注册</a>
+          </el-popover>
         </div>
       </div>
-
-
     </div>
   </nav>
 </template>
@@ -72,6 +67,18 @@ export default {
   },
   data() {
     return {
+      systemList: [
+        {
+          title: '考试系统',
+          des: '简单好用的SaaS考试系统',
+          url: 'https://qg.qtavip.com/a/register?flug=1'
+        },
+        {
+          title: '培训系统',
+          des: '学练考评一站式培训系统',
+          url: 'https://qg.qtavip.com/a/register?flug=2'
+        },
+      ],
       navClass: 'head-nav-up',
       headerArr: [
         {

components/news/NewsList.vue

@@ -2,56 +2,63 @@
   <li v-if="newsData" @click.prevent="checkInfo(newsData)">
     <div class="newsInfor-img-box" :style="{backgroundImage: `url(${newsData.pic || newsInforImg})`}"></div>
     <div class="newsInfor-list-content">
-      <h5>{{newsData.title}}</h5>
-      <div><span class="mta-hidden-sm">{{newsData.startTime}}</span></div>
-      <div class="mta-hidden-xs"><i></i><span>{{newsData.startTime}}</span><i type="visits"></i><span>{{newsData.visits}}</span>
+      <h5>{{ newsData.title }}</h5>
+      <div><span class="mta-hidden-sm">{{ changeFullDate(newsData.startTime) }}</span></div>
+      <div class="mta-hidden-xs"><i></i><span>{{ changeFullDate(newsData.startTime) }}</span><i type="visits"></i><span>{{ newsData.visits }}</span>
       </div>
-      <p>{{newsData.intro}}</p>
-      <a class="mta-hidden-xs" :href="`${baseUrl}/news/${newsData.code}`" >
-        <span>了解更多</span>
-      </a>
+      <p>{{ newsData.intro }}</p>
+      <!-- <a class="mta-hidden-xs" :href="`${baseUrl}/news/${newsData.code}`" >
+             <span>了解更多</span>
+        </a>-->
 
     </div>
   </li>
 </template>
 
 <script>
-  import { mapGetters } from 'vuex';
+import {mapGetters} from 'vuex';
 
-  export default {
-    name:     'NewList',
-    props:    {
-      newsData: {
-        type:    Object,
-        default: () => {
-        },
+export default {
+  name: 'NewList',
+  props: {
+    newsData: {
+      type: Object,
+      default: () => {
       },
     },
-    data() {
-      return {
-        newsInforImg: require(`~/static/images/client/newsInfor/newsInfor-list-img.png`),
-      };
+  },
+  data() {
+    return {
+      newsInforImg: require(`~/static/images/client/newsInfor/newsInfor-list-img.png`),
+    };
+  },
+  computed: {
+    baseUrl() {
+      return this.getBaseUrl;
     },
-    computed: {
-      baseUrl() {
-        return this.getBaseUrl;
-      },
-      ...mapGetters(['getBaseUrl']),
+    ...mapGetters(['getBaseUrl']),
+  },
+  methods: {
+    changeFullDate(myDate) {
+      const result = new Date(myDate);
+      const curYear = result.getFullYear().toString();
+      const curMonth = (result.getMonth() + 1).toString().padStart(2, '0');
+      const curDay = result.getDate().toString().padStart(2, '0');
+      return `${curYear}-${curMonth}-${curDay}`
     },
-    methods:  {
-      checkInfo(data) {
-        // console.log(window.localtion.href);
-        // console.log(self.localtion.href);
-        // console.log(document.URL);
-        const opt = {
-          id: data.code,
-        };
-        this.$router.push({ name: 'news-id', params: opt });
+    checkInfo(data) {
+      // console.log(window.localtion.href);
+      // console.log(self.localtion.href);
+      // console.log(document.URL);
+      const opt = {
+        id: data.code,
+      };
+      this.$router.push({name: 'news-id', params: opt});
 
-        this.$emit('know-more', data);
-      },
+      this.$emit('know-more', data);
     },
-  };
+  },
+};
 </script>
 
 <style scoped>

components/qgNav/H5Nav.vue

@@ -1,37 +1,39 @@
 <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>
+  <div class="phone-popper-box">
+    <nuxt-link to="/" :class="{'menu-active': curActive === 'shouye'}">首页</nuxt-link>
+    <el-collapse accordion>
+      <el-collapse-item title="产品与服务" :class="{'menu-active': curActive === 'chanpinyufuwu'}">
+        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index" class="cpfw-popper-item">
+          <i></i>
+          <p>
+            <span class="phone-popper-title">{{ item.title }}</span>
+            <span class="phone-popper-des">{{ item.des }}</span>
+          </p>
         </nuxt-link>
       </el-collapse-item>
-      <el-collapse-item title="解决方案">
-          <div>
+      <el-collapse-item title="解决方案" :class="{'menu-active': curActive === 'jiejuefangan'}">
+          <div class="jjfa-popper-content">
             <h3>场景解决方案</h3>
-            <nuxt-link :to="item.url" v-for="item in changjing" :key="item.url">
-              {{item.title}}
-            </nuxt-link>
+            <div class="jjfa-link-box">
+              <nuxt-link :to="item.url" v-for="item in changjing" :key="item.url">
+                <span class="jjfa-popper-title">{{item.title}}</span>
+              </nuxt-link>
+            </div>
           </div>
-        <div>
+        <div class="jjfa-popper-content">
           <h3>行业解决方案</h3>
-          <nuxt-link :to="item.url" v-for="item in hangye" :key="item.url">
-            {{item.title}}
-          </nuxt-link>
+          <div class="jjfa-link-box">
+            <nuxt-link :to="item.url" v-for="item in hangye" :key="item.url">
+              <span class="jjfa-popper-title">{{item.title}}</span>
+            </nuxt-link>
+          </div>
         </div>
 
 
       </el-collapse-item>
     </el-collapse>
-    <nuxt-link to="/news"> 新闻资讯 </nuxt-link>
-    <nuxt-link to="/introduction"> 关于我们 </nuxt-link>
+    <nuxt-link to="/news" class="xwzx-row" :class="{'menu-active': curActive === 'news'}">新闻资讯</nuxt-link>
+    <nuxt-link to="/introduction" :class="{'menu-active': curActive === 'introduction'}">关于我们</nuxt-link>
   </div>
 </template>
 
@@ -95,8 +97,8 @@ export default {
       hangye: [
         {
           img: '#',
-          title: '政府机构',
-          des: '政府机构培训解决方案',
+          title: '机关事业单位',
+          des: '机关事业单位培训解决方案',
           url: '/solution/government'
         },
         {
@@ -137,16 +139,96 @@ export default {
         }
       ],
     }
+  },
+  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 === '/' || routerPath === '/index') {
+        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'
+      }
+    }
+  },
+  watch: {
+    '$route.path': {
+      handler(newVal) {
+         console.log(newVal)
+        this.$emit('navChange')
+      },
+      immediate: true,
+    }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.h5-menu-container {
+<style lang="scss">
+.phone-popper-box {
   position: absolute;
-  top: 60px;
+  top: 61px;
   background: #fff;
-  width: 90%;
-  height: auto;
+  width: 100%;
+  left: 0;
+  padding: 0 15px;
+  box-sizing: border-box;
+  overflow: auto;
+  height: calc(100vh - 112px);
+  >a,.el-collapse-item__header{
+    height: 60px;
+    line-height: 60px;
+    display: block;
+    font-size: 16px;
+    color: #101010;
+    font-weight: 700;
+  }
+  .el-collapse-item__header{ display: flex;}
+  // 新闻资讯
+  .xwzx-row{border-bottom: 1px solid #EBEEF5;}
+
+  // 产品服务 - 二级菜单
+  .cpfw-popper-item{
+    width: 100%;height: 80px;border-radius: 5px;background-color: rgba(187, 187, 187, 0.2);
+    margin-bottom: 10px;display: flex;align-items: center;padding: 20px;box-sizing: border-box;
+    i{width: 34px;height: 34px;background-size: contain;display: inline-block;margin-right: 16px;background-repeat:no-repeat;background-position: center;}
+    .phone-popper-title{font-size: 14px;color: #333;margin-bottom: 4px;display: inline-block;}
+    .phone-popper-des{display:block;font-size: 12px;color: #9c9c9c;}
+
+    // 列表
+    &:nth-child(1){i{background-image:url("~static/images/client/component/head-cp-icon1.png");} }
+    &:nth-child(2){i{background-image:url("~static/images/client/component/head-cp-icon2.png");} }
+    &:nth-child(3){i{background-image:url("~static/images/client/component/head-cp-icon3.png");} }
+    &:nth-child(4){i{background-image:url("~static/images/client/component/head-cp-icon4.png");} }
+  }
+
+  // 解决方案 - 二级菜单
+  .jjfa-popper-content{
+    width: 100%;border-radius: 5px;background-color: rgba(187, 187, 187, 0.2);margin-bottom: 10px;padding: 10px;box-sizing: border-box;
+    h3{font-size: 14px;color: #333;display: block;font-weight: 700;margin-left: 8px;}
+    .jjfa-link-box{width: 100%;display: flex;flex-wrap: wrap;}
+    a{width: 33.33%;padding: 5px 8px;box-sizing: border-box}
+    .jjfa-popper-title{width:100%;height: 24px;line-height: 24px;text-align:center;display:inline-block;
+      font-size: 12px;color: rgba(16, 16, 16, 100);border-radius: 5px;border: 1px solid rgba(187, 187, 187, 100);}
+  }
+
+  // 菜单选中
+  .menu-active {
+    color: #00b96b;
+    div.el-collapse-item__header {
+      color: #00b96b;
+    }
+  }
+
 }
 </style>

components/qgNav/index.vue

@@ -3,60 +3,53 @@
     <nuxt-link to="/" :class="{active : curActive === 'shouye'}">首页</nuxt-link>
 
     <el-popover
-      placement="bottom-start"
-      width="200"
+      placement="bottom"
       trigger="hover"
+      popper-class="head-popper-box cp-popper-box"
     >
-      <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 :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index" class="head-popper-item">
+          <i></i>
+          <p>
+            <span class="head-popper-title">{{ item.title }}</span>
+            <span class="head-popper-des">{{ item.des }}</span>
+          </p>
         </nuxt-link>
-      </div>
-      <span class="nav-btn" slot="reference" :class="{active: curActive === 'chanpinyufuwu'}">产品与服务<i class="el-icon-arrow-down el-icon--right"></i></span>
+      <span class="head-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"
+      placement="bottom"
       trigger="hover"
+      popper-class="head-popper-box jj-popper-box"
     >
-      <div class="menu-container">
-        <div class="menu-item">
+      <div class="head-popper-content">
+        <div>
           <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>
+          <div class="head-popper-cj-row">
+            <nuxt-link :to="item.url" v-for="(item,index) in changjing" :key="index" class="head-popper-item">
+              <i></i>
+              <p>
+                <span class="head-popper-title">{{ item.title }}</span>
+                <span class="head-popper-des">{{ item.des }}</span>
+              </p>
             </nuxt-link>
           </div>
         </div>
-        <div class="menu-item">
+        <em></em>
+        <div>
           <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>
+          <div class="head-popper-hy-row">
+            <nuxt-link :to="item.url" v-for="(item,index) in hangye" :key="index" class="head-popper-item">
+              <i></i>
+              <p>
+                <span class="head-popper-title">{{ item.title }}</span>
+                <span class="head-popper-des">{{ item.des }}</span>
+              </p>
             </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>
+      <span class="head-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>
@@ -71,25 +64,21 @@ export default {
     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'
@@ -124,8 +113,8 @@ export default {
       hangye: [
         {
           img: '#',
-          title: '政府机构',
-          des: '政府机构培训解决方案',
+          title: '机关事业单位',
+          des: '机关事业单位培训解决方案',
           url: '/solution/government'
         },
         {
@@ -174,7 +163,7 @@ export default {
       const jiejuefangan2 = this.hangye.map(item => item.url);
       const routerPath = this.$route.path
       // 首页
-      if (routerPath === '/') {
+      if (routerPath === '/' || routerPath === '/index') {
         return 'shouye'
       } else if (routerPath === '/news') {
         return 'news'
@@ -192,12 +181,3 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.active {
-  color: #f0bd16;
-}
-
-.nav-btn {
-  cursor: pointer;
-}
-</style>

components/sidebar.vue

@@ -1,89 +1,201 @@
 <template>
-  <div class="client-sidebar">
-      <ul>
-          <li><a class="sidebar-default-box"><i></i><p>咨询</p></a></li>
-          <li>
-            <div class="sidebar-default-box"><i @click="backTop"></i><p>客服</p></div>
-            <div class="sidebar-hover-box">
-              <span>服务热线</span><h4>4000522130</h4>
-            </div>
-          </li>
-          <li><a class="sidebar-default-box"><i></i><p>体验</p></a></li>
-          <li  v-if="btnFlag"><i @click="backTop"></i><p>置顶</p></li>
-      </ul>
+  <div class="client-sidebar mta-hidden-xs">
+    <ul>
+      <!--      <li><a class="sidebar-default-box" :href="linkForKefu" target="_blank"><i></i>-->
+      <!--        <p>在线资讯</p></a></li>-->
+      <li>
+        <div class="sidebar-default-box"><i></i>
+          <p>电话咨询</p></div>
+        <div class="sidebar-hover-box">
+          <span>服务热线</span><h4>400-099-0883</h4>
+        </div>
+      </li>
+      <li>
+        <div class="sidebar-default-box"><i></i>
+          <p>客户经理</p></div>
+        <div class="sidebar-hover-box">
+          <img :src="img1">
+        </div>
+      </li>
+      <!--<li v-if="btnFlag">
+        <div class="sidebar-default-box">
+          <i @click="backTop"></i>
+          <p>置顶</p></div>
+      </li>-->
+
+    </ul>
   </div>
 </template>
 
 <script>
-    export default {
-        name: 'mtaSidebar',
-      // vue的两个生命钩子，这里不多解释。
-      // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
-      mounted () {
-        window.addEventListener('scroll', this.scrollToTop)
-      },
-      destroyed () {
-        window.removeEventListener('scroll', this.scrollToTop)
-      },
-      data(){
-        return {
-          btnFlag:false
-        }
-      },
-      methods: {
-        // 点击图片回到顶部方法，加计时器是为了过渡顺滑
-        backTop() {
-          const that = this
-          let timer = setInterval(() => {
-            let ispeed = Math.floor(-that.scrollTop / 5)
-            document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
-            if (that.scrollTop === 0) {
-              clearInterval(timer)
-            }
-          }, 16)
-        },
-
-        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
-        scrollToTop() {
-          const that = this
-          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-          that.scrollTop = scrollTop
-          if (that.scrollTop > 60) {
-            that.btnFlag = true
-          } else {
-            that.btnFlag = false
-          }
+import {linkForKefu} from "~/defaultConfig"
+
+export default {
+  name: 'mtaSidebar',
+  // vue的两个生命钩子，这里不多解释。
+  // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
+  mounted() {
+    window.addEventListener('scroll', this.scrollToTop)
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.scrollToTop)
+  },
+  data() {
+    return {
+      btnFlag: false,
+      img1: require('static/codeImage/code-jingli.png'),
+      linkForKefu
+    }
+  },
+  methods: {
+    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
+    backTop() {
+      const that = this
+      let timer = setInterval(() => {
+        let ispeed = Math.floor(-that.scrollTop / 5)
+        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
+        if (that.scrollTop === 0) {
+          clearInterval(timer)
         }
+      }, 16)
+    },
+
+    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
+    scrollToTop() {
+      const that = this
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+      that.scrollTop = scrollTop
+      if (that.scrollTop > 60) {
+        that.btnFlag = true
+      } else {
+        that.btnFlag = false
       }
-      };
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-.client-sidebar{
-  display: none;
-    position: fixed;
-    z-index: 100;
-    top: 300px;
-    right: 0;
-    li{
-      width: 94px;height: 102px;position: relative;
-      i{width: 45px;height: 40px;display: block;background: #8be0ad;margin: 16px auto;}
-      p{font-size:18px;color: #4c4c4c;text-align: center;}
-      .sidebar-default-box{border: 1px solid #eee;box-sizing: border-box;background: #fff;z-index: 2;background: #fff;position: absolute;top:0;left: 0;right: 0;bottom: 0;}
-      .sidebar-hover-box{
-        width: 220px;height: 102px;display: block;padding: 24px;border: 1px solid #eee;transition: all 0.5s;
-        position: absolute;right: -150px;background: #fff;top: 0;box-sizing: border-box;z-index: 1;
-        span{font-size:16px;display: block;color: #1f1f1f;margin-bottom: 10px}
-        h4{font-size:30px;color: #3e7ee7;font-weight: bold;}
+.client-sidebar {
+  //display: none;
+  position: fixed;
+  z-index: 100;
+  bottom: 45px;
+  right: 20px;
+
+  li {
+    width: 84px;
+    height: 68px;
+    position: relative;
+    cursor: pointer;
+    margin-bottom: 22px;
+
+
+    i {
+      width: 30px;
+      height: 30px;
+      display: block;
+      margin: 4px auto;
+      background-position: center;
+      background-size: contain;
+      background-repeat: no-repeat
+    }
+
+    p {
+      font-size: 14px;
+      color: #00b96b;
+      text-align: center;
+    }
+
+    .sidebar-default-box {
+      border: 1px solid #eee;
+      box-sizing: border-box;
+      background: #fff;
+      z-index: 2;
+      background: #fff;
+      position: absolute;
+      border-radius: 8px;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .sidebar-hover-box {
+      width: 220px;
+      display: block;
+      padding: 20px;
+      border: 1px solid #eee;
+      transition: all 0.5s;
+      position: absolute;
+      right: -240px;
+      background: #fff;
+      box-sizing: border-box;
+      z-index: 1;
+
+      span {
+        font-size: 16px;
+        display: block;
+        color: #1f1f1f;
+        margin-bottom: 10px
       }
+
+      h4 {
+        font-size: 18px;
+        color: #00b96b;
+        font-weight: bold;
+      }
+
+      img {
+        height: 50px;
+        width: auto;
+      }
+    }
+  }
+
+  li:hover {
+    .sidebar-default-box {
+    }
+
+    .sidebar-hover-box {
+      right: 92px;
     }
-    li:hover{
-      .sidebar-default-box{background: #5da8f7;}
-      .sidebar-hover-box{
-        right: 92px;
+  }
+
+  //li:nth-child(1) i {
+  //  background-image: url("~static/gangweiIcon/z142.png");
+  //}
+  li:nth-child(1) .sidebar-hover-box {top:0;}
+  li:nth-child(2) .sidebar-hover-box {bottom: 0;padding: 10px;}
+  li:nth-child(1) i {
+    background-image: url("~static/gangweiIcon/z143.png");
+  }
+  li:nth-child(1) {
+    .sidebar-hover-box {
+      width: 180px;
+    }
+  }
+
+
+  li:nth-child(2) i {
+    background-image: url("~static/gangweiIcon/z145.png");
+  }
+
+  li:nth-child(2) {
+    .sidebar-hover-box {
+      width: 160px;
+      height: 160px;
+
+
+      img {
+        height: 140px;
+        height: 140px;
       }
     }
-    li:nth-child(1) i{-background: pink;}
-    li:nth-child(2) i{-background: green;}
+  }
+
+  li:nth-child(3) i {
+    background-image: url("~static/gangweiIcon/z144.png");
+  }
 }
 </style>

defaultConfig.js

@@ -40,32 +40,142 @@ const BannerImgs = {
 const classifys = {
   shouye: { // 首页
     classify: 0,
-    keyword: ''
+    keyword: '首页'
   },
   kaoshixitong: {
     classify: 0,
-    keyword: '考试'
+    keyword: '考试系统'
   },
   kechengdingzhi: {
     classify: 0,
-    keyword: '课程'
+    keyword: '课程定制'
   },
   kechengziyuan: {
     classify: 0,
-    keyword: '课程'
+    keyword: '课程资源'
   },
   peixunxitong: {
     classify: 0,
-    keyword: '课程'
+    keyword: '培训系统'
+  },
+  wanrengaobingfa: {
+    classify: 0,
+    keyword: '万人高并发'
   }
 }
 
-/**
- * 申请方案
- * @page 首页 课程定制 课程资源
- */
+// 市场营销_销售
+const shichangyingxiao_xiaoshou = [
+  {text: '制定销售计划', icon: require(`~/static/gangweiIcon/z01.png`)},
+  {text: '销售信息收集', icon: require(`~/static/gangweiIcon/z02.png`)},
+  {text: '客户关系管理', icon: require(`~/static/gangweiIcon/z03.png`)},
+  {text: '严守职业道德', icon: require(`~/static/gangweiIcon/z04.png`)},
+  {text: '销售费用控制', icon: require(`~/static/gangweiIcon/z05.png`)},
+  {text: '协助市场开发', icon: require(`~/static/gangweiIcon/z06.png`)},
+]
+
+// 市场营销_市场
+const shichangyingxiao_shichang = [
+  {text: '策划市场推广方案', icon: require(`~/static/gangweiIcon/z07.png`)},
+  {text: '开展市场调研活动', icon: require(`~/static/gangweiIcon/z08.png`)},
+  {text: '品牌推广与运营',   icon: require(`~/static/gangweiIcon/z09.png`)},
+  {text: '计划拓展市场预算', icon: require(`~/static/gangweiIcon/z10.png`)},
+  {text: '建立媒体运营矩阵', icon: require(`~/static/gangweiIcon/z11.png`)},
+  {text: '协助销售部门工作', icon: require(`~/static/gangweiIcon/z12.png`)},
+]
+
+// 课程定制
+const kechengdingzhi = [
+  {text: '员工技能培训', icon: require(`~/static/gangweiIcon/z13.png`)},
+  {text: '中小学教育课程', icon: require(`~/static/gangweiIcon/z14.png`)},
+  {text: '高校专业理论知识',   icon: require(`~/static/gangweiIcon/z15.png`)},
+  {text: '领导干部培训', icon: require(`~/static/gangweiIcon/z16.png`)},
+  {text: '企业宣传片', icon: require(`~/static/gangweiIcon/z17.png`)},
+  {text: '语言类学习培训', icon: require(`~/static/gangweiIcon/z18.png`)},
+  {text: '专家讲座数字化', icon: require(`~/static/gangweiIcon/z19.png`)},
+  {text: '公务员理论学习', icon: require(`~/static/gangweiIcon/z20.png`)},
+]
+
+// 生产采购
+const shengchancaigou = [
+  {text: '生产计划管理', icon: require(`~/static/gangweiIcon/z21.png`)},
+  {text: '生产质量管理', icon: require(`~/static/gangweiIcon/z22.png`)},
+  {text: '生产安全管理',   icon: require(`~/static/gangweiIcon/z23.png`)},
+  {text: '生产团队建设', icon: require(`~/static/gangweiIcon/z24.png`)},
+  {text: '生产现场管理', icon: require(`~/static/gangweiIcon/z25.png`)},
+  {text: '生产设备管理', icon: require(`~/static/gangweiIcon/z26.png`)},
+  {text: '制定采购计划', icon: require(`~/static/gangweiIcon/z27.png`)},
+  {text: '采购制定建立', icon: require(`~/static/gangweiIcon/z28.png`)},
+  {text: '采购成本把控', icon: require(`~/static/gangweiIcon/z29.png`)},
+  {text: '供应商管理', icon: require(`~/static/gangweiIcon/z30.png`)},
+  {text: '采购团队建设', icon: require(`~/static/gangweiIcon/z31.png`)},
+]
+
+// 严肃考试
+const yansukaoshi = [
+  {text: '招聘考试', icon: require(`~/static/gangweiIcon/z32.png`)},
+  {text: '升学考试', icon: require(`~/static/gangweiIcon/z33.png`)},
+  {text: '司法考试',   icon: require(`~/static/gangweiIcon/z34.png`)},
+  {text: '知识竞赛', icon: require(`~/static/gangweiIcon/z35.png`)},
+]
+
+// 行政管理
+const xingzhengguanli = [
+  {text: '公文写作', icon: require(`~/static/gangweiIcon/z36.png`)},
+  {text: '会议管理', icon: require(`~/static/gangweiIcon/z37.png`)},
+  {text: '员工关系管理', icon: require(`~/static/gangweiIcon/z38.png`)},
+  {text: '建立公司规章制度', icon: require(`~/static/gangweiIcon/z39.png`)},
+  {text: '商务接待', icon: require(`~/static/gangweiIcon/z40.png`)},
+  {text: '办公用品采购', icon: require(`~/static/gangweiIcon/z41.png`)},
+]
+
+// 财务管理
+const caiwuguanli = [
+  {text: '财务制度的建设', icon: require(`~/static/gangweiIcon/z42.png`)},
+  {text: '财务规划与计划', icon: require(`~/static/gangweiIcon/z43.png`)},
+  {text: '现金出纳', icon: require(`~/static/gangweiIcon/z44.png`)},
+  {text: '日常会计核算', icon: require(`~/static/gangweiIcon/z45.png`)},
+  {text: '财务分析与报告', icon: require(`~/static/gangweiIcon/z46.png`)},
+  {text: '财务审计', icon: require(`~/static/gangweiIcon/z47.png`)},
+]
+
+// 客服服务
+const kefufuwu = [
+  {text: '客户咨询工作', icon: require(`~/static/gangweiIcon/z48.png`)},
+  {text: '记录客户信息', icon: require(`~/static/gangweiIcon/z49.png`)},
+  {text: '处理客户投诉', icon: require(`~/static/gangweiIcon/z50.png`)},
+  {text: '后期回访工作', icon: require(`~/static/gangweiIcon/z51.png`)},
+  {text: '收集客户意见及建议', icon: require(`~/static/gangweiIcon/z52.png`)},
+  {text: '维护企业形象', icon: require(`~/static/gangweiIcon/z53.png`)},
+]
+
+// 产品运营
+const chanpinyunying = [
+  {text: '需求管理', icon: require(`~/static/gangweiIcon/z54.png`)},
+  {text: '产品生命周期管理', icon: require(`~/static/gangweiIcon/z55.png`)},
+  {text: '数据分析', icon: require(`~/static/gangweiIcon/z56.png`)},
+  {text: '项目协助', icon: require(`~/static/gangweiIcon/z57.png`)},
+  {text: '市场调研', icon: require(`~/static/gangweiIcon/z58.png`)},
+  {text: '团队管理', icon: require(`~/static/gangweiIcon/z59.png`)},
+]
+
+
+// 资讯链接
+const linkForKefu = 'https://p.qiao.baidu.com/cps/chat?siteId=17851606&userId=39739427&siteToken=0288c259e4ac8be07c4c238fcc91760f';
+
+
 
 export {
   BannerImgs,
-  classifys
+  classifys,
+  chanpinyunying,
+  kefufuwu,
+  caiwuguanli,
+  xingzhengguanli,
+  yansukaoshi,
+  shengchancaigou,
+  kechengdingzhi,
+  shichangyingxiao_xiaoshou,
+  shichangyingxiao_shichang,
+  linkForKefu
 }

layouts/templateA.vue

@@ -34,7 +34,7 @@
 </script>
 <style lang="scss">
   .nuxt-box:not(.client-index-page){
-    width: 100%;padding-top: 80px;
+    width: 100%;padding-top: 72px;
     // 移动端手机尺寸（0-768）
     @media (max-width: 768px){padding-top: 61px;}
   }

layouts/templateB.vue

@@ -34,7 +34,7 @@
 </script>
 <style lang="scss" scoped>
   .nuxt-box:not(.client-index-page){
-    width: 100%;padding-top: 80px;
+    width: 100%;padding-top: 72px;
     // 移动端手机尺寸（0-768）
     @media (max-width: 768px){padding-top: 61px;}
   }

nuxt.config.js

@@ -1,11 +1,9 @@
 /********** 本地环境 start **********/
 const pro = {
-  baseURL: 'http://www.mtaclass.com/api',
-  // baseURL: 'https://www.mtavip.com/api',
+  baseURL: 'https://www.qtavip.com/api',
   host: '192.168.0.28',
   //环境变量设置 新闻 拼路径时的根级别路径 多用于a标签 href属性
-  // url:'https://www.mtavip.com'
-  url:'http://www.mtaclass.com'
+  url:'https://www.qtavip.com'
 
 }
 // build 改为true
@@ -19,7 +17,7 @@ export default {
   mode:         'universal',
   server: {
     // port 端口，默认3000，nuxt默认
-    port: 3002, // default: 3000
+    port: 3003, // default: 3000
     // host:连接服务器主机名  分享本地地址修改此处，例：192.168.0.32
     host: isPro?pro.host:'localhost' // default: localhost,
   },
@@ -78,7 +76,7 @@ export default {
    * 环境变量设置 新闻 拼路径时的根级别路径 多用于a标签 href属性
    */
   env: {
-    baseUrl: isPro?pro.url:'http://localhost:3002'
+    baseUrl: isPro?pro.url:'http://localhost:3003'
   },
   /**
    * loading 进度条样式
@@ -95,11 +93,12 @@ export default {
   build:        {
     transpile: [/^element-ui/],
     // 异步加载样式 默认false
-    extractCSS: true
+    extractCSS: {
+      ignoreOrder: true
+    }
   },
   axios:        {
     // node连接服务器地址（调用后台接口地址）
-    // baseURL: 'http://182.92.186.22:83/api',
     baseURL: isPro?pro.baseURL:'http://192.168.0.179:9106',
 
   },

package-lock.json

@@ -4279,6 +4279,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-3.0.0.tgz",
+      "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
+      "requires": {
+        "ssr-window": "^3.0.0-alpha.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1597693741648&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz",
@@ -9538,6 +9546,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz",
+      "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA=="
+    },
     "ssri": {
       "version": "7.1.0",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-7.1.0.tgz",
@@ -9802,6 +9815,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "6.8.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-6.8.4.tgz",
+      "integrity": "sha512-O+buF9Q+sMA0H7luMS8R59hCaJKlpo8PXhQ6ZYu6Rn2v9OsFd4d1jmrv14QvxtQpKAvL/ZiovEeANI/uDGet7g==",
+      "requires": {
+        "dom7": "^3.0.0",
+        "ssr-window": "^3.0.0"
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/tapable/download/tapable-1.1.3.tgz?cache=0&sync_timestamp=1589549557661&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftapable%2Fdownload%2Ftapable-1.1.3.tgz",
@@ -10403,6 +10425,11 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1597876246974&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz",
       "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
     },
+    "vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ=="
+    },
     "vue-client-only": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-client-only/download/vue-client-only-2.0.0.tgz",
@@ -10633,7 +10660,6 @@
           "version": "2.3.2",
           "resolved": "http://registry.npm.taobao.org/braces/download/braces-2.3.2.tgz",
           "integrity": "sha1-WXn9PxTNUxVl5fot8av/8d+u5yk=",
-          "optional": true,
           "requires": {
             "arr-flatten": "^1.1.0",
             "array-unique": "^0.3.2",
@@ -10651,7 +10677,6 @@
               "version": "2.0.1",
               "resolved": "http://registry.npm.taobao.org/extend-shallow/download/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -10682,7 +10707,6 @@
           "version": "4.0.0",
           "resolved": "http://registry.npm.taobao.org/fill-range/download/fill-range-4.0.0.tgz",
           "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "optional": true,
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -10694,7 +10718,6 @@
               "version": "2.0.1",
               "resolved": "http://registry.npm.taobao.org/extend-shallow/download/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -10745,7 +10768,6 @@
           "version": "3.0.0",
           "resolved": "http://registry.npm.taobao.org/is-number/download/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -10754,7 +10776,6 @@
               "version": "3.2.2",
               "resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-3.2.2.tgz",
               "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "optional": true,
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -10765,7 +10786,6 @@
           "version": "3.1.10",
           "resolved": "https://registry.npm.taobao.org/micromatch/download/micromatch-3.1.10.tgz",
           "integrity": "sha1-cIWbyVyYQJUvNZoGij/En57PrCM=",
-          "optional": true,
           "requires": {
             "arr-diff": "^4.0.0",
             "array-unique": "^0.3.2",
@@ -10797,7 +10817,6 @@
           "version": "2.1.1",
           "resolved": "http://registry.npm.taobao.org/to-regex-range/download/to-regex-range-2.1.1.tgz",
           "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-          "optional": true,
           "requires": {
             "is-number": "^3.0.0",
             "repeat-string": "^1.6.1"

pages/CourseDevelopPhone.vue

@@ -15,10 +15,10 @@
           </div>
         </el-form-item>
         <div class="form-blue-btn" @click="dialogSave">申请方案</div>
-        <a class="form-border-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">在线客服</a>
+        <a class="form-border-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17851606&userId=39739427&siteToken=0288c259e4ac8be07c4c238fcc91760f" target="_blank">在线客服</a>
       </el-form>
 
-      <a href="tel:400-052-2130" class="course-develop-tel">咨询电话：400-052-2130</a>
+      <a href="tel:400-052-2130" class="course-develop-tel">咨询电话：400-099-0883</a>
     </div>
 
   </div>
@@ -91,7 +91,7 @@
               'sessionid': this.sliderData.csessionid,
               'sig':       this.sliderData.sig,
               'token':     this.sliderData.token,
-              'type':      0,
+              'type':      1,
             }
             this.$axios.$post('/sendCode',req).then(res=>{
               if (res.code === 0 && res.data) {
@@ -244,6 +244,9 @@
     },
   };
 </script>
-<style>
-
+<style lang="scss" scoped>
+.verification {
+  display: flex;
+  justify-content: space-between;
+}
 </style>

pages/checkLogKaoshi.vue

@@ -1,71 +0,0 @@
-<template>
-  <!-- 考试系统更新日志 -->
-  <div class="client-checklog-page">
-    <!-- banner栏 -->
-    <div class="client-checklog-banner">
-      <h4>麦塔在线考试系统更新日志</h4>
-      <p>麦塔想您所想，不止于功能，我们一直在更新迭代</p>
-    </div>
-
-    <!-- 大数据展示 -->
-    <div class="client-container log-data-show">
-      <div><span>修复</span><p>148</p></div><i></i>
-      <div><span>优化</span><p>597</p></div><i></i>
-      <div><span>新增</span><p>154</p></div>
-    </div>
-
-    <!-- 日志内容区域 -->
-    <div class="client-container log-content-box">
-        <ul>
-          <li>
-            <h5>2021年09月23日</h5>
-            <span>[新增]</span>
-            <div><i></i><p>页面的权限控制：试题库、试卷库、发布考试、成绩管理、人工阅卷、报名审核、考试监控、发布练习、个人证书增加权限控制功能。</p></div>
-            <span>[优化]</span>
-            <div><i></i><p>权限管理功能调整：权限管理菜单去掉，功能移到了角色权限中。  以前按照人员进行赋权，现在按照角色进行赋权。</p></div>
-            <div><i></i><p>报名考试调整：在学员端报名考试从考试列表中分离出来，单独新建了一个菜单项报名中心。</p></div>
-            <div><i></i><p>部门树调整：以前的部门树分归属部门和管理部门，修改后部门树只有管理部门。</p></div>
-          </li>
-          <li>
-            <h5>2021年07月01日</h5>
-            <span>[新增]</span>
-            <div><i></i><p>考务管理->成绩管理：增加答卷时长字段；导出成绩排序规则修改成按照成绩倒序、再按照答卷时长正序排列</p></div>
-            <div><i></i><p>数据统计->考试统计：考试详情中的考试排名列表增加考试时长字段；排名规则从以前的如果两个人成绩一样得到相同的排名修改成如果成绩一样再看答卷时间短的那个排到前面，不会再出现两个一样的排名</p></div>
-          </li>
-          <li>
-            <h5>2021年06月25日</h5>
-            <span>[新增]</span>
-            <div><i></i><p>增加邮件通知功能：新建用户、发布考试、考试到期提醒，都可以通过邮件进行通知，该功能项需要单独付费购买</p></div>
-          </li>
-          <li>
-            <h5>2021年06月15日</h5>
-            <span>[新增]</span>
-            <div><i></i><p>系统登录页面UI全部升级改造</p></div>
-            <div><i></i><p>管理端登录页面增加微信和手机号验证码登录功能；学员端登录页面增加微信登录功能；app手机端登录增加微信登录功能；</p></div>
-            <div><i></i><p>管理端首页UI和内容进行调整</p></div>
-            <span>[优化]</span>
-            <div><i></i><p>数据统计->人员统计页面针对查询速度慢的情况进行优化，优化后查询出的统计数据是截至到前一天的所有的数据和。已删除人员不统计</p></div>
-            <div><i></i><p>数据统计->考试统计和错题统计页面针对查询速度慢的情况进行优化，优化后查询出的统计数据是截至到前一天所有已结束的考试数据，如果有人工阅卷的考试，需要等所有的人工阅卷工作全结束才能显示结果</p></div>
-            <div><i></i><p>人员统计中的个人详情信息功能移动到部门人员页面进行展示</p></div>
-          </li>
-        </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:    'checkLogKaoshi',
-    layout:  'templateB',
-    data() {
-      return {};
-    },
-    head() {
-      return {
-        title: '更新日志',
-      };
-    },
-    methods: {},
-  };
-</script>
-

pages/checkLogPeixun.vue

@@ -1,73 +0,0 @@
-<template>
-  <!-- 考试系统更新日志 -->
-  <div class="client-checklog-page">
-    <!-- banner栏 -->
-    <div class="client-checklog-banner">
-      <h4>麦塔在线培训系统更新日志</h4>
-      <p>麦塔想您所想，不止于功能，我们一直在更新迭代</p>
-    </div>
-
-    <!-- 大数据展示 -->
-    <div class="client-container log-data-show">
-      <div><span>修复</span><p>148</p></div><i></i>
-      <div><span>优化</span><p>597</p></div><i></i>
-      <div><span>新增</span><p>154</p></div>
-    </div>
-
-    <!-- 日志内容区域 -->
-    <div class="client-container log-content-box">
-      <ul>
-        <li>
-          <h5>2021年09月23日</h5>
-          <span>[新增]</span>
-          <div><i></i><p>页面的权限控制：试题库、试卷库、发布考试、成绩管理、人工阅卷、报名审核、考试监控、课件管理、课程管理、课程成绩、发布练习、个人证书增加权限控制功能。</p></div>
-          <span>[优化]</span>
-          <div><i></i><p>权限管理功能调整：权限管理菜单去掉，功能移到了角色权限中。  以前按照人员进行赋权，现在按照角色进行赋权。</p></div>
-          <div><i></i><p>报名考试调整：在学员端报名考试从考试列表中分离出来，单独新建了一个菜单项报名中心。</p></div>
-          <div><i></i><p>部门树调整：以前的部门树分归属部门和管理部门，修改后部门树只有管理部门。</p></div>
-        </li>
-        <li>
-          <h5>2021年07月01日</h5>
-          <span>[新增]</span>
-          <div><i></i><p>考务管理->成绩管理：增加答卷时长字段；导出成绩排序规则修改成按照成绩倒序、再按照答卷时长正序排列</p></div>
-          <div><i></i><p>数据统计->考试统计：考试详情中的考试排名列表增加考试时长字段；排名规则从以前的如果两个人成绩一样得到相同的排名修改成如果成绩一样再看答卷时间短的那个排到前面，不会再出现两个一样的排名</p></div>
-        </li>
-        <li>
-          <h5>2021年06月25日</h5>
-          <span>[新增]</span>
-          <div><i></i><p>增加邮件通知功能：新建用户、发布考试、考试到期提醒，发布课程、课程到期提醒都可以通过邮件进行通知，该功能项需要单独付费购买</p></div>
-        </li>
-        <li>
-          <h5>2021年06月15日</h5>
-          <span>[新增]</span>
-          <div><i></i><p>系统登录页面UI全部升级改造</p></div>
-          <div><i></i><p>管理端登录页面增加微信和手机号验证码登录功能；学员端登录页面增加微信登录功能；app手机端登录增加微信登录功能</p></div>
-          <div><i></i><p>管理端首页UI和内容进行调整</p></div>
-          <span>[优化]</span>
-          <div><i></i><p>数据统计->人员统计和课程统计页面针对查询速度慢的情况进行优化，优化后查询出的统计数据是截至到前一天的所有的数据和。已删除人员和课程不统计</p></div>
-          <div><i></i><p>数据统计->考试统计和错题统计页面针对查询速度慢的情况进行优化，优化后查询出的统计数据是截至到前一天所有已结束的考试数据，如果有人工阅卷的考试，需要等所有的人工阅卷工作全结束才能显示结果</p></div>
-          <div><i></i><p>人员统计中的个人详情信息功能移动到部门人员页面进行展示</p></div>
-          <span>[修改]</span>
-          <div><i></i><p>数据统计->课程统计   考试人数、考试通过人数、考试通过率  修改成 课程通过率</p></div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:    'checkLogPeixun',
-    layout:  'templateB',
-    data() {
-      return {};
-    },
-    head() {
-      return {
-        title: '更新日志',
-      };
-    },
-    methods: {},
-  };
-</script>
-

pages/copyUrl.vue

@@ -3,7 +3,7 @@
     <div class="success-body-box">
       <img :src= copyUrlImg />
       <p>请使用电脑端</p>
-      <p>进行麦塔在线学习SaaS系统</p>
+      <p>进行青谷在线学习SaaS系统</p>
       <p>相关操作</p>
       <span>{{copyUrlContent}}</span>
       <a @click="copyUrl">复制链接</a>

pages/education.vue

@@ -1,99 +0,0 @@
-<template>
-  <!-- 教育行业-详情页 -->
-  <div class="client-education-page">
-
-    <!-- 教育行业banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=1"
-         target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=1"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 教育培训行业现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">教育培训行业现状</h4>
-      <div class="client-container">
-        <p>
-          教育培训机构教师的用工形式较为灵活，往往分为以下几种用工形式：全职、兼职、临聘、外包，这样的用工制度就会导致教师的教学水平参差不齐，给人员管理上带来了一定的难度。为了提高教学质量，要定期对员工及教师进行培训及考试，优胜劣汰。麦塔学独特的教育教培训考试工具能有效帮助教育培训机构实现教师的资格审查，提升教学水平。</p>
-        <img :src="developImg" alt="教育培训行业现状"/>
-      </div>
-    </div>
-
-    <!-- 使用我们的系统，这些问题都能迎刃而解 -->
-    <div class="education-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container">
-        <div class="industrydetails-content fn-clear mt48">
-          <div class="change-content-left">
-            <h5>传统方式可能会出现的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>无论课程是否能听明白，都只能听一次，无法重复观看</p></li>
-              <li><i></i>
-                <p>讲师每次讲课水平发挥不一致，优秀的课程无法保留在用户间互相传递</p></li>
-              <li><i></i>
-                <p>教学活动仅限于在教室这样的固定地点进行</p></li>
-              <li><i></i>
-                <p>课堂提问无法保存下来，尤其是那些有价值的问答，无法为后来者提供参考</p></li>
-              <li><i></i>
-                <p>传统学习方式场地小，无法组织很多人一起听课</p></li>
-              <li><i></i>
-                <p>传统纸考出题印卷排考监考流程多，时间耗费大，易出错</p></li>
-            </ul>
-          </div>
-          <img :src="changeImg" alt="vs"/>
-          <div class="change-content-right">
-            <h5>我们可以帮您解决的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>重复听讲：线上课程支持反复不限次学习，随时随地皆可学习</p></li>
-              <li><i></i>
-                <p>个人时间：网络学习能够大量节约时间，可以根据自己的时间自主安排学习</p></li>
-              <li><i></i>
-                <p>难点学习：可依据自身的学习情况反复学习薄弱点、重难点</p></li>
-              <li><i></i>
-                <p>培训费用：能够大量节省讲师、场地、交通等大笔支出</p></li>
-              <li><i></i>
-                <p>地点灵活：学习不限地点，只要有网络就能学习，灵活度高</p></li>
-              <li><i></i>
-                <p>学习交流：不仅能与老师互动交流疑点难点，也可与同学进行线上交流</p></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:    'education',
-    layout:  'templateB',
-    data() {
-      return {
-        // 发展现状img
-        developImg: require(`~/static/images/client/industrydetails/education-develop-img.png`),
-        // 使用我们的系统，这些问题都能迎刃而解 img
-        changeImg:  require(`~/static/images/client/industrydetails/education-change-img.png`),
-      };
-    },
-    head() {
-      return {
-        title: '教育学校考试系统_培训学校考试系统_中小学考试系统',
-        meta:  [
-          {
-            description: '教培行业存在的教师教学水平参差不齐，教学质量难以提升等问题，现在都可以通过选择一套合理化的方案来得到解决，麦塔不仅是考试出题软件，还是在线教学考试系统，非常适合培训机构前期营销获客以及后期模拟考试的场景。',
-            keywords:    '教育学校考核系统,培训学校考核系统,中小学考核系统',
-          },
-        ],
-      };
-    },
-    methods: {},
-  };
-</script>
-
-<style scoped>
-
-</style>

pages/energy.vue

@@ -1,93 +0,0 @@
-<template>
-  <!-- 能源化工-详情页 -->
-  <div class="client-energy-page">
-
-    <!-- 能源化工banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=1"
-         target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=1"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 能源化工的发展现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">能源化工行业现状</h4>
-      <div class="client-container">
-        <p>
-          今天，信息化在社会的各行各业迅速发展，对于石油、石化和煤炭这些大型国有企业来说，更需要遵循以互联网创新思维为依托，以先进的技术为手段的企业信息化改革举措，深度推进能源化工与互联网融合发展。在信息化这条道路上，如果缺少一个完整的学习流程体系，将寸步难行。</p>
-        <img :src="energyDevelopImg" alt="能源化工行业现状"/>
-      </div>
-    </div>
-
-    <!-- 我们的系统为您改变了什么 -->
-    <div class="energy-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container industrydetails-content">
-        <div class="change-box-top">
-          <h5>传统方式可能会出现的问题</h5>
-          <ul>
-            <li><i></i>
-              <p>能源行业各分支机构常常处于异地，分支又多，需统一培训、考<br>试实施难度大</p></li>
-            <li><i></i>
-              <p>内部发布公告、信息交流不顺畅，沟通效率低、管理不便</p></li>
-            <li><i></i>
-              <p>由于行业特性，培训成本高，人力资源部人工利用已透支</p></li>
-            <li><i></i>
-              <p>无法单独针对某个员工的知识薄弱点进行二次培训</p></li>
-            <li><i></i>
-              <p>企业规模的扩大，亟待一个强运行的后台数据管理统计系统</p></li>
-          </ul>
-        </div>
-        <div class="change-box-bottom">
-          <img :src="changeImg" alt="vs"/>
-          <h5>我们可以帮您解决的问题</h5>
-          <ul>
-            <li><i></i>
-              <p>统一培训排考：通过报名体系各分公司负责人可以自主帮员工报名培训和考试，解决了分公司人员生产技能培训、考核的问题</p></li>
-            <li><i></i>
-              <p>扩大交流通道：管理员可以在平台上统一发布公告，推送给员工，也可以选择推送范围，小范围推送消息通知。</p></li>
-            <li><i></i>
-              <p>牢固安全意识：课程可以上传平台，做到一次录制反复利用，通过在线学习提升员工安全生产的基本认识，掌握安全生产的操作技能。</p></li>
-            <li><i></i>
-              <p>制定培训计划：考试结束后，公司通过分析每个部门员工的平均成绩以及每题的正确率，来制定相应的个人培训计划，只推送所需课程，做到减负。</p></li>
-            <li><i></i>
-              <p>提高效率：利用数据库技术，实现了远距离的同步考试，同步学习，提高了学习、考试效率，确保考试数据的公平、公正、科学、及时等。</p></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:    'energy',
-    layout:  'templateB',
-    data() {
-      return {
-        // 发展现状img
-        energyDevelopImg: require(`~/static/images/client/industrydetails/energy-develop-img.png`),
-        // 我们的系统为您改变了什么 img
-        changeImg:        require(`~/static/images/client/industrydetails/energy-change-img.png`),
-      };
-    },
-    head() {
-      return {
-        title: '能源化工考试系统_能源化工考核系统',
-        meta:  [
-          {
-            description: '信息化在社会的各行各业迅速发展，在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平',
-            keywords:    '能源行业考试系统,化工行业考试系统,能源行业考核系统,化工行业考核系统',
-          },
-        ],
-      };
-    },
-    methods: {},
-  };
-</script>
-
-<style scoped>
-
-</style>

pages/examsystem/index.vue

@@ -1,505 +0,0 @@
-<template>
-  <div>
-    <div class="client-platform-page">
-
-      <!-- 考试平台页 banner栏 -->
-      <div class="client-platform-banner">
-        <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/exam/exam-banner-background.png`)})`}"></div>
-        <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
-      </div>
-      <!--  产品试用 -->
-      <div class="platform-products-experience client-container">
-        <h4 class="client-title">产品试用</h4>
-        <p>免注册，立即试用麦塔在线考试系统</p>
-        <ul class="experience-ul-box mta-hidden-xs">
-          <li>
-            <div @mouseenter="enterCode" @mouseleave="leaveCode"><i></i>
-              <h5>手机前台学员端</h5>
-              <p>免登录手机扫描二维码</p>
-              <p>体验考生答卷真实界面</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><i></i><h5>电脑前台学员端</h5><p>适用于各种考试考核竞赛</p><p>拥有强大的并发负载能力</p><a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
-          <li><div><i></i><h5>电脑后台管理端</h5><p>三个简单步骤轻松完成发布</p><p>简单操作让复杂工作智能化</p><a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">免费体验</a></div></li>
-          <li><div><i></i><h5>更新日志</h5><p>麦塔，只想给你更好的</p><p>我们愿和您一起进步</p><a  class="client-default-Btn" @click="goCheckLog">点击查看</a></div></li>
-        </ul>
-        <!-- 手机轮播 -->
-        <div class="experience-swiper-box mta-hidden-sm">
-          <div v-swiper:mySwiper="swiperOption" class="swiper-container">
-            <div class="swiper-wrapper">
-              <div class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="sjxyd-icon"></i>
-                  <h5>手机前台学员端</h5>
-                  <p>免登录手机扫描二维码，体验考生答卷真实界面</p>
-                  <a style="cursor: default" @click="ykFreeTrial">立即体验</a>
-                </div>
-              </div>
-              <div class="swiper-slide">
-                <div class="experience-content-box">
-                  <i  class="dnxyd-icon"></i>
-                  <h5>电脑前台学员端</h5>
-                  <p>适用于各种考试考核竞赛</p>
-                  <p>拥有强大的并发负载能力</p>
-                  <a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a>
-                </div>
-              </div>
-              <div class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="dngld-icon"></i>
-                  <h5>电脑后台管理端</h5>
-                  <p>三个简单步骤轻松完成发布</p>
-                  <p>简单操作让复杂工作智能化</p>
-                  <a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">后台体验</a></div>
-              </div>
-              <!--<div class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="skrz-icon"></i>
-                  <h5>更新日志</h5>
-                  <p>麦塔想您所想，不止于功能</p>
-                  <p>我们一直在更新迭代</p>
-                  <a  class="client-default-Btn" @click="goCheckLog">查看日志</a>
-                </div>
-              </div>-->
-            </div>
-            <div class="swiper-pagination swiper-pagination-style"></div>
-            <p class="experience-swiper-tip">←左右滑动查看更多→</p>
-          </div>
-        </div>
-      </div>
-
-
-
-      <div class="platform-products-services">
-        <h4 class="client-title">产品特性</h4>
-        <ul>
-          <li>
-            <div class="client-container">
-              <div class="products-services-box products-contrary-box">
-              <img :src="advantagesImg1" alt="强大的人员和试题管理" />
-              <div class="products-services-content">
-                <h5>强大的人员和试题管理</h5>
-                <i></i>
-                <p>支持选择题、填空题、判断题、问答题、阅读理解题、听力题、视频题八大类题型，支持单题上传和Word、Excel批量导入试题等多种试题录入方式，支持树状分类各种复杂的试题体系，无限级组织结构和学员标签，任意定义可自定义的学员信息字段，满足学员信息管理的各种需求。</p>
-                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
-              </div>
-            </div>
-            </div>
-          </li>
-          <li>
-            <div class="client-container">
-              <div class="products-services-box">
-              <img :src="advantagesImg2" alt="多种终端支持，随时随地考试" />
-              <div class="products-services-content">
-                <h5>多种终端支持，随时随地考试</h5>
-                <i></i>
-                <p>支持PC使用，移动端H5使用，还可以根据考试场景自如设置答卷模式，支持微信、钉钉等第三方平台无缝连接，支持个性化自定义组织专用的皮肤、Logo，强化您的组织和品牌属性。</p>
-                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
-              </div>
-            </div>
-            </div>
-          </li>
-          <li>
-            <div class="client-container">
-              <div class="products-services-box products-contrary-box">
-              <img :src="advantagesImg3" alt="严格的考试监控防作弊体系" />
-              <div class="products-services-content">
-                <h5>严格的考试监控防作弊体系</h5>
-                <i></i>
-                <p>支持答题前人脸身份核验，试题乱序、选项乱序、禁止右键复制粘贴，考试过程中限制切屏次数时间，实时头像抓拍和视频监控AI对比防止作弊，对有作弊嫌疑的学员可以强制交卷。</p>
-                <div><a rel="nofollow" class="client-default-Btn"  @click="FreeTrial">免费试用</a></div>
-              </div>
-            </div>
-            </div>
-          </li>
-          <li>
-            <div class="client-container">
-              <div class="products-services-box">
-              <img :src="advantagesImg4" alt="实用便捷的判卷功能" />
-              <div class="products-services-content">
-                <h5>实用便捷的判卷功能</h5>
-                <i></i>
-                <p>支持分试题和分学员判卷，可以实现分组阅卷和流水阅卷，支持匿名阅卷，阅卷人无法看到学员信息，能有效避免阅卷中可能发生的徇私舞弊行为，支持线下成绩Word和Excel模板批量导入系统。</p>
-                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
-              </div>
-            </div>
-            </div>
-          </li>
-        </ul>
-
-      </div>
-
-      <!--  产品功能 -->
-      <div class="platform-product-function">
-        <div class="client-container">
-          <h4 class="client-title">产品功能</h4>
-          <ul class="product-function-box mta-hidden-xs">
-            <li><div><i></i><h5>角色权限管理</h5><p>可根据用户需求分层独立管理，多层级的组织架构和角色权限快速搭建，解决大型组织的复杂的管理需求，支持对接微信、钉钉、教务、OA、HR、ERP等系统单点登录和用户信息同步</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>可以按科目无限级添加、管理试题和试题标签，支持选择题、填空题、判断题、问答题、阅读理解题、听力题、视频题八大类题型，支持单题上传和Word、Excel批量导入试题、图片，公式等多种试题录入方式</p></div></li>
-            <li><div><i></i><h5>智能考试安排</h5><p>支持几十种个性考试参数的灵活设置，全方位把控考试细节，智能化考试安排，面对各类考试需求全适应，能随机应变不同的考场环境</p></div></li>
-            <li><div><i></i><h5>个性化定制</h5><p>支持个性化自定义组织专用的皮肤、Logo，强化您的组织和品牌属性</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 class="experience-swiper-box mta-hidden-sm">
-            <div v-swiper:mySwiperGn="swiperOptionGn" class="swiper-container">
-              <ul class="swiper-wrapper">
-                <li class="swiper-slide">
-                  <div class="experience-content-box">
-                    <i class="product-function-icon1"></i><h5>角色权限管理</h5>
-                    <p>可根据用户需求分层独立管理，多层级的组织架构和角色权限快速搭建，解决大型组织的复杂的管理需求，支持对接微信、钉钉、教务、OA、HR、ERP等系统单点登录和用户信息同步</p>
-                  </div>
-                </li>
-                <li class="swiper-slide">
-                  <div class="experience-content-box">
-                    <i class="product-function-icon2"></i><h5>考试防作弊体系</h5>
-                    <p>支持人脸识别登录，身份核验；考试过程中支持限制切屏次数、时间，解决离开考试界页面问题；头像抓拍和视频实时监控有效防止作弊</p>
-                  </div>
-                </li>
-                <li class="swiper-slide">
-                  <div class="experience-content-box">
-                    <i class="product-function-icon3"></i><h5>灵活的组卷模式</h5>
-                    <p>固定试卷支持手工指定试题，并设置试题分数,所有考生使用相同试卷(可乱序)；抽题试卷，按试题难度、题型等分类设置抽题数量，随机生成不同试卷；随机试卷可以指定抽题分类、题型并设置抽题数量和分数，随机组合为用户生成不同的试卷</p>
-                  </div>
-                </li>
-                <li class="swiper-slide">
-                  <div class="experience-content-box">
-                    <i class="product-function-icon4"></i><h5>丰富的题库管理</h5>
-                    <p>可以按科目无限级添加、管理试题和试题标签，支持选择题、填空题、判断题、问答题、阅读理解题、听力题、视频题八大类题型，支持单题上传和Word、Excel批量导入试题、图片，公式等多种试题录入方式</p>
-                  </div>
-                </li>
-                <li class="swiper-slide">
-                  <div class="experience-content-box">
-                    <i class="product-function-icon5"></i><h5>智能考试安排</h5>
-                    <p>支持几十种个性考试参数的灵活设置，全方位把控考试细节，智能化考试安排，面对各类考试需求全适应，能随机应变不同的考场环境</p>
-                  </div>
-                </li>
-                <li class="swiper-slide">
-                  <div class="experience-content-box">
-                    <i class="product-function-icon6"></i><h5>个性化定制</h5>
-                    <p>支持个性化自定义组织专用的皮肤、Logo，强化您的组织和品牌属性</p>
-                  </div>
-                </li>
-                <li class="swiper-slide">
-                  <div class="experience-content-box">
-                    <i class="product-function-icon7"></i><h5>多维度统计分析</h5>
-                    <p>支持题目分析，可以查看全体和各个部门的得分情况，可以查看学员历次考试成绩汇总和趋等多维度数据情况</p>
-                  </div>
-                </li>
-                <li class="swiper-slide">
-                  <div class="experience-content-box">
-                    <i class="product-function-icon8"></i><h5>性能稳定数据安全</h5>
-                    <p>强大的考试并发负载能力，保证大并发考试的稳定；多重云数据保护和备份备份恢复机制，保护用户数据安全和隐私</p>
-                  </div>
-                </li>
-              </ul>
-              <div class="swiper-pagination swiper-pagination-style"></div>
-              <p class="experience-swiper-tip">←左右滑动查看更多→</p>
-            </div>
-          </div>
-          <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
-        </div>
-      </div>
-
-
-      <!-- 为不同行业场景提供解决方案 -->
-      <div class="platform-application-scenarios">
-        <div class="client-container">
-          <h4 class="client-title">为不同行业场景提供解决方案</h4>
-          <ul class="application-scenarios-box mta-hidden-xs">
-            <li>
-              <div class="application-scenarios-content">
-                <div class="application-scenarios-img"></div>
-                <h5>岗位考核</h5>
-                <p :title="`现今，企业为了提升人才育留及整体水平，已经逐渐重视起人才培养，企业想要检验新员工入职和在职员工的培训效果，就必须通过组织考试的方式，麦塔在线考试系统可以实现人才岗位胜任力测评、培训考核、绩效考核等多种功能，学习情况一目了然。`">
-                  现今，企业为了提升人才育留及整体水平，已经逐渐重视起人才培养，企业想要检验新员工入职和在职员工的培训效果，就必须通过组织考试的方式，麦塔在线考试系统可以实现人才岗位胜任力测评、培训考核、绩效考核等多种功能，学习情况一目了然。
-                </p>
-              </div>
-            </li>
-            <li>
-              <div class="application-scenarios-content">
-                <div class="application-scenarios-img"></div>
-                <h5>大型竞赛</h5>
-                <p :title="`知识竞赛可以增加学习趣味性，有效促进员工的互动参与性，已成为越来越多企业和教育机构组织培训考试的主要方式，麦塔作为专业的知识竞赛答题软件，解决了众多企业组织知识竞赛的痛点，支持在线考试系统app以及绑定关注微信公众号使用微信答题，并且支持万人同时参加考试，非常适合大型竞赛场景。`">
-                  知识竞赛可以增加学习趣味性，有效促进员工的互动参与性，已成为越来越多企业和教育机构组织培训考试的主要方式，麦塔作为专业的知识竞赛答题软件，解决了众多企业组织知识竞赛的痛点，支持在线考试系统app以及绑定关注微信公众号使用微信答题，并且支持万人同时参加考试，非常适合大型竞赛场景。
-                </p>
-              </div>
-            </li>
-            <li>
-              <div class="application-scenarios-content">
-                <div class="application-scenarios-img"></div>
-                <h5>认证考试</h5>
-                <p :title="`近年来，证书认证考试作为某种能力或资格的证明，企业需求逐渐增大，麦塔考试系统除了能够为前期组织考试节省大量的成本之外，还可对于严肃正式的考试证书认证场景给予专业的技术支持，能不限次发布考试，自定义设计并上传证书，考试合格自动发放，应用场景十分灵活。`">
-                  近年来，证书认证考试作为某种能力或资格的证明，企业需求逐渐增大，麦塔考试系统除了能够为前期组织考试节省大量的成本之外，还可对于严肃正式的考试证书认证场景给予专业的技术支持，能不限次发布考试，自定义设计并上传证书，考试合格自动发放，应用场景十分灵活。
-                </p>
-              </div>
-            </li>
-          </ul>
-          <!-- 手机轮播 -->
-          <div class="experience-swiper-box mta-hidden-sm">
-            <div v-swiper:mySwiperCj="swiperOptionCj" class="swiper-container">
-              <ul class="swiper-wrapper">
-                <li class="swiper-slide">
-                  <div class="experience-content-box scenarios-gwks-box">
-                    <i class="product-function-icon1"></i><h5>岗位考核</h5>
-                    <p>现今，企业为了提升人才育留及整体水平，已经逐渐重视起人才培养，企业想要检验新员工入职和在职员工的培训效果，就必须通过组织考试的方式，麦塔在线考试系统可以实现人才岗位胜任力测评、培训考核、绩效考核等多种功能，学习情况一目了然。</p>
-                  </div>
-                </li>
-                <li class="swiper-slide">
-                  <div class="experience-content-box scenarios-dxjs-box">
-                    <i class="product-function-icon2"></i><h5>大型竞赛</h5>
-                    <p>知识竞赛可以增加学习趣味性，有效促进员工的互动参与性，已成为越来越多企业和教育机构组织培训考试的主要方式，麦塔作为专业的知识竞赛答题软件，解决了众多企业组织知识竞赛的痛点，支持在线考试系统app以及绑定关注微信公众号使用微信答题，并且支持万人同时参加考试，非常适合大型竞赛场景。</p>
-                  </div>
-                </li>
-                <li class="swiper-slide">
-                  <div class="experience-content-box scenarios-zgks-box">
-                    <i class="product-function-icon3"></i><h5>认证考试</h5>
-                    <p>近年来，证书认证考试作为某种能力或资格的证明，企业需求逐渐增大，麦塔考试系统除了能够为前期组织考试节省大量的成本之外，还可对于严肃正式的考试证书认证场景给予专业的技术支持，能不限次发布考试，自定义设计并上传证书，考试合格自动发放，应用场景十分灵活。</p>
-                  </div>
-                </li>
-              </ul>
-              <div class="swiper-pagination swiper-pagination-style"></div>
-              <p class="experience-swiper-tip">←左右滑动查看更多→</p>
-            </div>
-          </div>
-          <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
-        </div>
-      </div>
-
-      <!-- 新闻资讯 -->
-      <div class="platform-news-information mta-hidden-xs">
-        <div class="client-container">
-          <h4 class="client-title">新闻资讯</h4>
-          <ul>
-            <li style="font-size: 16px" v-for="(item, index) in topCarousels">
-              <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>
-    <!-- 系统维护-->
-    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
-  </div>
-
-
-</template>
-
-<script>
-  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
-  Swiper.use([Navigation, Pagination,Autoplay]);
-  export default {
-    name:       'examsystem',
-    layout:'templateB',
-    async asyncData({ $axios,store }) {
-      // 设置选中菜单
-      store.commit('setActiveNav', '/examsystem');
-
-      let [res1, res2] = await Promise.all([
-                                             await $axios.$post(`/home/banner/list`, { 'code': 2 }).then(res => {
-                                               return res;
-                                             }),
-                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0,'keyword':'考试' }).then(res => {
-                                               return res;
-                                             })
-                                           ]);
-      console.log('333 =>', res2.data.data);
-      return {
-        bannerList: res1.data.data||[],
-        topCarousels: res2.data.data||[],
-
-      };
-
-    },
-    data() {
-      return {
-        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
-        advantagesImg1:  require(`~/static/images/client/exam/product-advantages-img1.png`),
-        advantagesImg2:  require(`~/static/images/client/exam/product-advantages-img2.png`),
-        advantagesImg3:  require(`~/static/images/client/exam/product-advantages-img3.png`),
-        advantagesImg4:  require(`~/static/images/client/exam/product-advantages-img4.png`),
-        youkeFlag:false,// 控制游客系统是否维护中
-        systemMaintainDl:false,// 系统维护弹窗
-        swiperData: [
-          { imgUrl: require(`~/static/images/client/index/index-products-kaoshi.png`)},
-          { imgUrl: require(`~/static/images/client/index/index-products-peixun.png`) },
-          { imgUrl: require(`~/static/images/client/index/index-products-kejian.png`) },
-        ],
-        swiperOption: {
-          pagination: {
-            el: '.swiper-pagination',
-            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
-            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
-            clickable: true, // 点击当前滑块切换到对应的轮播图片
-          },
-          autoplay: {
-            delay: 5000,
-          },
-          paginationClickable: true,
-          speed: 800,
-          loop: true,
-          observer: true,
-          observeParents: true,
-        },
-        swiperOptionGn: {
-          pagination: {
-            el: '.swiper-pagination',
-            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
-            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
-            clickable: true, // 点击当前滑块切换到对应的轮播图片
-          },
-          autoplay: {
-            delay: 5000,
-          },
-          paginationClickable: true,
-          speed: 800,
-          loop: true,
-          observer: true,
-          observeParents: true,
-        },
-        swiperOptionCj: {
-          pagination: {
-            el: '.swiper-pagination',
-            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
-            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
-            clickable: true, // 点击当前滑块切换到对应的轮播图片
-          },
-          autoplay: {
-            delay: 5000,
-          },
-          paginationClickable: true,
-          speed: 800,
-          loop: true,
-          observer: true,
-          observeParents: true,
-        },
-      };
-    },
-    head(){
-      return {
-        title: '在线考试平台_在线考试软件_试卷软件系统',
-        meta: [
-          {
-            name: 'keywords',
-            content: '考试平台,试卷系统,试卷软件'
-          },
-          {
-            name:'description',
-            content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
-          }
-        ],
-      }
-    },
-    computed:   {},
-    methods:    {
-      // 游客系统试用
-      ykFreeTrial(){
-        if(this.youkeFlag){
-          // 没升级
-          window.open('https://youkeksc.mtavip.com/kscmdist/#/youke')
-        }else{
-          // 升级中
-          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
-        }
-      },
-      // 免费试用
-      FreeTrial(){
-        this.getSystemWidth();
-          // 没升级
-          if(this.SystemWidthFlag){
-            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
-          }else{
-            window.open('https://cdnks.mtavip.com/a/register?flug=1')
-
-          }
-      },
-      // 判断是否为移动端
-      getSystemWidth(){
-        var browserWidth=document.documentElement.clientWidth;
-        if(browserWidth <= 768){
-          this.SystemWidthFlag = true;
-        }else{
-          this.SystemWidthFlag = false;
-        }
-      },
-      // 考试体验按钮
-      KsTyBtn(btnUrl){
-        this.getSystemWidth();
-        if(this.youkeFlag) {
-          if(this.SystemWidthFlag){
-            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
-          }else {
-            window.open(btnUrl);
-          }
-        }else{
-          if(this.SystemWidthFlag){
-            // 升级中
-            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
-          }else{
-            this.systemMaintainDl = true;
-          }
-        }
-      },
-
-      //  describe: 查看日志 author: Wgy date:6/8/21
-
-      goCheckLog(){
-        this.$router.push({ name: 'checkLogKaoshi' });
-      },
-      // 鼠标移入
-      enterCode(){
-        if(this.youkeFlag){
-        this.$refs.codeBtn.style.bottom ='90px';
-        }else{
-          this.$refs.codeBtn.style.bottom ='0';
-        }
-      },
-
-      // 鼠标移出
-      leaveCode(){
-        this.$refs.codeBtn.style.bottom ='305px';
-      },
-
-      clickBanner(data){
-        if(data){
-          window.open(data)
-        }
-
-      },
-
-      checkInfo(data) {
-        const opt = {
-          id: data.code,
-        };
-        this.$router.push({ name: 'news-id', params: opt });
-      },
-    },
-    created() {
-      // 页面初始化
-      this.$axios.$post('/home/youke/stop').then(res=>{
-        if (res.data === '1') {
-          this.youkeFlag = false;
-        }else{
-          this.youkeFlag = true;
-        }
-      });
-    },
-    mounted() {
-      this.getSystemWidth();
-    },
-    beforeDestroy() {
-    },
-  };
-</script>
-

pages/financial.vue

@@ -1,119 +0,0 @@
-<template>
-  <!-- 金融保险-详情页 -->
-  <div class="client-finance-page">
-
-    <!-- 金融保险banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=1"
-         target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=1"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 金融保险的发展现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">金融保险行业现状</h4>
-      <div class="client-container">
-        <p>
-          当今世界经济发展呈一体化趋势，顺应这一潮流中国进一步加大了对外开放的步伐，也就是说金融业是在竞争中壮大的，这样的竞争压力对于企业而言就要求有过硬的知识储备和优秀的职业技能，如货币、证券、银行、保险、投资理财、风险管理等方面，这些技能知识都需要以考核来托底，用考核数据作为指导依据，帮助业务能力的提升。</p>
-        <img :src="financeDevelopImg" alt="金融保险的发展现状"/>
-      </div>
-    </div>
-
-    <!-- 金融行业的问题 -->
-    <div class="finance-question-box">
-      <h4 class="client-title" style="margin-bottom: 60px">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container mta-hidden-xs">
-        <div class="finance-question-top">
-          <h5>传统方式可能会出现的问题</h5>
-          <h5>我们可以帮您解决的问题</h5>
-        </div>
-        <div class="industrydetails-content tc">
-          <ul>
-            <li><i></i>
-              <p>产品更新换代快，培训资料更新不及时</p></li>
-            <li><i></i>
-              <p>金融业网点多，分布范围分散，容易造成培训不同步的情况，考核效果也差强人意</p></li>
-            <li><i></i>
-              <p>金融行业服务为王，对于员工的职业技能素养和综合文化素质尤为看重，如果培训跟不上，就容易达不到客户满意度</p></li>
-            <li><i></i>
-              <p>人工智能技术越来越发达，如果对智能技术的操作标准下发不及时，不统一，就会容易出现问题</p></li>
-            <li><i></i>
-              <p>专业度要求高，传统的课程培训方式无法分岗位培训，还会耗费很大的精力，已不能满足需求</p></li>
-          </ul>
-          <ul class="finance-question-right">
-            <li><i></i>
-              <p>内容设计：解决了知识要点把握不准确、学习资料不足、学习内容不匹配等问题</p></li>
-            <li><i></i>
-              <p>同频共振：将全员的课程内容统一，针对不同网点的工作时间智能调度，考核紧跟培训</p></li>
-            <li><i></i>
-              <p>实际工作：平台建立知识库，将应知应会、各项法律法规、内控制度内容统一存储提取，严厉操作规范</p></li>
-            <li><i></i>
-              <p>专岗专培：针对不同员工的岗位特性、能力要求，精心设计培训、考试内容，利用碎片时间为员工堆砌职业模型，集中测试</p></li>
-          </ul>
-        </div>
-      </div>
-      <div class="client-container mta-hidden-sm phone-class-box">
-        <div class="financial-tradition-phone">
-          <h4 class="client-title">传统方式可能会出现的问题</h4>
-          <ul>
-            <li><i></i>
-              <p>产品更新换代快，培训资料更新不及时</p></li>
-            <li><i></i>
-              <p>金融业网点多，分布范围分散，容易造成培训不同步的情况，考核效果也差强人意</p></li>
-            <li><i></i>
-              <p>金融行业服务为王，对于员工的职业技能素养和综合文化素质尤为看重，如果培训跟不上，就容易达不到客户满意度</p></li>
-            <li><i></i>
-              <p>人工智能技术越来越发达，如果对智能技术的操作标准下发不及时，不统一，就会容易出现问题</p></li>
-            <li><i></i>
-              <p>专业度要求高，传统的课程培训方式无法分岗位培训，还会耗费很大的精力，已不能满足需求</p></li>
-          </ul>
-        </div>
-        <img :src="changeImg" alt="使用我们的系统，这些问题都能迎刃而解"/>
-        <div class="financial-solve-phone">
-          <h4 class="client-title">我们可以帮您解决的问题</h4>
-          <ul>
-            <li><i></i>
-              <p>内容设计：解决了知识要点把握不准确、学习资料不足、学习内容不匹配等问题</p></li>
-            <li><i></i>
-              <p>同频共振：将全员的课程内容统一，针对不同网点的工作时间智能调度，考核紧跟培训</p></li>
-            <li><i></i>
-              <p>实际工作：平台建立知识库，将应知应会、各项法律法规、内控制度内容统一存储提取，严厉操作规范</p></li>
-            <li><i></i>
-              <p>专岗专培：针对不同员工的岗位特性、能力要求，精心设计培训、考试内容，利用碎片时间为员工堆砌职业模型，集中测试</p></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:   'finance',
-    layout: 'templateB',
-    data() {
-      return {
-        // 发展现状img
-        financeDevelopImg: require(`~/static/images/client/industrydetails/finance-develop-img.png`),
-        changeImg:   require(`~/static/images/client/industrydetails/information-change-img.png`),
-      };
-    },
-    head() {
-      return {
-        title: '金融行业考试系统_金融行业考核系统',
-        meta:  [
-          {
-            description: '金融无处不在并已形成一个庞大体系，金融学涉及的范畴、分支和内容非常广，如货币、证券、银行、保险、投资理财、风险管理等，相对来说考核点多、信息量大，对员工的知识储备要求较高，相对的考核难度也较大',
-            keywords:    '金融考试系统_金融考核系统',
-          },
-        ],
-      };
-    },
-  };
-</script>
-
-<style scoped>
-
-</style>

pages/government.vue

@@ -1,123 +0,0 @@
-<template>
-  <!-- 政府机构-详情页 -->
-  <div class="client-government-page">
-    <!-- 政府机构banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=1"
-         target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=1"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 企事业单位的发展现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">企事业单位行业现状</h4>
-      <div class="client-container">
-        <p>
-          现代企业发展快，竞争压力大，很多企业都想要通过考核的方式，提升企业内部的软实力，从而提升企业竞争力，所以，无论是企业单位还是事业单位，都少不了要进行各类不同形式的考试。而传统的考核方式，要经历从出卷、分发、打印、寻找考场、安排考试时间、组织考试、安排监考、批卷阅卷、统计成绩等诸多步骤，在时间和金钱上的成本耗费都较高，不再适应现代企业的管理模式。</p>
-        <img :src="developImg" alt="企事业单位的发展现状"/>
-      </div>
-    </div>
-
-    <!-- 我们的系统为您改变了什么 -->
-    <div class="government-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container">
-        <div class="industrydetails-content">
-          <div class="change-content-left">
-            <h5>传统方式可能会出现的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>老员工离职时，将之前企业精心培养的工作经验带走了，新人来只能靠感觉重新摸索</p></li>
-              <li><i></i>
-                <p>每当有新人入职，都要准备一次培训资料，重复工作导致效率低下</p></li>
-              <li><i></i>
-                <p>员工的职业胜任能力不清晰，是否符合胜任条件只能靠感官</p></li>
-              <li><i></i>
-                <p>每次一组织培训，就要占用工作时间或者员工下班后的时间，培训部门和员工都苦不堪言</p></li>
-            </ul>
-          </div>
-          <img :src="changeImg" alt="我们可以帮您解决的问题"/>
-          <div class="change-content-right">
-            <h5>我们可以帮您解决的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>为企业建立智库，将经验资料存储在平台内，哪怕员工流动也能有迹可循，有典可查。</p></li>
-              <li><i></i>
-                <p>严格把控员工入职流程，安排员工参加入职考核，考试合格再上岗</p></li>
-              <li><i></i>
-                <p>系统能够自动生成能力模型，为管理人员提供科学切实的参考依据</p></li>
-              <li><i></i>
-                <p>用我们的系统在手机、微信上就能够解决培训问题，课程轨迹随时记录，确保碎片化学习的应用。</p></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 我们的优势 -->
-    <div class="government-advantage-box mta-hidden-xs">
-      <h4 class="client-title">产品优势</h4>
-      <div class="client-container fn-hidden fn-clear-gap">
-        <div class="government-advantage-content">
-          <dl>
-            <dt><i></i><span>不限次听讲</span></dt>
-            <dd>可以不限次重复听讲，学员的提问回答都保留在系统中</dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>培训费用</span></dt>
-            <dd>能大量节省培训支出，如场地费、讲师学员的交通费、讲师重复讲课的费用</dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>难点突破</span></dt>
-            <dd>系统可以智能分析易错点，生成个人报告，学员可依据个人情况重复学习重难点和易错点</dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>个人时间</span></dt>
-            <dd>网络学习碎片化的优点能有效利用大量的学习时间</dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>地点灵活</span></dt>
-            <dd>学习地点灵活，可以根据自己的时间进行学习</dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>互动交流</span></dt>
-            <dd>在学习中能与老师、同学以实时的方式或留言的形式交流学习中的疑难点</dd>
-          </dl>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:    'government',
-    layout:  'templateB',
-    data() {
-      return {
-        // 发展现状img
-        developImg: require(`~/static/images/client/industrydetails/government-develop-img.png`),
-        // 我们的系统为您改变了什么 img
-        changeImg:  require(`~/static/images/client/industrydetails/government-change-img.png`),
-        // 获取是考试系统点进来的还是培训系统点进来的
-        tpyeKey:    '',
-      };
-    },
-    head() {
-      return {
-        title: '党建考试系统_政府行业考试系统_事业单位考试系统',
-        meta:  [
-          {
-            description:    '为了适应市场经济的发展，越来越多的企业开始意识到人才选拔、培养的重要性，无论是企业单位还是事业单位，每年都要举行年度考核、党建考核等各种不同形式的考试。',
-            keywords:    '党建考核系统,政府行业考核系统,事业单位考核系统',
-          },
-        ],
-      };
-    },
-    methods: {},
-  };
-</script>
-

pages/index.vue

@@ -7,159 +7,131 @@
 
     <!-- 首页banner栏 -->
     <div class="client-banner-box">
-      <el-carousel trigger="click">
+      <el-carousel :interval="5000" 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>
+               class="index-carousel-box">
+          </div>
         </el-carousel-item>
       </el-carousel>
     </div>
 
     <!-- 发展历程-移动端隐藏-->
-    <div class="client-company-history mta-hidden-xs">
-      <div class="client-container">
-        <ul>
-          <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 class="client-company-history client-container mta-hidden-xs">
+      <ul>
+        <li>
+          <a href="https://www.qtavip.com/product/exam" style="display: inline-block">
+            <div class="company-item">
+              <i></i>
+              <div><p>在线考试系统</p><h4>让考试变得更轻松</h4></div>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="https://www.qtavip.com/product/peixun">
+            <div class="company-item">
+              <i></i>
+              <div><p>在线培训系统</p><h4>为企业解决培训痛点</h4></div>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="https://www.qtavip.com/product/courseCustom">
+            <div class="company-item">
+              <i></i>
+              <div><p>课程定制开发</p><h4>打造专业定制化服务</h4></div>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="https://www.qtavip.com/product/courseResource">
+            <div class="company-item">
+              <i></i>
+              <div><p>通用课程资源</p><h4>企业构建自主课程体系</h4></div>
+            </div>
+          </a>
+        </li>
+      </ul>
     </div>
 
     <!-- 产品和服务 -->
     <div class="client-products-services">
-      <div class="client-container">
-        <h4 class="client-title">产品和服务</h4>
-        <div class="products-services-box">
-          <div class="products-services-content">
-            <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="易用/稳定/高效的在线考试系统"/>
+      <h4 class="client-title">产品和服务</h4>
+      <imgCardLv1 class="img-card" :option="item" v-for="(item,index) in productList" :key="index" :col-pc="3" :is-row="true" :col-h5="2">
+        <div class="btn-groups">
+          <applyBtn class="apply-btn btn-item" v-if="item.shenqing" @active-pc="onApplyBtnActive"
+                    @active-h5="onApplyBtnActiveH5"/>
+          <freeTrialBtn class="free-train-btn btn-item" v-if="item.mianfei" :myType="item.myType"/>
+          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
         </div>
-        <div class="products-services-box products-contrary-box">
-          <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>
+      </imgCardLv1>
+    </div>
+
+    <!-- 超过10万家客户的信任之选 -->
+    <div class="client-customer-box mta-hidden-xs">
+      <div class="client-container">
+        <h4 class="client-title">他们一直都在使用</h4>
+        <p class="client-subtitle-one-row">不断细分各行业客户，在各行各业全面绽放</p>
+        <ul class="customer-img-box">
+          <div class="customer-row">
+            <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>
           </div>
-          <img :src="productsImg2" alt="高灵活/多种学习场景的在线培训学习系统"/>
-        </div>
-        <div class="products-services-box">
-          <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 class="customer-row">
+            <li><img :src="customerImg6" alt="华发股份"/></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="astellas"/></li>
           </div>
-        </div>
-        <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 class="customer-row">
+            <li><img :src="customerImg12" alt="酷狗音乐"/></li>
+            <li><img :src="customerImg13" alt="伟岸纵横"/></li>
+            <li><img :src="customerImg14" alt="航天信息"/></li>
+            <li><img :src="customerImg15" alt="sony"/></li>
+            <li><img :src="customerImg16" alt="中国海洋大学"/></li>
           </div>
-          <img :src="productsImg3" alt="数字课程开发服务"/>
-        </div>
+        </ul>
       </div>
     </div>
 
-    <!-- 超过10万家客户的信任之选 -->
-    <div class="client-customer-box">
+    <div class="client-customer-box mta-hidden-sm">
       <div class="client-container">
-        <h4 class="client-title">他们都在用</h4>
+        <h4 class="client-title">他们一直都在使用</h4>
+        <p class="client-subtitle-one-row">不断细分各行业客户，在各行各业全面绽放</p>
         <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="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="华发股份"/></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="astellas"/></li>
+          <li><img :src="customerImg12" alt="酷狗音乐"/></li>
+          <li><img :src="customerImg13" alt="伟岸纵横"/></li>
+          <li><img :src="customerImg14" alt="航天信息"/></li>
+          <li><img :src="customerImg15" alt="sony"/></li>
+          <li><img :src="customerImg16" alt="中国海洋大学"/></li>
         </ul>
       </div>
     </div>
+
     <!--  新闻资讯  -->
     <newsComp :newsData="topCarousels"></newsComp>
     <!--  申请方案  -->
     <applicationDialog :visible.sync="telDl"></applicationDialog>
 
+    <selectDialog :show.sync="show"></selectDialog>
+
   </div>
 </template>
 
@@ -170,6 +142,8 @@ 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 imgCardLv1 from "~/components/common/layout/imgDes/imgCardLv1_index";
+import selectDialog from "~/components/common/selectDialog";
 import {BannerImgs, classifys} from "~/defaultConfig"
 
 /**
@@ -190,7 +164,7 @@ export default {
   },
   async asyncData({$axios, store}) {
     let [res1, res2] = await Promise.all([
-      await $axios.$post(`/home/news/carousel`, {newsClassifyId: classifys.shouye.classify}).then(res => {
+      await $axios.$post(`/home/news/carousel`, {newsClassifyId: classifys.shouye.classify, 'keyword': classifys.shouye.keyword}).then(res => {
         return res;
       }),
       await $axios.$post(`/home/banner/list`, {code: BannerImgs.shouye}).then(res => {
@@ -206,254 +180,192 @@ export default {
   },
   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',
-            },
-          ],
-        },
+      show: false,
+      productList: [
         {
-          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',
-            },
-          ],
+          content: {
+            title: '在线考试系统 : 建立无纸化考试通道',
+            des: '深谙在线考试系统搭建精髓，全场景模拟考试环境，企业微信/钉钉等平台同步开发搭建，实现移动端，PC端同步考试，APP/小程序/云平台独立开发。',
+            list: [
+              {
+                value: '试题批量导入',
+              },
+              {
+                value: '多种题型支持',
+              },
+              {
+                value: '随机组卷抽题',
+              },
+              {
+                value: '考试时间设定',
+              },
+              {
+                value: '360°防作弊监考',
+              },
+              {
+                value: '自动阅卷判卷',
+              },
+              {
+                value: '成绩统计查询',
+              },
+              {
+                value: '证书颁发打印',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p04.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
         },
         {
-          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',
-            },
-          ],
+          content: {
+            title: '在线培训系统 : 3步帮您搭建企业专属培训系统',
+            des: '专注企业员工提升解决方案，不止是简单的培训系统开发，1V1部署咨询与百人课程开发团队，帮您解决后顾之忧。',
+            list: [
+              {
+                value: '在线直播教学',
+              },
+              {
+                value: '课后直播回放',
+              },
+              {
+                value: '阶段测评考试',
+              },
+              {
+                value: '课堂互动交流',
+              },
+              {
+                value: '视频课程教学',
+              },
+              {
+                value: '课程设置管理',
+              },
+              {
+                value: '课程结束考试',
+              },
+              {
+                value: '学员统计分析',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p03.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
         },
         {
-          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',
-            },
-          ],
+          content: {
+            title: '课程定制开发 : 打造专业定制化服务',
+            des: '百人制作团队，涉及900个行业，深入各大领域，专注课程开发9年，累积定制3万+小时课程',
+            list: [
+              {
+                value: 'E-learning课程',
+              },
+              {
+                value: '微课程制作',
+              },
+              {
+                value: '宣传片制作',
+              },
+              {
+                value: 'PPT定制',
+              },
+              {
+                value: '情景动画开发',
+              },
+              {
+                value: 'H5平面设计',
+              },
+              {
+                value: '视频后期制作',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p01.png`),
+            order: 1,
+          },
+          mianfei: false,
+          zixun: true,
+          shenqing: true,
+          myType: 'kecheng'
         },
         {
-          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: '#',
-            },
-          ],
-        },
+          content: {
+            title: '通用课程资源 : 帮助企业构建自主课程体系',
+            des: '基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。',
+            list: [
+              {
+                value: '职业素养',
+              },
+              {
+                value: '领导能力',
+              },
+              {
+                value: '人力资源',
+              },
+              {
+                value: '市场营销',
+              },
+              {
+                value: '行政管理',
+              },
+              {
+                value: '财务管理',
+              },
+              {
+                value: '客服服务',
+              },
+              {
+                value: '产品运营',
+              },
+              {
+                value: '生产采购',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p02.png`),
+            order: 2,
+          },
+          mianfei: false,
+          zixun: true,
+          shenqing: true,
+          myType: 'kecheng'
+        }
       ],
+      SystemWidthFlag: false,// 判断是否是手机端，默认为false，默认为PC端
+      topCarousels2: [],
+      // 客户logo
+      customerImg1: require(`~/static/gangweiIcon/z154.png`),
+      customerImg2: require(`~/static/gangweiIcon/z155.png`),
+      customerImg3: require(`~/static/gangweiIcon/z156.png`),
+      customerImg4: require(`~/static/gangweiIcon/z157.png`),
+      customerImg5: require(`~/static/gangweiIcon/z158.png`),
+      customerImg6: require(`~/static/gangweiIcon/z159.png`),
+      customerImg7: require(`~/static/gangweiIcon/z160.png`),
+      customerImg8: require(`~/static/gangweiIcon/z161.png`),
+      customerImg9: require(`~/static/gangweiIcon/z162.png`),
+      customerImg10: require(`~/static/gangweiIcon/z163.png`),
+      customerImg11: require(`~/static/gangweiIcon/z164.png`),
+      customerImg12: require(`~/static/gangweiIcon/z165.png`),
+      customerImg13: require(`~/static/gangweiIcon/z166.png`),
+      customerImg14: require(`~/static/gangweiIcon/z167.png`),
+      customerImg15: require(`~/static/gangweiIcon/z168.png`),
+      customerImg16: require(`~/static/gangweiIcon/z169.png`),
 
       btnTextDisabled: false,
       telDl: false,
@@ -477,28 +389,26 @@ export default {
 
   },
   components: {
+    imgCardLv1,
     applyBtn,
     freeTrialBtn,
     onlineInformationBtn,
     applicationDialog,
-    newsComp
+    newsComp,
+    selectDialog
   },
   head() {
     return {
-      title: '在线考试系统_在线培训系统_组卷答题系统_考试软件',
+      title: '在线考试系统_在线培训系统_组卷答题系统_青谷软件',
       meta: [
         {
           name: 'description',
-          content: '麦塔在线考试系统和在线培训系统拥有完全自主知识产权，专注于解决在线考试、在线培训难题，拥有防作弊系统，支持试题乱序、试题保护、人脸识别等参数设置；致力于高质量完成培训、考试任务，麦塔10余年专注打造多学习场景、安全稳定易用的在线考试系统、在线培训系统，能为企业节省30%的学习费用！'
+          content: '青谷软件致力于为客户提供全方位的在线教育解决方案，独立开发拥有自主知识产权的SaaS在线考试系统和SaaS在线培训系统。实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松'
         },
         {
           name: 'keywords',
-          content: '考试系统,培训系统,答题系统,组卷系统,考试管理系统'
+          content: '考试系统,培训系统,试题系统,试题库软件,考试软件,培训软件,试卷系统,试题软件'
         },
-        /*  {
-            name: 'mobile-agent',
-            content: 'format=html5;url=https://m.mtavip.com'
-          },*/
         {
           name: 'bytedance-verification-code',
           content: 'EoTQ4NuK4pxkCu7efFJH'
@@ -522,11 +432,14 @@ export default {
     }
   },
   methods: {
+    onNeedSelect() {
+      this.show = true;
+    },
     onApplyBtnActive() {
       this.telDl = true;
     },
     onApplyBtnActiveH5() {
-      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: 'shouye',}});
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/',}});
     },
     clickBanner(data) {
       if (data.url) {
@@ -578,4 +491,124 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+
+.client-products-services {
+  .img-card:nth-child(3) {
+    background: #fafffc;
+  }
+  .img-card:nth-child(5) {
+    background: #fafffc;
+  }
+}
+
+
+.client-index-page {
+  .free-train-btn, .apply-btn {
+    margin-right: 16px;
+  }
+
+  .btn-groups {
+    margin-top: 48px;
+  }
+
+  @media (max-width: 768px) {
+    .btn-groups {
+      display: flex;
+      justify-content: center;
+      margin-top: 30px;
+    }
+  }
+
+}
+
+.client-container {
+  position: relative;
+}
+
+
+.banner-btn-groups {
+  position: absolute;
+  left: 0;
+  top: 406px;
+}
+
+.banner-btn-groups.btn-0 {
+  .free-train-btn {
+    background: #fff;
+    color: #93C751;
+    border-radius: 50px;
+  }
+
+  .online-information-btn {
+    background: #93C751;
+    color: #fff;
+    border-radius: 50px;
+    border-color: #fff;
+  }
+
+}
+
+.banner-btn-groups.btn-1 {
+
+  .free-train-btn {
+    background: #fff;
+    border-radius: 50px;
+    color: #40d486;
+  }
+
+  .online-information-btn {
+    background: #40d486;
+    color: #fff;
+    border-radius: 50px;
+    border-color: #fff;
+  }
+
+}
+
+.banner-btn-groups.btn-2 {
+  top: 444px;
+
+  .apply-btn {
+    background: #fff;
+    border-radius: 50px;
+    color: #2a846a;
+  }
+
+  .online-information-btn {
+    background: #2a8469;
+    color: #fff;
+    border-radius: 50px;
+    border-color: #fff;
+  }
+}
+
+.banner-btn-groups.btn-3 {
+  top: 470px;
+
+  .apply-btn {
+    background: #ffbb1a;
+    border-radius: 50px;
+    color: #fff;
+  }
+
+  .online-information-btn {
+    background: #8ec754;
+    color: #fff;
+    border-color: #fff;
+  }
+}
+
+.customer-img-box {
+  .customer-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    img {
+      width: 193px;
+      height: 63px;
+    }
+  }
+}
+</style>

pages/indexEducation.vue

@@ -1,175 +0,0 @@
-<template>
-  <div class="client-platform-page client-indexEducation-page">
-
-    <!-- “1+X”教育 banner栏 -->
-    <div class="client-platform-banner">
-      <div :style="{backgroundImage: `url(${require(`~/static/images/client/indexEducation/index-education-banner.jpg`)})`}" class="client-platform-banner"></div>
-      <!--<a rel="nofollow" class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a>-->
-      <a class="client-default-Btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2" style="display:inline-block;">申请方案</a>
-      <a rel="nofollow" class="client-default-Btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank" style="display:inline-block;">申请方案</a>
-      <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
-    </div>
-    <!--  1+x人才培养 -->
-    <div class="platform-products-services">
-      <h4 class="client-title">1+x人才培养</h4>
-      <ul>
-
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <img :src="curriculumResourcesImg1" alt="1+x人才培养" />
-              <div class="products-services-content">
-                <h5>职业教育“1+X”证书制度改革举措新导向!</h5>
-                <i></i>
-                <p>
-                  <span>1.提高人才培养质量、拓展就业本领</span><br>
-                  <span>2.创新人才培养模式，改革办学模式</span><br>
-                  <span>3.育训结合，克服职业教育普教化</span><br>
-                  <span>4.推进教师、教材、教法改革，快速匹配岗位和培训内容</span><br>
-                </p>
-                <div>
-                  <a class="client-default-Btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2" style="display:inline-block;">申请方案</a>
-                  <a rel="nofollow" class="client-default-Btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">申请方案</a>
-                  <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <h4 class="client-title">“1+X教育”职业培训平台</h4>
-              <img :src="curriculumResourcesImg2" alt="“1+X教育”职业培训平台" />
-              <div class="products-services-content">
-                <p>大连麦塔软件服务有限公司旗下的职教平台「1+X教育」，通过AI技术快速匹配岗位和培训内容，为院校提供职业学习配套，培养适合企业的人才的同时，也为院校学生参与考核，取得“1+X”职业技能等级证书提供有力支撑服务。</p>
-                <div>
-                  <a class="client-default-Btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2" style="display:inline-block;">申请方案</a>
-                  <a rel="nofollow" class="client-default-Btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">申请方案</a>
-                  <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <h4 class="client-title">职业教育痛点</h4>
-              <img :src="curriculumResourcesImg3" alt="职业教育痛点" />
-              <div class="products-services-content">
-                <p>
-                  <span>1.院校职业技术人才培养欠缺，缺乏人才技能评价机制</span><br>
-                  <span>2.职场竞争激烈，职业技能证书是个人能力评价、聘用、从业的重要凭证</span><br>
-                  <span>3.课程设置理论知识居多，教学方式单一，缺乏实训</span><br>
-                </p>
-                <div>
-                  <a class="client-default-Btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2" style="display:inline-block;">申请方案</a>
-                  <a rel="nofollow" class="client-default-Btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">申请方案</a>
-                  <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <h4 class="client-title">职业教育改革利器</h4>
-              <img :src="curriculumResourcesImg4" alt="职业教育改革利器" />
-              <div class="products-services-content">
-                <p>
-                  <span>1.为院校提供行业领域全覆盖的供“1+X”职业教育培训平台</span><br>
-                  <span>2.提供“教、学、训、研、测”育训结合的教学实训体系，一站式学习平台</span><br>
-                  <span>3.为提高人才培养质量，提升职业教育质量和学生就业能力，畅通技术技能人才成长通道，拓展职业院校学生就业创业本领打下奠基，真正做到“宽进严出”。</span>
-                </p>
-                <div>
-                  <a class="client-default-Btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2" style="display:inline-block;">申请方案</a>
-                  <a rel="nofollow" class="client-default-Btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">申请方案</a>
-                  <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:     'indexEducation',
-    layout:   'templateB',
-    async asyncData({ $axios,store }) {
-      // 设置选中菜单
-      store.commit('setActiveNav', '/indexEducation');
-
-
-      let [res1, res2] = await Promise.all([
-                                             await $axios.$post(`/home/banner/list`, { 'code': 3 }).then(res => {
-                                               return res;
-                                             }),
-                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0,'keyword':'培训' }).then(res => {
-                                               return res;
-                                             })
-                                           ]);
-      return {
-        bannerList: res1.data.data||[],
-        topCarousels: res2.data.data||[],
-
-      };
-    },
-    data() {
-      return {
-        curriculumResourcesImg1:  require(`~/static/images/client/indexEducation/index-education-img1.png`),
-        curriculumResourcesImg2:  require(`~/static/images/client/indexEducation/index-education-img2.png`),
-        curriculumResourcesImg3:  require(`~/static/images/client/indexEducation/index-education-img3.png`),
-        curriculumResourcesImg4:  require(`~/static/images/client/indexEducation/index-education-img4.png`),
-      };
-    },
-    head(){
-      return {
-        title: '1+X教育考试平台_1+X培训平台_1+X行业解决方案',
-        meta: [
-          {
-            name: 'keywords',
-            content: '1+X考试平台,1+X培训平台'
-          },
-          {
-            name:'description',
-            content:'麦塔为院校提供“1+X”培训平台，将职业技能实训融入到教学资源中，配套丰富的教学资源及精准的实训设施，为学生顺利取得“1+X”职业技能等级证书保驾护航。'
-          }
-        ],
-      }
-    },
-    computed: {},
-    methods:  {
-      goIntroductionPage(){
-        this.$router.push({ name: 'introduction' });
-      },
-      checkInfo(data) {
-        const opt = {
-          id: data.code,
-        };
-        this.$router.push({ name: 'news-id', params: opt });
-      },
-      clickBanner(data){
-        if(data){
-          window.open(data)
-        }
-      },
-    },
-    created() {
-
-    },
-    mounted() {
-    },
-    beforeDestroy() {
-    },
-  };
-</script>
-<style>
-
-</style>

pages/information.vue

@@ -1,80 +0,0 @@
-<template>
-  <!-- 信息产业-详情页 -->
-  <div class="client-information-page">
-
-    <!-- 信息产业banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=1"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 信息产业的发展现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">信息产业行业现状</h4>
-      <div class="client-container">
-        <p>互联网经济在中国GDP中占比持续攀升，业务重心向“盈利”为核心的网络游戏、网上交易、网络广告、网络教育、网络短信等产业转移，由于新兴应用层出不穷，所以信息业对新兴技术的工程人员需求量也在变大，未来势必将要求更高质量的产业融合发展和转型升级。</p>
-        <img :src="informationDevelopImg" alt="信息产业行业现状" />
-      </div>
-    </div>
-
-    <!-- 我们的系统为您改变了什么 -->
-    <div class="information-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container">
-        <div class="industrydetails-content">
-          <div class="change-content-left">
-            <h5>传统方式出现的问题</h5>
-            <ul>
-              <li><i></i><p>技术人员配备不到位、技术升级保障力度不够</p></li>
-              <li><i></i><p>网络发生故障时难以协调，错过第一时间报告，导致未能及时处理</p></li>
-              <li><i></i><p>信息安全、数据安全问题突出</p></li>
-              <li><i></i><p>信息审核不到位，网站质量评测难</p></li>
-            </ul>
-          </div>
-          <img :src="changeImg" alt="我们的系统为您改变了什么" />
-          <div class="change-content-right">
-            <h5>我们可以帮您解决的问题</h5>
-            <ul>
-              <li><i></i><p>围绕升级的核心技术设计教学需求活动</p></li>
-              <li><i></i><p>记录全部用户的操作轨迹，使系统修改有据可查，有利于网站的维护</p></li>
-              <li><i></i><p>利用在线安全培训，加强技术人员的安全意识，提高隐患的发现能力</p></li>
-              <li><i></i><p>加强审核人员的素质考核，有效保证网站质量管理</p></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-    export default {
-        name: 'information',
-        layout:     'templateB',
-      data() {
-        return {
-          // 发展现状img
-          informationDevelopImg:   require(`~/static/images/client/industrydetails/information-develop-img.png`),
-          // 我们的系统为您改变了什么 img
-          changeImg:   require(`~/static/images/client/industrydetails/information-change-img.png`),
-        }
-      },
-      head() {
-        return {
-          title: '信息产业考试系统_信息产业考核系统',
-          meta:  [
-            {
-              description:    '近年来我国互联网继续保持增长态势，上网人数和增长速度都为全世界瞩目，网络产业已经从过去的吸引眼球上逐渐转向以“盈利”为核心。',
-              keywords:    '信息产业考培系统',
-            },
-          ],
-        };
-      },
-    };
-</script>
-
-<style scoped>
-
-</style>

pages/introduction/index.vue

@@ -1,68 +1,102 @@
 <template>
   <div class="client-aboutUs-page">
     <!-- 关于我们banner栏 -->
-    <div class="aboutUs-banner">
-      <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
+      :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.jpg`)})`}"
+      class="client-platform-banner"></div>
 
     <!-- 公司简介 -->
     <div class="company-profile-box">
-      <img src="#" alt="">
-      <div class="client-container">
+      <div class=" client-container">
+        <div class="my-img mta-hidden-xs">
+          <i></i>
+        </div>
+        <div class="text-content">
           <h4>公司介绍</h4>
-          <p>大连青谷软件有限公司成立于2013年10月。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、智能化学系管理模式，让学系变得更轻松。</p>
+          <p>大连青谷软件有限公司成立于2013年10月。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。</p>
           <p>目前，青谷软件70%的员工拥有技术背景，这样可以保障我们在项目实施的各个环节（特别是售后服务），能第一时间为客户提供技术支持，让客户无后顾之忧。</p>
+        </div>
       </div>
     </div>
 
     <!-- 我们提供什么 -->
-    <div class="brand-introduction-box">
+    <div class="brand-introduction-box client-container">
       <h4>我们提供什么</h4>
       <ul>
         <li>
-          <i></i>
-          <span>在线考试系统租赁/采购</span>
+          <div @click="btnClick('https://www.qtavip.com/product/exam')">
+            <i class="mta-hidden-xs"></i>
+            <p>在线考试系统租赁/采购</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>在线培训系统租赁/采购</span>
+          <div @click="btnClick('https://www.qtavip.com/product/peixun')">
+            <i class="mta-hidden-xs"></i>
+            <p>在线培训系统租赁/采购</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>课件定制开发服务</span>
+          <div @click="btnClick('https://www.qtavip.com/product/courseCustom')">
+            <i class="mta-hidden-xs"></i>
+            <p>课件定制开发服务</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>行业通用类课程资源</span>
+          <div @click="btnClick('https://www.qtavip.com/product/courseResource')">
+            <i class="mta-hidden-xs"></i>
+            <p>行业通用类课程资源</p>
+          </div>
         </li>
       </ul>
     </div>
 
 
     <!-- 我么你始终专注教育系统研发，更懂用户需求 -->
-    <div class="corporate-culture-box">
+    <div class="corporate-culture-box client-container mta-hidden-xs">
       <h4>我们始终专注教育系统研发</h4>
       <ul>
-        <li><img src="#" alt=""></li>
-        <li><img src="#" alt=""></li>
-        <li><img src="#" alt=""></li>
-        <li><img src="#" alt=""></li>
+        <div :class="{next: nextList, prev: prevList}">
+          <li v-for="(img,index) in imgList" :key="index">
+            <div><img :src="img.url" alt="证书"></div>
+          </li>
+        </div>
       </ul>
+      <i class="img-btn-prev img-btn" @click="onPrev"></i>
+      <i class="img-btn-next img-btn" @click="onNext"></i>
     </div>
+    <div class="corporate-culture-box-h5 client-container mta-hidden-sm">
+      <h4>我们始终专注教育系统研发</h4>
+      <ul>
+        <li v-for="(img,index) in imgList" :key="index">
+          <img :src="img.url" alt="证书">
+        </li>
 
+      </ul>
+    </div>
 
     <!-- 地图 -->
-    <div class="client-container">
-      <div class="contact-us-box fn-clear">
-        <img src="#" alt="背景图">
-        <img src="#" alt="地图" />
+    <div class="contact-us-box mta-hidden-xs">
+      <div class="my-map">
+        <img :src="img2" alt="地图">
+        <div class="img-right">
+          <h3>联系我们</h3>
+          <p>咨询QQ：227551695</p>
+          <p>联系电话：400-0990-883</p>
+          <p>公司邮箱：service@llisoft.com</p>
+          <p>公司地址：大连市沙河口区数码路北段25号201室</p>
+          <i></i>
+        </div>
+      </div>
+    </div>
+    <div class="contact-us-box-h5 client-container mta-hidden-sm">
+      <div class="img-right-h5">
+        <h3>联系我们</h3>
+        <p>咨询QQ：227551695</p>
+        <p>联系电话：400-0990-883</p>
+        <p>公司邮箱：service@llisoft.com</p>
+        <p>公司地址：大连市沙河口区数码路北段25号201室</p>
       </div>
+      <img :src="img2" alt="地图">
     </div>
 
   </div>
@@ -71,49 +105,530 @@
 </template>
 
 <script>
-  import {BannerImgs} from "@/defaultConfig";
-
-  export default {
-    name:     'introduction',
-    layout:   'templateB',
-    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 || [],
-      }
+import {BannerImgs} from "@/defaultConfig";
+
+export default {
+  name: 'introduction',
+  layout: 'templateB',
+  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 {
+      imgList: [
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z126.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z127.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z128.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+        {
+          url: require("~/static/gangweiIcon/z125.png")
+        },
+      ],
+      prevList: true,
+      nextList: false,
+      img2: require('~/static/codeImage/ditu.png')
+    };
+  },
+  head() {
+    return {
+      title: '青谷软件公司简介',
+      meta: [
+        {
+          name: 'keywords',
+          content: '青谷软件公司简介'
+        },
+        {
+          name: 'description',
+          content: '大连青谷软件工程有限公司是专业的教育软件供应商。公司主营业务包括：中小学、高中、各大高校的教育软件产品、企业在线培训解决方案、在线考试软件产品，及相关平台服务等。目前，公司拥有办公基础软件研发、教育动漫产品研发、在线培训运营、数据测试、线上售后服务等事业部'
+        }
+      ],
+    }
+  },
+  methods: {
+    onPrev() {
+      this.prevList = true;
+      this.nextList = false;
     },
-    data() {
-      return {};
+    onNext() {
+      this.prevList = false;
+      this.nextList = true;
     },
-    head(){
-      return {
-        title: '麦塔考培系统_大连栋科软件工程有限公司',
-        meta: [
-          {
-            name: 'keywords',
-            content: '麦塔考试系统,麦塔培训系统'
-          },
-          {
-            name:'description',
-            content:'大连栋科软件工程有限公司是专业的教育软件与数字化资源服务供应商，创立于2007年，总部位于大连软件园。公司凭借成熟的项目研发和管理经验，致力于为客户提供全方位的在线教育解决方案，实现移动化、平台化、知识化、智能化学习管理模式，让学习变得更轻松。'
+    btnClick(data) {
+      window.location.href=data
+    }
+  }
+};
+</script>
+<style lang="scss">
+.company-profile-box {
+  margin-top: 250px;
+  display: flex;
+  justify-content: flex-start;
+  background: #fafafa;
+  height: 450px;
+  position: relative;
+
+  .client-container {
+    position: relative
+  }
+
+  .my-img {
+    width: 416px;
+    height: 560px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("~static/gangweiIcon/z120.png");
+    flex-shrink: 0;
+    position: absolute;
+    top: -55px;
+
+    i {
+      display: inline-block;
+      width: 188px;
+      height: 86px;
+      background-image: url("~static/gangweiIcon/z131.png");
+      margin: 238px 0 0 114px;
+    }
+  }
+
+  .text-content {
+    margin: 55px 0;
+    position: absolute;
+    top: -55px;
+    left: 560px;
+
+    h4 {
+      font-size: 30px;
+      text-align: left;
+      font-weight: 800;
+      color: #333;
+      margin-top: 90px;
+      position: relative;
+
+
+      &:before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        bottom: -10px;
+        left: 0;
+        width: 100px;
+        height: 3px;
+        background: #00b96b;
+      }
+    }
+
+    p {
+      margin: 40px 0 0 0;
+      color: #565656;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 24px;
+      width: 596px;
+    }
+  }
+}
+
+.brand-introduction-box {
+  h4 {
+    font-size: 30px;
+    text-align: center;
+    font-weight: 800;
+    color: #333;
+    margin-top: 180px;
+    margin-bottom: 150px;
+    position: relative;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+
+    li {
+      width: 50%;
+      padding: 20px;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      > div {
+        width: 100%;
+        height: 242px;
+        box-sizing: border-box;
+        background-size: contain;
+        background-position: center;
+        padding-left: 100px;
+        box-sizing: border-box;
+
+        i {
+          width: 148px;
+          height: 112px;
+          display: inline-block;
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: contain;
+          margin: 48px 11px 24px;
+        }
+
+        p {
+          width: 170px;
+          margin: 0;
+          font-size: 16px;
+          color: #fff;
+          font-weight: 800;
+          text-align: center;
+        }
+      }
+
+      &:nth-child(1) {
+
+        > div {
+          background-image: url("~static/gangweiIcon/z116.png");
+
+          i {
+            background-image: url("~static/gangweiIcon/z121.png");
           }
-        ],
+        }
       }
-    },
-    computed: {},
-    methods:  {},
-    created() {
 
-    },
-    mounted() {
-    },
-    beforeDestroy() {
-    },
-  };
-</script>
-<style>
+      &:nth-child(2) {
+        > div {
+          background-image: url("~static/gangweiIcon/z117.png");
+
+          i {
+            background-image: url("~static/gangweiIcon/z122.png");
+          }
+        }
+      }
+
+      &:nth-child(3) {
+        > div {
+          background-image: url("~static/gangweiIcon/z118.png");
+
+          i {
+            background-image: url("~static/gangweiIcon/z123.png");
+          }
+        }
+      }
+
+      &:nth-child(4) {
+        > div {
+          background-image: url("~static/gangweiIcon/z119.png");
+
+          i {
+            background-image: url("~static/gangweiIcon/z124.png");
+          }
+        }
+
+      }
+    }
+  }
+}
+
+.corporate-culture-box {
+  position: relative;
+  margin-bottom: 200px;
+
+  h4 {
+    font-size: 30px;
+    text-align: center;
+    font-weight: 800;
+    color: #333;
+    margin-top: 258px;
+    margin-bottom: 150px;
+  }
+
+  ul {
+    position: relative;
+    overflow: hidden;
+
+    > div {
+      display: flex;
+      box-sizing: border-box;
+      transition: all 0.5s ease;
+
+
+      &.next {
+        transform: translate(-100%);
+      }
+
+      &.prev {
+        transform: translate(0);
+      }
+    }
+
+    li {
+      width: 25%;
+      margin: 0 auto;
+      text-align: center;
+      flex-shrink: 0;
+      box-sizing: border-box;
+
+      > div {
+        border: 1px solid #00B96B;
+        border-radius: 6px;
+        padding: 28px 43px;
+        margin: 0 12px;
+        box-sizing: border-box;
+        min-height: 344px;
+      }
+
+      img {
+        max-width: 100%;
+      }
+    }
+  }
+
+  .img-btn {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .img-btn-prev {
+    position: absolute;
+    left: -115px;
+    top: 62%;
+    background-image: url('~static/gangweiIcon/z129.png');
+    background-size: contain;
+    background-position: center;
+  }
+
+  .img-btn-next {
+    position: absolute;
+    right: -115px;
+    top: 62%;
+    background-image: url('~static/gangweiIcon/z130.png');
+    background-size: contain;
+    background-position: center;
+  }
+}
+
+.corporate-culture-box-h5 {
+  h4 {
+    font-size: 18px;
+    text-align: center;
+    font-weight: 800;
+    color: #333;
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+
+    li {
+      width: 50%;
+      padding: 20px;
+      box-sizing: border-box;
+
+      img {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+
+.contact-us-box {
+  width: 100%;
+  height: 498px;
+  background-image: url("~static/gangweiIcon/z132.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-bottom: 260px;
+  position: relative;
+
+  .my-map {
+    position: absolute;
+    top: 246px;
+    left: 50%;
+    width: 1260px;
+    height: 346px;
+    transform: translate(-50%);
+    display: flex;
+
+    img {
+      flex: 1;
+      height: 100%;
+    }
+
+    .img-right {
+      background: linear-gradient(0deg, #67cf8a 0%, #8ec754 100%);
+      flex-shrink: 0;
+      width: 400px;
+      height: 100%;
+      padding: 83px 43px 70px;
+      box-sizing: border-box;
+
+      h3 {
+        font-size: 24px;
+        font-weight: 800;
+        color: #fff;
+        margin-bottom: 24px;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 400;
+        color: #fff;
+        margin-bottom: 20px;
+      }
+
+      i {
+        width: 68px;
+        height: 3px;
+        display: block;
+        background: #f7f8fc;
+      }
+
+    }
+  }
+
+}
+
+.contact-us-box-h5 {
+  margin-top: 20px;
+  margin-bottom: 30px;
+
+  .img-right-h5 {
+    h3 {
+      font-size: 18px;
+      font-weight: 800;
+      margin-bottom: 20px;
+      text-align: center;
+    }
+
+    p {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.client-platform-banner {
+  height: 510px;
+  background-color: #fff;
+  background-position-x: center;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 768px) {
+  .company-profile-box {
+    margin-top: 20px;
+    height: 300px;
+
+    .text-content {
+      margin: 0;
+      left: 20px;
+      top: 0;
+      right: 20px;
+
+      h4 {
+        margin-top: 20px;
+        text-align: center;
+        font-size: 24px;
+
+        &:before {
+          left: 50%;
+          transform: translate(-50%);
+        }
+      }
+
+      p {
+        font-size: 14px;
+        width: 100%;
+        text-align: justify;
+      }
+    }
+
+    .client-container {
+      width: 1260px;
+    }
+  }
+
+  .brand-introduction-box {
+    h4 {
+      font-size: 18px;
+      text-align: center;
+      font-weight: 800;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 10%;
+    }
+
+    p {
+      font-size: 14px;
+    }
+
+    ul {
+      li {
+        width: 100%;
+
+        > div {
+          width: 100%;
+          height: 120px;
+          box-sizing: border-box;
+          background-size: contain;
+          background-position: center;
+          background-repeat: no-repeat;
+
+          p {
+            width: 100%;
+            line-height: 120px;
+            margin: 0;
+            font-size: 14px;
+            color: #fff;
+            font-weight: 500;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+
+
+  .client-platform-banner {
+    height: 150px;
+    background-size: cover;
+  }
+
 
+}
 </style>

pages/makeCourse.vue

@@ -1,327 +0,0 @@
-<template>
-  <!-- 7天教你打造企业微课制作 -->
-  <div class="client-platform-page client-makeCourse-page">
-    <!--  banner栏 -->
-    <div class="client-platform-banner">
-      <div :style="{backgroundImage: `url(${require(`~/static/images/client/makeCourse/make-course-banner.png`)})`}" class="client-platform-banner"></div>
-      <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" class="free-trial-default-btn">在线咨询</a>
-    </div>
-
-    <!-- 图片标题-->
-    <h2 class="make-course-h2">
-      <img :src="makeCourseImg" alt="快速掌握知识萃取的方法，形成有价值、易懂易学的高质量学习资源" class="mta-hidden-xs">
-      <img :src="makeCourseSjImg" alt="快速掌握知识萃取的方法，形成有价值、易懂易学的高质量学习资源" class="mta-hidden-sm">
-    </h2>
-
-    <!-- 介绍 -->
-        <div class="client-container fn-clear">
-          <div class="makeCourse-introduce-box">
-            <img :src="introduceImg1" alt="课程内容通俗易懂，零基础也能学" />
-            <dl>
-              <h3 class="make-course-title course-blue-title">课程内容通俗易懂，零基础也能学</h3>
-              <dt>商业讲师、企业内训师、课程开发人员、基层管理者、岗位精英</dt>
-              <dd>
-                <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank" class="mta-hidden-xs">
-                <img :src="btnImg" alt="在线咨询"></a>
-                <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" class="client-default-Btn mta-hidden-sm">在线咨询</a>
-              </dd>
-            </dl>
-          </div>
-        </div>
-        <div class="client-container fn-clear">
-          <div class="makeCourse-introduce-box contrary-introduce-box">
-            <img :src="introduceImg2" alt="为你定制高效学习方案" />
-            <dl>
-              <h3 class="make-course-title course-blue-title">为你定制高效学习方案</h3>
-              <dt>课程不限次回看：不用担心没有时间学习</dt>
-              <dt>实用性强：理论讲解+实操演示</dt>
-              <dt>课后一对一答疑：免去你对学不会的瞎操心</dt>
-              <dt>一课一练：课上学、课后练，老师在线点评作品</dt>
-              <dd>
-                <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank" class="mta-hidden-xs">
-                  <img :src="btnImg" alt="在线咨询"></a>
-                <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" class="client-default-Btn mta-hidden-sm">在线咨询</a>
-              </dd>
-            </dl>
-          </div>
-        </div>
-
-    <!-- 课程目标 -->
-    <div class="course-target-box">
-      <div class="client-container">
-        <h3 class="make-course-title">课程目标</h3>
-        <ul class="target_icon">
-          <li>
-            <div>
-              <img :src="courseTargetImg1" alt="微课思维">
-              <span>微课思维</span>
-            </div>
-          </li>
-          <li>
-            <div>
-              <img :src="courseTargetImg2" alt="微课设计">
-              <span>微课设计</span>
-            </div>
-          </li>
-          <li>
-            <div>
-              <img :src="courseTargetImg3" alt="微课开发">
-              <span>微课开发</span>
-            </div>
-          </li>
-          <li>
-            <div>
-              <img :src="courseTargetImg4" alt="软件使用">
-              <span>软件使用</span>
-            </div>
-          </li>
-          <li>
-            <div>
-              <img :src="courseTargetImg5" alt="授课技巧">
-              <span>授课技巧</span>
-            </div>
-          </li>
-        </ul>
-        <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank" class="btn-big-box mta-hidden-xs">
-          <img :src="btnBigImg" alt="">
-        </a>
-        <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" class="client-default-Btn mta-hidden-sm">在线咨询</a>
-      </div>
-
-    </div>
-
-    <!-- 培训讲师介绍 -->
-    <div class="px-teacher-box">
-        <div class="client-container">
-          <h3 class="make-course-title course-blue-title">培训讲师介绍</h3>
-          <div class="teacher-content-box fn-clear">
-            <div class="teacher-img-box"><img :src="pxTeacherImg"><span>诺雪</span></div>
-            <p>麦塔软件数字内容事业部部长，艺术设计专业，企业微课高级导师。13年企业在线课程及微课制作经验；先后为数十家国内大型企业担任课程规划 咨询顾问。长期从事在线课程研发及企业人才培养工作，具备完善的在线课程制作培训管理理论体系和培训实战管理经验。</p>
-          </div>
-          <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank" class="btn-big-box mta-hidden-xs">
-            <img :src="btnBigImg" alt="">
-          </a>
-          <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" class="client-default-Btn mta-hidden-sm">在线咨询</a>
-        </div>
-     </div>
-
-    <!-- 课程体系 -->
-    <div class="course-system-box">
-      <div class="client-container">
-        <h3 class="make-course-title course-blue-title">课程体系</h3>
-        <img :src="courseSystemImg1" alt="" class="course-system-img mta-hidden-xs">
-        <img :src="courseSystemImg2" alt="" class="mta-hidden-xs">
-        <img :src="courseSystemImg3" alt="" class="mta-hidden-sm">
-        <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank" class="btn-big-box mta-hidden-xs">
-          <img :src="btnBigImg" alt="">
-        </a>
-        <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" class="client-default-Btn mta-hidden-sm">在线咨询</a>
-      </div>
-    </div>
-
-    <!-- 微课设计 -->
-    <div class="course-learn-box">
-      <div class="client-container">
-        <h3 class="make-course-title course-blue-title">13载企业级微课设计，用专业和实力说话</h3>
-        <ul class="learn-box-list">
-          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce35f5f5285890792886075881/v.f30.mp4"></a><div><span><img :src="courseVideoImg1" alt="微课动画"><i @click="playVideo(0)"></i></span><p>微课动画</p></div></li>
-          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f121cdd5285890792886151677/v.f30.mp4"></a><div><span><img :src="courseVideoImg2" alt="故事情节"><i @click="playVideo(1)"></i></span><p>故事情节</p></div></li>
-          <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4"></a><div><span><img :src="courseVideoImg3" alt="儿歌动画"><i @click="playVideo(2)"></i></span><p>儿歌动画</p></div></li>
-          <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9a582fcf5285890793118274335/v.f30.mp4"></a><div><span><img :src="courseVideoImg4" alt="PPT微课"><i @click="playVideo(3)"></i></span><p>PPT微课</p></div></li>
-          <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ee031e15285890792886129559/v.f30.mp4"></a><div><span><img :src="courseVideoImg5" alt="图文类微课"><i @click="playVideo(4)"></i></span><p>图文类微课</p></div></li>
-          <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9c2e210d5285890793118303376/v.f30.mp4"></a><div><span><img :src="courseVideoImg6" alt="情景类微课"><i @click="playVideo(5)"></i></span><p>情景类微课</p></div></li>
-          <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/650aa7e15285890792885993830/v.f30.mp4"></a><div><span><img :src="courseVideoImg7" alt="H5微课"><i @click="playVideo(6)"></i></span><p>H5微课</p></div></li>
-          <li class="mta-hidden-xs"><a href="https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4"></a><div><span><img :src="courseVideoImg8" alt="视频类微课"><i @click="playVideo(7)"></i></span><p>视频类微课</p></div></li>
-          <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f25da7a5285890792886164670/v.f30.mp4"></a><div><span><img :src="courseVideoImg9" alt="H5长图类"><i @click="playVideo(8)"></i></span><p>H5长图类</p></div></li>
-        </ul>
-        <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank" class="btn-big-box mta-hidden-xs">
-          <img :src="btnBigImg" alt="">
-        </a>
-        <a href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" class="client-default-Btn mta-hidden-sm">在线咨询</a>
-      </div>
-    </div>
-
-    <!-- 报名学习 -->
-    <div class="sign-study-box">
-      <div class="client-container">
-        <div class="study-gj-box">
-          <div class="sign-study-content">
-            <el-input v-model="phoneNumber" placeholder="请输入手机号"></el-input>
-            <el-button type="danger" @click="toSignbtn" :disabled="!exportDataStatus">立即报名</el-button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--  视频播放弹窗 -->
-    <el-dialog
-      :title="title"
-      :visible.sync="videoDialogFlag"
-      @close="closeVideoDialog"
-      class="course-video-dialog"
-      center>
-      <video controls :src="source" class="course-video-box"></video>
-      <p>{{footerText}}</p>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:     'makeCourse',
-    layout:   'templateB',
-    head(){
-      return {
-        title: '7天教你打造企业微课制作',
-      }
-    },
-    data() {
-      return {
-        makeCourseImg:  require(`~/static/images/client/makeCourse/makeCourse-h2-text.png`),
-        makeCourseSjImg:  require(`~/static/images/client/makeCourse/makeCourse-h2-sjText.png`),
-        introduceImg1:  require(`~/static/images/client/makeCourse/introduce-img1.png`),
-        introduceImg2:  require(`~/static/images/client/makeCourse/introduce-img2.png`),
-        btnImg:  require(`~/static/images/client/makeCourse/content_button.png`),
-        btnBigImg:  require(`~/static/images/client/makeCourse/course-button-img.png`),
-        courseTargetImg1:  require(`~/static/images/client/makeCourse/course-target-img1.png`),
-        courseTargetImg2:  require(`~/static/images/client/makeCourse/course-target-img2.png`),
-        courseTargetImg3:  require(`~/static/images/client/makeCourse/course-target-img3.png`),
-        courseTargetImg4:  require(`~/static/images/client/makeCourse/course-target-img4.png`),
-        courseTargetImg5:  require(`~/static/images/client/makeCourse/course-target-img5.png`),
-        pxTeacherImg:  require(`~/static/images/client/makeCourse/px-teacher-img.png`),
-        courseSystemImg1:  require(`~/static/images/client/makeCourse/course-system-img1.png`),
-        courseSystemImg2:  require(`~/static/images/client/makeCourse/course-system-img2.png`),
-        courseSystemImg3:  require(`~/static/images/client/makeCourse/course-system-img3.png`),
-        phoneNumber:'',// 手机号
-        exportDataStatus:   true,// 按钮禁用
-        countdown:          10,// 十秒倒计时
-        // 13载企业级微课设计，用专业和实力说话
-        videoDialogFlag:false,
-        title:'',
-        source:'',
-        footerText:'',
-        videoArray:[
-          // 1-3
-          {
-            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/113211bf-1747089269d-0006-732a-c93-687b7.mp4',
-            fotterText:'以情景动画形式丰富多样，游戏化教学和精美动画相结合',
-            title:'微课动画',
-          },
-          {
-            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/13f16002-1747088d2a9-0006-732a-c93-687b7.mp4',
-            fotterText:'是教师在课堂上根据所讲授的内容穿插些相关的简明、短小故事、以说明注解强调所讲内容',
-            title:'故事情节',
-          },
-          {
-            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/159fac7b-17470879c88-0006-732a-c93-687b7.mp4',
-            fotterText:'以经典儿歌结合动画表达出课程要讲授的内容',
-            title:'儿歌动画',
-          },
-          // 4-6
-          {
-            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/ef9b83b-17470860d19-0006-732a-c93-687b7.mp4',
-            fotterText:'主要是以教师根据教学内容PPT进行假想授课',
-            title:'PPT微课',
-          },
-          {
-            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/a262a7b-174708aa838-0006-732a-c93-687b7.mp4',
-            fotterText:'主要以图片的形式表现，图片有手绘原素相结合，更加明确的展示了课程的内容',
-            title:'图文类微课',
-          },
-          {
-            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1eb213bd-17470897778-0006-732a-c93-687b7.mp4',
-            fotterText:'以故事情景引出产品内容的介绍',
-            title:'情景类微课',
-          },
-          // 7-9
-          {
-            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/13a4929d-17470860cf9-0006-732a-c93-687b7.mp4',
-            fotterText:'指页面内可以包含图片、链接，甚至音乐、程序等非文字元素互动教学',
-            title:'H5微课',
-          },
-          {
-            url:'https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4',
-            fotterText:'以简短视频的形式讲授一两个知识点，没有复杂的课程体',
-            title:'视频类微课',
-          },
-          {
-            url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/4f1c04ef-174708abedf-0006-732a-c93-687b7.mp4',
-            fotterText:'是通过图片发布文字信息的一种形式',
-            title:'H5长图类',
-          },
-          ],
-        // 视频列表图片
-        courseVideoImg1:  require(`~/static/images/client/course/course-video-img18.png`),
-        courseVideoImg2:  require(`~/static/images/client/course/course-video-img17.png`),
-        courseVideoImg3:  require(`~/static/images/client/course/course-video-img16.png`),
-        courseVideoImg4:  require(`~/static/images/client/course/course-video-img12.png`),
-        courseVideoImg5:  require(`~/static/images/client/course/course-video-img11.png`),
-        courseVideoImg6:  require(`~/static/images/client/course/course-video-img10.png`),
-        courseVideoImg7:  require(`~/static/images/client/course/course-video-img9.png`),
-        courseVideoImg8:  require(`~/static/images/client/course/course-video-img8.png`),
-        courseVideoImg9:  require(`~/static/images/client/course/course-video-img9.png`),
-
-      };
-    },
-    computed: {},
-    methods:  {
-      // 播放视频
-      playVideo(index){
-        this.videoDialogFlag = true
-        this.source = this.videoArray[index].url
-        this.footerText = this.videoArray[index].fotterText
-        this.title = this.videoArray[index].title
-      },
-      closeVideoDialog(){
-
-        this.videoDialogFlag = false;
-        this.source = '';
-        this.footerText = '';
-        this.title = '';
-      },
-
-      // 报名
-      toSignbtn(){
-        let reg = /^1[0-9]{10}$/
-        if (this.phoneNumber == '' || this.phoneNumber.length <= 10 || !reg.test(this.phoneNumber)) {
-          this.$message.error('请输入正确的手机号');
-        }else{
-          this.$axios.$post('/weike/add',{phone:this.phoneNumber }).then(res=>{
-            if (res.code === 0 && res.data) {
-              this.$message.success('报名成功');
-              this.setTime();
-            } else {
-              this.$message.error('报名失败');
-            }
-          });
-        }
-      },
-      // 10秒计时器 author: Wxy date: 2019/11/27
-      setTime() {
-        if (this.countdown === 0) {
-          this.countdown = 10;
-          this.exportDataStatus = true;
-        } else {
-          this.countdown--;
-          this.exportDataStatus = false;
-
-          if (this.timer) {
-            clearTimeout(this.timer);
-          }
-          this.timer = setTimeout(() => {
-            this.setTime();
-          }, 1000);
-        }
-      },
-    },
-    created() {
-
-    },
-    mounted() {
-    },
-    beforeDestroy() {
-    },
-  };
-</script>
-<style>
-
-</style>

pages/medical.vue

@@ -1,90 +0,0 @@
-<template>
-  <!-- 医疗卫生-详情页 -->
-  <div class="client-medical-page">
-
-    <!-- 医疗卫生banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2"
-         target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 医疗卫生的发展现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">医疗行业现状</h4>
-      <div class="client-container">
-        <p>
-          随着现代医学模式的转变和医疗需求的变化，医疗的知识面变得越来越宽泛，医务人员的素质、技术服务水平、设施环境条件、医疗费用高低、管理水平都被纳入了考核标准，还有很多专业考试项目，如医疗工作者的执业医师资格考试，护士执业资格考试，卫生专业技术资格考试，全国各级医院日常进行的医护人员招聘考试，“三基”、“三严”考试等。</p>
-        <img :src="developImg" alt="医疗行业现状"/>
-      </div>
-    </div>
-
-    <!-- 使用我们的系统，这些问题都能迎刃而解 -->
-    <div class="medical-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container">
-        <div class="industrydetails-content mt48">
-          <div class="change-content-left">
-            <h5>传统方式可能会出现的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>传统线下纸考费时，费力，模拟考试难，错题归纳麻烦</p></li>
-              <li><i></i>
-                <p>只能在医院教室等固定的地点进行练习和学习</p></li>
-              <li><i></i>
-                <p>医院教室空间有限，只能组织一小部分人进行培训听课，传播面小</p></li>
-              <li><i></i>
-                <p>无法留存住有用的、有价值的提问和回答，给其他学习者提供参考</p></li>
-            </ul>
-          </div>
-          <div class="change-content-right">
-            <h5>我们可以帮您解决的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>建设专业在线考试机制，课下练习、模拟考试错题直接形成错题库</p></li>
-              <li><i></i>
-                <p>线上课堂，手机、PC都能学习和做课后练习，无缝对接</p></li>
-              <li><i></i>
-                <p>形成高效的自学途径，不再限制学习人数，整体提升职业素质技能</p></li>
-              <li><i></i>
-                <p>出题、组卷、考试、评分、成绩分析流程化智能管理</p></li>
-              <li><i></i>
-                <p>互动问答形成专门模块，留存互动解答数据，只要搜索关键字就能快速找到答案</p></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-  export default {
-    name:   'medical',
-    layout: 'templateB',
-    data() {
-      return {
-        // 发展现状img
-        developImg: require(`~/static/images/client/industrydetails/medical-develop-img.png`),
-      };
-    },
-    head() {
-      return {
-        title: '医疗培训系统_医学培训系统_医疗三基三严培训系统',
-        meta:  [
-          {
-            description: '医学类考试种类繁多，如医疗工作者的执业医师资格考试，护士执业资格考试，卫生专业技术资格考试，全国各级医院日常进行的医护人员招聘考试，“三基”、“三严”考试，全国各级医学教育机构，如医学院，卫校，护校的本科，研究生，大中专教育培训考试等.',
-            keywords:    '三基三严培训系统,三基三严考试系统',
-          },
-        ],
-      };
-    },
-  };
-</script>
-
-<style scoped>
-
-</style>

pages/news/_id.vue

@@ -7,10 +7,12 @@
       <!--行业资讯详情-->
       <div class="client-details-wrap">
         <h1>{{infoData.title}}</h1>
-        <p class="details-visits-box"><i></i><span>{{infoData.startTime}}</span><i type="visits"></i><span>{{infoData.visits}}</span>
+        <p class="details-visits-box"><span style="margin-right:10px;">发布时间：</span><span>{{infoData.startTime}}</span><i type="eyes"></i><span>{{infoData.visits}}</span>
         </p>
         <div class="client-content-box" v-html="infoData.content"></div>
-        <div class="client-link-json">
+        <!--    关键字    -->
+        <div class="client-link-json" v-if="linkJson.length">
+          <span>关键词：</span>
           <a :href="item.url" v-for="item in linkJson">{{item.text}}</a>
         </div>
         <div class="client-details-pagination">
@@ -27,14 +29,12 @@
 
       <!-- 最新新闻 -->
       <div class="latest-news-box mta-hidden-xs">
-        <h4>最新新闻</h4>
+        <h4>近期推荐</h4>
         <ul class="latest-news-list">
           <li v-for="(item, index) in newestData" :key="index">
             <a :href="`${baseUrl}/news/${item.code}`">
-              <span @click.prevent="changeNews(item.code)" :title="item.title">{{item.title}}</span>
+             <span> {{changeDate(item.startTime)}} </span> <span @click.prevent="changeNews(item.code)" :title="item.title">{{item.title}}</span>
             </a>
-            <p class="details-visits-box"><i></i><span>{{item.startTime}}</span><i type="visits"></i><span style="margin-right: 0">{{item.visits}}</span>
-            </p>
           </li>
         </ul>
       </div>
@@ -91,12 +91,78 @@
       ...mapGetters(['getBaseUrl']),
     },
     methods:  {
+      changeDate(myDate) {
+        const result = new Date(myDate);
+        const curMonth = (result.getMonth()+1).toString().padStart(2,'0');
+        const curDay = result.getDate().toString().padStart(2,'0');
+        return `${curMonth}-${curDay}`
+      },
       changeNews(id) {
         this.$router.push({ name: 'news-id', params: { id } });
       },
     },
   };
 </script>
-<style>
+<style lang="scss" scoped>
+.client-link-json {
+  margin-bottom: 10px;
+
+  span {
+    color: #333;
+    display: inline-block;
+    margin-left: 10px;
+    font-weight: 800;
+    font-size: 14px;
+  }
+
+  a {
+    color: #00b96b;
+    display: inline-block;
+    margin-right: 10px;
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+}
+
+.client-details-page div.latest-news-box {
+  h4 {
+    border-left: 3px solid #00b96b;
+    padding-left: 10px;
+  }
+}
+
+i[type='eyes'] {
+  background-image: url("~static/gangweiIcon/z147.png");
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.client-details-page .client-details-wrap .client-details-pagination a {
+  color: #2C3E50;
+
+  &:hover {
+    color: #00b96b;
+  }
+
+  @media (max-width: 768px) {
+    color: #2C3E50;
+    border-color: #2C3E50;
+  }
+}
+
+.client-details-wrap {
+  h1 {
+    font-size: 32px;
+    color: #333;
+    font-weight: 500;
+  }
 
+  @media (max-width: 768px) {
+    h1 {
+      font-size: 18px;
+    }
+  }
+}
 </style>

pages/news/index.vue

@@ -5,7 +5,16 @@
         <img  @click="clickBanner(bannerList[0].url)" :src="bannerList[0].pic" alt="新闻资讯">
     </div>
     <!-- 新闻资讯 -->
-    <ul class="platform-menu-ul">
+    <ul class="platform-menu-ul2 mta-hidden-xs">
+      <li style="cursor: pointer"
+          :class="{'active':activeIndex===index}"
+          @click="btnClick(item,index)"
+          :key="index"
+          v-for="(item,index) in newsClassifyData">
+        {{item.name}}
+      </li>
+    </ul>
+    <ul class="platform-menu-ul mta-hidden-sm">
       <li style="cursor: pointer"
           :class="{'active':activeIndex===index}"
           @click="btnClick(item,index)"
@@ -43,14 +52,6 @@
         </el-pagination>
       </div>
     </div>
-
-    <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
-
   </div>
 </template>
 
@@ -62,7 +63,7 @@
     name:       'news',
     layout:     'templateB',
     components: {
-      NewList,
+      NewList
     },
     async asyncData({ $axios, store }) {
       // 设置选中菜单
@@ -84,7 +85,7 @@
 
 
         let [res1] = await Promise.all([
-                                               await $axios.$post(`/home/banner/list`, { 'code': 5 }).then(res => {
+                                               await $axios.$post(`/home/banner/list`, { 'code': 17 }).then(res => {
                                                  return res;
                                                }),
                                              ]);
@@ -124,15 +125,15 @@
     },
     head(){
       return {
-        title: '考试系统案例_培训系统案例',
+        title: '线上考试培训行业资讯',
         meta: [
           {
             name: 'keywords',
-            content: '麦塔案例'
+            content: '在线考试系统_在线培训系统'
           },
           {
             name:'description',
-            content:'麦塔品牌诞生于2009年，公司创始团队多年来一直深耕在线教育领域，积累了丰富的行业经验。研发团队集结了来自互联网、科技、教育等多个领域专家级研发工程师，率先实现了移动化、平台化、知识化、智能化的学习管理模式。'
+            content:'在线考试培训行业实时新闻资讯，关注行业动态，努力研发更智能在线考试系统，满足客户需求。'
           }
         ],
       }
@@ -171,6 +172,53 @@
     }
   };
 </script>
-<style>
+<style lang="scss" scoped>
+.platform-menu-ul2 {
+  margin:  110px auto 90px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -28px;
+    width: 500px;
+    height: 1px;
+    background-color: #7CC659;
+  }
+
+
+  li {
+    font-size: 30px;
+    font-weight: 800;
+    color: #9C9C9C;
+    margin-right: 190px;
+
+    &.active {
+      color: #333;
+      position: relative;
+
+      &:after {
+        content: '';
+        width: 100%;
+        position: absolute;
+        bottom: -28px;
+        left: 0;
+        height: 3px;
+        background-color: #00b96b;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  @media (max-width: 768px) {
+    &:after {width: 50%;}
 
+  }
+}
 </style>

pages/product/caiWuGuanLi.vue

@@ -5,60 +5,30 @@
       <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 class="client-caiwu-text client-container">
       财务部主要负责企业的财务管理，主要只能是在本企业一定的整体目标下，
       关于资本的购置，资本的融通和经营中现金流量，以及利润分配的管理。
     </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>
+      <!--  岗位职责  -->
+      <gangwei-list label="岗位职责" :list="gangwei" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
   </div>
 </template>
 
@@ -67,14 +37,18 @@ 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";
+import gangweiList from "@/components/common/layout/desComp/gangweiList";
+import {BannerImgs, caiwuguanli} from "~/defaultConfig";
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
+
 /**
  * @ 产品与服务 -> 课程资源 -> 财务管理
  */
 export default {
   name: "professionalQuality",
-  layout:   'templateB',
-  head(){
+  layout: 'templateB',
+  head() {
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
       meta: [
@@ -83,8 +57,8 @@ export default {
           content: '考试平台,试卷系统,试卷软件'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '青谷考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
@@ -99,8 +73,9 @@ export default {
     }
   },
   components: {
-    mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn},
+    mtaTable, videoDialog,applicationDialog,applyBtn,
+    freeTrialBtn, onlineInformationBtn, gangweiList
+  },
   data() {
     return {
       tableConfig: [
@@ -119,67 +94,149 @@ export default {
       ],
       tableData: [
         {
-          name: '人际沟通： 如何更好地表达自己',
-          shikanUrl: 'https://1111',
+          name: '读懂现金流量表',
+          shikanUrl: 'https://spdb.mtavip.com/1c1790e6076e481eb6d7f432c1e26241/68e9bb9160d94676837652e031b320af-e8c28036107973b3f30f23c87b318179-fd.mp4',
+          hangye: '全行业',
+          renqun: '财务专员'
+        },
+        {
+          name: '手把手教你编制财务报表',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '财务专员'
+        },
+        {
+          name: '合计准则解读与应用',
+          shikanUrl: '',
           hangye: '全行业',
-          renqun: '职场新人'
+          renqun: '财务专员'
         },
         {
-          name: '如何向领导汇报行业',
+          name: '外汇知识(中国人民银行通用课程)',
           shikanUrl: '',
           hangye: '全行业',
-          renqun: '职场新人'
+          renqun: '财务专员'
         },
         {
-          name: '职场生活游刃有余',
+          name: '企业工商税务注册变更那些事',
           shikanUrl: '',
           hangye: '全行业',
-          renqun: '职场新人'
+          renqun: '财务经理'
         },
         {
-          name: '个人形象管理',
+          name: '企业赊账与风险控制',
           shikanUrl: '',
           hangye: '全行业',
-          renqun: '职场新人'
+          renqun: '财务经理'
         },
         {
-          name: '高效沟通',
+          name: '财务分析：从重点科目分析开始',
           shikanUrl: '',
           hangye: '全行业',
-          renqun: '职场新人'
+          renqun: '财务经理'
         },
         {
-          name: '如何向领导汇报行业',
+          name: '企业资本运营操作实务',
           shikanUrl: '',
           hangye: '全行业',
-          renqun: '职场新人'
+          renqun: '财务经理'
         },
         {
-          name: '如何向领导汇报行业',
+          name: '高效主持会议',
           shikanUrl: '',
           hangye: '全行业',
-          renqun: '职场新人'
+          renqun: '财务经理'
         },
         {
-          name: '如何向领导汇报行业',
+          name: '企业运营成本控制',
           shikanUrl: '',
           hangye: '全行业',
-          renqun: '职场新人'
+          renqun: '财务经理'
         },
       ],
       curVideo: '',
       visible: false,
+      telDl: false,
+    }
+  },
+  computed: {
+    gangwei() {
+      return caiwuguanli
     }
   },
   methods: {
     shiKan({url}) {
       this.visible = true;
       this.curVideo = url;
-    }
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/caiWuGuanLi',}});
+    },
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.client-caiwu-text {
+  width: 800px;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 48px;
+  color: #565656;
+  text-align: center;
+  margin-top: 150px;
+  padding: 100px;
+  border-radius: 10px;
+  background-image: url("~static/productImage/p43.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.platform-course-list {
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 68px;
+  }
+
+}
+
+
+@media (max-width: 768px) {
+
+  .client-caiwu-text {
+    width: 80%;
+    font-size: 12px;
+    font-weight: 800;
+    line-height: 1.5;
+    color: #565656;
+    text-align: center;
+    margin-top: 5%;
+    margin-bottom: 15%;
+    border: none;
+    padding: 0;
+    background: none;
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 10%;
+      margin-top: 15%;
+    }
+  }
+
+}
 
 </style>

pages/product/chanPinYunYing.vue

@@ -5,72 +5,31 @@
       <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>
+    <gangwei-list label="岗位职责" :list="gangwei" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>
 
     <!--  能力提升  -->
-    <div class="client-nengli-box">
+    <div class="client-nengli-box client-container">
       <h4>能力提升</h4>
-      <img src="#" alt="能力提升">
+      <img :src="img1" alt="能力提升">
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn/>
       </div>
     </div>
 
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
+
   </div>
 </template>
 
@@ -79,14 +38,18 @@ 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";
+import gangweiList from "@/components/common/layout/desComp/gangweiList";
+import {BannerImgs, chanpinyunying} from "~/defaultConfig";
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
+
 /**
  * @ 产品与服务 -> 课程资源 -> 产品运营
  */
 export default {
   name: "professionalQuality",
-  layout:   'templateB',
-  head(){
+  layout: 'templateB',
+  head() {
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
       meta: [
@@ -95,8 +58,8 @@ export default {
           content: '考试平台,试卷系统,试卷软件'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '青谷考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
@@ -111,8 +74,9 @@ export default {
     }
   },
   components: {
-    mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn},
+    mtaTable, videoDialog, applicationDialog, applyBtn,
+    freeTrialBtn, onlineInformationBtn, gangweiList
+  },
   data() {
     return {
       tableConfig: [
@@ -132,7 +96,7 @@ export default {
       tableData: [
         {
           name: '助你获得客户资源（运营实战课）',
-          shikanUrl: 'https://1111',
+          shikanUrl: 'https://spdb.mtavip.com/c708e29d83f842ec9cd6a11ffb831559/d6fb5cc7893f4405b937fbe99c5080f4-df942531e5deaa288ddd098af1d2ff28-fd.mp4',
           hangye: '全行业',
           renqun: '客户专员'
         },
@@ -157,17 +121,87 @@ export default {
       ],
       curVideo: '',
       visible: false,
+      img1: require("~/static/productImage/p45.png"),
+      telDl: false,
+    }
+  },
+  computed: {
+    gangwei() {
+      return chanpinyunying
     }
   },
   methods: {
     shiKan({url}) {
       this.visible = true;
       this.curVideo = url;
-    }
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/chanPinYunYing',}});
+    },
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.client-nengli-box {
+  margin-bottom: 120px;
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 50px;
+  }
+
+  img {
+    height: 100%;
+    width: 330px;
+    text-align: center;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+.platform-course-list {
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 68px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .platform-course-list {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 10%;
+      margin-top: 15%;
+    }
+  }
+  .client-nengli-box {
+    margin-bottom: 5%;
+
+    h4 {
+      font-size: 18px;
+      margin-bottom: 30px;
+    }
 
+    img {
+      height: 200px;
+      width: 100%;
+    }
+  }
+}
 </style>

pages/product/courseCustom.vue

@@ -1,158 +1,128 @@
 <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>
+        class="client-new-platform-banner"></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"/>
+      <p class="p1">服务企业 <i>100+</i>，累计开发课时 <i>30,000+</i></p>
+      <p class="p2">青谷是国内专业、成熟的课程设计、开发团队、拥有丰富的电子课程制作经验，
+        业务方向包括教学设计体验、动画制作、视频拍摄等，涉及的行业有教育培训、零售连锁、机械制造、金融保险等。</p>
+      <!--  岗位职责  -->
+      <gangweiList :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
+
+
+      <div class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn/>
       </div>
     </div>
 
     <!--  动画类课程  -->
-    <div class="platform-animation">
+    <div class="platform-animation-donghua client-container my-video-content">
       <h4> 动画类课程 </h4>
       <p>动画类课程不受限于人员和场地，比较方便、生动形象地呈现知识内容。
-        主要包含：图文课程、情景动画课程、交互式课程、三分屏课程、SCORM框架式课程。适用各种行业：</p>
+        主要包含有：图文课程、情景动画课程、交互式课程、三分屏课程、SCORM框架式课程。适用各种行业：</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: video1, imgUrl:img1}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '金融保险业', url: video2, imgUrl:img2}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: video3, imgUrl:img3}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '生产制造业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '生产制造业', url: video4, imgUrl:img4}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '信息通讯业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '信息通讯业', url: video5, imgUrl:img5}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '汽车销售业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '汽车销售业', url: video6, imgUrl:img6}"
+                      @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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn/>
       </div>
     </div>
 
     <!--  视频类课程  -->
-    <div class="platform-animation">
+    <div class="platform-animation client-container my-video-content has-p">
       <h4> 视频类课程 </h4>
       <p>视频类课程可以直观形象地呈现知识内容。主要包含有：企业宣传片、实验操作课程、课堂实录课程、会议访谈等等。
         动画类课程也可以导出成MP4视频格式文件呈现。适用各种行业：
       </p>
       <ul>
         <li>
-          <video-card :card-data="{title: '能源化工业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '能源化工业', url: video7,  imgUrl:img7}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '金融保险业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '金融保险业', url: video8, imgUrl:img8}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: video9, imgUrl:img9}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '管理培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '管理培训业', url: video10,  imgUrl:img10}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '食品餐饮业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '食品餐饮业', url: video11,  imgUrl:img11}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '服装零售业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '服装零售业', url: video12 , imgUrl:img12}"
+                      @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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn/>
       </div>
     </div>
 
     <!--  H5类课程  -->
-    <div class="platform-animation">
+    <div class="platform-animation client-container my-video-content has-p">
       <h4> H5类课程 </h4>
       <p>通用HTML5技术、将图文、互动测试、动画视频、游戏等多种形式结合在一起，课程交互性强、学员参与程度高。主要包含有：图文H5、游戏H5等。
       </p>
       <ul>
         <li>
-          <video-card :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '现代制造业', url: video13,  imgUrl:img13}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: video14,  imgUrl:img14}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '物流业', url: video15,  imgUrl:img15}"
+                      @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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn/>
       </div>
     </div>
 
     <!--  PPT定制及美化  -->
-    <div class="platform-animation">
+    <div class="platform-animation client-container my-video-content has-p">
       <h4> PPT定制及美化 </h4>
       <p>
         现在PPT正成为人们工作生活的重要组成部分，在工作汇报、企业宣传、产品推介、婚礼庆典、项目竞标、管理咨询等领域发挥重大的作用。
@@ -160,20 +130,21 @@
       </p>
       <ul>
         <li>
-          <video-card :card-data="{title: '现代制造业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '金融保险业', url: video16, imgUrl:'',  imgUrl:img16}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '教育培训业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '教育培训业', url: video17, imgUrl:'',  imgUrl:img17}"
+                      @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '物流业', url: ''}" @card-click="showVideo"></video-card>
+          <video-card class="my-video" :card-data="{title: '生产制造业', url: video18,  imgUrl:'',  imgUrl:img18}"
+                      @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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn/>
       </div>
     </div>
 
@@ -196,7 +167,8 @@ 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"
+import gangweiList from "@/components/common/layout/desComp/gangweiList";
+import {BannerImgs, classifys, kechengdingzhi} from "~/defaultConfig"
 
 /**
  * @ 产品与服务 -> 课程定制
@@ -204,7 +176,16 @@ import {BannerImgs, classifys} from "~/defaultConfig"
 export default {
   name: "courseCustom",
   layout: 'templateB',
-  components: { onlineInformationBtn, newsComp2, chanPinTiYan, videoDialog, videoCard, applyBtn, applicationDialog},
+  components: {
+    onlineInformationBtn,
+    newsComp2,
+    chanPinTiYan,
+    videoDialog,
+    videoCard,
+    applyBtn,
+    applicationDialog,
+    gangweiList
+  },
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/news/carousel`, {
@@ -221,24 +202,74 @@ export default {
   },
   head() {
     return {
-      title: '在线考试平台_在线考试软件_试卷软件系统',
+      title: '课件制作_视频课件制作_flash课件制作_青谷软件',
       meta: [
         {
           name: 'keywords',
-          content: '考试平台,试卷系统,试卷软件'
+          content: '课件制作,课件制作公司,课件设计,ppt课件制作'
         },
         {
           name: 'description',
-          content: '麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          content: '青谷软件拥有国内专业、成熟的设计团队，丰富的电子课程制作经验，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付'
         }
       ],
     }
   },
+  computed: {
+    gangwei() {
+      return kechengdingzhi
+    }
+  },
   data() {
     return {
       curVideo: '',
       visible: false,
       telDl: false,
+
+      // 动画类
+      img1: require(`~/static/videoImages/v22.jpg`),
+      video1: 'https://spdb.mtavip.com/fb6e272b7adc433293d9f6a5c4153929/0ff00bc3ad684691bcbbb8aba4c5cbba-4049f6277ce4dad7a147ac9cd169d8d6-fd.mp4',
+      img2: require(`~/static/videoImages/v23.jpg`),
+      video2: 'https://spdb.mtavip.com/76d8403a8c6e4b31b221c329edfb4121/7fc717a4645c43bca6eb822be05e97c4-f56c11d92e98793d6c5a60b8b1b8b836-fd.mp4',
+      img3: require(`~/static/videoImages/v24.jpg`),
+      video3: 'https://spdb.mtavip.com/1d97ffbafd9b480689d8325f25dd6687/741fc75193ba434ebe3d82729908b30c-5a0a871558b82ed7931a623ce567bbec-fd.mp4',
+      img4: require(`~/static/videoImages/v25.jpg`),
+      video4: 'https://spdb.mtavip.com/154fe0ee513c4f40959fbd257dba11c1/0c9548a50ced4655be44224201ded347-b013d93710816be6591056f4537f370f-fd.mp4',
+      img5: require(`~/static/videoImages/v26.jpg`),
+      video5: 'https://spdb.mtavip.com/4f9b699f109b4257912e0615b690d397/a3d8c7f257444de18bd1a34952ed072b-9f98375a54ca60f2acbb73b064ba06b2-fd.mp4',
+      img6: require(`~/static/videoImages/v27.jpg`),
+      video6: 'https://spdb.mtavip.com/81563222a2f34b41a59ee96d98bb573d/c07bc0c4aaad4ab7b649ff725909b485-d5359de0edbb3916ae7dd14572e67e05-fd.mp4',
+
+      // 视频课程类
+      img7: require(`~/static/videoImages/v28.jpg`),
+      video7: 'https://spdb.mtavip.com/5089ca88405a4c7fba0e394086fb85f4/affd808fcf7b44989ad69e4ae4f9c284-dae0483416557d263fa2c5a8324bfb85-fd.mp4',
+      img8: require(`~/static/videoImages/v29.jpg`),
+      video8: 'https://spdb.mtavip.com/109a74f9316441808eba15f6ddc406fa/c622690c366341419aac39cbd6d94e65-ddd3c1bcab068e2f0ed00e01e80bf9b1-fd.mp4',
+      img9: require(`~/static/videoImages/v30.jpg`),
+      video9: 'https://spdb.mtavip.com/90f0af993cb84f6abcd152183f4034fd/6248e7092a394c7eb1bd63d5e748b7cb-43f729d3f2620ef3cf6fb4b911428d70-fd.mp4',
+      img10: require(`~/static/videoImages/v31.jpg`),
+      video10: 'https://spdb.mtavip.com/b81eec156310477c99f9769754442aa8/a335a98f2c0e4f6a961e809e30cfaa3d-1c4e98daa27d9683cb778bdfc2e40e1e-fd.mp4',
+      img11: require(`~/static/videoImages/v32.jpg`),
+      video11: 'https://spdb.mtavip.com/eae8071f826a4c57b5f2c933e67b0591/692213c2030340d78aafe26cbf1ee9ee-cc94cdfb48eb85919dae9ca8de2081b2-fd.mp4',
+      img12: require(`~/static/videoImages/v33.jpg`),
+      video12: 'https://spdb.mtavip.com/75423037de7c44da91f24a5dcffb6e1a/774aece0c6e6437ea294d29163d138ef-b028588659f56ee623807230e897aceb-fd.mp4',
+
+      // H5 类课
+      img13: require(`~/static/videoImages/v34.jpg`),
+      video13: 'https://spdb.mtavip.com/b9047471e06d40a69443a1811fba0336/75daf06aacc44483be3859542160314e-691fc8a51efd7eb3c73f1826a9cba8ba-fd.mp4',
+      img14: require(`~/static/videoImages/v35.jpg`),
+      video14: 'https://spdb.mtavip.com/fb6e272b7adc433293d9f6a5c4153929/0ff00bc3ad684691bcbbb8aba4c5cbba-4049f6277ce4dad7a147ac9cd169d8d6-fd.mp4',
+      img15: require(`~/static/videoImages/v36.jpg`),
+      video15: 'https://spdb.mtavip.com/5daa9a33cdf34b848ca5855aa2e57927/9b9a433072a54182870fc3cbfef8f5c1-162c78c7631b21f79645e9c5e7eaeeaf-fd.mp4',
+
+      // PPT定制及美化
+      img16: require(`~/static/videoImages/v37.jpg`),
+      video16: 'https://spdb.mtavip.com/76d8403a8c6e4b31b221c329edfb4121/7fc717a4645c43bca6eb822be05e97c4-f56c11d92e98793d6c5a60b8b1b8b836-fd.mp4',
+      img17: require(`~/static/videoImages/v38.jpg`),
+      video17: 'https://spdb.mtavip.com/067289e1287643f89b353ed7ed4c6c52/bd13014cf80d4605b093ed6e80da9e5b-475c6c45b0ddfa3407ffe9625e855f68-fd.mp4',
+      img18: require(`~/static/videoImages/v39.jpg`),
+      video18: 'https://spdb.mtavip.com/eb4297e8a9fc4d628cbde2ca3d6748e7/35f65074705144b9a28efc20f4154e27-0711d93d0dd6c5452e00f12479f97435-fd.mp4',
+
     }
   },
   methods: {
@@ -257,30 +288,158 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.client-exam-page {
-  margin-top: 70px;
+.platform-animation {
+  ul {
+    font-size: 16px;
+  }
 }
 
-.client-banner-box {
-  height: 200px;
-  background: green;
-  text-align: center;
-  color: #fff;
-}
+.platform-products-experience {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    text-align: center;
+    color: #333333;
+    margin-top: 74px;
+    margin-bottom: 58px;
+  }
+
+  .p1 {
+    font-size: 18px;
+    color: #565656;
+    font-weight: 800;
+    text-align: center;
+
+    i {
+      font-size: 26px;
+      color: #309336;
+    }
+  }
 
-.btns-group {
-  display: flex;
-  text-align: center;
+  .p2 {
+    margin: 30px auto 110px;
+    text-align: center;
+    width: 991px;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 500;
+    color: #565656;
+  }
+
+  @media (max-width: 768px) {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      text-align: center;
+      color: #333333;
+      margin-top: 20px;
+      margin-bottom: 10px;
+    }
+    .p1 {
+      font-size: 14px;
 
-  .client-default-Btn {
-    width: 120px;
-    margin-right: 20px;
+      i {
+        font-size: 14px;
+        color: #565656;
+        font-weight: 800;
+      }
+    }
+    .p2 {
+      font-size: 14px;
+      width: 80%;
+      margin-bottom: 20px;
+    }
   }
 }
 
-.platform-animation {
-  ul {
+.my-video-content {
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    font-weight: 800;
+    margin-bottom: 70px;
+    text-align: center;
+  }
+
+  > p {
+    text-align: center;
+    font-weight: 500;
+    color: #565656;
+    line-height: 24px;
     font-size: 16px;
+    width: 980px;
+    margin: 0 auto;
+  }
+
+  ul {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    li {
+      width: 33%;
+      height: 330px;
+
+      .my-video {
+        margin: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+
+  .my-video-content {
+    h4 {
+      font-size: 18px;
+      color: #333;
+      font-weight: 800;
+      margin-bottom: 5%;
+      text-align: center;
+    }
+
+    > p {
+      text-align: center;
+      font-weight: 500;
+      color: #565656;
+      line-height: 1.5;
+      font-size: 14px;
+      margin-bottom: 10px;
+      width: 100%;
+    }
+
+    ul {
+      li {
+        width: 100%;
+        height: 200px;
+        margin-bottom: 60px;
+
+        .my-video {
+          margin: 0;
+        }
+
+        .img-box {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+  }
+}
+
+.has-p {
+
+  p {
+    width: 990px !important;font-size: 16px;font-weight: 500;margin: 0 auto;
+  }
+  @media (max-width: 768px) {
+    p {
+      width: 100% !important; font-size: 16px;font-weight: 500;margin: 0 auto 10px;
+    }
   }
 }
+
+
+
 </style>

pages/product/courseResource.vue

@@ -1,111 +1,133 @@
 <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>
+        class="client-new-platform-banner">
+      </div>
 
     <!--  企业通用岗位培训方案  -->
-    <div class="platform-animation">
+    <div class="platform-animation-gangwei client-container">
       <h4 class="client-title">企业通用岗位培训方案</h4>
       <ul>
         <li @click="goChildPage('zhiYeSuYang')">
-          <i></i>
-          <span>职业素养</span>
+          <div>
+            <i :style="`background-image: url(${icon1})`"></i>
+            <span>职业素养</span>
+          </div>
         </li>
         <li @click="goChildPage('lingDaoNengLi')">
-          <i></i>
-          <span>领导能力</span>
+          <div>
+            <i :style="`background-image: url(${icon2})`"></i>
+            <span>领导能力</span>
+          </div>
         </li>
         <li @click="goChildPage('renLiZiYuan')">
-          <i></i>
-          <span>人力资源</span>
+          <div>
+            <i :style="`background-image: url(${icon3})`"></i>
+            <span>人力资源</span>
+          </div>
         </li>
-        <li @click="goChildPage('shiCHangYingXiao')">
-          <i></i>
-          <span>市场营销</span>
+        <li @click="goChildPage('shiChangYingXiao')">
+          <div>
+            <i :style="`background-image: url(${icon4})`"></i>
+            <span>市场营销</span>
+          </div>
         </li>
         <li @click="goChildPage('xingZhengGuanLi')">
-          <i></i>
-          <span>行政管理</span>
+          <div>
+            <i :style="`background-image: url(${icon5})`"></i>
+            <span>行政管理</span>
+          </div>
         </li>
         <li @click="goChildPage('caiWuGuanLi')">
-        <i></i>
-          <span>财务管理</span>
+          <div>
+            <i :style="`background-image: url(${icon6})`"></i>
+            <span>财务管理</span>
+          </div>
         </li>
         <li @click="goChildPage('keFuFuWu')">
-          <i></i>
-          <span>客服服务</span>
+          <div>
+            <i :style="`background-image: url(${icon7})`"></i>
+            <span>客服服务</span>
+          </div>
         </li>
         <li @click="goChildPage('chanPinYunYing')">
-          <i></i>
-          <span>产品运营</span>
+          <div>
+            <i :style="`background-image: url(${icon8})`"></i>
+            <span>产品运营</span>
+          </div>
         </li>
         <li @click="goChildPage('shengChanCaiGou')">
-          <i></i>
-          <span>生产采购</span>
+          <div>
+            <i :style="`background-image: url(${icon9})`"></i>
+            <span>生产采购</span>
+          </div>
         </li>
-
+        <li class="empty mta-hidden-xs">
+        </li>
+        <li class="empty mta-hidden-xs"></li>
+        <li class="empty mta-hidden-xs"></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 class="btns-group mta-hidden-xs">
+        <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn class="online-information-btn"/>
       </div>
     </div>
 
     <!--  为企业培训打造学习矩阵  -->
-    <div class="platform-animation">
+    <div class="platform-animation-juzhen client-container">
       <h4>为企业培训打造学习矩阵</h4>
       <ul>
         <li>
-          <i></i>
-          <span>课程总数近 <i>5000门</i></span>
+          <div>
+            <i class="mta-hidden-xs" :style="`background-image:url(${icon10})`"></i>
+            <span>课程总数近<i class="icon-font">5000门</i></span>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>涵盖 <i>2000个</i>知识要点</span>
+          <div>
+            <i class="mta-hidden-xs" :style="`background-image:url(${icon11})`"></i>
+            <span>涵盖<i class="icon-font">2000个</i>知识要点 </span>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>提供 <i>9大</i>通用岗位培训方案</span>
+          <div>
+            <i class="mta-hidden-xs" :style="`background-image:url(${icon12})`"></i>
+            <span>提供<i class="icon-font">9大</i>通用岗位培训方案</span>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>课程资源 <i>每月</i>持续更新</span>
+          <div>
+            <i class="mta-hidden-xs" :style="`background-image:url(${icon13})`"></i>
+            <span>课程资源<i class="icon-font">每月</i>持续更新</span>
+          </div>
         </li>
       </ul>
       <div class="btns-group">
-        <a class="client-default-Btn">
-          <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn" />
+        <applyBtn @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn class="online-information-btn"/>
       </div>
     </div>
 
     <!--  课程内容形式多样  -->
-    <div class="platform-animation">
-      <h4>为企业培训打造学习矩阵</h4>
+    <div class="platform-animation-videos client-container">
+      <h4>课程内容多样性</h4>
       <ul>
         <li>
           <video-card :card-data="{title: 'FLASH动画课程',
           des:'主要以图文动画的形式表现教学者的作用和教与学之间的关系，从而改变学习的本质',
-          url: ''}" @card-click="showVideo"></video-card>
+          url:video1 , imgUrl:img1 }" @card-click="showVideo"></video-card>
         </li>
         <li>
           <video-card :card-data="{title: '视频课程',
           des:'把教师视频与PowerPoint课件一并摄制下来，生成为视频课件',
-          url: ''}" @card-click="showVideo"></video-card>
+          url: video2, imgUrl:img2 }" @card-click="showVideo"></video-card>
         </li>
         <li>
           <video-card :card-data="{title: '名师讲堂',
           des:'各行各业讲师汇聚一堂，为不同专属领域打造明星级课堂',
-          url: ''}" @card-click="showVideo"></video-card>
+          url: video3, imgUrl:img3 }" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
@@ -136,18 +158,18 @@ import {BannerImgs, classifys} from "~/defaultConfig";
 
 export default {
   name: "courseResource",
-  layout:   'templateB',
-  head(){
+  layout: 'templateB',
+  head() {
     return {
-      title: '在线考试平台_在线考试软件_试卷软件系统',
+      title: '课件资源_视频课件资源_flash课件资源_青谷软件',
       meta: [
         {
           name: 'keywords',
-          content: '考试平台,试卷系统,试卷软件'
+          content: '课件资源_视频课件资源_flash课件资源'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '青谷软件经过多年发展，有专业的课件团队，熟悉教育、医疗等多种企业培训课件，拥有多种课件资源。'
         }
       ],
     }
@@ -155,7 +177,10 @@ export default {
   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/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);
@@ -169,11 +194,32 @@ export default {
       curVideo: '',
       visible: false,
       telDl: false,
+      icon1: require('~/static/gangweiIcon/z60.png'),
+      icon2: require('~/static/gangweiIcon/z61.png'),
+      icon3: require('~/static/gangweiIcon/z62.png'),
+      icon4: require('~/static/gangweiIcon/z63.png'),
+      icon5: require('~/static/gangweiIcon/z64.png'),
+      icon6: require('~/static/gangweiIcon/z65.png'),
+      icon7: require('~/static/gangweiIcon/z66.png'),
+      icon8: require('~/static/gangweiIcon/z67.png'),
+      icon9: require('~/static/gangweiIcon/z68.png'),
+      icon10: require('~/static/gangweiIcon/z69.png'),
+      icon11: require('~/static/gangweiIcon/z70.png'),
+      icon12: require('~/static/gangweiIcon/z71.png'),
+      icon13: require('~/static/gangweiIcon/z72.png'),
+
+      // 课程内容多样性
+      img1: require(`~/static/videoImages/v40.jpg`),
+      video1: 'https://spdb.mtavip.com/dd0f8eb8cc4c4debb78fa6d36e6b4415/96cf27ccc5f04109bb55c78ea3850ac5-ebfd0a97ed06517b66e06f479d4db08f-fd.mp4',
+      img2: require(`~/static/videoImages/v41.jpg`),
+      video2: 'https://spdb.mtavip.com/9582c63e57de4c90826a32e499394de9/a6c23fe089464b3db28b8b943bbb1f61-ab130b582506c004261fcab4a4d8bfa3-fd.mp4',
+      img3: require(`~/static/videoImages/v42.jpg`),
+      video3: 'https://spdb.mtavip.com/3e953e4afb6b44949ba0d257599c8109/0c8813c5c24a4464b1240f0d5d62f36e-2e9591441d9f1443ac5d3b956e1c0a0e-fd.mp4',
     }
   },
   methods: {
     goChildPage(key) {
-      this.$router.push({ path: `/product/${key}` })
+      this.$router.push({path: `/product/${key}`})
     },
     showVideo({url}) {
       this.curVideo = url;
@@ -190,29 +236,321 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.client-exam-page {
-  margin-top: 70px;
+.btns-group {
+  margin: 40px auto 120px;
+  text-align: center;
+
+  .online-information-btn {
+    margin-left: 20px;
+  }
 }
 
-.client-banner-box {
-  height: 200px;
-  background: green;
-  text-align: center;
-  color: #fff;
+.platform-animation-gangwei {
+  margin-top: 60px;
+
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 100px;
+    padding-top: 0;
+  }
+
+  ul {
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      width: 25%;
+
+      > div {
+        width: 100%;
+        height: 112px;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 20px;
+        margin-right: 30px;
+        cursor: pointer;
+        border: 1px solid #fff;
+        justify-content: center;
+      }
+
+      i {
+        display: inline-block;
+        width: 64px;
+        height: 70px;
+        margin-right: 40px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+
+      span {
+        font-size: 24px;
+        color: #333;
+        font-weight: 800;
+        display: inline-block;
+        position: relative;
+      }
+
+      &:last-child {
+        justify-self: flex-start;
+      }
+
+      &:hover > div {
+        border: 1px solid #51C779;
+        border-radius: 10px;
+
+        span {
+          color: #46c37b;
+
+          &:before {
+            content: '';
+            position: absolute;
+            bottom: -8px;
+            width: 100%;
+            height: 4px;
+            background: #00b96b;
+          }
+        }
+      }
+    }
+  }
 }
 
-.btns-group {
-  display: flex;
-  text-align: center;
-  .client-default-Btn {
-    width: 120px;
-    margin-right: 20px;
+.platform-animation-juzhen {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 80px;
+  }
+
+  ul {
+    li {
+      width: 50%;
+      display: inline-block;
+
+      & > div {
+        margin-bottom: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .icon-font {
+          font-size: 30px;
+          color: #00b96b;
+          font-weight: 500;
+          padding: 0 10px;
+        }
+
+        span {
+          font-size: 24px;
+          color: #333;
+          font-weight: 500;
+        }
+
+
+        & > i {
+          width: 88px;
+          height: 90px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          margin-right: 22px;
+        }
+      }
+    }
+
+    li:nth-child(3) {
+      div {
+        margin-bottom: 40px;
+      }
+    }
+
+    li:nth-child(4) {
+      div {
+        margin-bottom: 40px;
+      }
+    }
   }
 }
 
-.platform-animation {
+.platform-animation-videos {
+  margin-bottom: 200px;
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 120px;
+  }
   ul {
-    font-size: 16px;
+    display: flex;
+    justify-content: center;
+
+    li {
+      width: 33%;
+    }
   }
 }
+
+@media (max-width: 768px) {
+  .platform-animation-gangwei {
+    margin-top: 20px;
+
+    h4.client-title {
+      font-size: 20px;
+      margin-bottom: 20px;
+      font-weight: 800;
+    }
+
+    ul {
+      li {
+        width: 33%;
+
+        > div {
+          width: 100%;
+          height: 112px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          box-sizing: border-box;
+          padding: 20px;
+          margin-right: 30px;
+          cursor: pointer;
+          border: 1px solid #fff;
+        }
+
+        i {
+          display: inline-block;
+          width: 50%;
+          height: 100%;
+          margin-right: 0;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        span {
+          font-size: 12px;
+          color: #333;
+          font-weight: 800;
+          position: relative;
+
+        }
+
+        &:last-child {
+          justify-self: flex-start;
+        }
+
+        &:hover > div {
+          border: 1px solid #51C779;
+          border-radius: 10px;
+
+          span {
+            color: #46c37b;
+          }
+        }
+      }
+    }
+  }
+
+  .btns-group {
+    margin: 30px auto 60px;
+    text-align: center;
+
+    .online-information-btn {
+      margin-left: 20px;
+    }
+  }
+
+  .platform-animation-juzhen {
+    margin-bottom: 30px;
+
+    h4 {
+      font-size: 20px;
+      margin-bottom: 20px;
+      font-weight: 800;
+      margin-top: 40px;
+    }
+
+    ul li {
+      width: 100%;
+      margin: 0 auto;
+
+      & > div {
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+
+        .icon-font {
+          font-size: 20px;
+          color: #00b96b;
+          font-weight: 500;
+          padding: 0 5px;
+        }
+
+        span {
+          font-size: 16px;
+          color: #333;
+          font-weight: 500;
+          display: inline-block;
+          width: 100%;
+          text-align: center;
+        }
+
+        & > i {
+          width: 88px;
+          height: 90px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          margin-right: 22px;
+        }
+      }
+
+      &:nth-child(3) {
+        div {
+          margin-bottom: 20px;
+        }
+      }
+
+      &:nth-child(4) {
+        div {
+          margin-bottom: 20px;
+        }
+      }
+    }
+
+  }
+
+
+  .platform-animation-videos {
+    margin-bottom: 80px;
+    h4 {
+      font-size: 20px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 30px;
+    }
+    ul {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+
+      li {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+}
 </style>

pages/product/exam.vue

@@ -1,122 +1,48 @@
 <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>
+        class="client-new-platform-banner">
+      </div>
 
     <!--  产品体验  -->
-    <div class="platform-products-experience client-container">
+    <div class="platform-products-experience client-container" v-if="false">
       <h4 class="client-title">产品体验</h4>
-      <p>无序注册，即可免费体验青谷在线考试系统</p>
+      <p class="client-subtitle-one-row">无序注册，即可免费体验青谷在线考试系统</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>
+      <imgCardLv2 class="img-card" :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <freeTrialBtn class="free-train-btn btn-item" v-if="item.mianfei" :myType="item.myType"/>
+          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  更多辅助功能  -->
-    <div>
-      <h3>更多辅助功能</h3>
+    <div class="client-fuzhu-gongneng client-container">
+      <h4>更多辅助功能</h4>
       <ul>
         <li>
-          <img src="#">
+          <i></i>
           <span>报名审核</span>
         </li>
         <li>
-          <img src="#">
+          <i></i>
           <span>发布证书</span>
         </li>
         <li>
-          <img src="#">
+          <i></i>
           <span>数据统计</span>
         </li>
         <li>
-          <img src="#">
+          <i></i>
           <span>断电续考</span>
         </li>
       </ul>
@@ -134,6 +60,7 @@ 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 imgCardLv2 from "@/components/common/layout/imgDes/imgCardLv2_exam";
 import {BannerImgs, classifys} from "~/defaultConfig"
 
 /**
@@ -142,7 +69,7 @@ import {BannerImgs, classifys} from "~/defaultConfig"
 export default {
   name: "exam",
   layout: 'templateB',
-  components: { freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan},
+  components: { freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.kaoshixitong.classify, 'keyword': classifys.kaoshixitong.keyword}),
@@ -156,21 +83,125 @@ export default {
   },
   head(){
     return {
-      title: '在线考试平台_在线考试软件_试卷软件系统',
+      title: '考试系统_在线考试系统_网上考试系统_网络考试系统_青谷软件',
       meta: [
         {
           name: 'keywords',
-          content: '考试平台,试卷系统,试卷软件'
+          content: '考试软件系统,考试软件平台,网络考试系统,线上考试系统'
         },
         {
           name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          content:'青谷在线考试软件系统是专业的网络考试应用软件，不仅为企业节省考试成本，更方便企业对考试工作的管理，为领导者和管理层全方位了解考试情况提供了有效的数据支持'
         }
       ],
     }
   },
   data() {
     return {
+
+      productList: [
+        {
+          content: {
+            title: '青谷云在线考试服务',
+            list: [
+              {
+                value: '考试系统使用方便,操作简单，节约成本，无需独立开发',
+              },
+              {
+                value: '在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务',
+              },
+              {
+                value: '支持万人同时在线，超高并发安全稳定运行',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url:  require(`~/static/productImage/p07.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的人员管理和考试功能',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决企业人员多且分散的问题',
+              },
+              {
+                value: '六大常用题型，批量导入；固定组卷，随机组卷，固定+随机综合组卷，涵盖错题，按难度程度抽题',
+              },
+              {
+                value: '支持客观题自动判断，主观题后台人工阅卷。有效减少人力成本，提升时间小楼，降低费用成本',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url:   require(`~/static/productImage/p05.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '全流程AI监考防作弊体系',
+            list: [
+              {
+                value: '人脸识别身份核验成功方可考试，防替考作弊行为',
+              },
+              {
+                value: '多屏监控画面展现考试全过程，考生的面部表情、一举一动在后台实时呈现',
+              },
+              {
+                value: '随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url:  require(`~/static/productImage/p08.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成、支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互通，充分利用碎片化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p06.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
+
       youkeFlag: false,// 控制游客系统是否维护中
       SystemWidthFlag: false,
       swiperOption: {
@@ -254,15 +285,171 @@ export default {
 }
 </script>
 
-<style scoped>
-.client-exam-page {
-  margin-top: 70px;
+<style lang="scss" scoped>
+// 按钮
+.free-train-btn,.apply-btn{margin-right: 16px;}
+.btn-groups {
+  margin-top: 48px;
 }
+.product-exam-btn {
+  color: #00b96b;
+  width: 200px;
+  height: 60px;
+  line-height: 60px;
+  border-radius: 8px;
+  background: #fff;
+  border-color: #fff;
+}
+
+// 辅助功能
+.client-fuzhu-gongneng {
+    margin-top: 100px;
+    margin-bottom: 120px;
+
+    h4 {
+      font-size: 30px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 140px;
+    }
 
-.client-banner-box {
-  height: 200px;
-  background: green;
-  text-align: center;
-  color: #fff;
+    ul {
+    display: flex;
+    justify-content: space-between;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      i {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: inline-block;
+        width: 123px;
+        height: 123px;
+        margin: 0 auto 20px;
+        text-align: center;
+      }
+      span {
+        color: #333;
+        font-size: 20px;
+        font-weight: 800;
+        text-align: center;
+      }
+
+      &:nth-child(1) {
+        i {
+          background-image: url("~static/gangweiIcon/z108.png");
+        }
+
+      }
+      &:nth-child(2) {
+        i {
+          background-image: url("~static/gangweiIcon/z109.png");
+        }
+
+      }
+      &:nth-child(3) {
+        i {
+          background-image: url("~static/gangweiIcon/z110.png");
+        }
+
+      }
+      &:nth-child(4) {
+        i {
+          background-image: url("~static/gangweiIcon/z111.png");
+        }
+      }
+
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .btn-groups {
+    display: flex;justify-content: center;margin-top: 30px;
+  }
+
+  .client-fuzhu-gongneng {
+    margin-top: 100px;
+    margin-bottom: 120px;
+
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 11%;
+    }
+
+    ul {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      li {
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-bottom: 20px;
+
+        i {
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: contain;
+          display: inline-block;
+          width: 80px;
+          height: 80px;
+          margin: 0 auto 20px;
+          text-align: center;
+        }
+        span {
+          color: #333;
+          font-size: 14px;
+          font-weight: 800;
+          text-align: center;
+        }
+
+        &:nth-child(1) {
+          i {
+            background-image: url("~static/gangweiIcon/z108.png");
+          }
+
+        }
+        &:nth-child(2) {
+          i {
+            background-image: url("~static/gangweiIcon/z109.png");
+          }
+
+        }
+        &:nth-child(3) {
+          i {
+            background-image: url("~static/gangweiIcon/z110.png");
+          }
+
+        }
+        &:nth-child(4) {
+          i {
+            background-image: url("~static/gangweiIcon/z111.png");
+          }
+        }
+
+      }
+    }
+  }
 }
+
+.platform-products-services {
+  .img-card:nth-child(3) {
+    background: #fafffc;
+  }
+  .img-card:nth-child(5) {
+    background: #fafffc;
+  }
+}
+
+
 </style>

pages/product/keFuFuWu.vue

@@ -5,59 +5,30 @@
       <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>
+      <!--  岗位职责  -->
+      <gangweiList label="岗位职责" :list="gangwei" :pc-num="3" :h5-num="2"></gangweiList>
 
     <!--  能力提升  -->
-    <div class="client-nengli-box">
+    <div class="client-nengli-box client-container">
       <h4>能力提升</h4>
-      <img src="#" alt="能力提升">
+      <img :src="img1" alt="能力提升">
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn />
       </div>
     </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
   </div>
 </template>
 
@@ -66,14 +37,18 @@ 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";
+import gangweiList from "@/components/common/layout/desComp/gangweiList";
+import {BannerImgs, kefufuwu} from "~/defaultConfig";
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
+
 /**
  * @ 产品与服务 -> 课程资源 -> 课程服务
  */
 export default {
   name: "professionalQuality",
-  layout:   'templateB',
-  head(){
+  layout: 'templateB',
+  head() {
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
       meta: [
@@ -82,8 +57,8 @@ export default {
           content: '考试平台,试卷系统,试卷软件'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '青谷考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
@@ -98,8 +73,9 @@ export default {
     }
   },
   components: {
-    mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn},
+    mtaTable, videoDialog,applicationDialog,applyBtn,
+    freeTrialBtn, onlineInformationBtn, gangweiList
+  },
   data() {
     return {
       tableConfig: [
@@ -119,7 +95,7 @@ export default {
       tableData: [
         {
           name: '沟通中如何聆听',
-          shikanUrl: 'https://1111',
+          shikanUrl: 'https://spdb.mtavip.com/379983a3c7d949ab84397529da2c5a37/096977a7f73543db9dc420c30d4071c8-b586d62ce2b4e5df752dbb3248cd2333-fd.mp4',
           hangye: '全行业',
           renqun: '客户专员'
         },
@@ -156,17 +132,91 @@ export default {
       ],
       curVideo: '',
       visible: false,
+      img1: require("~/static/productImage/p46.png"),
+      telDl: false,
+    }
+  },
+  computed: {
+    gangwei() {
+      return kefufuwu
     }
   },
   methods: {
     shiKan({url}) {
       this.visible = true;
       this.curVideo = url;
-    }
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/keFuFuWu',}});
+    },
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+
+.client-nengli-box {
+  margin-bottom: 120px;
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 50px;
+  }
+
+  img {
+    height: 100%;
+    width: 330px;
+    text-align: center;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
 
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 68px;
+  }
+
+}
+
+@media (max-width: 768px) {
+
+  .platform-course-list {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 10%;
+      margin-top: 15%;
+    }
+  }
+  .client-nengli-box {
+    margin-bottom: 5%;
+
+    h4 {
+      font-size: 18px;
+      margin-bottom: 30px;
+    }
+
+    img {
+      height: 200px;
+      width: 100%;
+    }
+  }
+
+
+}
 </style>

pages/product/lingDaoNengLi.vue

@@ -5,64 +5,37 @@
       <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">
+    <div class="client-xuexishouyi-box client-container">
       <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 class="products-services-box">
+            <img :src="img1" alt="能力提升">
+            <img :src="img2" alt="能力提升">
           </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>
+          <imgCardLv2 class="my-imgCardLv2" :option="productData"></imgCardLv2>
         </li>
       </ul>
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
-
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
   </div>
 </template>
 
@@ -73,6 +46,9 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import pingfen from "~/components/common/pingfen";
 import {BannerImgs} from "~/defaultConfig";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
 
 /**
  * @ 产品与服务 -> 课程资源 -> 领导能力
@@ -90,8 +66,8 @@ export default {
     }
   },
   components: {
-    mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn, pingfen},
+    mtaTable, videoDialog,applicationDialog,applyBtn,
+    freeTrialBtn,onlineInformationBtn, pingfen, imgCardLv2},
   head(){
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
@@ -102,13 +78,44 @@ export default {
         },
         {
           name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          content:'青谷考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
   },
   data() {
     return {
+      productData: {
+        content: {
+          title: '掌握知识',
+          list: [
+            {
+              value: '明确企业管理者的角色定位及岗位使命',
+            },
+            {
+              value: '针对企业管理中的难点及关键点，掌握相应的处理策略解决问题',
+            },
+            {
+              value: '全面提升企业管理者的岗位必备能力',
+            },
+            {
+              value: '了解团队管理及引领团队变革的关键点',
+            },
+            {
+              value: '帮助管理者掌握部署培养的方法及战略执行',
+            },
+          ],
+          order: 2,
+        },
+        img: {
+          url: require("~/static/productImage/p42.png"),
+          order: 1,
+        },
+        mianfei: true,
+        zixun: true,
+        shenqing: false,
+        myType: 'kaoshi'
+      },
       tableConfig: [
         {
           label: '课程名称',
@@ -126,7 +133,7 @@ export default {
       tableData: [
         {
           name: '职场沟通-这样表达更有效',
-          shikanUrl: 'https://1111',
+          shikanUrl: 'https://spdb.mtavip.com/9e6c0d3021b5476598b337e729a13810/a47aa772e67241988fc7b1e37e70f2db-46563b462a065d22f5c4162b4505dda4-fd.mp4',
           hangye: '全行业',
           renqun: '基层领导'
         },
@@ -187,17 +194,125 @@ export default {
       ],
       curVideo: '',
       visible: false,
+      img1: require("~/static/productImage/p47.png"),
+      img2: require("~/static/productImage/p41.png"),
+      telDl: false,
     }
   },
   methods: {
     shiKan({url}) {
       this.visible = true;
       this.curVideo = url;
-    }
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/lingDaoNengLi',}});
+    },
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.client-xuexishouyi-box {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 140px;
+  }
+  .products-services-box {
+    display: flex;
+  }
+}
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 98px;
+  }
+}
+
+.products-services-box {
+  display: flex;
+  margin-bottom: 90px;
+  justify-content: flex-start;
+
+  img {
+    width: 446px;
+    height: 342px;
+
+    &:first-child {
+      margin-right: 190px;
+      width: 370px;
+      height: 340px;
+      padding-left: 50px;
+    }
+
+    &:last-child {
+      margin-right: 190px;
+      width: 297px;
+      height: 306px;
+      padding-left: 50px;
+    }
+  }
+
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 3%;
+    img {
+      width: 100%;
+      height: 200px;
+      margin: 0;
+
+      &:nth-child(1) {
+        order: 2
+      }
+
+      &:nth-child(2) {
+        order: 1;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+
+  .client-xuexishouyi-box {
+    .client-title {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+
+    .products-services-box {
+      flex-direction: column;
+      img {
+        max-width: 100%;
+        height: auto;
+        padding: 0;
+      }
+    }
+
+    .my-imgCardLv2 {
+      margin-bottom: 10%;
+    }
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+  }
+
+}
+
 
 </style>

pages/product/peixun.vue

@@ -1,113 +1,41 @@
 <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>
-         <onlineInformationBtn />
-      </span>
-    </div>
+        class="client-new-platform-banner">
+      </div>
 
     <!--  产品体验  -->
-    <div class="platform-products-experience client-container">
+    <div class="platform-products-experience client-container" v-if="false">
       <h4 class="client-title">产品体验</h4>
-      <p>无序注册，即可免费体验青谷在线考试系统</p>
+      <p class="client-subtitle-one-row">无序注册，即可免费体验青谷在线培训系统</p>
       <!--   多端体验   -->
-      <chanPinTiYan></chanPinTiYan>
+      <chanPinTiYan cur-type="peixun"></chanPinTiYan>
     </div>
 
     <!--  直播系列  -->
-    <div class="platform-products-experience">
+    <div class="client-zhibo-box">
       <h4  class="client-title"> [青谷] 学测考练一站式在线培训系统 </h4>
-      <img src="#">
+      <img :src="imgQiye">
     </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 />
-                </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 />
-                </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 />
-                </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 />
-                </a><span class="client-default-Btn">
-                  <onlineInformationBtn />
-                </span></div>
-              </div>
-              <img src="#" alt="实用便捷的判卷功能"/>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <imgCardLv3 class="img-card" :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <freeTrialBtn class="free-train-btn btn-item" v-if="item.mianfei" :myType="item.myType"/>
+          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
+        </div>
+      </imgCardLv3>
     </div>
 
+
     <!--  青谷在线培训系统四大优势  -->
-    <div class="platform-products-services">
-      <h4 class="client-title">青谷在线培训系统四大优势</h4>
+    <div class="platform-four-youshi client-container">
+      <h4>青谷在线培训系统四大优势</h4>
       <ul>
         <li>
           <div class="card-container">
@@ -151,14 +79,16 @@ 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"
+import imgCardLv3 from "@/components/common/layout/imgDes/imgCardLv3_peixun";
+import {BannerImgs , classifys} from "~/defaultConfig";
+
 /**
  * @ 产品与服务 -> 培训系统
  */
 export default {
   name: "cultivate",
   layout: 'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, imgCardLv3},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.peixunxitong.classify,'keyword': classifys.peixunxitong.keyword}),
@@ -172,15 +102,15 @@ export default {
   },
   head(){
     return {
-      title: '在线考试平台_在线考试软件_试卷软件系统',
+      title: '培训系统_在线培训系统_网上培训系统_网络培训系统_青谷软件',
       meta: [
         {
           name: 'keywords',
-          content: '考试平台,试卷系统,试卷软件'
+          content: '在线学习培训系统，培训考试系统，企业培训系统，直播课程系统，在线教育培训系统'
         },
         {
           name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          content:'青谷在线培训系统，包含线上课程培训系统和考试系统，同时可以直播课程，帮助企业与教育机构搭建在线培训、考试平台。'
         }
       ],
     }
@@ -192,24 +122,310 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      productList: [
+        {
+          content: {
+            title: '一键搭建移动端和PC端专属培训平台',
+            des: '只需一键注册青谷账号，即可拥有自己的专属培训平台。PC端与移动端无缝连接；全面支持安卓、IOS等操作系统,支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务。',
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p09.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '丰富的文本/音频/视频课程内容上传服务',
+            des: '全面支持本地文本PDF、Word、Excel、PPT，音频MP3，视频MP4的课程内容上传服务；同时还支持视频服务器链接、第三方链接的课程内容上传服务。',
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p10.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '无延迟、高互动、全终端的线上直播学习',
+            des: '线上直播课程支持录播视频、PPT直播、桌面共享直播等类型，满足讲师个性化直播场景需求,播放终端全覆盖，学员可通过PC/手机/平板等设备，随时随地观看线上直播学习。',
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p12.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '互动助学工具提升学员活跃度',
+            des: '自定义导入题库和试卷库，实现考试、作业本、练习及随堂测验，强化学习效果；可创建每日练习、日常作业、随堂考试等玩法，形成督学玩法。提高学员活跃度。',
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p11.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'peixun'
+        }
+      ],
+      imgQiye: require('~/static/productImage/p44.png')
+    }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.client-platform-page {
+
+.product-exam-btn {
+  color: #00b96b;
+  width: 200px;
+  height: 60px;
+  line-height: 60px;
+  border-radius: 8px;
+  background: #fff;
+  border-color: #fff;
+}
+
+.platform-products-services {
   margin-top: 80px;
+  .img-card:nth-child(2) {
+    background: #fafffc;
+  }
+  .img-card:nth-child(4) {
+    background: #fafffc;
+  }
+  .btn-groups {
+    margin-top: 48px;
+    .btn-item {
+      margin-right: 20px;
+    }
+  }
+
+
+  .client-title {
+    font-weight: 800;
+    font-size: 30px;
+    color: #333;
+    padding-bottom: 100px;
+    background: #fafffc;
+  }
 }
-.client-platform-banner {
-  position: relative;
+
+.platform-products-experience {
+  .client-title {
+    font-weight: 800;
+    font-size: 30px;
+    color: #333;
+    margin-bottom: 30px;
+  }
+
+  p {
+    font-weight: 800;
+    font-size: 18px;
+    color: #565656;
+    line-height: 50px;
+  }
 }
-.client-platform-content {
-  color: #fff;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  width: auto;
-  height: auto;
+
+.platform-four-youshi {
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 140px;
+  }
+
+  ul {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 92px;
+    li {
+      width: 273px; height: 330px;
+      box-sizing: border-box;
+      .card-container {
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        padding: 27px;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+
+        h3 {
+          text-align: center;
+          font-size: 20px;
+          color: #fff;
+          font-weight: 800;
+          margin-bottom: 27px;
+        }
+
+        i {
+          width: 123px;
+          height: 123px;
+          display: inline-block;
+          margin: 0 auto;
+          text-align: center;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        p {
+          color: #fff;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 24px;
+          text-align: center;
+          margin-top: 10px;
+        }
+      }
+      &:nth-child(1) {
+        >div {
+          background-image: url('~static/gangweiIcon/z150.png');
+          i {
+            background-image: url('~static/gangweiIcon/z112.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        >div {
+          background-image: url('~static/gangweiIcon/z149.png');
+          i {
+            background-image: url('~static/gangweiIcon/z113.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        >div {
+          background-image: url('~static/gangweiIcon/z151.png');
+          i {
+            background-image: url('~static/gangweiIcon/z114.png');
+          }
+        }
+
+      }
+      &:nth-child(4) {
+        >div {
+          background-image: url('~static/gangweiIcon/z152.png');
+          i {
+            background-image: url('~static/gangweiIcon/z115.png');
+          }
+        }
+      }
+    }
+  }
+}
+
+.client-zhibo-box {
+  text-align: center;
+  margin: 0 auto;
+  h4 {
+    font-weight: 800;
+    font-size: 30px;
+    color: #333;
+    margin-bottom: 100px;
+  }
+}
+
+
+@media (max-width: 768px) {
+
+  .platform-products-experience {
+    .client-title {
+      font-weight: 800;
+      font-size: 18px;
+      color: #333;
+      margin-bottom: 3%;
+    }
+
+    p {
+      font-weight: 800;
+      font-size: 14px;
+      color: #565656;
+      line-height: 1.5;
+    }
+  }
+
+  .platform-four-youshi {
+    margin-bottom: 10%;
+    h4 {
+      font-size: 18px;
+      margin-bottom: 10%;
+    }
+
+    ul {
+      flex-wrap: wrap;
+      li {
+        width: 50%;
+        padding: 10px;
+        .card-container {
+          h3 {
+            font-size: 14px;
+          }
+          i {
+            width: 60px;
+            height: 60px;
+          }
+
+          p {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+
+  .client-zhibo-box {
+    text-align: center;
+    margin: 24px auto 48px;
+    h4 {
+      font-weight: 800;
+      font-size: 18px;
+      color: #333;
+      margin-bottom: 30px;
+    }
+
+    img {
+      height: 300px;
+    }
+  }
+
+
+  .platform-products-services {
+    margin-top: 3%;
+
+
+    .client-title {
+      font-weight: 800;
+      font-size: 18px;
+      color: #333;
+      margin-bottom: 10px;
+      padding: 0;
+    }
+  }
+
 }
 </style>

pages/product/renLiZiYuan.vue

@@ -5,64 +5,37 @@
       <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">
+    <div class="client-xuexishouyi-box client-container">
       <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 class="products-services-box">
+            <img :src="img1" alt="能力提升">
+            <img :src="img2" alt="能力提升">
           </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>
+          <imgCardLv2 class="my-imgCardLv2" :option="productData"></imgCardLv2>
         </li>
       </ul>
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn  />
       </div>
     </div>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
-
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
   </div>
 </template>
 
@@ -72,6 +45,9 @@ import videoDialog from "~/components/common/videoDialog";
 import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import {BannerImgs} from "~/defaultConfig";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
 
 /**
  * @ 产品与服务 -> 课程资源 -> 人力资源
@@ -89,8 +65,8 @@ export default {
     }
   },
   components: {
-    mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn},
+    mtaTable, videoDialog,applicationDialog,applyBtn,
+    freeTrialBtn,onlineInformationBtn, imgCardLv2},
   head(){
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
@@ -101,13 +77,40 @@ export default {
         },
         {
           name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          content:'青谷考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
   },
   data() {
     return {
+      productData: {
+        content: {
+          title: '掌握知识',
+          list: [
+            {
+              value: '明确人力资源的角色定位及岗位使命',
+            },
+            {
+              value: '针对人力资源管理中的难点及关键点，掌握相应的处理策略解决问题',
+            },
+            {
+              value: '了解不同性格的团队成员的管理方式，提高员工管理能力',
+            },
+            {
+              value: '掌握人力资源规划、招聘面试、人才管理等日常业务工作的难点及关键点',
+            },
+            {
+              value: '帮助人力资源管理者部署培养的方法及战略执行',
+            },
+          ],
+          order: 2,
+        },
+        img: {
+          url: require("~/static/productImage/p01.png"),
+          order: 1,
+        },
+      },
       tableConfig: [
         {
           label: '课程名称',
@@ -125,7 +128,7 @@ export default {
       tableData: [
         {
           name: '招聘与面试技巧',
-          shikanUrl: 'https://1111',
+          shikanUrl: 'https://spdb.mtavip.com/746bcb7504774fdbaa1b4351e316ae71/95a983029e0f450eaab4dbeeed1e547e-b61f71e9923afa45abc786599b7f5e2a-fd.mp4',
           hangye: '全行业',
           renqun: '人力专员'
         },
@@ -186,34 +189,122 @@ export default {
       ],
       curVideo: '',
       visible: false,
+      img1: require("~/static/productImage/p48.png"),
+      img2: require("~/static/productImage/p02.png"),
+      telDl: false,
     }
   },
   methods: {
     shiKan({url}) {
       this.visible = true;
       this.curVideo = url;
-    }
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/renLiZiYuan',}});
+    },
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.client-exam-page {
-  margin-top: 70px;
+
+.client-xuexishouyi-box {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 140px;
+  }
+  .products-services-box {
+    display: flex;
+  }
 }
 
-.client-banner-box {
-  height: 200px;
-  background: green;
-  text-align: center;
-  color: #fff;
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 98px;
+  }
+}
+div.client-xuexishouyi-box {
+  .products-services-box {
+    display: flex;
+    margin-bottom: 90px;
+    justify-content: flex-start;
+
+    img {
+      width: 446px;
+      height: 342px;
+
+      &:first-child {
+        margin-right: 190px;
+        width: 383px;
+        height: 344px;
+        padding-left: 50px;
+      }
+    }
+
+    @media (max-width: 768px) {
+      flex-direction: column;
+      justify-content: center;
+      margin-bottom: 3%;
+
+      img {
+        width: 80%;
+        height: 230px;
+        display: block;
+        margin: 0 auto !important;
+
+
+        &:nth-child(1) {
+          order: 2;
+          padding-left: 0px;
+        }
+
+        &:nth-child(2) {
+          order: 1;
+        }
+      }
+    }
+  }
 }
-.btns-group {
-  display: flex;
-  text-align: center;
-  .client-default-Btn {
-    width: 120px;
-    margin-right: 20px;
+
+
+@media (max-width: 768px) {
+
+  .client-xuexishouyi-box {
+    .client-title {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+
+    .products-services-box {
+      flex-direction: column;
+      img {
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 5%;
+      }
+    }
+
+    .my-imgCardLv2 {
+      margin-bottom: 10%;
+    }
   }
+
+  .platform-course-list {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+  }
+
 }
 </style>

pages/product/shengCanCaiGou.vue

@@ -1,215 +0,0 @@
-<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/shengChanCaiGou.vue

@@ -0,0 +1,199 @@
+<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>
+    </div>
+
+    <!--  岗位职责  -->
+    <gangweiList label="岗位职责" :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
+
+    <!--  部分课程列表  -->
+    <div class="platform-course-list client-container">
+      <h4>部分课程列表</h4>
+      <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
+      <div class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn/>
+      </div>
+    </div>
+
+    <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
+  </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 gangweiList from "@/components/common/layout/desComp/gangweiList";
+import {BannerImgs, shengchancaigou} from "~/defaultConfig";
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
+
+/**
+ * @ 产品与服务 -> 课程资源 -> 生产采购
+ */
+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, applicationDialog, applyBtn,
+    freeTrialBtn, onlineInformationBtn, gangweiList
+  },
+  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://spdb.mtavip.com/b5881822ee4644cb842dccd9993f8c8b/6c0cffcc55e348e48e56b3b75f10fa9f-d8b032061a1306cf1c52a43031edb9cd-fd.mp4',
+          hangye: '全行业',
+          renqun: '质量主管'
+        },
+        {
+          name: '安全生产职业适应性管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '安全生产主管'
+        },
+        {
+          name: '安全生产中的过程管理',
+          shikanUrl: '',
+          hangye: '全行业',
+          renqun: '安全生产主管'
+        },
+        {
+          name: '7S管理',
+          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,
+      telDl: false,
+    }
+  },
+  computed: {
+    gangwei() {
+      return shengchancaigou
+    }
+  },
+  methods: {
+    shiKan({url}) {
+      this.visible = true;
+      this.curVideo = url;
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/shengChangCaiGou',}});
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.platform-course-list {
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 68px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .platform-course-list {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 10%;
+      margin-top: 15%;
+    }
+  }
+  .client-nengli-box {
+    margin-bottom: 5%;
+  }
+}
+</style>

pages/product/shiChangYingXiao.vue

@@ -5,14 +5,11 @@
       <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>
+    <div class="client-shichang-xiaoshou client-container">
+      <div class="nav-btns">
         <span @click="changeStatus('shichang')" :class="{active: curActive}">市场部</span>
         <span @click="changeStatus('xiaoshou')" :class="{active: !curActive}">销售部</span>
       </div>
@@ -30,79 +27,30 @@
 
     <!--  岗位职责  -->
     <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>
+      <gangwei-list  v-if="curActive" label="岗位职责" :list="shichang" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>
+
+      <gangwei-list  v-else label="岗位职责" :list="xiaoshou" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>
 
-      <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">
+    <div class="platform-course-list client-container">
       <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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
   </div>
 </template>
 
@@ -111,7 +59,12 @@ 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";
+import {BannerImgs, shichangyingxiao_shichang, shichangyingxiao_xiaoshou} from "~/defaultConfig";
+import gangweiList from "~/components/common/layout/desComp/gangweiList";
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
+
+
 /**
  * @ 产品与服务 -> 课程资源 -> 市场营销
  */
@@ -129,8 +82,8 @@ export default {
     }
   },
   components: {
-    mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn},
+    mtaTable, videoDialog,applicationDialog,applyBtn,
+    freeTrialBtn,onlineInformationBtn, gangweiList},
   head(){
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
@@ -141,7 +94,7 @@ export default {
         },
         {
           name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          content:'青谷考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
@@ -165,7 +118,7 @@ export default {
       tableData: [
         {
           name: '如何分析营销环境',
-          shikanUrl: 'https://1111',
+          shikanUrl: 'https://spdb.mtavip.com/f813728dc8fc41deaf79f6b2e77a0924/b15429d54c4a48539389fa79e0417760-abed0e92e4daa63adf70e162177497ad-fd.mp4',
           hangye: '全行业',
           renqun: '市场专员'
         },
@@ -227,7 +180,7 @@ export default {
       tableData2: [
         {
           name: '高品质沟通与说服力',
-          shikanUrl: 'https://1111',
+          shikanUrl: 'https://spdb.mtavip.com/e6a69ffb67794f67a4954171dc306ee8/f0c35aeb8b2b42fca6e53b0e8c88d38b-ee89153189f93dd72235278de24d2e69-fd.mp4',
           hangye: '全行业',
           renqun: '市场专员'
         },
@@ -289,8 +242,17 @@ export default {
       curVideo: '',
       visible: false,
       curActive: true,
+      telDl: false,
     }
   },
+  computed: {
+    shichang() {
+      return shichangyingxiao_shichang
+    },
+    xiaoshou() {
+      return shichangyingxiao_xiaoshou
+    },
+  },
   methods: {
     shiKan({url}) {
       this.visible = true;
@@ -302,28 +264,108 @@ export default {
       } else {
         this.curActive = false;
       }
-    }
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/shiChangYingXiao',}});
+    },
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.client-exam-page {
-  margin-top: 70px;
-}
 
-.client-banner-box {
-  height: 200px;
-  background: green;
+.client-shichang-xiaoshou {
+  margin: 0 auto;
   text-align: center;
-  color: #fff;
+  .nav-btns {
+    width: 460px;
+    height: 80px;
+    margin: 46px auto 70px;
+    border-radius: 80px;
+    border: 1px solid #00b96b;
+    display: flex;
+    align-items: center;
+    padding: 5px;
+
+    span  {
+      width: 50%;
+      height: 100%;
+      line-height: 80px;
+      text-align: center;
+      cursor: pointer;
+      display: inline-block;
+      border-radius: 80px;
+      outline: none;
+
+
+
+      &.active {
+        background: #00b96b;
+        color: #fff;
+      }
+    }
+  }
 }
-.btns-group {
-  display: flex;
-  text-align: center;
-.client-default-Btn {
-  width: 120px;
-  margin-right: 20px;
+
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 98px;
+  }
 }
+
+@media (max-width: 768px) {
+
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+  }
+
+
+  .client-shichang-xiaoshou {
+    margin: 0 auto;
+    text-align: center;
+    .nav-btns {
+      width: 80%;
+      height: 40px;
+      margin: 25px auto 35px;
+      border-radius: 40px;
+      border: 1px solid #00b96b;
+      display: flex;
+      align-items: center;
+      padding: 3px;
+
+      span  {
+        display: inline-block;
+        width: 50%;
+        height: 100%;
+        line-height: 40px;
+        text-align: center;
+        cursor: pointer;
+        font-size: 16px;
+        border-radius: 40px;
+        outline: none;
+
+        &.active {
+          background: #00b96b;
+          color: #fff;
+        }
+      }
+    }
+  }
+
 }
 </style>

pages/product/xingZhengGuanLi.vue

@@ -5,58 +5,32 @@
       <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 class="client-container">
+      <div class="client-description-box">
+        行政部门主要负责企业的行政管理工作，配合业务部门进行文案写作、协调组织会议，商务接待、办公品采购等业务。
+      </div>
     </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>
+      <!--  岗位职责  -->
+      <gangweiList label="岗位职责" :list="gangwei" :pc-num="3" :h5-num="2"></gangweiList>
 
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
   </div>
 </template>
 
@@ -66,7 +40,10 @@ 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";
+import gangweiList from "@/components/common/layout/desComp/gangweiList";
+import {BannerImgs, xingzhengguanli} from "~/defaultConfig";
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
 
 /**
  * @ 产品与服务 -> 课程资源 -> 行政管理
@@ -74,7 +51,7 @@ import {BannerImgs} from "~/defaultConfig";
 
 export default {
   name: "professionalQuality",
-  layout:   'templateB',
+  layout: 'templateB',
   async asyncData({$axios}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.xingzhenguanli}),
@@ -85,9 +62,10 @@ export default {
     }
   },
   components: {
-    mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn, pingfen},
-  head(){
+    mtaTable, videoDialog,applicationDialog,applyBtn,
+    freeTrialBtn, onlineInformationBtn, pingfen, gangweiList
+  },
+  head() {
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
       meta: [
@@ -96,12 +74,17 @@ export default {
           content: '考试平台,试卷系统,试卷软件'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '青谷考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
   },
+  computed: {
+    gangwei() {
+      return xingzhengguanli
+    }
+  },
   data() {
     return {
       tableConfig: [
@@ -120,8 +103,8 @@ export default {
       ],
       tableData: [
         {
-          name: 'B堂课让你成为公文写作高手',
-          shikanUrl: 'https://1111',
+          name: '8堂课让你成为公文写作高手',
+          shikanUrl: 'https://spdb.mtavip.com/03e3ae34dadb497686c2f0e4c15efbcc/b6db3eb841b947c496217409607580b4-1bf53e080a22492976077770b1dcf352-fd.mp4',
           hangye: '全行业',
           renqun: '行政专员'
         },
@@ -170,17 +153,95 @@ export default {
       ],
       curVideo: '',
       visible: false,
+      telDl: false,
     }
   },
   methods: {
     shiKan({url}) {
       this.visible = true;
       this.curVideo = url;
-    }
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/xingZhengGuanLi',}});
+    },
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
 
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 98px;
+  }
+}
+
+.client-description-box {
+  width: 1257px;
+  height: 279px;
+  margin-top: 160px;
+  text-align: center;
+  padding: 110px;
+  box-sizing: border-box;
+  color: #565656;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 48px;
+  background-image: url("~static/productImage/p43.png");
+  background-position: center;
+  background-size: contain;
+}
+
+@media (max-width: 768px) {
+
+  .client-xuexishouyi-box {
+    .client-title {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+
+    .products-services-box {
+      flex-direction: column;
+      img {
+        width: 100%;
+        margin-bottom: 5%;
+      }
+    }
+
+    .my-imgCardLv2 {
+      margin-bottom: 10%;
+    }
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+  }
+
+
+  .client-description-box {
+    width: 100%;
+    height: 100%;
+    margin-top: 30px;
+    text-align: left;
+    padding: 0px;
+    box-sizing: border-box;
+    color: #565656;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    background: none;
+  }
+
+}
 </style>

pages/product/zhiYeSuYang.vue

@@ -5,63 +5,37 @@
       <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">
+    <div class="client-xuexishouyi-box client-container">
       <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 class="products-services-box">
+            <img :src="img1" alt="能力提升">
+            <img :src="img2" alt="能力提升">
           </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>
+          <imgCardLv2 class="my-imgCardLv2" :option="productData"></imgCardLv2>
         </li>
       </ul>
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <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 class="btn-groups center">
+        <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
+        <onlineInformationBtn/>
       </div>
     </div>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
+    <!--  申请方案  -->
+    <applicationDialog :visible.sync="telDl"></applicationDialog>
   </div>
 </template>
 
@@ -72,6 +46,9 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import pingfen from "~/components/common/pingfen";
 import {BannerImgs} from "~/defaultConfig";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
+import applicationDialog from "~/components/common/applicationDialog";
+import applyBtn from "~/components/common/applyBtn";
 
 /**
  * @ 产品与服务 -> 课程资源 -> 职业素养
@@ -79,7 +56,7 @@ import {BannerImgs} from "~/defaultConfig";
 
 export default {
   name: "professionalQuality",
-  layout:   'templateB',
+  layout: 'templateB',
   async asyncData({$axios}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.zhiyesuyang}),
@@ -90,9 +67,10 @@ export default {
     }
   },
   components: {
-    mtaTable, videoDialog,
-    freeTrialBtn,onlineInformationBtn, pingfen},
-  head(){
+    mtaTable, videoDialog,applicationDialog,applyBtn,
+    freeTrialBtn, onlineInformationBtn, pingfen, imgCardLv2
+  },
+  head() {
     return {
       title: '在线考试平台_在线考试软件_试卷软件系统',
       meta: [
@@ -101,14 +79,45 @@ export default {
           content: '考试平台,试卷系统,试卷软件'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '青谷考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
         }
       ],
     }
   },
   data() {
     return {
+      productData: {
+        content: {
+          title: '掌握知识',
+          list: [
+            {
+              value: '了解职业素养的相关内容，提高职业意识和职业化程度',
+            },
+            {
+              value: '掌握时间管理的方法和技巧，提高办公效率和精确度',
+            },
+            {
+              value: '通过学习快速了解压力的来源及情绪的调整，帮助处理好职场人际关系',
+            },
+            {
+              value: '熟练掌握沟通表达，商务呈现等必备职业技能',
+            },
+            {
+              value: '提升职业礼仪及修养，养成良好的职业习惯',
+            },
+          ],
+          order: 2,
+        },
+        img: {
+          url: require('~/static/productImage/p03.png'),
+          order: 1,
+        },
+        mianfei: true,
+        zixun: true,
+        shenqing: false,
+        myType: 'kaoshi'
+      },
       tableConfig: [
         {
           label: '课程名称',
@@ -126,7 +135,7 @@ export default {
       tableData: [
         {
           name: '人际沟通： 如何更好地表达自己',
-          shikanUrl: 'https://1111',
+          shikanUrl: 'https://spdb.mtavip.com/35f701ce4a094817840075f7a15ac66c/8fbb652cbb0b48cb80b3a95987cef4a1-10aa23e897426c048d748b09a4a76d6d-fd.mp4',
           hangye: '全行业',
           renqun: '职场新人'
         },
@@ -175,35 +184,124 @@ export default {
       ],
       curVideo: '',
       visible: false,
+      img1: require("~/static/productImage/p49.png"),
+      img2: require("~/static/productImage/p04.png"),
+      telDl: false,
     }
   },
   methods: {
     shiKan({url}) {
       this.visible = true;
       this.curVideo = url;
-    }
+    },
+    onApplyBtnActive() {
+      this.telDl = true;
+    },
+    onApplyBtnActiveH5() {
+      this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/product/zhiYeSuYang',}});
+    },
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.client-exam-page {
-  margin-top: 70px;
+
+.client-xuexishouyi-box {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 140px;
+  }
+
+  .products-services-box {
+    display: flex;
+  }
 }
 
-.client-banner-box {
-  height: 200px;
-  background: green;
-  text-align: center;
-  color: #fff;
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 98px;
+  }
 }
-.btns-group {
+
+.products-services-box {
   display: flex;
-  text-align: center;
-  .client-default-Btn {
-    width: 120px;
-    margin-right: 20px;
+  margin-bottom: 90px;
+  justify-content: flex-start;
+
+  img {
+    width: 446px;
+    height: 342px;
+
+    &:first-child {
+      margin-right: 190px;
+      width: 383px;
+      height: 344px;
+      padding-left: 50px;
+    }
   }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 3%;
+
+    img {
+      width: 100%;
+      height: 200px;
+      margin: 0;
+
+
+      &:nth-child(1) {
+        order: 2;
+        padding: 0;
+      }
+
+      &:nth-child(2) {
+        order: 1;
+      }
+    }
+  }
+
+}
+
+
+
+@media (max-width: 768px) {
+  .client-xuexishouyi-box {
+    .client-title {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+
+    .products-services-box {
+      flex-direction: column;
+
+      img {
+        max-width: 100%;
+        height: auto;
+        margin-bottom: 5%;
+      }
+    }
+
+    .my-imgCardLv2 {
+      margin-bottom: 10%;
+    }
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 20px;
+      margin-bottom: 10%;
+    }
+  }
+
 }
 
 </style>

pages/registerPhone.vue

@@ -9,7 +9,7 @@
         </el-form-item>
         <div id="your-dom-id" class="nc-container"></div>
         <el-form-item prop="verification">
-          <div class="verification">
+          <div class="verification" style="display: flex">
             <el-input v-model="telChangeDate.verification" placeholder="请输入验证码" class="course-develop-input-code"></el-input>
             <el-button  @click="checkVerification" :disabled="btnTextDisabled" class="course-develop-code-btn">{{btnText}}</el-button>
           </div>

pages/restaurant.vue

@@ -1,82 +0,0 @@
-<template>
-  <!-- 食品餐饮-详情页 -->
-  <div class="client-restaurant-page">
-
-    <!-- 食品餐饮banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 食品餐饮行业现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">食品餐饮行业现状</h4>
-      <div class="client-container">
-        <p>经济的不断发展也让餐饮文化的传播越来越国际化和市场化，餐饮业在市场的扩张下，门店普遍较多，一线工作人员一般都随门店呈散点状分布在全国，甚至全球。但是由于培训成本较高，导致服务规范、操作流程、售后体系等方面都不能够统一，麦塔培训考试系统，支持手机在线答题、在线课程学习，还支持对接微信、钉钉等第三方平台使用，非常适合餐饮业的培训考试需求。</p>
-        <img :src="developImg" alt="食品餐饮行业现状" />
-      </div>
-    </div>
-
-    <!-- 我们的系统为您改变了什么  -->
-    <div class="restaurant-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container">
-        <div class="industrydetails-content fn-clear mt48">
-          <div class="change-content-left">
-            <h5>传统方式可能会出现的问题</h5>
-            <ul>
-              <li><i></i><p>员工素质普遍较低，服务意识较差，培训成本过大</p></li>
-              <li><i></i><p>很难有集中的时间统一学习，员工培训收益有限</p></li>
-              <li><i></i><p>连锁餐饮企业的学习资源共享难，浪费情况严重</p></li>
-              <li><i></i><p>考核难以监控，考试结果的真实性未可知</p></li>
-              <li><i></i><p>门店分散，服务质量难以把控</p></li>
-            </ul>
-          </div>
-          <img :src="changeImg" alt="vs" />
-          <div class="change-content-right">
-            <h5>我们可以帮您解决的问题</h5>
-            <ul>
-              <li><i></i><p>组织在线培训课程、在线考试，多种方式提升员工能力</p></li>
-              <li><i></i><p>支持跨平台学习，电脑端、手机端无缝对接，线上就能学</p></li>
-              <li><i></i><p>建立行业知识库，多层级多分支收纳技能知识，存取自如</p></li>
-              <li><i></i><p>自动生成并推送管理员报告、学员报告，随时随地查看练习情况</p></li>
-              <li><i></i><p>针对门店生成个性化学习服务，制作微课、长课课程，提高员工服务意识、食品安全意识</p></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-    export default {
-        name: 'restaurant',
-        layout:     'templateB',
-        data() {
-          return {
-            // 发展现状img
-            developImg:   require(`~/static/images/client/industrydetails/restaurant-develop-img.png`),
-            // 我们的系统为您改变了什么 img
-            changeImg:   require(`~/static/images/client/industrydetails/restaurant-change-img.png`),
-          }
-        },
-      head() {
-        return {
-          title: '食品餐饮业培训系统_食品行业培训系统_餐饮行业培训系统',
-          meta:  [
-            {
-              description: '随着社会经济的不断发展，餐饮消费的方式日益多元化与现代化，品牌化、规模化、连锁式、跨区域式餐饮经营是未来的趋势，餐饮文化的传播将越来越国际化和市场化。',
-              keywords:    '食品餐饮业培训系统,食品行业培训系统,餐饮行业培训系统',
-            },
-          ],
-        };
-      },
-    };
-</script>
-
-<style scoped>
-
-</style>

pages/solution/biteAndSup.vue

@@ -4,10 +4,8 @@
     <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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
     <!--  视频餐饮培训现状  -->
@@ -19,117 +17,60 @@
     </div>
 
     <!--  视频餐饮培训的痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>食品餐饮培训的痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <span>人力成本过大，员工素质普遍较低</span>
+          <div>
+            <i></i>
+            <p>人力成本过大，员工素质普遍较低</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>连锁餐饮企业学习资源共享困难，造成浪费</span>
+          <div>
+            <i></i>
+            <p>连锁餐饮企业学习资源共享困难，造成浪费</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>餐饮卫生安全隐患问题严重，员工意识不强</span>
+          <div>
+            <i></i>
+            <p>餐饮卫生安全隐患问题严重，员工意识不强</p>
+          </div>
         </li>
       </ul>
     </div>
 
     <!--  青谷解决方案  -->
-    <div class="platform-products-services">
+    <div class="client-fangan-box client-container">
       <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>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item green"/>
+        </div>
+      </imgCardLv2>
     </div>
 
-    <!--  金融保险类课程案例  -->
-    <div class="client-anli-box">
-      <h4>金融保险类课程案例</h4>
-      <p>青谷软件可为金融保险行业定制电子化课程</p>
+    <!--  食品餐饮类课程案例  -->
+    <div class="client-anli-box client-container">
+      <h4>食品餐饮类课程案例</h4>
+      <p>青谷软件可为食品餐饮行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '粮食作物营养失调',  url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '大益茶产品知识介绍',  url: video1, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '如果营养会说话',  url: video1, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
 
 
     <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
+    <desWithCode source="biteAndSup"></desWithCode>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
 
@@ -145,27 +86,173 @@ import newsComp2 from "~/components/common/newsComp2";
 import {BannerImgs} from "~/defaultConfig";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
+import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "@/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 食品餐饮
  */
 export default {
   name: "biteAndSup",
-  layout:   'templateB',
-  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  layout: 'templateB',
+  components: {
+    chanPinTiYan,
+    freeTrialBtn,
+    onlineInformationBtn,
+    newsComp2,
+    videoDialog,
+    videoCard,
+    desWithCode,
+    imgCardLv2
+  },
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.shipincanyin}),
     ];
-    const [ res2] = await Promise.all(arr);
+    const [res2] = await Promise.all(arr);
     return {
       bannerList: res2.data.data || [],
     }
   },
+  head() {
+    return {
+      title: '在线培训系统_在线考试系统_直播培训',
+      meta: [
+        {
+          name: 'keywords',
+          content: 'AI防作弊系统_企业培训系统_直播课程系统'
+        },
+        {
+          name: 'description',
+          content: '青谷在线考试系统可定制开发，拥有私有化考试培训系统，支持直播培训，解决异业考试难点。'
+        }
+      ],
+    }
+  },
   data() {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '强大的人员管理和培训功能',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
+              },
+              {
+                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require(`~/static/productImage/p52.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能考试系统，保障考试公平公正',
+            list: [
+              {
+                value: '考前人脸身份核验，权威数据确保本人考试',
+              },
+              {
+                value: '支持多种组卷模式，随机组卷每个学员不同试卷，杜绝相互抄袭',
+              },
+              {
+                value: '系统自动阅卷，无需人工干预，节约不必要的人力资源',
+              },
+              {
+                value: '多维度、多角度分析考试结果，掌握学员考试情况 ',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require(`~/static/productImage/p53.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '良好的高并发性，系统稳定性高',
+            list: [
+              {
+                value: '采用的运行稳定、安全性很高的JAVA语言开发',
+              },
+              {
+                value: '拥有强大的考试并发负载能力，支持万人以上考生同时在线考试',
+              },
+              {
+                value: '分布式微服务架构、开放、安全、高能、高可靠的服务调用',
+              },
+              {
+                value: '为企业快速、灵活构建大规模分布式服务应用提供基础',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require(`~/static/productImage/p54.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require(`~/static/productImage/p55.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
+
+      // 食品餐饮
+      img1: require(`~/static/videoImages/v13.jpg`),
+      video1: 'https://spdb.mtavip.com/5f8f4c259f67465eafe9f315b799c4db/229b174530e142299cc3d387c9531366-4ade59f9160a3e5f6fb8a11c594f86cf-fd.mp4',
+      img2: require(`~/static/videoImages/v14.jpg`),
+      video2: 'https://spdb.mtavip.com/c5deff6e41434ef1b27ef76d2be34b7b/5c01fefa753c425fab6ca5247990b3bd-f2035ff58366e6ffc0edeb57ebe74aa6-fd.mp4',
+      img3: require(`~/static/videoImages/v15.jpg`),
+      video3: 'https://spdb.mtavip.com/dee99cbf75764346bd0337084d87d9c1/a7f474ce23e44d0b8de6812a36df09f7-7289ede2ffef7d40a2d077a3a92e1137-fd.mp4',
     }
   },
   methods: {
@@ -177,6 +264,80 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.banner-btn-groups {
+  left: 0;
+  top: 450px !important;
+
+  .solution-biteAndSup {
+    color: #00b96b;
+    border-color: #fff;
+    width: 190px;
+    height: 60px;
+    line-height: 60px;
+    border-radius: 50px;
+    background: #fff;
+  }
+}
+
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z97.png');
+          }
+        }
+      }
+
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z102.png');
+          }
+        }
+      }
+
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z101.png');
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    ul {
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: none;
+          }
+        }
+
+        &:nth-child(2) {
+          div {
+            background-image: none;
+          }
+        }
+
+        &:nth-child(3) {
+          div {
+            background-image: none;
+          }
+        }
+      }
+    }
+  }
+}
 
 </style>

pages/solution/education.vue

@@ -4,10 +4,8 @@
     <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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
     <!--  教育机构培训现状  -->
@@ -20,112 +18,62 @@
     </div>
 
     <!--  教育机构培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
+      <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">支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分</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>
+            <i></i>
+            <p>学员分散，来源各异，组织通过的学习与考试非常困难</p>
           </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>
+            <i></i>
+            <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
           </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>
+            <i></i>
+            <p>老师与学员之间缺乏有效的沟通，教学成果较难把控</p>
           </div>
         </li>
       </ul>
     </div>
 
+    <!--  青谷解决方案  -->
+    <div class="client-fangan-box client-container">
+      <h4>青谷解决方案</h4>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item green" />
+        </div>
+      </imgCardLv2>
+    </div>
+
+
     <!--  教育培训类型课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>教育培训类课程案例</h4>
       <p>青谷软件可为教育培训行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: 'FLASH动画课程', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: 'DNA是基因携带者的科学探索', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '视频课程', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '桃李', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '名师讲堂', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '国际贸易',url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
 
     <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
+    <desWithCode source="education"></desWithCode>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
 
@@ -140,6 +88,8 @@ import newsComp2 from "~/components/common/newsComp2";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
 import {BannerImgs} from "~/defaultConfig";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 教育机构
@@ -147,7 +97,7 @@ import {BannerImgs} from "~/defaultConfig";
 export default {
   name: "education",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.jiaoyujigou}),
@@ -157,10 +107,136 @@ export default {
       bannerList: res2.data.data || [],
     }
   },
+  head() {
+    return {
+      title: '网校教育系统_教育考试系统_教育培训系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '网校教育系统搭建_直播系统_教育课件开发_试题软件'
+        },
+        {
+          name: 'description',
+          content: '青谷在线考试系统具备完善的培训学习与考试功能，支持电子课件、在线直播、在线考试、智能阅卷、统计分析等高效、全面的服务，是教育机构办学不可或缺的利器。'
+        }
+      ],
+    }
+  },
   data() {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '强大的人员管理和培训功能',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
+              },
+              {
+                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url:  require(`~/static/productImage/p31.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url:  require(`~/static/productImage/p50.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require(`~/static/productImage/p29.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能阅卷，多维度、可视化学情分析',
+            list: [
+              {
+                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url:  require(`~/static/productImage/p51.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
+
+      // 教育培训类视频
+      img1: require(`~/static/videoImages/v04.jpg`),
+      video1: 'https://spdb.mtavip.com/0e4ec2db83c54a22964f1775185a5ad4/a1f95efe0ae0435ebdc20dbef49f52ed-67733e62208b08b31fe3621ebe8bded9-fd.mp4',
+      img2: require(`~/static/videoImages/v05.jpg`),
+      video2: 'https://spdb.mtavip.com/08b23a5fb46b4c44a567cd024e3ca2f7/9846515e9dd4433580ac5b152c6b51a8-88c0bc171016e13a32401660342157b7-fd.mp4',
+      img3: require(`~/static/videoImages/v06.jpg`),
+      video3: 'https://spdb.mtavip.com/b5785152b8ed4b50a2e8b6c2e508570c/639831aceafb4524a15b43cea7e7e0de-04876ac4d5fd414d8a4f1abe343bee52-fd.mp4',
     }
   },
   methods: {
@@ -172,6 +248,72 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.banner-btn-groups {
+  left: 0;
+  top: 450px !important;
+  .solution-education {
+    color: #00b96b;
+    border-color: #fff;
+    width: 190px;
+    height: 60px;
+    line-height: 60px;
+    border-radius: 50px;
+    background: #fff;
+  }
+}
+
+  .client-tongdian-box {
+    ul {
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: url("~static/gangweiIcon/z91.png");
+
+            i {
+              background-image: url('~static/gangweiIcon/z97.png');
+            }
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: url("~static/gangweiIcon/z92.png");
+            i {
+              background-image: url('~static/gangweiIcon/z103.png');
+            }
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: url("~static/gangweiIcon/z93.png");
+            i {
+              background-image: url('~static/gangweiIcon/z104.png');
+            }
+          }
+        }
+      }
+    }
+    @media (max-width: 768px) {
+      ul {
+        li {
+          &:nth-child(1) {
+            div {
+              background-image: none;
+            }
+          }
+          &:nth-child(2) {
+            div {
+              background-image: none;
+            }
+          }
+          &:nth-child(3) {
+            div {
+              background-image: none;
+            }
+          }
+        }
+      }
+    }
+  }
 
 </style>

pages/solution/energy.vue

@@ -4,10 +4,8 @@
     <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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
     <!--  能源化工培训现状  -->
@@ -19,112 +17,61 @@
     </div>
 
     <!--  能源化工培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
+      <h4>能源化工培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+          <div>
+            <i></i>
+            <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+          </div>
+
         </li>
         <li>
-          <i></i>
-          <p>员工数量庞大，组织培训考核的成本高昂</p>
+          <div>
+            <i></i>
+            <p>员工数量庞大，组织培训考核的成本高昂</p>
+          </div>
+
         </li>
         <li>
-          <i></i>
-          <p>培训体系不健全，没有形成培养学习者的长效机制</p>
+          <div>
+            <i></i>
+            <p>培训体系不健全，没有形成培养学习者的长效机制</p>
+          </div>
         </li>
       </ul>
     </div>
 
     <!--  青谷解决方案  -->
-    <div class="platform-products-services">
+    <div class="client-fangan-box client-container">
       <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>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item green" />
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  能源化工类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>能源化工类课程案例</h4>
       <p>青谷软件可为能源化工行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '中集集团新员工培训', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '中国核建新员工培训', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '中国石油培训课程', url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
 
     <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
+    <desWithCode source="energy"></desWithCode>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
   </div>
@@ -139,13 +86,16 @@ import newsComp2 from "~/components/common/newsComp2";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
 import {BannerImgs} from "~/defaultConfig";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
+
 /**
  * @ 解决方案 -> 能源化工
  */
 export default {
   name: "energy",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.nengyuanhuagong}),
@@ -155,10 +105,136 @@ export default {
       bannerList: res2.data.data || [],
     }
   },
+  head() {
+    return {
+      title: '答题考试系统_企业在线学习平台_企业培训软件',
+      meta: [
+        {
+          name: 'keywords',
+          content: '答题考试系统_课件开发_企业培训软件'
+        },
+        {
+          name: 'description',
+          content: '青谷在线考试系统致力于让各企业、机关单位、学校的大型考试更易于组织，真正有效地实现线上考试培训活动。'
+        }
+      ],
+    }
+  },
   data() {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '强大的人员管理和培训功能',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
+              },
+              {
+                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require(`~/static/productImage/p33.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require(`~/static/productImage/p32.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require(`~/static/productImage/p34.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能阅卷，多维度、可视化学情分析',
+            list: [
+              {
+                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require(`~/static/productImage/p30.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
+
+      // 能源化工类课程案例
+      img1: require(`~/static/videoImages/v07.jpg`),
+      video1: 'https://spdb.mtavip.com/cbfb70b9aaab4c909220bd2e732825e4/788ce45782ff44e18a64583610395958-86e0efd31a0818b7943d83877a1084b7-fd.mp4',
+      img2: require(`~/static/videoImages/v08.jpg`),
+      video2: 'https://spdb.mtavip.com/e6558093b12841cd87139fef030b4d7b/8f0742e4bc61419087782446453769bb-14beb69eae12dd7f678fccfeda7bb53b-fd.mp4',
+      img3: require(`~/static/videoImages/v09.jpg`),
+      video3: 'https://spdb.mtavip.com/826f3de2be6c4659ac66aac902a705bb/732842113622415bb81159ea1344d382-b9a3f73d217f00af700f50ea10377906-fd.mp4',
     }
   },
   methods: {
@@ -170,6 +246,73 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.banner-btn-groups {
+  left: 0;
+  top: 450px !important;
+  .solution-energy {
+    color: #00b96b;
+    border-color: #fff;
+    width: 190px;
+    height: 60px;
+    line-height: 60px;
+    border-radius: 50px;
+    background: #fff;
+  }
+}
+
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z97.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z98.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z99.png');
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    ul {
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: none;
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: none;
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: none;
+          }
+        }
+      }
+    }
+  }
+}
 
 </style>

pages/solution/erupt.vue

@@ -4,53 +4,40 @@
     <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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
+
     <!--  随机组卷算法  -->
-    <div class="client-suijizujuan-box">
+    <div class="client-suijizujuan-box client-container">
       <h4>随机组卷算法</h4>
-      <div>
-        <div>
-          <p>随机组卷算法是考试系统中最耗费性能的一项工作，因为在随机出卷的基础上，系统还要均衡试题被随机抽中的概率，避免试题被边缘化。</p>
-          <h3>解决方案</h3>
-          <p>青谷拥有一套全面、高效的随机组卷算法技术、通过优化数据算法结构和试题概率重组分配技术，能够快速计算抽中试题的随机率和分配率，极大地减轻了随机算法带来的压力。</p>
-          <onlineInformationBtn />
+
+      <imgCardLv4 :option="productList[0]">
+        <div class="btn-groups">
+          <onlineInformationBtn class="green" myType="2" />
         </div>
-        <img src="#">
-      </div>
+      </imgCardLv4>
     </div>
 
     <!--  同时请求次数  -->
-    <div class="client-suijizujuan-box">
+    <div class="client-suijizujuan-box client-container">
       <h4>同时请求次数</h4>
-      <div>
-        <img src="#">
-        <div>
-          <p>无论是企业还是学校在组织线上考试时，学员几乎都是同一时间进入考试的，这对于在线考试并发压力是一个很大的考验，这也是请求次数频繁导致的服务器压力过大，甚至崩溃的主要的原因</p>
-          <h3>解决方案</h3>
-          <p>青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率，如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。</p>
-          <onlineInformationBtn />
+      <imgCardLv4 :option="productList[1]">
+        <div class="btn-groups">
+          <onlineInformationBtn class="green"  myType="2" />
         </div>
-      </div>
+      </imgCardLv4>
     </div>
 
     <!--  读写数据量大  -->
-    <div class="client-suijizujuan-box">
+    <div class="client-suijizujuan-box client-container">
       <h4>读写数据量大</h4>
-      <div>
-        <img src="#">
-        <div>
-          <p>读写数据量大也是影响在线并发考试压力的主要因素之一，尤其是在短时间内频繁地向数据库读取</p>
-          <h3>解决方案</h3>
-          <p>青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率，
-            如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。</p>
-          <onlineInformationBtn />
+      <imgCardLv4 :option="productList[2]">
+        <div class="btn-groups">
+          <onlineInformationBtn class="green" myType="2" />
         </div>
-      </div>
+      </imgCardLv4>
     </div>
 
     <!--  描述区域  -->
@@ -58,28 +45,34 @@
       <p>青谷将持续提升“服务器性能”，使之能满足高并发大数据的多人考试解决方案，
       致力于让各企业、学校的大型考试更易于组织，真正有效！
       </p>
-      <onlineInformationBtn />
+      <onlineInformationBtn class="solution-exam-online" />
     </div>
 
     <!--  客户案例  -->
-    <div class="client-kehuanli-box">
+    <div class="client-kehuanli-box experience-swiper-box client-container">
+
+      <h4>客户案例</h4>
+
       <!--   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 class="anli-box-wrap mta-hidden-xs">
+        <el-carousel indicator-position="none" class="anli-box mta-hidden-xs" :interval="5000" height="200px">
+          <el-carousel-item v-for="item in anliList" :key="item.iild">
+            <div class="anli-content-pc">
+              <img :src="item.pic">
+              <div>
+                <h3>{{item.title}}</h3>
+                <p>{{item.intro}}</p>
+              </div>
             </div>
-          </div>
-        </el-carousel-item>
-      </el-carousel>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+
       <!--   H5   -->
-      <div v-swiper:mySwiper="swiperOption" class="swiper-container mta-hidden-sm">
-        <div class="swiper-wrapper">
+<!--      <div v-swiper:mySwiper="swiperOption" class="swiper-container mta-hidden-sm">
+        <div class="swiper-wrapper experience-content-box">
           <div class="swiper-slide" v-for="item in anliList" :key="item.iild">
-            <div>
+            <div class="anli-content">
               <img :src="item.pic">
               <div>
                 <h3>{{item.title}}</h3>
@@ -87,19 +80,37 @@
               </div>
             </div>
           </div>
-
         </div>
         <div class="swiper-pagination swiper-pagination-style"></div>
         <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+      </div>-->
+      <div class="experience-swiper-box mta-hidden-sm">
+        <div v-swiper:mySwiper="swiperOption" class="swiper-container">
+          <div class="swiper-wrapper experience-content-box">
+            <div class="swiper-slide" v-for="item in anliList" :key="item.iild">
+              <div class="anli-content">
+                <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="left-bg mta-hidden-xs"></div>
+      <div class="right-bg mta-hidden-xs"></div>
+      <div class="center-bg mta-hidden-xs"></div>
     </div>
 
     <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
+    <desWithCode source="erupt"></desWithCode>
   </div>
 </template>
 
@@ -108,14 +119,17 @@ 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 {BannerImgs, classifys} from "~/defaultConfig";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv4 from "~/components/common/layout/imgDes/imgCardLv4";
+
 /**
  * @ 解决方案 -> 万人高并发
  */
 export default {
   name: "erupt",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode, imgCardLv4},
   async asyncData({$axios, store}) {
     const opt = {
       page:           1,
@@ -125,31 +139,79 @@ export default {
 
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.wanrengaobingfa}),
-      $axios.post('/home/news/list', opt)
+      $axios.$post(`/home/news/carousel`, {newsClassifyId: classifys.wanrengaobingfa.classify, 'keyword': classifys.wanrengaobingfa.keyword})
+      // $axios.post('/home/news/list', opt)
     ];
     const [res2, res3] = await Promise.all(arr);
     return {
       bannerList: res2.data.data || [],
-      anliList: res3.data.data.data || [],
+      anliList: res3.data.data || [],
     }
   },
   head(){
     return {
-      title: '在线考试平台_在线考试软件_试卷软件系统',
+      title: '在线考试系统_在线培训系统_防作弊考试系统',
       meta: [
         {
           name: 'keywords',
-          content: '考试平台,试卷系统,试卷软件'
+          content: '在线学习培训系统，培训考试系统，课件资源'
         },
         {
           name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          content:'青谷在线考试系统支持万人同时在线考试，满足大型企业与教育机构在线考试需求。'
         }
       ],
     }
   },
   data() {
     return {
+      productList: [
+        {
+          content: {
+            des1: '随机组卷算法是考试系统中最耗费性能的一项工作，因为在随机出卷的基础上，系统还要均衡试题被随机抽中的概率，避免试题被边缘化。',
+            des: '青谷拥有一套全面、高效的随机组卷算法技术、通过优化数据算法结构和试题概率重组分配技术，能够快速计算抽中试题的随机率和分配率，极大地减轻了随机算法带来的压力。',
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p22.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            des1: '无论是企业还是学校在组织线上考试时，学员几乎都是同一时间进入考试的，这对于在线考试并发压力是一个很大的考验，这也是请求次数频繁导致的服务器压力过大，甚至崩溃的主要的原因',
+            des: '青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率，如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。',
+            order: 2,
+          },
+          img: {
+            url:  require(`~/static/productImage/p24.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            des1: '读写数据量大也是影响在线并发考试压力的主要因素之一，尤其是在短时间内频繁地向数据库读取',
+            des: '青谷分布式微服务架构能很好地解决这一问题，配备具有多个节点的服务器，每个节点会根据用户请求地域就近分配来提高访问速率,如果当前节点的请求压力过大，系统还会自动将用户分配到节点相对较少的服务器上，从而实现网络的请求负载平衡。',
+            order: 1,
+          },
+          img: {
+            url:  require(`~/static/productImage/p23.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+      ],
       swiperOption: {
         pagination: {
           el: '.swiper-pagination',
@@ -171,6 +233,124 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.client-banner-box div.client-platform-banner {
+  .banner-btn-groups.left {
+    left: 100px;
+    top: 466px;
+
+    .solution-erupt {
+      background: #eef106;
+      color: #00b96b;
+      width: 180px;
+      height: 60px;
+      line-height: 60px;
+      border-radius: 50px;
+      border-color: #eef106;
+    }
+  }
+}
+
+.client-suijizujuan-box {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-top: 130px;
+    margin-bottom: 100px;
+    text-align: center;
+  }
+}
+
+.client-description-box {
+  width: 100%;
+  height: 240px;
+  background-image: url("~static/codeImage/code-bj01.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding: 80px 0 0 0;
+  margin: 0 auto;
+  text-align: center;
+
+  p {
+    color: #fff;
+    font-size: 26px;
+    font-weight: 800;
+    text-align: center;
+    width: 1000px;
+    line-height: 1.5;
+    margin: 0 auto 30px;
+  }
+}
+
+
+.anli-content-pc {
+  display: flex;
+  padding: 40px;
+  img {
+    width: 409px;
+    height: 225px;
+    margin-right: 35px;
+  }
+
+  >div {
+    h4 {
+      font-size: 24px;
+      color: #333;
+      line-height: 36px;
+      font-weight: 800;
+    }
+
+    p {
+      font-size: 18px;
+      color: #333;
+      line-height: 30px;
+      font-weight: 400;
+      -webkit-line-clamp:3;
+      text-overflow: ellipsis;
+      -o-text-overflow: ellipsis;
+      overflow: hidden;
+      word-wrap: break-word;
+      display: -webkit-box;
+      white-space: normal !important;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+
+
+.solution-exam-online {
+  background: #F7DA5C;
+  color: #fff;
+  border-color: #F7DA5C;
+}
+
+@media (max-width: 768px) {
+
+  .client-suijizujuan-box {
+    h4 {
+      font-size: 18px;
+      margin-top: 10%;
+      margin-bottom: 10%;
+    }
+  }
+
+  .client-description-box {
+    height: 140px;
+    box-sizing: border-box;
+    background-size: cover;
+    padding-top: 10px;
+    p {
+      color: #fff;
+      font-size: 14px;
+      font-weight: 800;
+      text-align: center;
+      width: 80%;
+      line-height: 1.5;
+      margin: 0 auto 10px;
+    }
+  }
+
+}
 
 </style>

pages/solution/exam.vue

@@ -5,118 +5,35 @@
 
       <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 />
+        class="client-platform-banner">
+      </div>
     </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>
+    <gangweiList label="常见严肃性考试场景" :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
+
 
     <!--  严肃性考试解决方案  -->
-    <div class="platform-products-services">
+    <div class="platform-products-services client-container">
       <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>
+      <imgCardLv2 class="img-card" :option="item" v-for="(item,index) in productList" :key="index" :col-pc="3"
+                  :col-h5="2">
+        <div class="btn-groups">
+          <onlineInformationBtn class="online-information-btn btn-item green" v-if="item.zixun"/>
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  宣传图  -->
     <div class="client-xuanchuan-box">
       <h4>青谷为您打造专业的严肃性在线考试解决方案</h4>
-      <onlineInformationBtn></onlineInformationBtn>
+      <onlineInformationBtn class="solution-exam-online"></onlineInformationBtn>
     </div>
 
-    <!--  严肃性考试热门问答  -->
-    <div class="client-wenda-box">
+    <!--  严肃性考试热门问答 PC -->
+    <div class="client-wenda-box client-container mta-hidden-xs">
       <h4>严肃性考试热门问答</h4>
-      <div>
+      <div class="wenda-content">
         <ul>
           <li :class="{active: curActive === 1}" @click="curActive = 1">1. 考试前开启身份证认证、人脸识别是否会耽误考试时间？</li>
           <li :class="{active: curActive === 2}" @click="curActive = 2">2. 开启摄像头监控后，考生的摄像头遇到用不了的情况怎么解决？</li>
@@ -125,41 +42,87 @@
           <li :class="{active: curActive === 5}" @click="curActive = 5">5. 如果您还有更多的疑惑，请联立即联系我们</li>
         </ul>
 
-        <div v-if="curActive === 1">
-          <span>问</span>考试前开启身份证、人脸识别是否会耽误考试时间？
-          <span>答</span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可
+        <div class="answer-box" v-if="curActive === 1">
+          <div><span>问</span><span>考试前开启身份证、人脸识别是否会耽误考试时间？</span></div>
+          <div><span>答</span><span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可</span>
+          </div>
         </div>
 
-        <div v-if="curActive === 2">
-          <span>问</span>开启摄像监考后，考生的摄像头遇到用不了的情况怎么解决？
-          <span>答</span>正常情况下摄像头都是可以使用的；当然如有无法使用的情况，其原因有多种，我们已提供相关的解决方案，考生可以根据操作指引启用电脑摄像头。
+        <div class="answer-box" v-if="curActive === 2">
+          <div><span>问</span><span>开启摄像监考后，考生的摄像头遇到用不了的情况怎么解决？</span></div>
+          <div><span>答</span><span>正常情况下摄像头都是可以使用的；当然如有无法使用的情况，其原因有多种，我们已提供相关的解决方案，考生可以根据操作指引启用电脑摄像头。</span></div>
         </div>
 
-        <div v-if="curActive === 3">
-          <span>问</span>考试人数多的情况下系统稳定有保障吗？
-          <span>答</span>如果考试人数过多，系统将采用分布式部署，保证系统稳定性。目前已有很多的企业使用青谷组织过超过万人高并发在线考试，我们会为您提供技术支持，考试人数再多页可保障系统稳定性。
+        <div class="answer-box" v-if="curActive === 3">
+          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
+          <div>
+            <span>答</span><span>如果考试人数过多，系统将采用分布式部署，保证系统稳定性。目前已有很多的企业使用青谷组织过超过万人高并发在线考试，我们会为您提供技术支持，考试人数再多页可保障系统稳定性。</span>
+          </div>
         </div>
 
-        <div v-if="curActive === 4">
-          <span>问</span>考生在考试中途遇到死机中断怎么办？？
-          <span>答</span>青谷考试带有每五分钟自动保存功能，时间节点内的答题数据都会保留。
+        <div class="answer-box" v-if="curActive === 4">
+          <div><span>问</span><span>考生在考试中途遇到死机中断怎么办？？</span></div>
+          <div><span>答</span><span>青谷考试带有每五分钟自动保存功能，时间节点内的答题数据都会保留。</span></div>
         </div>
 
-        <div v-if="curActive === 5">
+        <div class="answer-box answer-kefu" v-if="curActive === 5">
+          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
           <div>
-            <p>客服电话： 400-0990-883</p>
-            <p>QQ:227551695</p>
+            <div class="answer-kefu-box">
+              <div>
+                <p>客服电话：400-0990-883</p>
+                <p>客服 QQ：227551695</p>
+              </div>
+              <img :src="img1">
+            </div>
           </div>
-          <img src="#">
         </div>
       </div>
     </div>
+    <!--  严肃性考试热门问答 H5 -->
+    <div class="client-wenda-box-h5 client-container mta-hidden-sm">
+      <h4>严肃性考试热门问答</h4>
+      <div class="wenda-content">
+        <div class="answer-box">
+          <div><span>问</span><span>考试前开启身份证、人脸识别是否会耽误考试时间？</span></div>
+          <div><span>答</span><span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可</span>
+          </div>
+        </div>
 
-    <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
+        <div class="answer-box">
+          <div><span>问</span><span>开启摄像监考后，考生的摄像头遇到用不了的情况怎么解决？</span></div>
+          <div><span>答</span><span>正常情况下摄像头都是可以使用的；当然如有无法使用的情况，其原因有多种，我们已提供相关的解决方案，考生可以根据操作指引启用电脑摄像头。</span></div>
+        </div>
+
+        <div class="answer-box">
+          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
+          <div>
+            <span>答</span><span>如果考试人数过多，系统将采用分布式部署，保证系统稳定性。目前已有很多的企业使用青谷组织过超过万人高并发在线考试，我们会为您提供技术支持，考试人数再多页可保障系统稳定性。</span>
+          </div>
+        </div>
+
+        <div class="answer-box">
+          <div><span>问</span><span>考生在考试中途遇到死机中断怎么办？？</span></div>
+          <div><span>答</span><span>青谷考试带有每五分钟自动保存功能，时间节点内的答题数据都会保留。</span></div>
+        </div>
+
+        <div class="answer-box answer-kefu">
+          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
+          <div>
+            <div class="answer-kefu-box">
+              <div>
+                <p>客服电话：400-0990-883</p>
+                <p>客服 QQ：227551695</p>
+              </div>
+              <img :src="img1">
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+
+    <!--  立即咨询  -->
+    <desWithCode source="exam"></desWithCode>
   </div>
 </template>
 
@@ -169,16 +132,19 @@ 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";
+import {BannerImgs, yansukaoshi} from "~/defaultConfig";
+import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import gangweiList from "@/components/common/layout/desComp/gangweiList";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 严肃考试
  */
 export default {
   name: "exam.vue",
-  layout:   'templateB',
+  layout: 'templateB',
   components: {
-     freeTrialBtn,onlineInformationBtn,newsComp2,chanPinTiYan
+    freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan, desWithCode, gangweiList, imgCardLv2
   },
   async asyncData({$axios, store}) {
     const arr = [
@@ -191,31 +157,404 @@ export default {
       bannerList: res2.data.data || [],
     }
   },
-  head(){
+  head() {
     return {
-      title: '在线考试平台_在线考试软件_试卷软件系统',
+      title: '在线考试解决方案_防作弊考试系统_智能监考系统',
       meta: [
         {
           name: 'keywords',
-          content: '考试平台,试卷系统,试卷软件'
+          content: 'AI防作弊系统,在线考试系统,在线培训系统'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '青谷在线考试系统，经过多年实践开发，拥用智能防作弊系统，实时监控考生考试情况，满足各行业考试需要。'
         }
       ],
     }
   },
+  computed: {
+    gangwei() {
+      return yansukaoshi
+    }
+  },
   data() {
     return {
+      productList: [
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            des: '',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+
+            ],
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p13.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '数据加密保护，保障考试信息安全',
+            des: '',
+            list: [
+              {
+                value: '考生答卷时禁止复制、粘贴考题，防止试题和答案泄露',
+              },
+              {
+                value: '企业级技术框架；数据存储备份机制；算法、秘钥双重保险，数据安全可靠',
+              },
+              {
+                value: '支持私有服务器部署内网考试，让考试数据更安全',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p14.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '良好的高并发性，系统稳定性高',
+            des: '',
+            list: [
+              {
+                value: '采用的运行稳定、安全性很高的JAVA语言开发',
+              },
+              {
+                value: '拥有强大的考试并发负载能力，支持万人以上考生同时在线考试',
+              },
+              {
+                value: '分布式微服务架构、开放、安全、高能、高可靠的服务调用',
+              },
+              {
+                value: '为企业快速，灵活构建大规模分布式服务应用提供基础',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p16.png`),
+            order: 1,
+          },
+          mianfei: false,
+          zixun: true,
+          shenqing: true,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多维度统计分析，考试结果可视化',
+            des: '',
+            list: [
+              {
+                value: '智能判分系统，减轻管理员工工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、考试、成绩、试题、排名、机构等层面多维度分析考试结果，掌握考生考试情况',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p15.png`),
+            order: 2,
+          },
+          mianfei: false,
+          zixun: true,
+          shenqing: true,
+          myType: 'kaoshi'
+        }
+      ],
       curActive: 1,
+      img1: require('static/codeImage/code-kefu.png'),
     }
   },
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .active {
   color: green;
 }
+
+.platform-products-services {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    text-align: center;
+    color: #333;
+    margin-top: 80px;
+    margin-bottom: 70px;
+  }
+
+  .btn-groups {
+    margin-top: 48px;
+
+    .btn-item {
+      margin-right: 20px;
+    }
+  }
+}
+
+.client-banner-box {
+  .banner-btn-groups.left {
+    left: 88px;
+    top: 472px;
+    .solution-exam {
+      color:#0a924a;
+      width: 180px;
+      height: 50px;
+      line-height: 50px;
+      background: #3ef897;
+      border-color: #3ef897;
+    }
+  }
+}
+
+.client-xuanchuan-box {
+  width: 100%;
+  height: 240px;
+  background-image: url("~static/codeImage/code-bj01.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding: 110px 0 0 0;
+  margin: 0 auto;
+  text-align: center;
+
+  h4 {
+    color: #fff;
+    font-size: 40px;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  .solution-exam-online {
+    background: #F7DA5C;
+    color: #fff;
+    border-color: #F7DA5C;
+  }
+}
+
+.client-wenda-box {
+  margin: 95px auto;
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 70px;
+  }
+
+  .wenda-content {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 45px;
+    border-radius: 12px;
+    border: 1px solid #00b96b;
+    height: 330px;
+  }
+
+  ul {
+    width: 50%;
+    margin-left: 20px;
+
+    li {
+      color: #333;
+      font-weight: 500;
+      line-height: 30px;
+      font-size: 18px;
+      margin-bottom: 18px;
+      cursor: pointer;
+
+      &.active {
+        color: #00b96b;
+      }
+    }
+  }
+
+  .answer-box {
+    width: 50%;
+
+    > div {
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      span:first-child {
+        width: 34px;
+        height: 34px;
+        line-height: 34px;
+        display: inline-block;
+        color: #fff;
+        background: #7cc659;
+        border-radius: 6px;
+        margin-right: 10px;
+        text-align: center;
+        align-self: flex-start;
+        flex-shrink: 0;
+      }
+
+      &:first-child span {
+        margin-top: 40px;
+      }
+    }
+
+    &.answer-kefu {
+
+      .answer-kefu-box {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        > div {
+          margin-right: 40px;
+        }
+      }
+
+      img {
+        width: 200px;
+        height: 200px;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+
+  .client-xuanchuan-box {
+    width: 100%;
+    height: 110px;
+    background-image: url("~static/codeImage/code-bj01.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding: 10% 0 0 0;
+    margin: 0 auto 20px;
+    text-align: center;
+
+    h4 {
+      color: #fff;
+      font-size: 14px;
+      font-weight: 800;
+      text-align: center;
+      margin-bottom: 3%;
+    }
+  }
+
+  .client-wenda-box-h5 {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 7%;
+    }
+
+    ul {
+      width: 50%;
+      margin-left: 20px;
+
+      li {
+        color: #333;
+        font-weight: 500;
+        line-height: 1.5;
+        font-size: 14px;
+        margin-bottom: 10px;
+        cursor: pointer;
+
+        &.active {
+          color: #00b96b;
+        }
+      }
+    }
+
+    .answer-box {
+      padding: 10px;
+      border:  1px solid #ccc;
+      margin-bottom: 20px;
+      border-radius: 8px;
+
+      > div {
+        font-weight: 500;
+        color: #333;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: 14px;
+
+        span:first-child {
+          display: inline-block;
+          color: #fff;
+          background-color: #00b96b;
+          border-radius: 12px;
+          padding: 10px;
+          margin-right: 10px;
+          align-self: flex-start;
+        }
+
+        &:first-child span {
+          margin-top: 40px;
+        }
+      }
+
+      &.answer-kefu {
+
+
+        .answer-kefu-box {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: flex-start;
+
+          > div {
+            margin-right: 40px;
+          }
+        }
+
+        img {
+          width: 100px;
+          height: 100px;
+        }
+      }
+    }
+  }
+
+  .platform-products-services {
+
+    .client-title {
+      font-size: 18px;
+      margin-top: 30px;
+    }
+  }
+
+
+}
+
 </style>

pages/solution/financial.vue

@@ -4,10 +4,8 @@
     <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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
     <!--  金融保险培训现状  -->
@@ -19,114 +17,60 @@
     </div>
 
     <!--  金融保险培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>金融保险培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>产品随政策变动、更新频率高，要求员工掌握最新工作政策</p>
+          <div>
+            <i></i>
+            <p>产品随政策变动、更新频率高，要求员工掌握最新工作政策</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>一线员工数量庞大，组织培训考核极难并且成本高昂</p>
+          <div>
+            <i></i>
+            <p>一线员工数量庞大，组织培训考核极难并且成本高昂</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>人数太多，及时勉强组织培训考核，也很难管控</p>
+          <div>
+            <i></i>
+            <p>人数太多，及时勉强组织培训考核，也很难管控</p>
+          </div>
         </li>
       </ul>
     </div>
 
     <!--  青谷解决方案  -->
-    <div class="platform-products-services">
+    <div class="client-fangan-box client-container">
       <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>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item green" />
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  金融保险类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>金融保险类课程案例</h4>
       <p>青谷软件可为金融保险行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '城乡居民团体大病医疗保险展业标杆', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '手机银行2.0', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '普通年金现值',url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
 
 
     <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
+    <desWithCode source="financial"></desWithCode>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
 
@@ -142,6 +86,8 @@ import newsComp2 from "~/components/common/newsComp2";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
 import {BannerImgs} from "~/defaultConfig";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 金融保险
@@ -149,7 +95,7 @@ import {BannerImgs} from "~/defaultConfig";
 export default {
   name: "financial",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.jinrongbaoxian}),
@@ -159,10 +105,136 @@ export default {
       bannerList: res2.data.data || [],
     }
   },
+  head() {
+    return {
+      title: '员工在线培训系统_员工在线考试系统_直播培训',
+      meta: [
+        {
+          name: 'keywords',
+          content: '在线培训系统_课件定制开发_视频课件资源'
+        },
+        {
+          name: 'description',
+          content: '青谷在线考试系统可以多人同时在线考试及培训，能够满足银行、保险等大型金融机构千人同时在线考试的需求，帮助提升业务能力。'
+        }
+      ],
+    }
+  },
   data() {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '私有化专属服务器部署，数据加密更安全',
+            list: [
+              {
+                value: '将青谷考培系统部署版部署到政府机构内部私有云服务器中，政府机构完全自主掌控，数据加密更安全',
+              },
+              {
+                value: 'PC端与移动端无缝连接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require(`~/static/productImage/p39.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '构建培训闭环，打通线上线下教学场景',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '在线课程支持反复学习，实现从“了解”到“理解”的飞跃',
+              },
+              {
+                value: '支持六大常用题型及批量导入题库',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require(`~/static/productImage/p37.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监控、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require(`~/static/productImage/p40.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能阅卷，多维度、可视化学情分析',
+            list: [
+              {
+                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require(`~/static/productImage/p38.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
+
+      // 金融保险类课程案例
+      img1: require(`~/static/videoImages/v10.jpg`),
+      video1: 'https://spdb.mtavip.com/cbc0daed7ffa40e791573903bc5ae3a7/bd640b0dad03465ea8bfe87aa82f11c9-1db991eb59bde39fd442d4b168c1b4a6-fd.mp4',
+      img2: require(`~/static/videoImages/v11.jpg`),
+      video2: 'https://spdb.mtavip.com/17ee609ecd724d9ba8e684675c64c3af/a1edc3eda6514a6d87d484bd32f0398d-726e91a6c9a46fb9c6c6027ad022a6d4-fd.mp4',
+      img3: require(`~/static/videoImages/v12.jpg`),
+      video3: 'https://spdb.mtavip.com/2ae577bebb1f4c25b60e8dfaa0b678e3/91bf4e776b4846ed8833a6ab6631336a-bbf48937872c2a22edfcf0bd384746e7-fd.mp4',
     }
   },
   methods: {
@@ -174,6 +246,74 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.banner-btn-groups {
+  left: 0;
+  top: 450px !important;
+  .solution-financial {
+    color: #00b96b;
+    border-color: #fff;
+    width: 190px;
+    height: 60px;
+    line-height: 60px;
+    border-radius: 50px;
+    background: #fff;
+  }
+}
+
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z100.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z98.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z99.png');
+          }
+        }
+      }
+    }
+  }
+  @media (max-width: 768px) {
+    ul {
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: none;
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: none;
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: none;
+          }
+        }
+      }
+    }
+  }
+}
+
 
 </style>

pages/solution/government.vue

@@ -1,131 +1,83 @@
 <template>
-  <div class="client-exam-page client-platform-page">
+  <div class="client-exam-page client-platform-page qg-government-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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
-    <!--  政府机构培训现状  -->
+    <!--  机关事业单位培训现状  -->
     <div class="client-xianzhuang-box">
-      <h4>政府机构培训现状</h4>
-      <p>在政府机构中比较常见的培训项目通常就是党建方向 的内容，学习党史党务，会议精神、法律法规等是每一个中共党员的基本修养。政府机构的成员大多都是中共党员，势必要以身作则。
-      作为国家和人民的领导者，政府机构的党员们需要专注于习近平新时代中国特色社会主义的思想党建，做到和人民心心相印，才能更好地为人民服务。
-      </p>
+      <div class="client-container">
+        <h4>机关事业单位培训现状</h4>
+        <p>为了适应市场经济的发展，越来越多的企业开始意识到人才选拔、培养的重要性，机关事业单位每年都要举行年度考核、党建考核等各种不同形式的培训、考试。而传统培训、考试方式，从培训、出题、组卷、印刷，到安排场地、试卷分发、监考，再到收卷、阅卷，程序繁杂，需要投入大量的时间、人力和物力，并且周期长、工作量大，成本较高，不能完全适应现代企业管理模式。
+        </p>
+      </div>
     </div>
 
-    <!--  政府机构培训痛点  -->
-    <div class="client-tongdian-box">
-      <h4>政府机构培训痛点</h4>
+    <!--  机关事业单位培训痛点  -->
+    <div class="client-tongdian-box client-container">
+      <h4>机关事业单位培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>需要学习的文件材料较多，
-          不易把握学习要点</p>
+          <div>
+            <i></i>
+            <p>需要学习的文件材料较多，不易把握学习要点</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>从即从公务员到各级干部，政府部门成员大多数勤于政务，
-            没有稳定的学习时间</p>
+          <div>
+            <i></i>
+            <p>员工数量多且人员分散<br>组织困难</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>各级政府的所在地各不相同，
-            很难统一组织学习党建材料</p>
+          <div>
+            <i></i>
+            <p>有规划但执行力差<br>造成培训流于形式</p>
+          </div>
         </li>
       </ul>
     </div>
 
     <!--  解决方案  -->
-    <div class="client-fangan-box">
+    <div class="client-fangan-box client-container">
       <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>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn class="online-information-btn btn-item green" v-if="item.zixun"/>
+        </div>
+      </imgCardLv2>
     </div>
 
+
     <!--  党建类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container" v-if="false">
       <h4>党建类课程案例</h4>
-      <p>青谷软件可为政府机构定制电子化课程</p>
+      <p>青谷软件可为机关事业单位定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: 'FLASH动画课程', url: ''}" @card-click="showVideo"></video-card>
+          <div>
+            <video-card :card-data="{title: '坚持依法治国培训课程',url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
+          </div>
         </li>
         <li>
-          <video-card :card-data="{title: '视频课程', url: ''}" @card-click="showVideo"></video-card>
+          <div>
+            <video-card :card-data="{title: '全面深化改革经济制度', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
+          </div>
         </li>
         <li>
-          <video-card :card-data="{title: '名师讲堂', url: ''}" @card-click="showVideo"></video-card>
+          <div>
+            <video-card :card-data="{title: '如何领会习近平新时代中国特色社会主义思想', url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
+          </div>
         </li>
       </ul>
     </div>
 
     <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
+    <desWithCode source="government"></desWithCode>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
 
@@ -142,27 +94,160 @@ import newsComp2 from "~/components/common/newsComp2";
 import {BannerImgs} from "~/defaultConfig";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
- * @ 解决方案 -> 政府机构
+ * @ 解决方案 -> 机关事业单位
  */
 export default {
   name: "government",
-  layout:   'templateB',
-  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  layout: 'templateB',
+  components: {
+    chanPinTiYan,
+    freeTrialBtn,
+    onlineInformationBtn,
+    newsComp2,
+    videoDialog,
+    videoCard,
+    desWithCode,
+    imgCardLv2
+  },
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.zhengfujigou}),
     ];
-    const [ res2] = await Promise.all(arr);
+    const [res2] = await Promise.all(arr);
     return {
       bannerList: res2.data.data || [],
     }
   },
+  head() {
+    return {
+      title: '政府在线考试培训系统_员工培训系统_在线考试系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '考试系统开发_定制考试系统_防作弊系统'
+        },
+        {
+          name: 'description',
+          content: '青谷在线考试培训系统经多年开发与实践，满足万人同时考试培训，员工线上完成企业考试与培训，多种线上功能。'
+        }
+      ],
+    }
+  },
   data() {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '私有化专属服务器部署，数据加密更安全',
+            list: [
+              {
+                value: '将青谷考培系统部署版部署到机关事业单位内部私有云服务器中，机关事业单位完全自主掌控，数据加密更安全',
+              },
+              {
+                value: 'PC端与移动端无缝链接；全面支持安卓、IOS等操作系统；支持APP和微信H5学习模式；为学习者提供真正的随时随地的、个性化的、开放式的学习服务',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p39.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '构建培训闭环，打通线上线下教学场景',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持线上课程、直播、线下培训等多种培训形式',
+              },
+              {
+                value: '在线课程支持反复学习，实现从“了解”到“理解”的飞跃',
+              },
+              {
+                value: '支持六大常用题型及批量导入题库',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p37.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监控场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p40.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能阅卷，多维度、可视化学情分析',
+            list: [
+              {
+                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p38.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
+
+      // 党建类视频
+      img1: require(`~/static/videoImages/v01.jpg`),
+      video1: 'https://spdb.mtavip.com/93d3b7ead3634e6cb995d06dc74ffc98/846d3c9f0d414a589ed6c3456b235f43-ea296adfbbcbef1fa2c56c25dd47f9ae-fd.mp4',
+      img2: require(`~/static/videoImages/v02.jpg`),
+      video2: 'https://spdb.mtavip.com/830f8f8ac04046db8cead176dc481d68/c8cbb2bac1f343bbaef7eec659d3211a-440772930440cec2cabf50caa08f6d95-fd.mp4',
+      img3: require(`~/static/videoImages/v03.jpg`),
+      video3: 'https://spdb.mtavip.com/0135d5e9c8d44212a6bcedc0893a7e85/d0c09a604c514590bd7e30ddf447a4e6-d5116651287156c14b8fd26b143f51e1-fd.mp4',
     }
   },
   methods: {
@@ -174,6 +259,83 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.banner-btn-groups {
+  left: 0;
+  top: 450px !important;
+  .solution-government {
+      color: #00b96b;
+      border-color: #fff;
+      width: 190px;
+      height: 60px;
+      line-height: 60px;
+      border-radius: 50px;
+      background: #fff;
+  }
+}
+
+
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z94.png');
+          }
+        }
+      }
+
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
 
+          i {
+            background-image: url('~static/gangweiIcon/z95.png');
+          }
+        }
+      }
+
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z96.png');
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    ul {
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: none;
+          }
+        }
+
+        &:nth-child(2) {
+          div {
+            background-image: none;
+          }
+        }
+
+        &:nth-child(3) {
+          div {
+            background-image: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style>
+.qg-government-page .mta-card-lv2 .mta-card-content-pc img{max-width: 36%;}
 </style>

pages/solution/medical.vue

@@ -4,10 +4,8 @@
     <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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
     <!--  医疗行业培训现状  -->
@@ -20,111 +18,59 @@
     </div>
 
     <!--  交通运输培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>医疗行业培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>需要学习的文件材料较多，不易把握学习要点</p>
+          <div>
+            <i></i>
+            <p>需要学习的文件材料较多，不易把握学习要点</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>无法把有价值的提问保存下来，给未来其他用户提供参考</p>
+          <div>
+            <i></i>
+            <p>无法把有价值的提问保存下来，给未来其他用户提供参考</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>还在使用传统面授培训，无法组织更多的人一起听课，传播面太小</p>
+          <div>
+            <i></i>
+            <p>还在使用传统面授培训，无法组织更多的人一起听课，传播面太小</p>
+          </div>
         </li>
       </ul>
     </div>
 
     <!--  青谷解决方案  -->
-    <div class="platform-products-services">
+    <div class="client-fangan-box client-container">
       <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>
+      <imgCardLv2 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn my-type="2" class="online-information-btn btn-item green" />
+        </div>
+      </imgCardLv2>
     </div>
 
     <!--  医疗行业类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>医疗行业类课程案例</h4>
       <p>青谷软件可为医疗行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '带你认识支气管', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '高效会议',url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '呼吸功能检查介绍', url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
 
     <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
+    <desWithCode source="medical"></desWithCode>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
 
@@ -139,6 +85,8 @@ import newsComp2 from "~/components/common/newsComp2";
 import {BannerImgs} from "~/defaultConfig";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
+import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
 
 /**
  * @ 解决方案 -> 医疗行业
@@ -146,7 +94,7 @@ import videoCard from "~/components/common/videoCard";
 export default {
   name: "medical",
   layout:   'templateB',
-  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard},
+  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, videoDialog, videoCard, desWithCode, imgCardLv2},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.yiliaohangye}),
@@ -156,10 +104,136 @@ export default {
       bannerList: res2.data.data || [],
     }
   },
+  head() {
+    return {
+      title: '医疗在线学习系统_医疗在线考试系统_在线培训系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '答题考试系统_课件开发_企业培训软件'
+        },
+        {
+          name: 'description',
+          content: '医学类培训考核种类繁多，如医疗工作者的执业医师资格考试，护士执业资格考试，卫生专业技术资格考试， 全国各级医院日常进行的医护人员招聘考试，“三基”，“三严”考试'
+        }
+      ],
+    }
+  },
   data() {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '强大的人员管理和培训功能',
+            list: [
+              {
+                value: '支持手动、批量导入人员及部门多层级管理功能，解决机构人员多且分散的问题',
+              },
+              {
+                value: '支持线上课程、直播课、线下培训按照课程科目设定进行课程分类划分',
+              },
+              {
+                value: '学习时段灵活，不强制要求学员在某一特定时刻参加培训，并支持无限学习，实现从“了解”到“理解”的飞跃',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require(`~/static/productImage/p56.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '强大的AI防作弊，保障考试公平公正',
+            list: [
+              {
+                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
+              },
+              {
+                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
+              },
+              {
+                value: '随机组卷、试题乱序、选择题选项乱序，超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require(`~/static/productImage/p57.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require(`~/static/productImage/p58.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        },
+        {
+          content: {
+            title: '智能阅卷，多维度、可视化学情分析',
+            list: [
+              {
+                value: '智能阅卷系统，减轻管理员工作压力，考后直接出成绩及排行榜等信息',
+              },
+              {
+                value: '从用户、学习情况、考试、成绩、试题、排名、机构等层面多维度分析培训结果，掌握学员学习情况',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require(`~/static/productImage/p59.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi'
+        }
+      ],
+
+      // 医疗视频
+      img1: require(`~/static/videoImages/v19.jpg`),
+      video1: 'https://spdb.mtavip.com/f3912729cd5f4cf9b154ba5f1a51956e/8e3ec7bc60ff42ec868d65af6984d952-8fb6550e3b3b36511977af05b89d1232-fd.mp4',
+      img2: require(`~/static/videoImages/v20.jpg`),
+      video2: 'https://spdb.mtavip.com/2bb226058ae64203a6f6970c542c33eb/84e8af1494614d2bae079491104cf8cc-9e7af558757b1aed477a9f625ade5228-fd.mp4',
+      img3: require(`~/static/videoImages/v21.jpg`),
+      video3: 'https://spdb.mtavip.com/1fc0228fc1324ace9297c465e441bd7e/d99382ff9f1840ef8fc73edcba8256eb-8cab747e3823da29646bc68613cbdca1-fd.mp4',
     }
   },
   methods: {
@@ -171,6 +245,77 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.banner-btn-groups {
+  left: 0;
+  top: 450px !important;
+  .solution-medical {
+    color: #00b96b;
+    border-color: #fff;
+    width: 190px;
+    height: 60px;
+    line-height: 60px;
+    border-radius: 50px;
+    background: #fff;
+  }
+}
+
 
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z106.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z107.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z104.png');
+          }
+        }
+      }
+    }
+  }
+}
+
+
+@media (max-width: 768px) {
+    .client-tongdian-box {
+      ul {
+        li {
+          &:nth-child(1) {
+            div {
+              background-image: none;
+            }
+          }
+          &:nth-child(2) {
+            div {
+              background-image: none;
+            }
+          }
+          &:nth-child(3) {
+            div {
+              background-image: none;
+            }
+          }
+        }
+      }
+    }
+}
 </style>

pages/solution/peixun.vue

@@ -4,22 +4,21 @@
     <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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
     <!--  企业培训现状  -->
-    <div>
-      <h3>企业培训现状</h3>
+    <div class="client-xianzhuang-box client-container">
+      <h4>企业培训现状</h4>
       <p>企业的发展在于人才比拼，而人才的比拼在于学习速度的比拼</p>
       <p>为此，很多企业不惜重金去建设培训体系，对员工进行培训，但却起不到良好的成效</p>
     </div>
 
     <!--  企业培训痛点  -->
     <div class="client-tongdian-box">
-      <h4>企业培训痛点</h4>
+      <div class="client-container">
+      <h4 class="client-title">企业培训痛点</h4>
       <ul>
         <li>
           <i></i>
@@ -51,158 +50,90 @@
         </li>
       </ul>
     </div>
+    </div>
 
     <!--  企业培训解决方案  -->
-    <div class="platform-products-services">
+    <div class="platform-products-services client-container">
       <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>
+      <imgCardLv3 :option="item" v-for="(item,index) in productList" :key="index">
+        <div class="btn-groups">
+          <onlineInformationBtn class="online-information-btn btn-item green" v-if="item.zixun"/>
+        </div>
+      </imgCardLv3>
     </div>
 
     <!--  如何快速学习平台  -->
-    <div class="client-study-box">
+    <div class="client-study-box client-container">
       <h4>如何搭建学习平台</h4>
 
-      <ul>
+      <ul class="top-list">
         <li>
-          <span>提升培训速度</span>
-          <span>↑ 95%</span>
+          <div>
+            <p>提升培训速度</p>
+            <p><i></i>95<i>%</i></p>
+          </div>
         </li>
         <li>
-          <span>提升培训速度</span>
-          <span>↓ 90%</span>
+          <div>
+            <p>降低人工成本</p>
+            <p><i class="icon-revent"></i>90<i>%</i></p>
+          </div>
         </li>
         <li>
-          <span>降低费用成本</span>
-          <span>↓ 75%</span>
+          <div>
+            <p>降低费用成本</p>
+            <p><i class="icon-revent"></i>75<i>%</i></p>
+          </div>
         </li>
         <li>
-          <span>降低时间成本</span>
-          <span>↓ 80%</span>
+          <div>
+            <p>降低时间成本</p>
+            <p><i class="icon-revent"></i>80<i>%</i></p>
+          </div>
         </li>
       </ul>
 
-      <ul>
+      <ul class="bottom-list">
         <li>
           <i></i>
-          <p>云端部署</p>
-          <span>云端部署，按需配置</span>
-          <span>免硬件与IT运维投入</span>
-          <span>PC、H5、APP多端兼容</span>
+          <h4>云端部署</h4>
+          <p>云端部署，按需配置</p>
+          <p>免硬件与IT运维投入</p>
+          <p>PC、H5、APP多端兼容</p>
         </li>
         <li>
           <i></i>
-          <p>AI智能学习</p>
-          <span>内容智能推荐系统</span>
-          <span>大数据与学习行为分析</span>
-          <span>提供个性化培训</span>
+          <h4>AI智能学习</h4>
+          <p>内容智能推荐系统</p>
+          <p>大数据与学习行为分析</p>
+          <p>提供个性化培训</p>
         </li>
         <li>
           <i></i>
-          <p>人才发展体系</p>
-          <span>支持复杂岗位设置</span>
-          <span>职业发展与胜任力体系</span>
-          <span>只能体系</span>
+          <h4>人才发展体系</h4>
+          <p>支持复杂岗位设置</p>
+          <p>职业发展与胜任力体系</p>
+          <p>只能体系</p>
         </li>
         <li>
           <i></i>
-          <p>混合式培训管理</p>
-          <span>线上线下混合式培训</span>
-          <span>社交学习与分享</span>
-          <span>多维度洞察培训效果</span>
+          <h4>混合式培训管理</h4>
+          <p>线上线下混合式培训</p>
+          <p>社交学习与分享</p>
+          <p>多维度洞察培训效果</p>
         </li>
         <li>
           <i></i>
-          <p>海量优质课程资源</p>
-          <span>各领域行业专家</span>
-          <span>免硬件与IT运维投入</span>
-          <span>全方位覆盖企业培训体系</span>
+          <h4>海量优质课程资源</h4>
+          <p>各领域行业专家</p>
+          <p>免硬件与IT运维投入</p>
+          <p>全方位覆盖企业培训体系</p>
         </li>
       </ul>
     </div>
 
-    <!--  客户经理扫码  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <span>马上扫码添加客户经理</span>
-      <img src="#" alt="">
-    </div>
+    <!--  立即咨询  -->
+    <desWithCode source="peixun"></desWithCode>
   </div>
 </template>
 
@@ -212,13 +143,16 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import newsComp2 from "~/components/common/newsComp2";
 import {BannerImgs} from "~/defaultConfig";
+import desWithCode from "@/components/common/layout/desComp/desWithCode";
+import imgCardLv3 from "~/components/common/layout/imgDes/imgCardLv3";
+
 /**
  * @ 解决方案 -> 企业培训
  */
 export default {
   name: "peixun",
-  layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
+  layout: 'templateB',
+  components: {chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode, imgCardLv3},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.qiyepeixun}),
@@ -228,24 +162,466 @@ export default {
       bannerList: res2.data.data || [],
     }
   },
-  head(){
+  head() {
     return {
-      title: '在线考试平台_在线考试软件_试卷软件系统',
+      title: '企业培训解决方案_企业员工培训平台_员工培训系统_企业考试培训软件',
       meta: [
         {
           name: 'keywords',
-          content: '考试平台,试卷系统,试卷软件'
+          content: '企业在线培训考试系统_企业培训考试系统_员工培训系统_企业培训系统'
         },
         {
-          name:'description',
-          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
+          name: 'description',
+          content: '青谷在线考试系统为企业推出在线培训考试解决方案，帮助企业分析培训痛点难点，解决一系列线上培训难题，搭建可学、可考的一体化在线培训平台，助力企业人才培养！'
         }
       ],
     }
   },
+  data() {
+    return {
+      productList: [
+        {
+          content: {
+            title: '一键导入组织成员名单',
+            des: '支持一键批量导入企业组织成员，快速设置人员姓名、练习方式、职位等信息。支持分组设置培训权限。',
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p20.png`),
+            order: 1,
+          },
+          zixun: true,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '多种课程形式及直播开展培训',
+            des: 'PC端与移动端无缝链接。支持在线课程、直播教学、评论点赞、互动答案等强大的培训功能。方便组织线上培训学习',
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p21.png`),
+            order: 2,
+          },
+          zixun: true,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '考、练模块提升学员培训效果',
+            des: '题库、练习、考试、课后检测等功能帮助学员巩固培训知识，方便提升培训学习效果',
+            order: 2,
+          },
+          img: {
+            url: require(`~/static/productImage/p18.png`),
+            order: 1,
+          },
+          zixun: true,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '可视化的培训大数据展示',
+            des: '直观分析学员学习时长、课程数、考试分数等数据结果，快速掌握整体学习情况',
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p17.png`),
+            order: 2,
+          },
+          zixun: true,
+          myType: 'peixun'
+        },
+        {
+          content: {
+            title: '快速搭建企业知识共享资源库库',
+            des: '帮助企业搭建知识资源库，完成企业员工的知识分享',
+            order: 1,
+          },
+          img: {
+            url: require(`~/static/productImage/p19.png`),
+            order: 1,
+          },
+          zixun: true,
+          myType: 'peixun'
+        }
+      ],
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+// banner 图
+.client-banner-box {
+  .banner-btn-groups.left {
+    left: 110px;
+    top: 467px;
+
+    .solution-peixun {
+      height: 60px;
+      line-height: 60px;
+      width: 210px;
+      color: #fff;
+      background: #d7db00;
+      border-color: #d7db00;
+      border-radius: 50px;
+    }
+  }
+}
+
+// 企业现状
+.client-xianzhuang-box {
+  margin-top: 120px;
+  background-image: none;
+  height: 230px;
+
+  h4 {
+    text-align: center;
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    margin-bottom: 42px;
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 800;
+    color: #565656;
+    text-align: center;
+    line-height: 30px;
+  }
+}
+
+// 企业痛点
+.client-tongdian-box {
+  background: #f8fdf9;
+
+  ul {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    li {
+      text-align: center;
+      width: 33%;
+      margin-bottom: 84px;
+
+      i {
+        width: 99px;
+        height: 99px;
+        display: inline-block;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+        margin-bottom: 28px;
+      }
+
+      &:nth-child(1) {
+        i {
+          background-image: url("~static/gangweiIcon/z73.png");
+        }
+      }
+
+      &:nth-child(2) {
+        i {
+          background-image: url("~static/gangweiIcon/z74.png");
+        }
+      }
+
+      &:nth-child(3) {
+        i {
+          background-image: url("~static/gangweiIcon/z75.png");
+        }
+      }
+
+      &:nth-child(4) {
+        i {
+          background-image: url("~static/gangweiIcon/z76.png");
+        }
+      }
+
+      &:nth-child(5) {
+        i {
+          background-image: url("~static/gangweiIcon/z77.png");
+        }
+      }
+
+      &:nth-child(6) {
+        i {
+          background-image: url("~static/gangweiIcon/z78.png");
+        }
+      }
+
+      span {
+        font-size: 20px;
+        color: #565656;
+        font-weight: 500;
+        line-height: 30px;
+        display: block;
+        text-align: center;
+      }
+    }
+  }
+}
+
+// 解决方案
+.platform-products-services {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    text-align: center;
+    color: #333;
+    margin-top: 80px;
+    margin-bottom: 70px;
+  }
+
+  .btn-groups {
+    margin-top: 48px;
+
+    .btn-item {
+      margin-right: 20px;
+    }
+  }
+}
+
+// 学习平台
+.client-study-box {
+  h4 {
+    font-size: 30px;
+    color: #333;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 116px;
+  }
+
+  ul.top-list {
+    display: flex;
+    justify-content: space-between;
+
+    li {
+      width: 25%;
+
+      div {
+        border: 2px dashed #00b96b;
+        box-sizing: border-box;
+        margin: 20px;
+        border-radius: 6px;
+
+        p {
+          text-align: center;
+        }
+
+        & > p:nth-child(1) {
+          color: #00b96b;
+          font-size: 24px;
+          margin: 28px auto 28px;
+        }
+
+        & > p:nth-child(2) {
+          color: #00b96b;
+          font-size: 60px;
+          margin: 0 auto 25px;
+
+
+          i:nth-child(1) {
+            display: inline-block;
+            width: 23px;
+            height: 46px;
+            font-weight: 800;
+            font-style: normal;
+            margin-right: 10px;
+            background-image: url("~static/gangweiIcon/z170.png");
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            &.icon-revent {
+              transform: rotate(180deg);
+            }
+          }
+          i:nth-child(2) {
+            font-weight: bolder;
+            font-style: normal;
+            font-size: 22px;
+          }
+        }
+      }
+    }
+  }
+
+  ul.bottom-list {
+    margin-top: 70px;
+    display: flex;
+    justify-content: space-between;
+
+    li {
+      margin: 0 auto 120px;
+      text-align: center;
+
+      i {
+        width: 110px;
+        height: 110px;
+        display: inline-block;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+      }
+
+      &:nth-child(1) {
+        i {
+          background-image: url("~static/gangweiIcon/z79.png");
+        }
+      }
+
+      &:nth-child(2) {
+        i {
+          background-image: url("~static/gangweiIcon/z80.png");
+        }
+      }
+
+      &:nth-child(3) {
+        i {
+          background-image: url("~static/gangweiIcon/z81.png");
+        }
+      }
+
+      &:nth-child(4) {
+        i {
+          background-image: url("~static/gangweiIcon/z82.png");
+        }
+      }
+
+      &:nth-child(5) {
+        i {
+          background-image: url("~static/gangweiIcon/z83.png");
+        }
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 500;
+        color: #565656;
+        width: 148px;
+        line-height: 24px;
+      }
+
+      h4 {
+        font-size: 24px;
+        font-weight: 700;
+        color: #565656;
+        margin-top: 38px;
+        margin-bottom: 28px;
+      }
+
+    }
+  }
+}
+
+@media (max-width: 768px) {
+
+  // 企业现状
+  .client-xianzhuang-box {
+    height: auto;
+    margin-top: 3%;
+
+    h4 {
+      text-align: center;
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      margin-bottom: 5%;
+    }
+
+    p {
+      font-size: 12px;
+      font-weight: 800;
+      color: #565656;
+      text-align: center;
+      line-height: 30px;
+    }
+  }
+
+  // 企业痛点
+  .client-tongdian-box {
+    margin-top: 10%;
+
+    ul {
+      li {
+        width: 50%;
+
+        i {
+          width: 60px;
+          height: 60px;
+        }
+
+        span {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  // 解决方案
+  .platform-products-services {
+    .client-title {
+      font-size: 18px;
+      font-weight: 800;
+      text-align: center;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 10%;
+    }
+
+    .btn-groups {
+      margin-top: 5%;
+
+      .btn-item {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .client-study-box {
+    h4 {
+      font-size: 18px;
+      margin-bottom: 10%;
+    }
+
+    ul.top-list {
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      li {
+        width: 50%;
+
+        div {
+          margin: 2%;
+
+          p:nth-child(1) {
+            font-size: 14px;
+          }
+
+          p:nth-child(2) {
+            font-size: 18px;
+          }
+        }
+      }
+    }
+
+    ul.bottom-list {
+      margin-top: 10%;
+      flex-direction: column;
+
+      li {
+        margin-bottom: 10%;
+        p {
+          width: auto
+        }
+      }
+    }
+  }
+}
 
 </style>

pages/solution/privatization.vue

@@ -4,73 +4,87 @@
     <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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
     <!--  私有化部署优势  -->
-    <div class="client-private-youshi">
+    <div class="client-private-youshi client-container">
+
+      <h4>私有化部署优势</h4>
+
       <ul>
         <li>
-          <i></i>
           <div>
-            <h4>数据私密安全</h4>
-            <p>企业级技术框架；数据私有化隔离；数据存储备份机制；算法、秘钥双重保险，数据安全可靠；独享云服务，速度更快，性能更优。</p>
+            <i></i>
+            <div>
+              <h4>数据私密安全</h4>
+              <p>企业级技术框架；数据私有化隔离；数据存储备份机制；算法、秘钥双重保险，数据安全可靠；独享云服务，速度更快，性能更优。</p>
+            </div>
           </div>
         </li>
         <li>
-          <i></i>
           <div>
-            <h4>企业自主掌握</h4>
-            <p>企业可完全自主掌握，轻松实现人员管理、权限管理；账号与席位轻松绑定，入职迅速，离职安全，避免认为数据事故。</p>
+            <i></i>
+            <div>
+              <h4>企业自主掌握</h4>
+              <p>企业可完全自主掌握，轻松实现人员管理、权限管理；账号与席位轻松绑定，入职迅速，离职安全，避免人为数据事故。</p>
+            </div>
           </div>
         </li>
         <li>
-          <i></i>
           <div>
-            <h4>第三方接口对接</h4>
-            <p>支持和第三方OA、HR、ERP、教务系统、微信、钉钉等对接。</p>
+            <i></i>
+            <div>
+              <h4>第三方接口对接</h4>
+              <p>支持和第三方OA、HR、ERP、教务系统、微信、钉钉等对接。</p>
+            </div>
           </div>
         </li>
         <li>
-          <i></i>
           <div>
-            <h4>可定制开发</h4>
-            <p>系统拥有极其强大的扩展技术。在这套扩展技术体系中，企业可以在此基础上定制任意功能，扩充目前的功能架构，满足企业自身发展的需求。</p>
+            <i></i>
+            <div>
+              <h4>可定制开发</h4>
+              <p>系统拥有极其强大的扩展技术。在这套扩展技术体系中，企业可以在此基础上定制任意功能，扩充目前的功能架构，满足企业自身发展的需求。</p>
+            </div>
           </div>
         </li>
       </ul>
     </div>
 
     <!--  私有化部署方案  -->
-    <div class="client-private-fangan">
+    <div class="client-private-fangan client-container">
       <h4>私有化部署解决方案</h4>
-      <div>
-        <span :class="{active: curActive === 1}" @click="curActive === 1">专属服务器部署</span>
-        <span :class="{active: curActive === 2}" @click="curActive === 2">私有服务器部署</span>
+      <div class="private-fangan-nav">
+        <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 class="private-fangan-content" v-if="curActive === 1">
         <div>
-          <p>将青谷考培系统部署版独立部署到企业专属阿里云/腾讯云服务器中，享受公有云功能与服务的同时，又具备数据隔离的优势，适用于大多数中小型企业。</p>
-          <ul>
-            <li>更易于拓展</li>
-            <li>数据安全可靠</li>
-            <li>降低人工成本，无需运维</li>
-          </ul>
+          <img :src="img1">
+          <div class="left">
+            <p>将青谷考培系统部署版独立部署到企业专属阿里云/腾讯云服务器中，享受公有云功能与服务的同时，又具备数据隔离的优势，适用于大多数中小型企业。</p>
+            <ul>
+              <li>更易于拓展</li>
+              <li>数据安全可靠</li>
+              <li>降低人工成本，无需运维</li>
+            </ul>
+          </div>
         </div>
+
       </div>
-      <div v-if="curActive === 2">
-        <img src="#">
+      <div class="private-fangan-content" v-if="curActive === 2">
         <div>
-          <p>将青谷考陪系统部署版部署到企业内部私有云服务器中，企业完全自主掌握，适用于通信，金融等对数据安全性要求更高的企业。</p>
-          <ul>
-            <li>公司内部局域网加速，编辑访问更丝滑</li>
-            <li>私有服务器企业自主管理，数据物理安全和防泄密风险进一步增强</li>
-          </ul>
+          <img :src="img2">
+          <div class="left">
+            <p>将青谷考陪系统部署版部署到企业内部私有云服务器中，企业完全自主掌握，适用于通信，金融等对数据安全性要求更高的企业。</p>
+            <ul>
+              <li><i></i>公司内部局域网加速，编辑访问更丝滑</li>
+              <li><i></i>私有服务器企业自主管理，数据物理安全和防泄密风险进一步增强</li>
+            </ul>
+          </div>
         </div>
       </div>
 
@@ -78,7 +92,8 @@
     </div>
 
     <!--  保护服务  -->
-    <div class="client-private-service">
+    <div class="client-private-service client-container">
+      <h4>部署服务</h4>
       <ul>
         <li>
           <h4>企业需求诊断</h4>
@@ -104,11 +119,7 @@
     </div>
 
     <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
+    <desWithCode source="privatization"></desWithCode>
   </div>
 </template>
 
@@ -118,6 +129,7 @@ import freeTrialBtn from "~/components/common/freeTrialBtn";
 import onlineInformationBtn from "~/components/common/onlineInformationBtn";
 import newsComp2 from "~/components/common/newsComp2";
 import {BannerImgs} from "~/defaultConfig";
+import desWithCode from "@/components/common/layout/desComp/desWithCode";
 
 /**
  * @ 解决方案 -> 私有化部署
@@ -125,7 +137,7 @@ import {BannerImgs} from "~/defaultConfig";
 export default {
   name: "privatization",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2, desWithCode},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.siyouhuabushu}),
@@ -135,14 +147,496 @@ export default {
       bannerList: res2.data.data || [],
     }
   },
+  head() {
+    return {
+      title: '在线考试系统_定制在线考试系统_个性化考试系统开发',
+      meta: [
+        {
+          name: 'keywords',
+          content: '在线考试系统_定制在线考试系统_个性化考试系统开发'
+        },
+        {
+          name: 'description',
+          content: '青谷在线考试系统拥有专业研发团队，多年开发经验，根据用户不同需求，开发客户专署考试系统，保护用户数据安全。'
+        }
+      ],
+    }
+  },
   data() {
     return {
-      curActive: 1
+      curActive: 1,
+      img1: require('~/static/gangweiIcon/z88.png'),
+      img2: require('~/static/gangweiIcon/z89.png'),
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.client-banner-box div.client-platform-banner {
+  .banner-btn-groups.left {
+    left: 100px;
+    top: 440px;
+
+    .solution-privatization {
+      background: #eef106;
+      color: #00b96b;
+      width: 180px;
+      height: 60px;
+      line-height: 60px;
+      border-radius: 50px;
+      border-color: #eef106;
+    }
+  }
+}
+
+// 私有化部署优势
+.client-private-youshi {
+  >h4 {
+    font-size: 30px;
+    color: #333;
+    text-align: center;
+    font-weight: 800;
+    margin-top: 110px;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 100px;
+
+
+    li {
+      width: 50%;
+
+      >div {
+        box-sizing: border-box;
+        padding: 32px 54px;
+        border: 1px solid #00b96b;
+        border-radius: 10px;
+        margin: 0 47px  38px 0;
+        display: flex;
+        justify-content: flex-start;
+
+        i {
+          width: 92px;
+          height: 92px;
+          display: inline-block;
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center;
+          flex-shrink: 0;
+        }
+
+        div {
+          margin-left: 48px;
+          width: 600px;
+          height: 120px;
+
+          h4 {
+            font-size: 24px;
+            font-weight: 800;
+            color: #333;
+            text-align: left;
+          }
+
+          p {
+            font-size: 14px;
+            color: #333;
+            font-weight: 500;
+            line-height: 24px;
+            margin-top: 21px;
+          }
+        }
+      }
+
+      &:nth-child(1) {
+        >div> i {
+          background-image: url("~static/gangweiIcon/z84.png");
+        }
+      }
+      &:nth-child(2) {
+        >div> i {
+          background-image: url("~static/gangweiIcon/z85.png");
+        }
+      }
+      &:nth-child(3) {
+        >div> i {
+          background-image: url("~static/gangweiIcon/z86.png");
+        }
+      }
+      &:nth-child(4) {
+        >div> i {
+          background-image: url("~static/gangweiIcon/z87.png");
+        }
+      }
+    }
+  }
+}
+
+// 私有化部署方案
+.client-private-fangan {
+  margin-top: 180px;
+
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 78px;
+  }
+
+  .private-fangan-nav {
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+
+    &:after {
+      content: '';
+      background-color: #7cc659;
+      width: 60%;
+      height: 1px;
+      display: inline-block;
+      position: absolute;
+      bottom: -2px;
+      left: 50%;
+      transform: translate(-50%);
+    }
+
+    span {
+      cursor: pointer;
+      margin-right: 130px;
+      color: #9c9c9c;
+      font-size: 24px;
+      font-weight: 800;
+      opacity: 0.9;
+      margin-bottom: 18px;
+      display: inline-block;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.active {
+        color: #333;
+        opacity: 1;
+      }
+    }
+  }
+
+  .private-fangan-content {
+    background-image: url("~/static/gangweiIcon/z153.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    margin: 50px 50px 160px 50px;
+    padding: 50px;
+
+    >div {
+      transition: all .5s ease;
+      background: #fff;
+      padding: 40px;
+      border-radius: 6px;
+      display: flex;
+
+      img {
+        width: 400px;
+        height: 240px;
+      }
+
+      .left {
+        margin-left: 50px;
+
+        p {
+          font-size: 18px;
+          line-height: 30px;
+          font-weight: 500;
+          color: #333;
+        }
+
+        ul {
+          margin-top: 40px;
+          li {
+            font-size: 18px;
+            font-weight: 500;
+            color: #333;
+            line-height: 30px;
+
+            &:before {
+              content: '';
+              display: inline-block;
+              width: 14px;
+              height: 14px;
+              margin-right: 14px;
+              background-image: url("~static/gangweiIcon/z133.png");
+              background-repeat: no-repeat;
+              background-position: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 部署方案
+.client-private-service {
+  margin-bottom: 100px;
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 80px;
+  }
+
+  ul {
+    display: flex;
+    justify-content: space-between;
+
+    li {
+      width: 200px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      h4 {
+        font-size: 24px;
+        font-weight: 800;
+        color: #333;
+        margin-bottom: 24px;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 24px;
+        text-align: center;
+      }
+
+      i {
+        width: 195px;
+        height: 150px;
+        display: inline-block;
+        background-position: center;
+        background-size: contain;
+        background-position: center;
+      }
+
+      &:nth-child(1) {
+        i {
+          background-image: url("~static/productImage/p04.png");
+        }
+      }
+      &:nth-child(2) {
+        i {
+          background-image: url("~static/productImage/p03.png");
+        }
+      }
+      &:nth-child(3) {
+        i {
+          background-image: url("~static/productImage/p01.png");
+        }
+      }
+      &:nth-child(4) {
+        i {
+          background-image: url("~static/productImage/p02.png");
+        }
+      }
+    }
+  }
+}
+
 
+
+@media (max-width: 768px) {
+
+  .client-private-youshi {
+    >h4 {
+      font-size: 18px;
+      color: #333;
+      text-align: center;
+      font-weight: 800;
+      margin-top: 10%;
+    }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 10%;
+
+
+      li {
+        width: 100%;
+
+        >div {
+          box-sizing: border-box;
+          padding: 8px 14px;
+          border: 1px solid #00b96b;
+          border-radius: 10px;
+          margin: 0 10px 10px 0;
+          display: flex;
+          justify-content: flex-start;
+          height: 120px;
+
+          i {
+            width: 60px;
+            height: 60px;
+            display: inline-block;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+
+          div {
+            margin-left: 3%;
+            width: 600px;
+            height: 80px;
+
+            h4 {
+              font-size: 14px;
+              font-weight: 800;
+              color: #333;
+              text-align: left;
+            }
+
+            p {
+              font-size: 12px;
+              color: #333;
+              font-weight: 500;
+              line-height: 1.5;
+              margin-top: 5%;
+            }
+          }
+        }
+      }
+    }
+  }
+  .client-private-fangan {
+    margin-top: 10%;
+
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 5%;
+    }
+
+    .private-fangan-nav {
+      margin: 0 auto;
+      text-align: center;
+      &:after {
+        content: '';
+        background-color: #7cc659;
+        width: 60%;
+        height: 1px;
+        display: inline-block;
+      }
+
+      span {
+        cursor: pointer;
+        margin-right: 10%;
+        color: #9c9c9c;
+        font-size: 14px;
+        font-weight: 800;
+        opacity: 0.9;
+        margin-bottom: 18px;
+        display: inline-block;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &.active {
+          color: #333;
+          opacity: 1;
+        }
+      }
+    }
+
+    .private-fangan-content {
+      background-image: none;
+      margin: 0;
+      padding: 0;
+
+      >div {
+        transition: all .5s ease;
+        margin-bottom: 6%;
+        margin-top:  3%;
+        display: flex;
+        flex-direction: column;
+        background-image: none;
+        box-shadow: 0 0 10px #ccc;
+        padding: 0 0 20px;
+
+        img {
+          width: 100%;
+          height: 20%;
+          margin-bottom: 10px;
+          background: none;
+          padding: 0;
+          border-radius: 6px;
+          display: flex;
+
+        }
+
+        .left {
+          margin-left: 3%;
+
+          p {
+            font-size: 14px;
+            line-height: 1.5;
+            font-weight: 500;
+            color: #333;
+          }
+
+          ul {
+            margin-top: 1%;
+            li {
+              font-size: 14px;
+              font-weight: 500;
+              color: #333;
+              line-height: 1.5;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .client-private-service {
+    margin-bottom: 30px;
+
+    h4 {
+      font-size: 18px;
+      margin-bottom: 0px;
+      margin-top: 20px;
+    }
+
+    ul {
+      flex-direction: column;
+      li {
+        width: 100%;
+        flex-shrink: 1;
+        margin-bottom: 10px;
+
+        h4 {
+          font-size: 14px;
+        }
+
+        p {
+          font-size: 12px;
+        }
+
+        i {
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+}
 </style>

pages/solution/transportation.vue

@@ -1,17 +1,15 @@
 <template>
   <div class="client-exam-page client-platform-page">
     <!-- 广告图位置 -->
-    <div class="client-banner-box">
+    <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 />
+        class="client-platform-banner">
+      </div>
     </div>
 
     <!--  交通运输培训现状  -->
-    <div class="client-xianzhuang-box">
+    <div  class="client-xianzhuang-box">
       <h4>交通运输培训现状</h4>
       <p>现代交通运输正朝着高速化，大型化，专业化和网络化方向发展，各种运输方式之间的市场竞争也已全面展开。
       优于交通行业以技术先行，企业越来越需要具有扎实的汽车运用技术、交通运输与系统规划与管理、物流系统工程等方面专业知识，
@@ -19,118 +17,67 @@
     </div>
 
     <!--  交通运输培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>交通运输培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>员工分布各地，常年都在船上车上，集中培训考核非常困哪</p>
+          <div>
+            <i></i>
+            <p>员工分布各地，常年都在船上车上，集中培训考核非常困难</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+          <div>
+            <i></i>
+            <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
+          <div>
+            <i></i>
+            <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
+          </div>
         </li>
       </ul>
     </div>
 
+
     <!--  青谷解决方案  -->
-    <div class="platform-products-services">
+    <div  class="client-fangan-box client-container">
       <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>
+      <template v-for="(item,index) in productList">
+        <img-card-lv2 :option="item" v-if="item.lv == 2" :key="index">
+          <div class="btn-groups">
+            <onlineInformationBtn my-type="2" class="online-information-btn btn-item green" />
           </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>
+        </img-card-lv2>
+        <img-card-lv1 :option="item" v-if="item.lv == 1" :key="index">
+          <div class="btn-groups">
+            <onlineInformationBtn my-type="2" class="online-information-btn btn-item green" />
           </div>
-        </li>
-      </ul>
+        </img-card-lv1>
+      </template>
     </div>
 
     <!--  交通运输类课程案例  -->
-    <div class="client-anli-box">
+    <div  class="client-anli-box client-container">
       <h4>交通运输类课程案例</h4>
-      <p>青谷软件可为交通运输行业行业定制电子化课程</p>
+      <p>青谷软件可为交通运输行业定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '道路货物运输安全生产法律法规体系的基本框架', url: video1, imgUrl:img1}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '地铁知识课程', url: video2, imgUrl:img2}" @card-click="showVideo"></video-card>
         </li>
         <li>
-          <video-card :card-data="{title: '课程名称', url: ''}" @card-click="showVideo"></video-card>
+          <video-card :card-data="{title: '防火灭火基本知识', url: video3, imgUrl:img3}" @card-click="showVideo"></video-card>
         </li>
       </ul>
     </div>
 
     <!--  立即咨询  -->
-    <div class="client-zixun-code">
-      <h4>立即扫码资讯，领取您的专属解决方案</h4>
-      <img src="#" alt="">
-      <p>扫码添加客服微信</p>
-    </div>
+    <desWithCode source="transportation"></desWithCode>
 
     <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
 
@@ -145,6 +92,9 @@ import newsComp2 from "~/components/common/newsComp2";
 import {BannerImgs} from "~/defaultConfig";
 import videoDialog from "~/components/common/videoDialog";
 import videoCard from "~/components/common/videoCard";
+import desWithCode from "~/components/common/layout/desComp/desWithCode";
+import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";
+import imgCardLv1 from "~/components/common/layout/imgDes/imgCardLv1";
 
 /**
  * @ 解决方案 -> 交通运输
@@ -152,7 +102,7 @@ import videoCard from "~/components/common/videoCard";
 export default {
   name: "transportation",
   layout:   'templateB',
-  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2,  videoDialog, videoCard},
+  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2,  videoDialog, videoCard, desWithCode, imgCardLv2, imgCardLv1},
   async asyncData({$axios, store}) {
     const arr = [
       $axios.$post(`/home/banner/list`, {'code': BannerImgs.jiaotongyunshu}),
@@ -162,10 +112,162 @@ export default {
       bannerList: res2.data.data || [],
     }
   },
+  head() {
+    return {
+      title: '智能在线培训系统_企业考试系统_在线培训系统',
+      meta: [
+        {
+          name: 'keywords',
+          content: '智能在线培训系统_企业考试系统_在线培训系统'
+        },
+        {
+          name: 'description',
+          content: '高效智能的在线考试培训系统，解决异地考试痛点，线上直接答题考试，系统使用快捷方便，满足大型企业员工多需同时在线的需求。'
+        }
+      ],
+    }
+  },
   data() {
     return {
       curVideo: '',
       visible: false,
+      productList: [
+        {
+          content: {
+            title: '高效智能的在线培训系统',
+            list: [
+              {
+                value: '支持在线课程、学习地图、直播教学、培训计划等强大的企业培训系统功能',
+              },
+              {
+                value: '支持多类型课件，图文、文档、视频、音频及站外链接任意选择，在线学习形式更丰富',
+              },
+              {
+                value: '一键设置课程关联考试，实时记录学时进度，让学员学习状况一目了然',
+              },
+            ],
+            order: 2,
+            num: '01',
+          },
+          img: {
+            url: require(`~/static/productImage/p33.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi',
+          lv: 2,
+        },
+        {
+          content: {
+            title: '简单易上手的在线考试系统',
+            list: [
+              {
+                value: '考试系统使用方便，操作简单，节约成本，无需独立开发',
+              },
+              {
+                value: '在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务',
+              },
+              {
+                value: '支持万人同时在线，超高并发安全稳定运行',
+              },
+            ],
+            order: 1,
+            num: '02',
+          },
+          img: {
+            url: require(`~/static/productImage/p32.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi',
+          lv: 2,
+        },
+        {
+          content: {
+            title: '帮助企业构建自主课程体系',
+            des: '基于岗位胜任力模型，青谷为企业搭建9大模块通用岗位培训方案，满足各个行业对培训课程资源的应用需求。',
+            list: [
+              {
+                value: '职业素养',
+              },
+              {
+                value: '领导能力',
+              },
+              {
+                value: '人力资源',
+              },
+              {
+                value: '市场营销',
+              },
+              {
+                value: '行政管理',
+              },
+              {
+                value: '财务管理',
+              },
+              {
+                value: '客服服务',
+              },
+              {
+                value: '产品运营',
+              },
+              {
+                value: '生产采购',
+              },
+            ],
+            order: 2,
+            num: '03',
+          },
+          img: {
+            url: require(`~/static/productImage/p34.png`),
+            order: 1,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi',
+          lv: 1,
+        },
+        {
+          content: {
+            title: '多端口个性化设置随心选择',
+            list: [
+              {
+                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
+              },
+              {
+                value: '与三方平台无缝集成，支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
+              },
+              {
+                value: 'PC、APP、H5统一管理，数据互动，充分利用水平化时间，塑造学员高频率使用习惯',
+              },
+            ],
+            order: 1,
+            num: '04',
+          },
+          img: {
+            url: require(`~/static/productImage/p30.png`),
+            order: 2,
+          },
+          mianfei: true,
+          zixun: true,
+          shenqing: false,
+          myType: 'kaoshi',
+          lv: 2,
+        }
+      ],
+
+      // 交通运输
+      img1: require(`~/static/videoImages/v16.jpg`),
+      video1: 'https://spdb.mtavip.com/bc573e0208b648e489871042d921e4d9/1218c962b43b4181b52210e1c4e06a30-c3623c6e463017eed5281ab71725ed90-fd.mp4',
+      img2: require(`~/static/videoImages/v17.jpg`),
+      video2: 'https://spdb.mtavip.com/053134c40aba44ec9ecafefb2bee76ec/44e26709f07d44e3987135a1a7b428da-62cfaf98118b118946ddff06f51cbb2a-fd.mp4',
+      img3: require(`~/static/videoImages/v18.jpg`),
+      video3: 'https://spdb.mtavip.com/edc9a92d4f42493990454dd9c60c27da/251d1a6c860e414198243e6cd96c11cf-dddb1b5a0bcac117a3e6a485d52c18c5-fd.mp4',
     }
   },
   methods: {
@@ -177,6 +279,74 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.banner-btn-groups {
+  left: 0;
+  top: 450px !important;
+  .solution-transportation {
+    color: #00b96b;
+    border-color: #fff;
+    width: 190px;
+    height: 60px;
+    line-height: 60px;
+    border-radius: 50px;
+    background: #fff;
+  }
+}
+
+
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+          i {
+            background-image: url('~static/gangweiIcon/z105.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z97.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z103.png');
+          }
+        }
+      }
+    }
+  }
+  @media (max-width: 768px) {
+    ul {
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: none;
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: none;
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: none;
+          }
+        }
+      }
+    }
+  }
+}
+
 
 </style>

pages/test/index.vue

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    {{counter}}
-    <hr>
-    <el-button @click="addFun">add</el-button>
-    <el-button @click="minFun">min</el-button>
-
-    <myChildPage></myChildPage>
-  </div>
-</template>
-
-<script>
-  import myChildPage from '~/components/test/myChildPage';
-  import Vue         from 'vue';
-
-  const myData = Vue.observable({ count: 1 });
-  export default {
-    name:       'test',
-    provide:    {
-      testData: myData,
-    },
-    components: {
-      myChildPage,
-    },
-    head() {
-      return {
-        title: '测试',
-        meta:  [
-          {
-            hid:     'description',
-            name:    'description',
-            content: '我的测试',
-          },
-        ],
-      };
-    },
-    computed:   {
-      counter() {
-        return myData.count;
-      },
-    },
-    methods:    {
-      addFun() {
-        myData.count++;
-      },
-      minFun() {
-        myData.count--;
-      },
-    },
-  };
-</script>
-
-<style scoped>
-
-</style>

pages/tiyanCenter/index.vue

@@ -1,316 +0,0 @@
-<template>
-  <div class="client-platform-page tiyan-center-page">
-    <!-- 体验中心 banner栏 --><!--style="url('/static/images/client/exam/exam-banner-background.png')" -->
-    <div class="client-platform-banner">
-      <div :style="{backgroundImage: `url(${tiyanCenterImg})`}"></div>
-    </div>
-    <!--  麦塔在线考试系统体验版 -->
-    <div class="platform-products-experience client-container">
-      <h4 class="client-title">麦塔在线考试系统体验版</h4>
-      <p>简单易用，三步发布考试</p>
-      <ul class="experience-ul-box mta-hidden-xs">
-        <li>
-          <div @mouseenter="enterCodeKs" @mouseleave="leaveCodeKs">
-            <i></i><h5>手机前台学员端</h5>
-            <p>免登录手机扫描二维码</p>
-            <p>体验考生答卷真实界面</p>
-            <a style="cursor: default">扫码试用</a>
-            <span ref="codeBtnKs" v-if="youkeFlag"><em></em></span>
-            <div ref="codeBtnKs" v-if="!youkeFlag">系统升级中...</div>
-          </div>
-        </li>
-        <li><div><i></i><h5>电脑前台学员端</h5><p>适用于各种考试考核竞赛</p><p>拥有强大的并发负载能力</p><a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
-        <li><div><i></i><h5>电脑后台管理端</h5><p>三个简单步骤轻松完成发布</p><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">
-                <i class="sjxyd-icon"></i>
-                <h5>手机前台学员端</h5>
-                <p>点击立即体验按钮，体验考生答卷真实界面</p>
-                <a style="cursor: default" @click="FreeTrial(1)">立即体验</a>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <div class="experience-content-box">
-                <i  class="dnxyd-icon"></i>
-                <h5>电脑前台学员端</h5>
-                <p>适用于各种考试考核竞赛</p>
-                <p>拥有强大的并发负载能力</p>
-                <a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <div class="experience-content-box">
-                <i class="dngld-icon"></i>
-                <h5>电脑后台管理端</h5>
-                <p>三个简单步骤轻松完成发布</p>
-                <p>简单操作让复杂工作智能化</p>
-                <a @click="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>
-    </div>
-    <!--  麦塔在线培训系统 -->
-    <div class="platform-products-experience client-container">
-      <h4 class="client-title">麦塔在线培训系统体验版</h4>
-      <p>学测考练，随时随地开展企业培训</p>
-      <ul class="experience-ul-box mta-hidden-xs">
-        <li>
-          <div @mouseenter="enterCodePx" @mouseleave="leaveCodePx">
-            <i></i><h5>手机前台学员端</h5>
-            <p>手机扫描二维码</p>
-            <p>免登录想学就学</p>
-            <a style="cursor: default">扫码试用</a>
-            <span ref="codeBtnPx" v-if="youkeFlag"><em class="px-img-box"></em></span>
-            <div ref="codeBtnPx" v-if="!youkeFlag">系统升级中...</div>
-          </div>
-        </li>
-        <li><div><i></i><h5>电脑前台学员端</h5><p>学练考评测一站式解决</p><p>适用各类企业培训场景</p><a @click="pxTyBtn('https://youkepxc.mtavip.com/c/youke')">立即体验</a></div></li>
-        <li><div><i></i><h5>电脑后台管理端</h5><p>丰富的学习功能设置</p><p>多终端进行培训考核</p><a @click="pxTyBtn('https://youkepxa.mtavip.com/a/youke')">免费体验</a></div></li>
-      </ul>
-      <div class="experience-swiper-box mta-hidden-sm">
-        <div v-swiper:mySwiperPx="swiperOptionPx" class="swiper-container">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide">
-              <div class="experience-content-box">
-                <i class="sjxyd-icon"></i>
-                <h5>手机前台学员端</h5>
-                <p>点击立即体验按钮，免登录想学就学</p>
-                <a style="cursor: default" @click="FreeTrial(2)">立即体验</a>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <div class="experience-content-box">
-                <i  class="dnxyd-icon"></i>
-                <h5>电脑前台学员端</h5>
-                <p>学练考评测一站式解决</p>
-                <p>适用各类企业培训场景</p>
-                <a @click="pxTyBtn('https://youkepxc.mtavip.com/c/youke')">立即体验</a>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <div class="experience-content-box">
-                <i class="dngld-icon"></i>
-                <h5>电脑后台管理端</h5>
-                <p>丰富的学习功能设置</p>
-                <p>多终端进行培训考核</p>
-                <a @click="pxTyBtn('https://youkepxa.mtavip.com/a/youke')">免费体验</a></div>
-            </div>
-          </div>
-          <div class="swiper-pagination swiper-pagination-style"></div>
-          <p class="experience-swiper-tip">←左右滑动查看更多→</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- 企业考培立即注册-->
-    <div class="tiyan-center-register mta-hidden-xs">
-      <div class="client-container">
-        <h5>在线考培，就用麦塔</h5>
-        <p>现在注册试用即享<span>30人</span>现在注册试用即享<span>3年</span>使用权限</p>
-        <a @click="registerFun">立即注册</a>
-      </div>
-    </div>
-    <!--  立即注册弹窗 -->
-    <el-dialog
-      :close-on-click-modal="false"
-      :visible.sync="registerDl"
-      class="register-now-dialog"
-      center>
-      <div class="register-now-box">
-        <p>在线考培，就用麦塔</p>
-        <p>现在注册立享30人纯免费版本3年使用权限</p>
-        <div class="system-box">
-          <a href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank"><i></i><p>考试系统</p></a>
-          <span></span>
-          <a href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank"><i></i><p>培训系统</p></a>
-        </div>
-        <span>免费咨询电话：<span class="tel-code">400-052-2130</span></span>
-      </div>
-    </el-dialog>
-    <!-- 系统维护-->
-    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
-  </div>
-</template>
-
-<script>
-  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
-  Swiper.use([Navigation, Pagination,Autoplay]);
-  export default {
-    name:     'tiyanCenter',
-    layout:   'templateB',
-    async asyncData({ $axios,store }) {
-      // 设置选中菜单
-      store.commit('setActiveNav', '/tiyanCenter');
-    },
-    data() {
-      return {
-        // 发展现状img
-        tiyanCenterImg: require(`~/static/images/client/tiyanCenter/tiyanCenterImg.png`),
-        registerDl:false,
-        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,
-        },
-        swiperOptionPx: {
-          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,
-        },
-      };
-    },
-    head(){
-      return {
-        title: '麦塔考试系统在线体验_麦塔培训系统在线体验',
-        meta:  [
-          {
-            description: '在线考培，就用麦塔，现在注册试用即享30人现在注册试用即享3年使用权限！',
-            keywords:    '考试系统在线体验',
-          },
-        ],
-      };
-    },
-    computed: {},
-    methods:  {
-      // 判断是否为移动端
-      getSystemWidth(){
-        var browserWidth=document.documentElement.clientWidth;
-        if(browserWidth <= 768){
-          this.SystemWidthFlag = true;
-        }else{
-          this.SystemWidthFlag = false;
-        }
-      },
-      // 免费试用
-      FreeTrial(type){
-        var registerType = type;
-        this.getSystemWidth();
-        if(this.youkeFlag){
-            if(registerType===1) {
-              window.open('https://youkeksc.mtavip.com/kscmdist/#/youke')
-            }else {
-              window.open('https://youkepxc.mtavip.com/pxcmdist/#/youke')
-            }
-        }else{
-          // 升级中
-          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
-        }
-      },
-      // 考试体验按钮
-      KsTyBtn(btnUrl){
-        this.getSystemWidth();
-        if(this.youkeFlag) {
-          if(this.SystemWidthFlag){
-            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
-          }else {
-            window.open(btnUrl);
-          }
-        }else{
-          if(this.SystemWidthFlag){
-            // 升级中
-            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
-          }else{
-            this.systemMaintainDl = true;
-          }
-        }
-      },
-      // 培训学员端体验
-      pxTyBtn(btnUrl){
-        this.getSystemWidth();
-        if(this.youkeFlag) {
-          if(this.SystemWidthFlag){
-            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
-          }else {
-            window.open(btnUrl);
-          }
-        }else{
-          if(this.SystemWidthFlag){
-            // 升级中
-            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
-          }else{
-            this.systemMaintainDl = true;
-          }
-
-        }
-      },
-      // 考试鼠标移入
-      enterCodeKs(){
-        if(this.youkeFlag){
-          this.$refs.codeBtnKs.style.bottom ='90px';
-        }else{
-          this.$refs.codeBtnKs.style.bottom ='0';
-        }
-
-      },
-
-      // 考试鼠标移出
-      leaveCodeKs(){
-        this.$refs.codeBtnKs.style.bottom ='305px';
-      },
-      // 培训鼠标移入
-      enterCodePx(){
-        if(this.youkeFlag){
-          this.$refs.codeBtnPx.style.bottom ='90px';
-        }else{
-          this.$refs.codeBtnPx.style.bottom ='0';
-        }
-      },
-
-      // 培训鼠标移出
-      leaveCodePx(){
-        this.$refs.codeBtnPx.style.bottom ='305px';
-      },
-      // 立即注册按钮
-      registerFun(){
-        this.registerDl = true;
-      },
-    },
-    created() {
-      // 页面初始化
-      this.$axios.$post('/home/youke/stop').then(res=>{
-        if (res.data === '1') {
-          this.youkeFlag = false;
-        }else{
-          this.youkeFlag = true;
-        }
-      });
-    },
-    mounted() {
-      this.getSystemWidth();
-    },
-    beforeDestroy() {
-    },
-  };
-</script>

pages/traffic.vue

@@ -1,89 +0,0 @@
-<template>
-  <!-- 交通运输-详情页 -->
-  <div class="client-traffic-page">
-
-    <!-- 交通运输banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=1"
-         target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=1"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 交通运输的发展现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">交通运输行业现状</h4>
-      <div class="client-container">
-        <p>
-          交通运输行业是国民经济发展的基础，交通运输网络的完善和服务水平的提高,推动了经济运行的同时，科学技术的进步又能反向推动运输业的发展，每次技术革命和技术进步都对交通运输业的发展起到了推动作用。“技术强军”，在汽车运用技术、交通运输系统规划与管理、物流系统工程等方面都要求我们必须培养出复合型的新兴技术人才。</p>
-        <img :src="developImg" alt="交通运输行业现状"/>
-      </div>
-    </div>
-
-    <!-- 使用我们的系统，这些问题都能迎刃而解 -->
-    <div class="traffic-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container">
-        <div class="industrydetails-content tc">
-          <div class="change-content-left">
-            <h5>传统方式可能会出现的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>组织统一时间地点的培训、考试难度大</p></li>
-              <li><i></i>
-                <p>安全学习需要一个长期反复的培训，但难以实施</p></li>
-              <li><i></i>
-                <p>安全学习需要一个长期反复的培训，但难以实施</p></li>
-              <li><i></i>
-                <p>员工分散在四面八方，很多常年都在船上车上，集中学习困难</p></li>
-            </ul>
-          </div>
-          <div class="change-content-right">
-            <h5>我们可以帮您解决的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>集学考练于一体，学习效果更显著，全流程线上进行，效率增倍</p></li>
-              <li><i></i>
-                <p>利用在线平台进行反复持续的安全培训，有助于员工安全意识的根深蒂固</p></li>
-              <li><i></i>
-                <p>解决线下培训考试低频问题，利用碎片化时间来统一进度</p></li>
-              <li><i></i>
-                <p>完善的后台统计功能，将学习效果以图表形式呈现，更能全面了解学习及答题情况</p></li>
-              <li><i></i>
-                <p>费用成本、人力成本和时间成本均降低90%以上</p></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:   'traffic',
-    layout: 'templateB',
-    data() {
-      return {
-        // 发展现状img
-        developImg: require(`~/static/images/client/industrydetails/traffic-develop-img.png`),
-      };
-    },
-    head() {
-      return {
-        title: '交通运输行业考试系统_交通运输行业考核系统',
-        meta:  [
-          {
-            description: '由于交通行业以技术先行，企业越来越需要具有扎实的汽车运用技术、交通运输系统规划与管理、物流系统工程等方面专业知识，并能独立从事汽车运用与管理、物流系统规划设计与管理的复合型高级工程技术人才，人才的培养格外重要。',
-            keywords:    '交通考试系统,运输考试系统,交通考核系统,运输考核系统',
-          },
-        ],
-      };
-    },
-  };
-</script>
-
-<style scoped>
-
-</style>

pages/trainEducation.vue

@@ -1,99 +0,0 @@
-<template>
-  <!-- 教育行业-详情页 -->
-  <div class="client-education-page">
-
-    <!-- 教育行业banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2"
-         target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 教育培训行业现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">教育培训行业现状</h4>
-      <div class="client-container">
-        <p>
-          教育培训机构教师的用工形式较为灵活，往往分为以下几种用工形式：全职、兼职、临聘、外包，这样的用工制度就会导致教师的教学水平参差不齐，给人员管理上带来了一定的难度。为了提高教学质量，要定期对员工及教师进行培训及考试，优胜劣汰。麦塔学独特的教育教培训考试工具能有效帮助教育培训机构实现教师的资格审查，提升教学水平。</p>
-        <img :src="developImg" alt="教育培训行业现状"/>
-      </div>
-    </div>
-
-    <!-- 我们的系统为您改变了什么 -->
-    <div class="education-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container">
-        <div class="industrydetails-content fn-clear mt48">
-          <div class="change-content-left">
-            <h5>传统方式可能会出现的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>无论课程是否能听明白，都只能听一次，无法重复观看</p></li>
-              <li><i></i>
-                <p>讲师每次讲课水平发挥不一致，优秀的课程无法保留在用户间互相传递</p></li>
-              <li><i></i>
-                <p>教学活动仅限于在教室这样的固定地点进行</p></li>
-              <li><i></i>
-                <p>课堂提问无法保存下来，尤其是那些有价值的问答，无法为后来者提供参考</p></li>
-              <li><i></i>
-                <p>传统学习方式场地小，无法组织很多人一起听课</p></li>
-              <li><i></i>
-                <p>传统纸考出题印卷排考监考流程多，时间耗费大，易出错</p></li>
-            </ul>
-          </div>
-          <img :src="changeImg" alt="vs"/>
-          <div class="change-content-right">
-            <h5>我们可以帮您解决的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>重复听讲：线上课程支持反复不限次学习，随时随地皆可学习</p></li>
-              <li><i></i>
-                <p>个人时间：网络学习能够大量节约时间，可以根据自己的时间自主安排学习</p></li>
-              <li><i></i>
-                <p>难点学习：可依据自身的学习情况反复学习薄弱点、重难点</p></li>
-              <li><i></i>
-                <p>培训费用：能够大量节省讲师、场地、交通等大笔支出</p></li>
-              <li><i></i>
-                <p>地点灵活：学习不限地点，只要有网络就能学习，灵活度高</p></li>
-              <li><i></i>
-                <p>学习交流：不仅能与老师互动交流疑点难点，也可与同学进行线上交流</p></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:    'trainEducation',
-    layout:  'templateB',
-    data() {
-      return {
-        // 发展现状img
-        developImg: require(`~/static/images/client/industrydetails/education-develop-img.png`),
-        // 我们的系统为您改变了什么 img
-        changeImg:  require(`~/static/images/client/industrydetails/education-change-img.png`),
-      };
-    },
-    head() {
-      return {
-        title: '教育培训系统_教师培训系统_学生培训系统',
-        meta:  [
-          {
-            description: '现如今，互联网教育正以迅雷不及掩耳之势搅动市场，“智能学习”成了一个新的市场。麦塔不仅是考试出题软件，还是在线教学考试系统，非常适合培训机构前期营销获客以及后期模拟考试的场景。',
-            keywords:    '教育培训系统,教师培训系统,学生培训系统',
-          },
-        ],
-      };
-    },
-    methods: {},
-  };
-</script>
-
-<style scoped>
-
-</style>

pages/trainEnergy.vue

@@ -1,93 +0,0 @@
-<template>
-  <!-- 能源化工-详情页 -->
-  <div class="client-energy-page">
-
-    <!-- 能源化工banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2"
-         target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 能源化工行业现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">能源化工行业现状</h4>
-      <div class="client-container">
-        <p>
-          今天，信息化在社会的各行各业迅速发展，对于石油、石化和煤炭这些大型国有企业来说，更需要遵循以互联网创新思维为依托，以先进的技术为手段的企业信息化改革举措，深度推进能源化工与互联网融合发展。在信息化这条道路上，如果缺少一个完整的学习流程体系，将寸步难行。</p>
-        <img :src="energyDevelopImg" alt="能源化工行业现状"/>
-      </div>
-    </div>
-
-    <!-- 使用我们的系统，这些问题都能迎刃而解 -->
-    <div class="energy-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container industrydetails-content">
-        <div class="change-box-top">
-          <h5>传统方式可能会出现的问题</h5>
-          <ul>
-            <li><i></i>
-              <p>能源行业各分支机构常常处于异地，分支又多，需统一培训、考试<br>实施难度大</p></li>
-            <li><i></i>
-              <p>内部发布公告、信息交流不顺畅，沟通效率低、管理不便</p></li>
-            <li><i></i>
-              <p>由于行业特性，培训成本高，人力资源部人工利用已透支</p></li>
-            <li><i></i>
-              <p>无法单独针对某个员工的知识薄弱点进行二次培训</p></li>
-            <li><i></i>
-              <p>企业规模的扩大，亟待一个强运行的后台数据管理统计系统</p></li>
-          </ul>
-        </div>
-        <div class="change-box-bottom">
-          <img :src="changeImg" alt="vs"/>
-          <h5>我们可以帮您解决的问题</h5>
-          <ul>
-            <li><i></i>
-              <p>统一培训排考：通过报名体系各分公司负责人可以自主帮员工报名培训和考试，解决了分公司人员生产技能培训、考核的问题</p></li>
-            <li><i></i>
-              <p>扩大交流通道：管理员可以在平台上统一发布公告，推送给员工，也可以选择推送范围，小范围推送消息通知。</p></li>
-            <li><i></i>
-              <p>牢固安全意识：课程可以上传平台，做到一次录制反复利用，通过在线学习提升员工安全生产的基本认识，掌握安全生产的操作技能。</p></li>
-            <li><i></i>
-              <p>制定培训计划：考试结束后，公司通过分析每个部门员工的平均成绩以及每题的正确率，来制定相应的个人培训计划，只推送所需课程，做到减负。</p></li>
-            <li><i></i>
-              <p>提高效率：利用数据库技术，实现了远距离的同步考试，同步学习，提高了学习、考试效率，确保考试数据的公平、公正、科学、及时等。</p></li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:    'trainEnergy',
-    layout:  'templateB',
-    data() {
-      return {
-        // 发展现状img
-        energyDevelopImg: require(`~/static/images/client/industrydetails/energy-develop-img.png`),
-        // 使用我们的系统，这些问题都能迎刃而解 img
-        changeImg:        require(`~/static/images/client/industrydetails/energy-change-img.png`),
-      };
-    },
-    head() {
-      return {
-        title: '能源化工培训系统_能源培训系统_化工培训系统',
-        meta:  [
-          {
-            description: '在石油、石化和煤炭等大型国有企业中要以信息化带动工业化、自动化，应用信息技术改造提升能源企业，加快企业信息化进程，提高信息技术应用水平。没有一个完整的学习体系，不能统一排考检测员工安全电力方面的信息掌握程度，无法分析员工的不足之处。',
-            keywords:    '能源化工培训系统,能源培训系统,化工培训系统',
-          },
-        ],
-      };
-    },
-    methods: {},
-  };
-</script>
-
-<style scoped>
-
-</style>

pages/trainGovernment.vue

@@ -1,123 +0,0 @@
-<template>
-  <!-- 政府机构-详情页 -->
-  <div class="client-government-page">
-    <!-- 政府机构banner栏 -->
-    <div class="industrydetails-banner">
-      <div class="industrydetails-banner-box"></div>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-xs" href="https://cdnks.mtavip.com/a/register?flug=2"
-         target="_blank">免费试用</a>
-      <a rel="nofollow" class="free-trial-default-btn mta-hidden-sm" href="https://cdnks.mtavip.com/mdist/#/webRegister?flug=2"
-         target="_blank">免费试用</a>
-    </div>
-
-    <!-- 企事业单位行业现状 -->
-    <div class="industrydetails-develop-box">
-      <h4 class="client-title">企事业单位行业现状</h4>
-      <div class="client-container">
-        <p>
-          现代企业发展快，竞争压力大，很多企业都想要通过考核的方式，提升企业内部的软实力，从而提升企业竞争力，所以，无论是企业单位还是事业单位，都少不了要进行各类不同形式的考试。而传统的考核方式，要经历从出卷、分发、打印、寻找考场、安排考试时间、组织考试、安排监考、批卷阅卷、统计成绩等诸多步骤，在时间和金钱上的成本耗费都较高，不再适应现代企业的管理模式。</p>
-        <img :src="developImg" alt="企事业单位行业现状"/>
-      </div>
-    </div>
-
-    <!-- 使用我们的系统，这些问题都能迎刃而解 -->
-    <div class="government-change-box">
-      <h4 class="client-title">使用我们的系统，这些问题都能迎刃而解</h4>
-      <div class="client-container">
-        <div class="industrydetails-content">
-          <div class="change-content-left">
-            <h5>传统方式可能会出现的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>老员工离职时，将之前企业精心培养的工作经验带走了，新人来只能靠感觉重新摸索</p></li>
-              <li><i></i>
-                <p>每当有新人入职，都要准备一次培训资料，重复工作导致效率低下</p></li>
-              <li><i></i>
-                <p>员工的职业胜任能力不清晰，是否符合胜任条件只能靠感官</p></li>
-              <li><i></i>
-                <p>每次一组织培训，就要占用工作时间或者员工下班后的时间，培训部门和员工都苦不堪言</p></li>
-            </ul>
-          </div>
-          <img :src="changeImg" alt="使用我们的系统，这些问题都能迎刃而解"/>
-          <div class="change-content-right">
-            <h5>我们可以帮您解决的问题</h5>
-            <ul>
-              <li><i></i>
-                <p>为企业建立智库，将经验资料存储在平台内，哪怕员工流动也能有迹可循，有典可查。</p></li>
-              <li><i></i>
-                <p>严格把控员工入职流程，安排员工参加入职考核，考试合格再上岗</p></li>
-              <li><i></i>
-                <p>系统能够自动生成能力模型，为管理人员提供科学切实的参考依据</p></li>
-              <li><i></i>
-                <p>用我们的系统在手机、微信上就能够解决培训问题，课程轨迹随时记录，确保碎片化学习的应用。</p></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 产品优势 -->
-    <div class="government-advantage-box mta-hidden-xs">
-      <h4 class="client-title">产品优势</h4>
-      <div class="client-container fn-hidden fn-clear-gap">
-        <div class="government-advantage-content">
-          <dl>
-            <dt><i></i><span>不限次听讲</span></dt>
-            <dd>可以不限次重复听讲，学员的提问回答都保留在系统中</dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>培训费用</span></dt>
-            <dd>能大量节省培训支出，如场地费、讲师学员的交通费、讲师重复讲课的费用</dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>难点突破</span></dt>
-            <dd>系统可以智能分析易错点，生成个人报告，学员可依据个人情况重复学习重难点和易错点</dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>个人时间</span></dt>
-            <dd>网络学习碎片化的优点能有效利用大量的学习时间 </dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>地点灵活</span></dt>
-            <dd>学习地点灵活，可以根据自己的时间进行学习</dd>
-          </dl>
-          <dl>
-            <dt><i></i><span>互动交流</span></dt>
-            <dd>在学习中能与老师、同学以实时的方式或留言的形式交流学习中的疑难点</dd>
-          </dl>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name:    'trainGovernment',
-    layout:  'templateB',
-    data() {
-      return {
-        // 发展现状img
-        developImg: require(`~/static/images/client/industrydetails/government-develop-img.png`),
-        // 使用我们的系统，这些问题都能迎刃而解 img
-        changeImg:  require(`~/static/images/client/industrydetails/government-change-img.png`),
-        // 获取是考试系统点进来的还是培训系统点进来的
-        tpyeKey:    '',
-      };
-    },
-    head() {
-      return {
-        title: '政府机构培训系统_政府培训系统_事业单位培训系统',
-        meta:  [
-          {
-            description: '传统考试方式，从出题、组卷、印刷，到安排场地、试卷分发、监考，再到收卷、阅卷，程序繁杂，需要投入大量的时间、人力和物力，并且周期长、工作量大，成本较高，不能完全适应现代企业管理模式。',
-            keywords:    '政府机构培训系统,政府培训系统,事业单位培训系统',
-          },
-        ],
-      };
-    },
-    methods: {},
-  };
-</script>
-

pages/trainsystem/index.vue

@@ -1,514 +0,0 @@
-<template>
-  <div class="client-platform-page client-train-page">
-
-    <!-- 培训平台页 banner栏 -->
-    <div class="client-platform-banner">
-      <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/train/train-banner-background.png`)})`}" class="client-platform-banner"></div>
-      <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
-    </div>
-    <!--  产品试用 -->
-    <div class="platform-products-experience client-container">
-      <h4 class="client-title">产品试用</h4>
-      <p>免注册，立即试用麦塔在线培训系统</p>
-      <ul class="experience-ul-box mta-hidden-xs">
-        <li>
-          <div @mouseenter="enterCode" @mouseleave="leaveCode" >
-            <i></i><h5>手机前台学员端</h5>
-            <p>手机扫描二维码</p>
-            <p>免登录想学就学</p>
-            <a style="cursor: default">扫码试用</a>
-            <span ref="codeBtn" v-if="youkeFlag"><em class="px-img-box"></em></span>
-            <div ref="codeBtn" v-if="!youkeFlag">系统升级中...</div>
-          </div>
-        </li>
-        <li><div><i></i><h5>电脑前台学员端</h5><p>学练考评测一站式解决</p><p>适用各类企业培训场景</p><a @click="pxTyBtn('https://youkepxc.mtavip.com/c/youke')">立即体验</a></div></li>
-        <li><div><i></i><h5>电脑后台管理端</h5><p>丰富的学习功能设置</p><p>多终端进行培训考核</p><a @click="pxTyBtn('https://youkepxa.mtavip.com/a/youke')">免费体验</a></div></li>
-        <li><div><i></i><h5>更新日志</h5><p>麦塔，只想给你更好的</p><p>我们愿和您一起进步</p><a class="client-default-Btn" @click="goCheckLog">点击查看</a></div></li>
-      </ul>
-      <!-- 手机轮播 -->
-      <div class="experience-swiper-box mta-hidden-sm">
-        <div v-swiper:mySwiper="swiperOption" class="swiper-container">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide">
-              <div class="experience-content-box">
-                <i class="sjxyd-icon"></i>
-                <h5>手机前台学员端</h5>
-                <p>点击立即体验按钮，免登录想学就学</p>
-                <a style="cursor: default" @click="ykFreeTrial">立即体验</a>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <div class="experience-content-box">
-                <i  class="dnxyd-icon"></i>
-                <h5>电脑前台学员端</h5>
-                <p>学练考评测一站式解决</p>
-                <p>适用各类企业培训场景</p>
-                <a @click="pxTyBtn('https://youkepxc.mtavip.com/c/youke')">立即体验</a>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <div class="experience-content-box">
-                <i class="dngld-icon"></i>
-                <h5>电脑后台管理端</h5>
-                <p>丰富的学习功能设置</p>
-                <p>多终端进行培训考核</p>
-                <a @click="pxTyBtn('https://youkepxa.mtavip.com/a/youke')">免费体验</a></div>
-            </div>
-            <!--<div class="swiper-slide">
-              <div class="experience-content-box">
-                <i class="skrz-icon"></i>
-                <h5>更新日志</h5>
-                <p>麦塔，只想给你更好的</p>
-                <p>我们愿和您一起进步</p>
-                <a  class="client-default-Btn" @click="goCheckLog">点击查看</a>
-              </div>
-            </div>-->
-          </div>
-          <div class="swiper-pagination swiper-pagination-style"></div>
-          <p class="experience-swiper-tip">←左右滑动查看更多→</p>
-        </div>
-      </div>
-    </div>
-    <!--  产品特性 -->
-      <div class="platform-products-services">
-      <h4 class="client-title">产品特性</h4>
-      <ul>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <img :src="trainAdvantagesImg1" alt="全流程课程学习体系" />
-              <div class="products-services-content">
-                <h5>全流程课程学习体系</h5>
-                <i></i>
-                <p>录题组卷，发布考试，阅卷分析，检验培训效果，自动生成能力模型，一整套完整的学习流程，助力线上培训服务。</p>
-                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <img :src="trainAdvantagesImg2" alt="随时随地学习" />
-              <div class="products-services-content">
-                <h5>随时随地学习</h5>
-                <i></i>
-                <p>支持PC、移动多端联动，高频互动培训，可集成微信、钉钉、飞书、OA等多终端，让学员能有效利用碎片化时间，随时随地参与学习答题。</p>
-                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box products-contrary-box">
-              <img :src="trainAdvantagesImg3" alt="线上线下融合，自动记录学习轨迹" />
-              <div class="products-services-content">
-                <h5>线上线下融合<br>自动记录学习轨迹</h5>
-                <i></i>
-                <p>实时跟踪进度，通过在线学习的便捷，充分发挥讲师的引导、监控教学作用，及学员学习过程中的能动性，多种课程完成条件设置，适应于不同的在线培训需求，多元化管理培训项目。</p>
-                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
-              </div>
-            </div>
-          </div>
-        </li>
-        <li>
-          <div class="client-container">
-            <div class="products-services-box">
-              <img :src="trainAdvantagesImg4" alt="学，测，考，练，评一站式解决企业培训问题" />
-              <div class="products-services-content">
-                <h5>学，测，考，练，评一站式解决企业培训问题</h5>
-                <i></i>
-                <p>包含在线考试系统题库——组卷——考试——练习的全部功能；支持个性化为学员定制培训方案，设计岗位学习地图，学习过程中自动触发练习题，边学边练检验成果。</p>
-                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-
-    </div>
-
-    <!--  产品功能 -->
-    <div class="platform-product-function">
-      <div class="client-container">
-        <h4 class="client-title">产品功能</h4>
-        <ul class="product-function-box mta-hidden-xs">
-          <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>适配PC端、手机端、PAD端，能根据实际培训场景，提供满足员工多场景下的学习方式，多端学习数据即时同步，轻量化课程体系，学练结合， 每日自动推送轻量化学习内容和练习题</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>
-          <li>
-            <div><i></i><h5>与第三方系统无缝集成</h5>
-              <p>基于Java语言开发Springcloud框架，稳定安全，高性价比；支持微信、钉钉、EAP/EIP、OA、HR系统的多端无缝连接，及用户数据同步</p></div>
-          </li>
-          <li>
-            <div><i></i><h5>个性化定制</h5>
-              <p>支持个性化自定义组织专用的皮肤、Logo，强化您的组织和品牌属性</p></div>
-          </li>
-        </ul>
-        <!-- 手机轮播 -->
-        <div class="experience-swiper-box mta-hidden-sm">
-          <div v-swiper:mySwiperGn="swiperOptionGn" class="swiper-container">
-            <ul class="swiper-wrapper">
-              <li class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="product-function-icon1"></i><h5>用户体系构建</h5>
-                  <p>支持分层级管理权限，用户信息多端集成同步，能满足多层级组织架构，多级子公司运营的独立管理需求</p>
-                </div>
-              </li>
-              <li class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="product-function-icon2"></i><h5>督学与监管记录</h5>
-                  <p>先学习后考试，巩固培训效果，不断提升行业竞争力，形成培训记录数据，为管理提供数据证明，强大的督学分析体系让培训易于组织、真正有效</p>
-                </div>
-              </li>
-              <li class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="product-function-icon3"></i><h5>随时随地想学就学</h5>
-                  <p>适配PC端、手机端、PAD端，能根据实际培训场景，提供满足员工多场景下的学习方式，多端学习数据即时同步，轻量化课程体系，学练结合， 每日自动推送轻量化学习内容和练习题</p>
-                </div>
-              </li>
-              <li class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="product-function-icon4"></i><h5>稳定安全的数据保护</h5>
-                  <p>采用多种手段、多种安全防护措施保护数据不被黑客和有意破坏者攻击，强大的数据备份恢复功能，保证考试和学习的顺利进行</p>
-                </div>
-              </li>
-              <li class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="product-function-icon5"></i><h5>完善的课程学习体系</h5>
-                  <p>任意组合培训功能模块搭建学习项目，学员进度可见，报名、身份验证、培训、考试、获取证书整个组织流程一气呵成，每当学员满足预设条件时即触发下一环节，形成完整的培训流程闭环</p>
-                </div>
-              </li>
-              <li class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="product-function-icon6"></i><h5>功能丰富的在线考试</h5>
-                  <p>强大的题库管理和丰富的考试控制功能，灵活的出题策略，标准化的全功能在线考试系统，让考务工作更轻松</p>
-                </div>
-              </li>
-              <li class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="product-function-icon7"></i><h5>与第三方系统无缝集成</h5>
-                  <p>基于Java语言开发Springcloud框架，稳定安全，高性价比；支持微信、钉钉、EAP/EIP、OA、HR系统的多端无缝连接，及用户数据同步</p>
-                </div>
-              </li>
-              <li class="swiper-slide">
-                <div class="experience-content-box">
-                  <i class="product-function-icon8"></i><h5>个性化定制</h5>
-                  <p>支持个性化自定义组织专用的皮肤、Logo，强化您的组织和品牌属性</p>
-                </div>
-              </li>
-            </ul>
-            <div class="swiper-pagination swiper-pagination-style"></div>
-            <p class="experience-swiper-tip">←左右滑动查看更多→</p>
-          </div>
-        </div>
-        <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
-      </div>
-    </div>
-
-    <!-- 为不同行业场景提供解决方案 -->
-    <div class="platform-application-scenarios train-application-scenarios">
-      <div class="client-container">
-        <h4 class="client-title">为不同行业场景提供解决方案</h4>
-        <ul class="application-scenarios-box mta-hidden-xs">
-          <li>
-            <div class="application-scenarios-content">
-              <div class="application-scenarios-img"></div>
-              <h5>新员工入职培训</h5>
-              <p :title="`新员工入职后，学习内容较多，入企业文化、规章制度、岗位职责、岗位技能都需要进行深度培训，培训后的选拔监测成为了新的难题，尤其是大批量新员工入职时，此时就可以利用麦塔在线培训和考试的系统优势，减轻培训压力，实时监测学习动态`">
-                新员工入职后，学习内容较多，入企业文化、规章制度、岗位职责、岗位技能都需要进行深度培训，培训后的选拔监测成为了新的难题，尤其是大批量新员工入职时，此时就可以利用麦塔在线培训和考试的系统优势，减轻培训压力，实时监测学习动态
-              </p>
-            </div>
-          </li>
-          <li>
-            <div class="application-scenarios-content">
-              <div class="application-scenarios-img"></div>
-              <h5>岗位技能考核</h5>
-              <p :title="`企业利用互联网组织学员快速开展线上学习、培训、考试、互动问答等学习活动，达到全盘监控，快速、有效地提升员工技能的目的，将复杂工作简单化`">
-                企业利用互联网组织学员快速开展线上学习、培训、考试、互动问答等学习活动，达到全盘监控，快速、有效地提升员工技能的目的，将复杂工作简单化
-              </p>
-            </div>
-          </li>
-          <li>
-            <div class="application-scenarios-content">
-              <div class="application-scenarios-img"></div>
-              <h5>企业招聘考试</h5>
-              <p :title="`满足各类企业社招、校招需求，能对各招聘场次人员的成绩、答题进行智能化统计分析，一键导出清晰直观的Excel成绩报表，生成有用的数据供HR查看比较，远程就能完成应聘者的应试考试，真正用一个系统搞定各类行业的招聘在线测试。`">
-                满足各类企业社招、校招需求，能对各招聘场次人员的成绩、答题进行智能化统计分析，一键导出清晰直观的Excel成绩报表，生成有用的数据供HR查看比较，远程就能完成应聘者的应试考试，真正用一个系统搞定各类行业的招聘在线测试。
-              </p>
-            </div>
-          </li>
-        </ul>
-        <!-- 手机轮播 -->
-        <div class="experience-swiper-box mta-hidden-sm">
-          <div v-swiper:mySwiperCj="swiperOptionCj" class="swiper-container">
-            <ul class="swiper-wrapper">
-              <li class="swiper-slide">
-                <div class="experience-content-box scenarios-gwks-box">
-                  <i class="product-function-icon1"></i><h5>新员工入职培训</h5>
-                  <p>新员工入职后，学习内容较多，入企业文化、规章制度、岗位职责、岗位技能都需要进行深度培训，培训后的选拔监测成为了新的难题，尤其是大批量新员工入职时，此时就可以利用麦塔在线培训和考试的系统优势，减轻培训压力，实时监测学习动态</p>
-                </div>
-              </li>
-              <li class="swiper-slide">
-                <div class="experience-content-box scenarios-dxjs-box">
-                  <i class="product-function-icon2"></i><h5>岗位技能考核</h5>
-                  <p>企业利用互联网组织学员快速开展线上学习、培训、考试、互动问答等学习活动，达到全盘监控，快速、有效地提升员工技能的目的，将复杂工作简单化</p>
-                </div>
-              </li>
-              <li class="swiper-slide">
-                <div class="experience-content-box scenarios-zgks-box">
-                  <i class="product-function-icon3"></i><h5>企业招聘考试</h5>
-                  <p>满足各类企业社招、校招需求，能对各招聘场次人员的成绩、答题进行智能化统计分析，一键导出清晰直观的Excel成绩报表，生成有用的数据供HR查看比较，远程就能完成应聘者的应试考试，真正用一个系统搞定各类行业的招聘在线测试。</p>
-                </div>
-              </li>
-            </ul>
-            <div class="swiper-pagination swiper-pagination-style"></div>
-            <p class="experience-swiper-tip">←左右滑动查看更多→</p>
-          </div>
-        </div>
-        <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
-      </div>
-    </div>
-
-    <!-- 新闻资讯 -->
-    <div class="platform-news-information mta-hidden-xs">
-      <div class="client-container">
-        <h4 class="client-title">新闻资讯</h4>
-        <ul>
-          <li style="font-size: 16px" v-for="(item, index) in topCarousels">
-            <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>
-    <!-- 系统维护-->
-    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
-  </div>
-</template>
-
-<script>
-  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
-  Swiper.use([Navigation, Pagination,Autoplay]);
-  export default {
-    name:     'trainsystem',
-    layout:   'templateB',
-    async asyncData({ $axios,store }) {
-      // 设置选中菜单
-      store.commit('setActiveNav', '/trainsystem');
-
-
-      let [res1, res2] = await Promise.all([
-                                             await $axios.$post(`/home/banner/list`, { 'code': 3 }).then(res => {
-                                               return res;
-                                             }),
-                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0,'keyword':'培训' }).then(res => {
-                                               return res;
-                                             })
-                                           ]);
-      return {
-        bannerList: res1.data.data||[],
-        topCarousels: res2.data.data||[],
-
-      };
-    },
-    data() {
-      return {
-        trainAdvantagesImg1:  require(`~/static/images/client/train/product-advantages-img1.png`),
-        trainAdvantagesImg2:  require(`~/static/images/client/train/product-advantages-img2.png`),
-        trainAdvantagesImg3:  require(`~/static/images/client/train/product-advantages-img3.png`),
-        trainAdvantagesImg4:  require(`~/static/images/client/train/product-advantages-img4.png`),
-        youkeFlag:false,// 控制游客系统是否维护中
-        systemMaintainDl:false,// 系统维护弹窗
-        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
-        swiperOption: {
-          pagination: {
-            el: '.swiper-pagination',
-            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
-            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
-            clickable: true, // 点击当前滑块切换到对应的轮播图片
-          },
-          autoplay: {
-            delay: 5000,
-          },
-          paginationClickable: true,
-          speed: 800,
-          loop: true,
-          observer: true,
-          observeParents: true,
-        },
-        swiperOptionGn: {
-          pagination: {
-            el: '.swiper-pagination',
-            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
-            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
-            clickable: true, // 点击当前滑块切换到对应的轮播图片
-          },
-          autoplay: {
-            delay: 5000,
-          },
-          paginationClickable: true,
-          speed: 800,
-          loop: true,
-          observer: true,
-          observeParents: true,
-        },
-        swiperOptionCj: {
-          pagination: {
-            el: '.swiper-pagination',
-            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
-            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
-            clickable: true, // 点击当前滑块切换到对应的轮播图片
-          },
-          autoplay: {
-            delay: 100000,
-          },
-          paginationClickable: true,
-          speed: 800,
-          loop: true,
-          observer: true,
-          observeParents: true,
-          autoplayDisableOnInteraction: false,
-        },
-      };
-    },
-    head(){
-      return {
-        title: '在线培训平台_在线培训软件_培训软件系统',
-        meta: [
-          {
-            name: 'keywords',
-            content: '培训平台,培训软件'
-          },
-          {
-            name:'description',
-            content:'麦塔培训系统特点具有全流程课程学习体系、随时随地学习、线上线下融合自动记录学习轨迹、学测考练评一站式解决企业培训问题。'
-          }
-        ],
-      }
-    },
-    computed: {},
-    methods:  {
-      // 游客系统试用
-      ykFreeTrial(){
-        if(this.youkeFlag){
-          // 没升级
-          window.open('https://youkepxc.mtavip.com/pxcmdist/#/youke')
-        }else{
-          // 升级中
-          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
-        }
-      },
-      // 免费试用
-      FreeTrial(){
-          // 没升级
-          this.getSystemWidth();
-          if(this.SystemWidthFlag){
-            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
-          }else{
-            window.open('https://cdnks.mtavip.com/a/register?flug=2')
-          }
-      },
-      // 判断是否为移动端
-      getSystemWidth(){
-        var browserWidth=document.documentElement.clientWidth;
-        if(browserWidth <= 768){
-          this.SystemWidthFlag = true;
-        }else{
-          this.SystemWidthFlag = false;
-        }
-      },
-      // 培训学员端体验
-      pxTyBtn(btnUrl){
-        this.getSystemWidth();
-        if(this.youkeFlag) {
-          if(this.SystemWidthFlag){
-            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
-          }else {
-            window.open(btnUrl);
-          }
-        }else{
-          if(this.SystemWidthFlag){
-            // 升级中
-            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
-          }else{
-            this.systemMaintainDl = true;
-          }
-
-        }
-      },
-      //  describe: 点击查看 author: Wgy date:6/8/21
-      goCheckLog(){
-        this.$router.push({ name: 'checkLogPeixun' });
-      },
-      // 鼠标移入
-      enterCode(){
-        if(this.youkeFlag){
-        this.$refs.codeBtn.style.bottom ='90px';
-        }else{
-          this.$refs.codeBtn.style.bottom ='0';
-        }
-      },
-
-      // 鼠标移出
-      leaveCode(){
-        this.$refs.codeBtn.style.bottom ='305px';
-      },
-      checkInfo(data) {
-        const opt = {
-          id: data.code,
-        };
-        this.$router.push({ name: 'news-id', params: opt });
-      },
-      clickBanner(data){
-        if(data){
-          window.open(data)
-        }
-      },
-    },
-    created() {
-      // 页面初始化
-      this.$axios.$post('/home/youke/stop').then(res=>{
-        if (res.data === '1') {
-          this.youkeFlag = false;
-        }else{
-          this.youkeFlag = true;
-        }
-      });
-    },
-    mounted() {
-      this.getSystemWidth();
-    },
-    beforeDestroy() {
-    },
-  };
-</script>
-<style>
-
-</style>

plugins/consult.js

@@ -2,7 +2,7 @@
 var _hmt = _hmt || [];
 (function() {
   var hm = document.createElement("script");
-  hm.src = "https://hm.baidu.com/hm.js?e767a987c8404575246ab0084fb2c9bd";
+  hm.src = "https://hm.baidu.com/hm.js?0288c259e4ac8be07c4c238fcc91760f";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(hm, s);
 })();