首先增加app下载

src/views/login.vue

 <template>
   <div class="login">
-   <vue-particles
-            class="login-bg"
-          color="#34a4ea"
-          :particleOpacity="0.8"
-          :particlesNumber="19"
-          shapeType="circle"
-          :particleSize="5"
-          linesColor="#8DD1FE"
-          :linesWidth="1"
-          :lineLinked="true"
-          :lineOpacity="0.4"
-          :linesDistance="150"
-          :moveSpeed="1"
-          :hoverEffect="false"
-          hoverMode="repulse"
-          :clickEffect="false"
-          clickMode="push"
-          >
+    <!-- app移动端 -->
+    <div   @mouseenter='ewm=true' @mouseleave="ewm=false" class="app"><i class="el-icon-mobile"></i>扫码下载移动端</div>
+    <div v-show="ewm" class="ewm"></div>
+    <vue-particles class="login-bg" color="#34a4ea" :particleOpacity="0.8" :particlesNumber="19" shapeType="circle"
+      :particleSize="5" linesColor="#8DD1FE" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
+      :moveSpeed="1" :hoverEffect="false" hoverMode="repulse" :clickEffect="false" clickMode="push">
     </vue-particles>
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="position: absolute;right:5px;background-color:rgba(0, 0, 0, 0.4) ;">
-      <ul class="bg-bubbles" >
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"
+      style="position: absolute;right:5px;background-color:rgba(0, 0, 0, 0.4) ;">
+      <ul class="bg-bubbles">
         <li v-for="i in 10" :key="i"></li>
       </ul>
       <!-- -->
@@ -28,23 +17,13 @@
       <!-- -->
       <h3 class="title">{{appName}}</h3>
       <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          type="text"
-          auto-complete="off"
-          placeholder="账号"
-        >
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
           <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
+        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
+          @keyup.enter.native="handleLogin">
           <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
         </el-input>
       </el-form-item>
@@ -59,19 +38,13 @@
       <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
       </el-input>
       <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+        <img :src="codeUrl" @click="getCode" class="login-code-img" />
       </div>
       </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
-        <el-button
-        class="btn btn-primary btn-ghost btn-shine"
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
+        <el-button class="btn btn-primary btn-ghost btn-shine" :loading="loading" size="medium" type="primary"
+          style="width:100%;" @click.native.prevent="handleLogin">
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
@@ -88,17 +61,25 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login";
-import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
-import md5 from '@/utils/md5.js'
-import {systeminfo} from "@/api/common/common.js"
+  import {
+    getCodeImg
+  } from "@/api/login";
+  import Cookies from "js-cookie";
+  import {
+    encrypt,
+    decrypt
+  } from '@/utils/jsencrypt'
+  import md5 from '@/utils/md5.js'
+  import {
+    systeminfo
+  } from "@/api/common/common.js"
 
-export default {
+  export default {
     name: "Login",
     data() {
       return {
-      appName:'',
+        ewm:false,
+        appName: '',
         codeUrl: "",
         loginForm: {
           username: "",
@@ -108,13 +89,21 @@ export default {
           uuid: ""
         },
         loginRules: {
-        username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
-        ],
-        password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
-        ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+          username: [{
+            required: true,
+            trigger: "blur",
+            message: "请输入您的账号"
+          }],
+          password: [{
+            required: true,
+            trigger: "blur",
+            message: "请输入您的密码"
+          }],
+          code: [{
+            required: true,
+            trigger: "change",
+            message: "请输入验证码"
+          }]
         },
         loading: false,
         // 验证码开关
@@ -137,9 +126,9 @@ export default {
 
       // this.getCode();
       this.getCookie();
-    systeminfo({}).then(res=>{
-      this.appName=res.data.records.appName||''
-      document.title=this.appName
+      systeminfo({}).then(res => {
+        this.appName = res.data.records.appName || ''
+        document.title = this.appName
       })
     },
     methods: {
@@ -167,16 +156,24 @@ export default {
           if (valid) {
             this.loading = true;
             if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+              Cookies.set("username", this.loginForm.username, {
+                expires: 30
+              });
+              Cookies.set("password", encrypt(this.loginForm.password), {
+                expires: 30
+              });
+              Cookies.set('rememberMe', this.loginForm.rememberMe, {
+                expires: 30
+              });
             } else {
               Cookies.remove("username");
               Cookies.remove("password");
               Cookies.remove('rememberMe');
             }
             this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({path:'index'})
+              this.$router.push({
+                path: 'index'
+              })
               // this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
             }).catch(() => {
               this.loading = false;
@@ -188,13 +185,13 @@ export default {
         });
       }
     }
-};
+  };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
   .btn {
     --hue: 190;
-    padding: 0px!important;
+    padding: 0px !important;
     // height:34px;
     // line-height: 34px;
     position: relative;
@@ -204,7 +201,7 @@ export default {
     color: white;
     text-decoration: none;
     text-transform: uppercase;
-    background-color:(#0389ff, 100%, 41%);
+    background-color: (#0389ff, 100%, 41%);
     border: 1px solid #0389ff;
     outline: transparent;
     overflow: hidden;
@@ -214,7 +211,7 @@ export default {
     transition: 0.25s;
 
     &:hover {
-      background:( #0389ff, 100%, 31%);
+      background: (#0389ff, 100%, 31%);
     }
 
     &-primary {
@@ -241,12 +238,10 @@ export default {
         left: 0;
         width: 100%;
         height: 100%;
-        background: linear-gradient(
-          120deg,
+        background: linear-gradient(120deg,
             transparent,
             hsla(var(--hue), 100%, 41%, 0.5),
-          transparent
-        );
+            transparent);
         transform: translateX(-100%);
         transition: 0.6s;
       }
@@ -261,71 +256,76 @@ export default {
       }
     }
   }
- ::v-deep .el-input__inner{
-   &:hover{
+
+  ::v-deep .el-input__inner {
+    &:hover {
       border: #014dff 1px solid;
     }
+
     border: #0389ff 1px solid;
     color: #fff;
-    background-color:rgba(0, 0, 0, 0.039) ;
+    background-color:rgba(0, 0, 0, 0.039);
   }
-.buttonClass {
-  font-size:15px;
-  font-family:Arial;
+
+  .buttonClass {
+    font-size: 15px;
+    font-family: Arial;
     // width:100px;
-  height:34px;
-  border-width:1px;
-  color:#ffffff;
-  border-color:#0389ff;
-  border-top-left-radius:3px;
-  border-top-right-radius:3px;
-  border-bottom-left-radius:3px;
-  border-bottom-right-radius:3px;
-  box-shadow:inset 0px 1px 0px 0px #54a3f7;
-  text-shadow:inset 0px 1px 0px #154682;
-  background:linear-gradient(#0389ff, #00aaff);
-}
-
-.buttonClass:hover {
+    height: 34px;
+    border-width: 1px;
+    color: #ffffff;
+    border-color: #0389ff;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    box-shadow: inset 0px 1px 0px 0px #54a3f7;
+    text-shadow: inset 0px 1px 0px #154682;
+    background: linear-gradient(#0389ff, #00aaff);
+  }
+
+  .buttonClass:hover {
     background: linear-gradient(#00aaff, #007dc1);
-}
+  }
 
-  .newTitle{
+  .newTitle {
     position: absolute;
     top: 0px;
     height: 160px;
     width: 100%;
     background-color: #fff;
   }
-  .login-bg{
+
+  .login-bg {
     height: 98vh;
     width: 100vw;
     position: absolute;
   }
-.login {
+
+  .login {
     display: flex;
     justify-content: right;
     align-items: center;
     height: 100%;
     background-image: url("../assets/images/login-rj.jpg");
     background-size: cover;
-}
-.title {
+  }
+
+  .title {
     font-family: Georgia, 'Times New Roman', Times, serif;
     margin: 0px auto 30px auto;
     text-align: center;
     color: #ffffff;
-}
+  }
 
-.login-form {
+  .login-form {
     box-shadow:
       5.5px 1.4px 2.2px rgba(0, 0, 0, 0.039),
       12.4px 3.2px 5.3px rgba(0, 0, 0, 0.057),
       21.7px 5.6px 10px rgba(0, 0, 0, 0.07),
       36.2px 9.4px 17.9px rgba(0, 0, 0, 0.083),
       63.8px 16.6px 33.4px rgba(0, 0, 0, 0.101),
-    146px 38px 80px rgba(0, 0, 0, 0.14)
-  ;
+      146px 38px 80px rgba(0, 0, 0, 0.14);
 
     /* */
     margin-top: 50px;
@@ -334,33 +334,40 @@ export default {
     background: #ffffff;
     width: 400px;
     padding: 25px 25px 5px 25px;
+
     .el-input {
       height: 38px;
+
       input {
         height: 38px;
       }
     }
+
     .input-icon {
       height: 39px;
       width: 14px;
       margin-left: 2px;
     }
-}
-.login-tip {
+  }
+
+  .login-tip {
     font-size: 13px;
     text-align: center;
     color: #bfbfbf;
-}
-.login-code {
+  }
+
+  .login-code {
     width: 33%;
     height: 38px;
     float: right;
+
     img {
       cursor: pointer;
       vertical-align: middle;
     }
-}
-.el-login-footer {
+  }
+
+  .el-login-footer {
     height: 40px;
     line-height: 40px;
     position: fixed;
@@ -371,12 +378,41 @@ export default {
     font-family: Arial;
     font-size: 12px;
     letter-spacing: 1px;
-}
-.login-code-img {
+  }
+
+  .login-code-img {
     height: 38px;
-}
+  }
 </style>
 <style lang='scss'>
+  .app {
+    z-index: 999999;
+    position: absolute;
+    right: 16px;
+    top: 15px;
+    line-height: 20px;
+    font-size: 13px;
+    color: #fff;
+    cursor: pointer;
+  }
+  @keyframes example {
+    0% { right: 300px; top: -200px;}
+    50% { right: 300px; top: 15px;}
+    100% { right: 150px; top: 15px;}
+  }
+  .ewm {
+    position: absolute;
+    top: 15px;
+    right: 150px;
+    height: 200px;
+    width: 200px;
+    background-image: url("../assets/images/2wm.png");
+    background-size: 100% 100%;
+    animation-name: example;
+      animation-duration: 1s;
+  }
+
+
   .bg-bubbles {
     position: absolute;
     top: 0;
@@ -384,18 +420,21 @@ export default {
     width: 100%;
     height: 100%;
     overflow: hidden;
+
     li {
       position: absolute;
       bottom: -160px;
-        width:10px;
+      width: 10px;
       height: 10px;
       background-color: rgba(62, 146, 255, 0.5);
       list-style: none;
       animation: square 15s infinite;
       transition-timing-function: linear;
+
       &:nth-child(1) {
         left: 10%;
       }
+
       &:nth-child(2) {
         left: 20%;
         width: 13px;
@@ -404,10 +443,12 @@ export default {
         animation-duration: 7s;
         background-color: rgba(97, 158, 255, 0.2);
       }
+
       &:nth-child(3) {
         left: 25%;
         animation-delay: 4s;
       }
+
       &:nth-child(4) {
         left: 40%;
         width: 7px;
@@ -415,9 +456,11 @@ export default {
         animation-duration: 8s;
         background-color: rgba(84, 115, 255, 0.8);
       }
+
       &:nth-child(5) {
         left: 70%;
       }
+
       &:nth-child(6) {
         left: 80%;
         width: 35px;
@@ -425,6 +468,7 @@ export default {
         animation-delay: 3s;
         background-color: rgba(255, 88, 119, 0.2);
       }
+
       &:nth-child(7) {
         left: 32%;
         width: 42px;
@@ -432,6 +476,7 @@ export default {
         animation-delay: 2s;
         background-color: rgba(170, 170, 127, 0.2);
       }
+
       &:nth-child(8) {
         left: 55%;
         width: 12px;
@@ -440,6 +485,7 @@ export default {
         animation-duration: 15s;
         background-color: rgba(126, 255, 28, 0.2);
       }
+
       &:nth-child(9) {
         left: 25%;
         width: 10px;
@@ -448,6 +494,7 @@ export default {
         animation-duration: 12s;
         background-color: rgba(53, 134, 255, 0.5);
       }
+
       &:nth-child(10) {
         left: 85%;
         width: 16px;
@@ -456,25 +503,27 @@ export default {
         background-color: rgba(85, 85, 127, 0.2);
       }
     }
+
     @keyframes square {
       0% {
         opacity: 0.5;
         transform: translateY(0px) rotate(45deg);
       }
+
       25% {
         opacity: 0.75;
         transform: translateY(-400px) rotate(90deg)
       }
+
       50% {
         opacity: 1;
         transform: translateY(-600px) rotate(135deg);
       }
+
       100% {
         opacity: 0;
         transform: translateY(-1000px) rotate(180deg);
       }
     }
   }
-
-
 </style>