张涛 1 yıl önce
ebeveyn
işleme
ff7e53561d

BIN
src/assets/video/bg.png Dosyayı Görüntüle


BIN
src/assets/video/loginbg.png Dosyayı Görüntüle


BIN
src/assets/video/loginvideobg.mp4 Dosyayı Görüntüle


+ 135
- 63
src/views/login.vue Dosyayı Görüntüle

@@ -1,51 +1,79 @@
1 1
 <template>
2 2
   <div class="login">
3
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
4
-      <h3 class="title">智慧楼宇后台管理系统</h3>
5
-      <el-form-item prop="username">
6
-        <el-input
7
-          v-model="loginForm.username"
8
-          type="text"
9
-          auto-complete="off"
10
-          placeholder="账号"
3
+    <video
4
+      src="../assets/video/loginvideobg.mp4"
5
+      autoPlay
6
+      loop
7
+      muted
8
+      poster="../assets/video/bg.png"
9
+    ></video>
10
+    <div class="page_box">
11
+      <el-form
12
+        ref="loginForm"
13
+        :model="loginForm"
14
+        :rules="loginRules"
15
+        class="login-form"
16
+      >
17
+        <h3 class="title">智慧楼宇后台管理系统</h3>
18
+        <el-form-item prop="username">
19
+          <el-input
20
+            v-model="loginForm.username"
21
+            type="text"
22
+            auto-complete="off"
23
+            placeholder="账号"
24
+          >
25
+            <svg-icon
26
+              slot="prefix"
27
+              icon-class="user"
28
+              class="el-input__icon input-icon"
29
+            />
30
+          </el-input>
31
+        </el-form-item>
32
+        <el-form-item prop="password">
33
+          <el-input
34
+            v-model="loginForm.password"
35
+            type="password"
36
+            auto-complete="off"
37
+            placeholder="密码"
38
+            @keyup.enter.native="handleLogin"
39
+          >
40
+            <svg-icon
41
+              slot="prefix"
42
+              icon-class="password"
43
+              class="el-input__icon input-icon"
44
+            />
45
+          </el-input>
46
+        </el-form-item>
47
+        <el-checkbox
48
+          v-model="loginForm.rememberMe"
49
+          style="margin: 0px 0px 25px 0px"
50
+          >记住密码</el-checkbox
11 51
         >
12
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
13
-        </el-input>
14
-      </el-form-item>
15
-      <el-form-item prop="password">
16
-        <el-input
17
-          v-model="loginForm.password"
18
-          type="password"
19
-          auto-complete="off"
20
-          placeholder="密码"
21
-          @keyup.enter.native="handleLogin"
22
-        >
23
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
24
-        </el-input>
25
-      </el-form-item>
26
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
27
-      <el-form-item style="width:100%;">
28
-        <el-button
29
-          :loading="loading"
30
-          size="medium"
31
-          type="primary"
32
-          style="width:100%;"
33
-          @click.native.prevent="handleLogin"
34
-        >
35
-          <span v-if="!loading">登录</span>
36
-          <span v-else>登录中...</span>
37
-        </el-button>
38
-        <div style="float: right;" v-if="register">
39
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
40
-        </div>
41
-      </el-form-item>
42
-    </el-form>
52
+        <el-form-item style="width: 100%">
53
+          <el-button
54
+            :loading="loading"
55
+            size="medium"
56
+            type="primary"
57
+            style="width: 100%"
58
+            @click.native.prevent="handleLogin"
59
+          >
60
+            <span v-if="!loading">登录</span>
61
+            <span v-else>登录中...</span>
62
+          </el-button>
63
+          <div style="float: right" v-if="register">
64
+            <router-link class="link-type" :to="'/register'"
65
+              >立即注册</router-link
66
+            >
67
+          </div>
68
+        </el-form-item>
69
+      </el-form>
70
+    </div>
43 71
   </div>
44 72
 </template>
45 73
 
46 74
 <script>
47 75
 import Cookies from "js-cookie";
48
-import { encrypt, decrypt } from '@/utils/jsencrypt'
76
+import { encrypt, decrypt } from "@/utils/jsencrypt";
49 77
 
50 78
 export default {
51 79
   name: "Login",
@@ -57,30 +85,30 @@ export default {
57 85
         password: "admin123",
58 86
         rememberMe: false,
59 87
         code: "",
60
-        uuid: ""
88
+        uuid: "",
61 89
       },
62 90
       loginRules: {
63 91
         username: [
64
-          { required: true, trigger: "blur", message: "请输入您的账号" }
92
+          { required: true, trigger: "blur", message: "请输入您的账号" },
65 93
         ],
66 94
         password: [
67
-          { required: true, trigger: "blur", message: "请输入您的密码" }
95
+          { required: true, trigger: "blur", message: "请输入您的密码" },
68 96
         ],
69
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
97
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
70 98
       },
71 99
       loading: false,
72 100
       // 注册开关
73 101
       register: false,
74
-      redirect: undefined
102
+      redirect: undefined,
75 103
     };
76 104
   },
77 105
   watch: {
78 106
     $route: {
79
-      handler: function(route) {
107
+      handler: function (route) {
80 108
         this.redirect = route.query && route.query.redirect;
81 109
       },
82
-      immediate: true
83
-    }
110
+      immediate: true,
111
+    },
84 112
   },
85 113
   created() {
86 114
     this.getCookie();
@@ -89,46 +117,90 @@ export default {
89 117
     getCookie() {
90 118
       const username = Cookies.get("username");
91 119
       const password = Cookies.get("password");
92
-      const rememberMe = Cookies.get('rememberMe')
120
+      const rememberMe = Cookies.get("rememberMe");
93 121
       this.loginForm = {
94 122
         username: username === undefined ? this.loginForm.username : username,
95
-        password: password === undefined ? this.loginForm.password : decrypt(password),
96
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
123
+        password:
124
+          password === undefined ? this.loginForm.password : decrypt(password),
125
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
97 126
       };
98 127
     },
99 128
     handleLogin() {
100
-      this.$refs.loginForm.validate(valid => {
129
+      this.$refs.loginForm.validate((valid) => {
101 130
         if (valid) {
102 131
           this.loading = true;
103 132
           if (this.loginForm.rememberMe) {
104 133
             Cookies.set("username", this.loginForm.username, { expires: 30 });
105
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
106
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
134
+            Cookies.set("password", encrypt(this.loginForm.password), {
135
+              expires: 30,
136
+            });
137
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
138
+              expires: 30,
139
+            });
107 140
           } else {
108 141
             Cookies.remove("username");
109 142
             Cookies.remove("password");
110
-            Cookies.remove('rememberMe');
143
+            Cookies.remove("rememberMe");
111 144
           }
112
-          this.$store.dispatch("Login", this.loginForm).then(() => {
113
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
114
-          }).catch(() => {
115
-            this.loading = false;
116
-          });
145
+          this.$store
146
+            .dispatch("Login", this.loginForm)
147
+            .then(() => {
148
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
149
+            })
150
+            .catch(() => {
151
+              this.loading = false;
152
+            });
117 153
         }
118 154
       });
119
-    }
120
-  }
155
+    },
156
+  },
121 157
 };
122 158
 </script>
123 159
 
124 160
 <style rel="stylesheet/scss" lang="scss">
125 161
 .login {
162
+  .center-mixin {
163
+    display: flex;
164
+    align-items: center;
165
+    justify-content: center;
166
+  }
167
+
126 168
   display: flex;
127 169
   justify-content: center;
128 170
   align-items: center;
129 171
   height: 100%;
130
-  background-image: url("../assets/images/login-background.jpg");
172
+  // background-image: url("../assets/video/bg.png");
173
+  // background: url("../assets/video/loginvideobg.mp4");
131 174
   background-size: cover;
175
+  video {
176
+    width: 100%;
177
+    height: 100%;
178
+    position: absolute;
179
+    top: 0;
180
+    bottom: 0;
181
+    left: 0;
182
+    right: 0;
183
+    object-fit: fill;
184
+    display: block;
185
+  }
186
+  .page_box {
187
+    width: 500px;
188
+    height: 330px;
189
+    @extend.center-mixin;
190
+    background-size: 100% 100%;
191
+    --login-form-color: #01defb;
192
+    background-image: url("../assets/video/loginbg.png");
193
+    z-index: 9;
194
+
195
+    .login-form {
196
+      background: none;
197
+      input {
198
+        color: #fff;
199
+        background-color: #102b41 !important;
200
+        border-color: #102b41 !important;
201
+      }
202
+    }
203
+  }
132 204
 }
133 205
 .title {
134 206
   margin: 0px auto 30px auto;

+ 1
- 1
vue.config.js Dosyayı Görüntüle

@@ -34,7 +34,7 @@ module.exports = {
34 34
     proxy: {
35 35
       // detail: https://cli.vuejs.org/config/#devserver-proxy
36 36
       [process.env.VUE_APP_BASE_API]: {
37
-        target: `http://localhost:8080`,
37
+        target: `http://192.168.89.147:8080`,
38 38
         changeOrigin: true,
39 39
         pathRewrite: {
40 40
           ['^' + process.env.VUE_APP_BASE_API]: ''