增加体验弹窗提醒

src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">ruoyi-mall后台管理系统</h3>
+      <h3 class="title">ruoyi-mall后台登录</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -43,17 +43,41 @@
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          style="width:45%;"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
+        <el-button
+          :loading="loading"
+          size="medium"
+          type="primary"
+          style="width:45%;"
+          @click.native.prevent="handleTry"
+        >
+          <span>获取体验账号</span>
+        </el-button>
         <div style="float: right;" v-if="register">
           <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
       </el-form-item>
     </el-form>
+    <el-dialog
+      title="公众号二维码"
+      :visible.sync="dialogVisible"
+      :show-close="false"
+      :center="true"
+      width="30%">
+      <div style="text-align: center">
+        <span class="font-title-large"><span class="color-main font-extra-large">关注公众号</span>回复<span class="color-main font-extra-large">mall</span>获取体验账号</span>
+        <br>
+        <img src="https://oscimg.oschina.net/oscnet/up-619fe7e172f2fb6c9a1951ee66180267df8.jpg" width="160" height="160" style="margin-top: 10px">
+      </div>
+      <span slot="footer" class="dialog-footer">
+    <el-button type="primary" @click="dialogConfirm">确定</el-button>
+      </span>
+    </el-dialog>
     <!--  底部  -->
     <div class="el-login-footer">
       <span>Copyright © 2017-2022 ichengle.top 技术支持：18556959326,微信同号.</span>
@@ -70,6 +94,7 @@ export default {
   name: "Login",
   data() {
     return {
+      dialogVisible:false,
       codeUrl: "",
       loginForm: {
         username: "",
@@ -127,6 +152,12 @@ export default {
         rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
       };
     },
+    handleTry(){
+        this.dialogVisible =true
+      },
+    dialogConfirm(){
+        this.dialogVisible =false;
+      },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
@@ -157,6 +188,12 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
+.color-main {
+  color: #409EFF;
+}
+.font-extra-large {
+  font-size: 20px;
+}
 .login {
   display: flex;
   justify-content: center;