培训系统免费试用功能开发

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

@@ -486,9 +486,44 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   // 指示器
   .el-carousel__indicators{display: none}
 }*/
+/* 网站通用弹窗-申请方案 */
+.application-scheme-dialog{
+  .el-dialog{width: 610px;border-radius: 8px;}
+  .el-dialog__body{
+    padding: 30px 120px 60px;
+    >i{width:240px;height:52px;display: block;background-image: url("~static/images/client/component/nav-logo.png");margin: 0 auto 24px;background-size: cover;}
+    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;}
+  }
+  // 输入框上下间距
+  .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: #3893FE;border-radius: 0 4px 4px 0;border: 1px solid transparent;}
+    }
+  }
+}
 /* 网站通用弹窗-进入考试 */
-.application-scheme-dialog{
+.register-free-dialog{
   .el-dialog{width: 610px;border-radius: 8px;}
   .el-dialog__body{
     padding: 30px 50px 60px;
@@ -500,7 +535,8 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     }
     .el-form{margin: 0 60px;}
     // 申请注册按钮
-    .application-scheme-btn{height: 40px;line-height: 40px;font-size: 16px;font-weight:bold;background: rgb(0, 174, 186);border-radius: 4px;color: #FFFFFF;text-align: center;margin: 0 60px 16px;}
+    .application-scheme-btn{height: 40px;line-height: 40px;font-size: 16px;font-weight:bold;background: rgb(0, 174, 186);
+      border-radius: 4px;color: #FFFFFF;text-align: center;margin: 0 60px 16px;cursor: pointer;}
   }
   // 输入框上下间距
   .el-form-item{margin-bottom: 24px}

pages/trainsystem/index.vue

@@ -12,7 +12,7 @@
       <div class="client-container">
         <p>企业的发展在于人才比拼，而人才的比拼在于学习速度的比拼。</p>
         <p>为此，很多企业不惜重金去建设培训体系，对员工进行培训，但却起不到良好的成效。</p>
-        <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-white-Btn" @click="goExamPage">在线咨询</span></div>
+        <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-white-Btn" @click="onlineFun">在线咨询</span></div>
       </div>
     </div>
 
@@ -43,7 +43,7 @@
                 <h5><span>多平台学习</span><i>1</i></h5>
                 <i></i>
                 <p>电脑端，移动端随时随地进行学习、考试。从而不再受时间地点的约束</p>
-                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="goExamPage">在线咨询</span></div>
+                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="onlineFun">在线咨询</span></div>
               </div>
             </div>
           </div>
@@ -56,7 +56,7 @@
                 <h5><span>碎片化时间</span><i>2</i></h5>
                 <i></i>
                 <p>利用碎片时间进行学习，不需要拿出整段的时间，也不需要集中在某个地点</p>
-                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="goExamPage">在线咨询</span></div>
+                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="onlineFun">在线咨询</span></div>
               </div>
             </div>
           </div>
@@ -69,7 +69,7 @@
                 <h5><span>标准化学习</span><i>3</i></h5>
                 <i></i>
                 <p>课程、学时、学分、统考、练习、证书等标准化统一</p>
-                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="goExamPage">在线咨询</span></div>
+                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="onlineFun">在线咨询</span></div>
               </div>
             </div>
           </div>
@@ -82,7 +82,7 @@
                 <h5><span>大数据分析</span><i>4</i></h5>
                 <i></i>
                 <p>多维度数据统计，深层分析学情，帮助企业实现人才发掘、测评、培养、考核、任用一体化</p>
-                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="goExamPage">在线咨询</span></div>
+                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="onlineFun">在线咨询</span></div>
               </div>
             </div>
           </div>
@@ -107,20 +107,27 @@
           <li><span>9</span><p>移动端同步学习</p></li>
           <li><span>10</span><p>多格式视频上传</p></li>
         </ul>
-        <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-white-Btn" @click="goExamPage">在线咨询</span></div>
+        <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-white-Btn" @click="onlineFun">在线咨询</span></div>
       </div>
     </div>
     <!-- 系统维护-->
    <!-- <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>-->
+
+    <!-- 免费试用弹窗-->
+    <reg-dialog :dialogVisible="regDialogFlag"  systemType="ks" @changeShow="showRegDialogUpdate"></reg-dialog>
   </div>
 </template>
 
 <script>
+  import regDialog from '~/components/registerDialog';
   import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
   Swiper.use([Navigation, Pagination,Autoplay]);
   export default {
     name:     'trainsystem',
     layout:   'templateB',
+    components: {
+      regDialog,
+    },
     async asyncData({ $axios,store }) {
       // 设置选中菜单
       store.commit('setActiveNav', '/trainsystem');
@@ -146,6 +153,7 @@
         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`),
+        regDialogFlag:false,
       };
     },
     head(){
@@ -165,8 +173,23 @@
     },
     computed: {},
     methods:  {
+      // 弹窗关闭
+      showRegDialogUpdate(data){
+        this.regDialogFlag  = !data
+        if(data === 'false'){
+          this.regDialogFlag = false
+        }else{
+          this.regDialogFlag = true
+        }
+      },
       // 免费试用
       FreeTrial(){
+        this.regDialogFlag = true;
+      },
+
+      // 在线咨询
+      onlineFun(){
+        window.open('https://p.qiao.baidu.com/cps/chat?siteId=11735491&userId=10530011')
       },
 
       clickBanner(data){