增加游客页面的系统升级中功能

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

@@ -282,7 +282,10 @@
           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{
+              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;}
@@ -1045,5 +1048,10 @@
         .system-box:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon6.png");} }
       }
   }
+
+  // 系统维护弹窗
+  .system-maintain-dialog{
+    .el-dialog{width: 540px;height: 380px;background-image:url("~static/images/client/tiyanCenter/ty-dialog-bj.jpg");}
+  }
 }
 

pages/tiyanCenter/index.vue

@@ -9,9 +9,18 @@
       <h4 class="client-title">麦塔在线考试系统体验版</h4>
       <p>简单好用的SaaS考试系统</p>
       <ul class="experience-ul-box">
-        <li><div @mouseenter="enterCodeKs" @mouseleave="leaveCodeKs"><i></i><h5>手机学员端</h5><p>用手机扫描二维码</p><p>考生30秒体验答卷</p><a style="cursor: default">扫码体验</a><span ref="codeBtnKs"><em></em></span></div></li>
-        <li><div><i></i><h5>电脑学员端</h5><p>支持市面各种主流浏览器</p><p>支持十万量级的考试并发</p><a href="https://youkeksc.mtavip.com/c/youke" target="_blank">立即体验</a></div></li>
-        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a href="https://youkeksa.mtavip.com/a/youke" target="_blank">后台体验</a></div></li>
+        <li>
+          <div @mouseenter="enterCodeKs" @mouseleave="leaveCodeKs">
+            <i></i><h5>手机学员端</h5>
+            <p>用手机扫描二维码</p>
+            <p>考生30秒体验答卷</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="clientKsTy">立即体验</a></div></li>
+        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a @click="adminKsTy">后台体验</a></div></li>
       </ul>
     </div>
     <!--  麦塔在线培训系统 -->
@@ -19,9 +28,18 @@
       <h4 class="client-title">麦塔在线培训系统体验版</h4>
       <p>学练考评一站式培训平台</p>
       <ul class="experience-ul-box">
-        <li><div @mouseenter="enterCodePx" @mouseleave="leaveCodePx"><i></i><h5>手机学员端</h5><p>用手机扫描二维码</p><p>随时随地想学就学</p><a style="cursor: default">扫码体验</a><span ref="codeBtnPx"><em class="px-img-box"></em></span></div></li>
-        <li><div><i></i><h5>电脑学员端</h5><p>学练考评一站式培训平台</p><p>支持市面各种主流浏览器</p><a href="https://youkepxc.mtavip.com/c/youke" target="_blank">立即体验</a></div></li>
-        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a href="https://youkepxa.mtavip.com/a/youke" target="_blank">后台体验</a></div></li>
+        <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="clientPxTy">立即体验</a></div></li>
+        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a @click="adminPxTy">后台体验</a></div></li>
       </ul>
     </div>
 
@@ -50,6 +68,8 @@
         <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>
 
@@ -66,6 +86,8 @@
         // 发展现状img
         tiyanCenterImg: require(`~/static/images/client/tiyanCenter/tiyanCenterImg.png`),
         registerDl:false,
+        youkeFlag:false,// 控制游客系统是否维护中
+        systemMaintainDl:false,// 系统维护弹窗
       };
     },
     head(){
@@ -81,9 +103,46 @@
     },
     computed: {},
     methods:  {
+      // 考试学员端体验
+      clientKsTy(){
+        if(this.youkeFlag) {
+          window.open("https://youkeksc.mtavip.com/c/youke");
+        }else{
+          this.systemMaintainDl = true;
+        }
+      },
+      // 考试管理端体验
+      adminKsTy(){
+        if(this.youkeFlag) {
+        window.open("https://youkeksa.mtavip.com/a/youke");
+        }else{
+          this.systemMaintainDl = true;
+        }
+      },
+      // 培训学员端体验
+      clientPxTy(){
+        if(this.youkeFlag) {
+        window.open("https://youkepxc.mtavip.com/c/youke");
+        }else{
+            this.systemMaintainDl = true;
+        }
+      },
+      // 培训管理端体验
+      adminPxTy(){
+        if(this.youkeFlag) {
+        window.open("https://youkepxa.mtavip.com/a/youke");
+        }else{
+          this.systemMaintainDl = true;
+        }
+      },
       // 考试鼠标移入
       enterCodeKs(){
-        this.$refs.codeBtnKs.style.bottom ='90px';
+        if(this.youkeFlag){
+          this.$refs.codeBtnKs.style.bottom ='90px';
+        }else{
+          this.$refs.codeBtnKs.style.bottom ='0';
+        }
+
       },
 
       // 考试鼠标移出
@@ -92,7 +151,11 @@
       },
       // 培训鼠标移入
       enterCodePx(){
-        this.$refs.codeBtnPx.style.bottom ='90px';
+        if(this.youkeFlag){
+          this.$refs.codeBtnPx.style.bottom ='90px';
+        }else{
+          this.$refs.codeBtnPx.style.bottom ='0';
+        }
       },
 
       // 培训鼠标移出
@@ -105,7 +168,14 @@
       },
     },
     created() {
-
+      // 页面初始化
+      this.$axios.$post('/home/youke/stop').then(res=>{
+        if (res.data === '1') {
+          this.youkeFlag = false;
+        }else{
+          this.youkeFlag = true;
+        }
+      });
     },
     mounted() {
     },