From eeef5d4039d2b3fee6854ddc2789aa23232b2cfb Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期三, 27 九月 2023 17:24:10 +0800
Subject: [PATCH] 登陆页换了背景，加了风险排名
---
src/views/login/LoginSystem.vue | 276 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 219 insertions(+), 57 deletions(-)
diff --git a/src/views/login/LoginSystem.vue b/src/views/login/LoginSystem.vue
index 2739f79..3d86745 100644
--- a/src/views/login/LoginSystem.vue
+++ b/src/views/login/LoginSystem.vue
@@ -1,74 +1,158 @@
-
<template>
<div class="login-container">
+ <strong class="login-page-title"> 鐢熸�佺幆澧冨湪绾跨洃娴嬫暟鎹川閲忚瘎浼颁笌椋庨櫓鍒嗘瀽绯荤粺 </strong>
<el-card class="login-card">
- <h2>鐧婚檰</h2>
- <div class="box"><img src="../../assets/loginBg.png" class="imag"> </div>
- <el-form label-position="top">
- <el-form-item label="鐢ㄦ埛鍚�">
- <el-input
- class="login-input"
- v-model="username"
- placeholder="璇疯緭鍏ヨ处鍙�"
- size="large"
- ></el-input>
- </el-form-item>
- <el-form-item label="瀵嗙爜">
- <el-input
- class="login-input"
- v-model="password"
- placeholder="璇疯緭鍏ュ瘑鐮�"
- type="password"
- size="large"
- show-password
- ></el-input>
- </el-form-item>
-
- <el-button color="#3d86d5" class="login-btn" @click="login" size="large">鐧诲綍</el-button>
- </el-form>
+ <h2>鐧婚檰</h2>
+ <div class="box"><img src="../../assets/loginBg.png" class="imag" /></div>
+ <el-form label-position="top">
+ <el-form-item label="鐢ㄦ埛鍚�">
+ <el-input
+ class="login-input1"
+ v-model="username"
+ placeholder="璇疯緭鍏ヨ处鍙�"
+ size="large"
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="瀵嗙爜">
+ <el-input
+ v-model="password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ type="password"
+ size="large"
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-input v-model="inputVal" class="code" placeholder="楠岃瘉鐮�"></el-input>
+ <ValidateCode ref="ref_validateCode" @change="changeCode" />
+ </el-form-item>
+ <!-- <el-button @click="compare">姣斿</el-button> -->
+ </el-form>
+ <el-checkbox label="璁颁綇瀵嗙爜" v-model="isRemember" class="login-input2"></el-checkbox>
+ <div>
+ <el-button color="#3d86d5" class="login-btn" @click="login" size="large">鐧诲綍</el-button>
+ </div>
</el-card>
</div>
</template>
-<script lang="ts">
+<script>
+import { ElMessage } from 'element-plus'
import Cookie from 'js-cookie'
+import ValidateCode from '@/sfc/ValidateCode.vue'
+import loginApi from '@/api/loginApi.js'
+// import md5 from 'js-md5'
export default {
+ components: {
+ ValidateCode
+ },
data() {
return {
username: '',
password: '',
- };
+ // 楠岃瘉鐮佽緭鍏ュ��
+ inputVal: '',
+ // 鏄惁璁颁綇瀵嗙爜
+ isRemember: false,
+
+ // 楠岃瘉鐮�
+ checkCode: '',
+ // 瀵规瘮缁撴灉
+ result: ''
+ }
+ },
+ mounted() {
+ this.getAccount()
+ localStorage.setItem('zmc','zmc')
+ localStorage.setItem('pass','1234')
},
methods: {
login() {
- // 鐧诲綍閫昏緫
- if (this.username === 'admin' && this.password === 'admin123') {
- ElMessage.success('鐧诲綍鎴愬姛');
- const token = 'abc'
- Cookie.set('token',token)
- // 鐧诲綍鎴愬姛锛岃烦杞埌瀵瑰簲椤甸潰
- this.$router.push('/edata') // 鍋囪鐧诲綍鎴愬姛鍚庤烦杞埌 '/dashboard' 椤甸潰
- } else {
- // console.log('Login Failed!')
- ElMessage.error('璐﹀彿鎴栧瘑鐮侀敊璇�');
- }
+ if (this.compare()) {
+ // 鍒ゆ柇鏄惁鍕鹃�夎浣忓瘑鐮�
+ this.hasRemember()
+ // loginApi.login(this.username, md5(this.password)).then((res) => {
+ loginApi.login(this.username, this.password).then((res) => {
+ if (res.data.code == 1) {
+ ElMessage.success('鐧诲綍鎴愬姛')
+ const token = 'abc'
+ Cookie.set('token', token)
+ // 鐧诲綍鎴愬姛锛岃烦杞埌瀵瑰簲椤甸潰
+ this.$router.push('/edata') // 鍋囪鐧诲綍鎴愬姛鍚庤烦杞埌 '/dashboard' 椤甸潰
+ // 淇濆瓨token
+ } else if (res.data.code == 0) {
+ ElMessage(res.data.msg)
+ }
+ })
+ } else {
+ ElMessage('楠岃瘉鐮佽緭鍏ラ敊璇�')
+ }
+ },
+
+ changeCode(value) {
+ this.checkCode = value
+ },
+
+ // 瀵规瘮楠岃瘉鐮�
+ compare() {
+ if (this.inputVal.toUpperCase() === this.checkCode) {
+ this.result = '姣斿鎴愬姛'
+ return true
+ } else {
+ this.result = '姣斿澶辫触,璇烽噸鏂拌緭鍏�'
+ this.inputVal = ''
+ this.$refs['ref_validateCode'].draw()
+ return false
+ }
+ },
+ // 妫�鏌ユ湰鍦板瓨鍌ㄦ槸鍚︽湁璁颁綇鐨勮处鍙峰瘑鐮侊紝濡傛灉鏈夊垯濉厖鍒拌緭鍏ユ涓�
+ getAccount() {
+ const savedUsername = localStorage.getItem('username')
+ const savedPassword = localStorage.getItem('password')
+ if (savedUsername && savedPassword) {
+ this.username = savedUsername
+ this.password = savedPassword
+ this.isRemember = true
+
+ }
+ },
+ // 鍒ゆ柇鏄惁鍕鹃�夎浣忓瘑鐮�
+ hasRemember() {
+ if (this.isRemember) {
+ // 淇濆瓨璐﹀彿瀵嗙爜鍒版湰鍦板瓨鍌�
+ localStorage.setItem('username', this.username)
+ localStorage.setItem('password', this.password)
+ } else {
+ // 娓呴櫎鏈湴瀛樺偍鐨勮处鍙峰瘑鐮�
+ localStorage.removeItem('username')
+ localStorage.removeItem('password')
+ }
}
}
-};
+}
</script>
<style scoped>
+.login-page-title {
+ font-size: 40px;
+ color: white;
+ position: absolute;
+ top: 10vh;
+ left: 15vw;
+ letter-spacing: 10px;
+}
+
.login-container {
background-image: url('../../assets/loginPageBg.png');
- /*鐢ㄤ簬涓轰竴涓厓绱犺缃竴涓垨鑰呭涓儗鏅浘鍍忋�� */
- background-size: cover; /* 灏嗚儗鏅浘鍍忕瓑姣旂缉鏀惧埌瀹屽叏瑕嗙洊瀹瑰櫒锛岃儗鏅浘鍍忔湁鍙兘瓒呭嚭瀹瑰櫒銆�*/
- background-position: center; /* 涓烘瘡涓�涓儗鏅浘鐗囪缃垵濮嬩綅缃�傝繖涓綅缃槸鐩稿浜庣敱 background-origin 瀹氫箟鐨勪綅缃浘灞傜殑 閿瓧 center锛岀敤鏉ュ眳涓儗鏅浘鐗囥��*/
+ /*鐢ㄤ簬涓轰竴涓厓绱犺缃竴涓垨鑰呭涓儗鏅浘鍍忋�� */
+ background-size: cover; /* 灏嗚儗鏅浘鍍忕瓑姣旂缉鏀惧埌瀹屽叏瑕嗙洊瀹瑰櫒锛岃儗鏅浘鍍忔湁鍙兘瓒呭嚭瀹瑰櫒銆�*/
+ background-position: center; /* 涓烘瘡涓�涓儗鏅浘鐗囪缃垵濮嬩綅缃�傝繖涓綅缃槸鐩稿浜庣敱 background-origin 瀹氫箟鐨勪綅缃浘灞傜殑 閿瓧 center锛岀敤鏉ュ眳涓儗鏅浘鐗囥��*/
width: 100vw;
height: 100vh;
display: flex;
- justify-content: center; /*center锛氫几缂╁厓绱犲悜姣忚涓偣鎺掑垪 */
- align-items: center; /*绱犲湪浜ゅ弶杞村眳涓�傚鏋滃厓绱犲湪浜ゅ弶杞翠笂鐨勯珮搴﹂珮浜庡叾瀹瑰櫒锛岄偅涔堝湪涓や釜鏂瑰悜涓婃孩鍑鸿窛绂荤浉鍚� */
+ justify-content: center; /*center锛氫几缂╁厓绱犲悜姣忚涓偣鎺掑垪 */
+ align-items: center; /*绱犲湪浜ゅ弶杞村眳涓�傚鏋滃厓绱犲湪浜ゅ弶杞翠笂鐨勯珮搴﹂珮浜庡叾瀹瑰櫒锛岄偅涔堝湪涓や釜鏂瑰悜涓婃孩鍑鸿窛绂荤浉鍚� */
position: relative;
}
@@ -79,16 +163,18 @@
/* border-radius: 12px; */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border: 0;
-
+ border-radius: 8px;
position: absolute;
right: 10%;
- width: 20%;
-
- height: 500;
-
+ top: 22%;
+ width: 350px;
+ height: 500px;
}
-.el-form-item {
- margin-bottom: 40px;
+.el-input {
+ border-radius: 10px;
+}
+.login-input2 {
+ margin-bottom: 30px;
}
.box {
width: 120px;
@@ -96,7 +182,7 @@
position: absolute;
top: 10px;
- right:10px;
+ right: 10px;
}
.imag {
max-width: 100%;
@@ -107,19 +193,95 @@
padding: 20px;
margin-bottom: 20px;
}
-
+:deep(.el-form-item__label) {
+ color: black;
+}
.login-btn {
-
- position: absolute;
- width: calc(100% - 80px);
+ /* position: absolute;
+ width: calc(100% - 150px);
font-size: 1.1em;
letter-spacing: 0.3em;
text-align: center;
box-sizing: border-box;
- bottom: 10px;
+ bottom: 10px; */
+ width: 100%;
+ font-size: 1.1em;
+ letter-spacing: 0.3em;
+}
+.code {
+ width: 50%;
+}
+:deep(.el-input__inner) {
+ height: 40px;
}
+
+
+/* 璁剧疆鏂偣 濯掍綋鏌ヨ */
+@media screen and (max-width: 1366px) {
+/* 绗旇鏈睆骞曞搴﹀皬浜� 1366px */
+/* 鏍峰紡浠ｇ爜 */
+.login-page-title {
+ font-size: 30px;
+ color: white;
+ position: absolute;
+ top: 10vh;
+ left: 15vw;
+ letter-spacing: 10px;
+}
+
+.login-card {
+ background-color: white;
+ margin: 0 auto;
+ padding: 20px;
+ /* border-radius: 12px; */
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+ border: 0;
+ border-radius: 8px;
+ position: absolute;
+ right: 3%;
+ top: 25%;
+
+ width: 320px;
+ height: 500px;
+}
+.login-container {
+ background-image: url('../../assets/loginPageBg.png');
+ /*鐢ㄤ簬涓轰竴涓厓绱犺缃竴涓垨鑰呭涓儗鏅浘鍍忋�� */
+ background-size: vocer; /* 灏嗚儗鏅浘鍍忕瓑姣旂缉鏀惧埌瀹屽叏瑕嗙洊瀹瑰櫒锛岃儗鏅浘鍍忔湁鍙兘瓒呭嚭瀹瑰櫒銆�*/
+ background-position: center; /* 涓烘瘡涓�涓儗鏅浘鐗囪缃垵濮嬩綅缃�傝繖涓綅缃槸鐩稿浜庣敱 background-origin 瀹氫箟鐨勪綅缃浘灞傜殑 閿瓧 center锛岀敤鏉ュ眳涓儗鏅浘鐗囥��*/
+}
+}
+
+@media (max-width: 480px) {
+/* 骞虫澘妯睆灞忓箷瀹藉害灏忎簬 480px */
+/* 鏍峰紡浠ｇ爜 */
+.login-page-title {
+ font-size: 25px;
+ color: white;
+ position: absolute;
+ top: 10vh;
+ left: 15vw;
+ letter-spacing: 5px;
+}
+.login-card {
+ background-color: white;
+ margin: 0 auto;
+ padding: 20px;
+ /* border-radius: 12px; */
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+ border: 0;
+ border-radius: 8px;
+ position: absolute;
+ right: 8%;
+ top: 25%;
+
+ width: 320px;
+ height: 450px;
+}
+}
+/* */
</style>
--
Gitblit v1.9.3