立即注册弹窗

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

@@ -1011,5 +1011,39 @@
        a{width: 355px;height: 60px;line-height: 60px;text-align: center;background: #ff4d4d;border-radius: 4px;display: inline-block;color: #fff;}
      }
   }
+  // 立即注册弹窗
+  .register-now-dialog{
+      .el-dialog{
+        width:540px;
+        // 关闭图标
+        .el-icon-close:before{color: #fff}
+        // 弹窗头部
+        .el-dialog__header{height: 100px;background: #363fdc;}
+        // 弹窗body
+        .el-dialog__body{
+          height:200px;position: relative;background: #fff;
+          .register-now-box{
+            position: absolute;top: -100px;left: 0;right: 0;
+            >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;}
+            }
+          }
+        }
+        .system-box{
+          width:400px;height:160px;background: #fff;border: 1px solid #b5b5b5;border-radius: 4px;padding: 10px 8px;margin: 16px auto;display:flex;justify-content: space-around;align-items: center;
+          a{
+            display: inline-block;
+            i{width: 158px;height: 120px;display: block;background-size: cover;}
+          }
+
+          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");} }
+      }
+  }
 }
 

pages/tiyanCenter/index.vue

@@ -30,9 +30,26 @@
       <div class="client-container">
         <h5>企业考培,就用麦塔</h5>
         <p>现在注册立享<span>30人</span>纯免费版本<span>3年</span>使用权限</p>
-        <a>立即注册</a>
+        <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>
   </div>
 </template>
 
@@ -48,6 +65,7 @@
       return {
         // 发展现状img
         tiyanCenterImg: require(`~/static/images/client/tiyanCenter/tiyanCenterImg.png`),
+        registerDl:false,
       };
     },
     head(){
@@ -81,6 +99,10 @@
       leaveCodePx(){
         this.$refs.codeBtnPx.style.bottom ='305px';
       },
+      // 立即注册按钮
+      registerFun(){
+        this.registerDl = true;
+      },
     },
     created() {