From 7c1a352402a09eb2e9b7594c35a59dd2bbc2a2b2 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 08 十二月 2021 09:43:30 +0800
Subject: [PATCH] 登录页
---
src/pages/index/App.vue | 532 ++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 386 insertions(+), 146 deletions(-)
diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
index 2a3a431..6754bff 100644
--- a/src/pages/index/App.vue
+++ b/src/pages/index/App.vue
@@ -1,10 +1,9 @@
<template>
- <div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
+ <!-- <div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
<div class="web-site">
<a href="http://www.smartai.com" target="_blank">www.smartai.com</a>
</div>
- <!-- 鎺堟潈淇℃伅 -->
<lang-select class="lang-select"/>
<licence />
<div class="right-bg" style>
@@ -48,7 +47,6 @@
</el-form-item>
</el-form>
</div>
- <!-- <p class="gradient-text gradient-text-one">鈥斺�斺�� {{serverTitle || 'SmartAI 鈥� ReID'}} 鈥斺�斺��</p> -->
<p class="gradient-text gradient-text-one">
鈥斺��
<b>SmartAI</b> {{ $t('login.aios') }} 鈥斺��
@@ -58,51 +56,130 @@
style="letter-spacing: 1.8px;font-size:15px;"
>V1.0.0</p>
</div>
+ </div> -->
+ <div class="login">
+ <div class="title">
+ <div class="en">Smart AI</div>
+ <div class="ch">浜哄伐鏅鸿兘鎿嶄綔绯荤粺</div>
+ </div>
+
+ <div class="left_footer">
+ <img class="logo" src="/images/login/LOGO.png" alt="" />
+ <div class="web">www.smartai.com</div>
+ </div>
+
+ <div
+ class="login-form"
+ :style="{ background: backgroundColor }"
+ :class="{ empty: !user.loginName && !user.password }"
+ >
+ <img class="logo" src="/images/login/OS.png" alt="" />
+
+ <el-form
+ :model="user"
+ status-icon
+ :rules="nullRule"
+ :validate-on-rule-change="false"
+ ref="ruleForm"
+ class="demo-ruleForm"
+ >
+ <el-form-item prop="loginName">
+ <el-input
+ v-model="user.loginName"
+ :placeholder="$t('placeholder.enterUsername')"
+ >
+ <i slot="prefix" class="iconfont icon"></i>
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input
+ show-password
+ @keyup.enter.native="systemLogin()"
+ v-model="user.password"
+ autocomplete="off"
+ :placeholder="$t('placeholder.enterPassword')"
+ >
+ <i slot="prefix" class="iconfont icon"></i>
+ </el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button ref="submit" type="warning" @click="systemLogin()">{{
+ $t("button.login")
+ }}</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
</div>
</template>
<script>
-import { tologin, getLoginUserData, getServerName } from './api.ts';
-import ParticleNetwork from './ParticleNetwork'
-import Licence from '@/components/licence'
-import LangSelect from '@/components/langSelect'
+import { tologin, getLoginUserData, getServerName } from "./api.ts";
+import ParticleNetwork from "./ParticleNetwork";
+import Licence from "@/components/licence";
+import LangSelect from "@/components/langSelect";
import { getMenuListData } from "@/api/utils";
export default {
- name: 'login-pgae',
+ name: "login-pgae",
metaInfo: {
- title: '鐧诲綍椤�'
+ title: "鐧诲綍椤�",
},
components: {
- ParticleNetwork,
- Licence,
- LangSelect
+ // ParticleNetwork,
+ // Licence,
+ // LangSelect
},
computed: {
rules() {
return {
- loginName: [{ required: true, message: this.$t('placeholder.enterUsername'), trigger: 'change' } ],
- password: [{ required: true, message: this.$t('placeholder.enterPassword'), trigger: 'change' }]
- }
+ loginName: [
+ {
+ required: true,
+ message: this.$t("placeholder.enterUsername"),
+ trigger: "change",
+ },
+ ],
+ password: [
+ {
+ required: true,
+ message: this.$t("placeholder.enterPassword"),
+ trigger: "change",
+ },
+ ],
+ };
},
},
data: () => ({
serverTitle: "",
user: {
- loginName: '',
- password: '',
- rememberMe: false
+ loginName: "",
+ password: "",
+ rememberMe: false,
},
nullRule: {},
- loading: '',
+ loading: "",
vLoading: false,
currentHeight: 1057,
- currentWidth: 1920
+ currentWidth: 1920,
+ backgroundColor: "",
+ backgroundList: [
+ "#2A2344",
+ "#342344",
+ "#000000",
+ "#233044",
+ "#0B252E",
+ "#150051",
+ "#110040",
+ ],
}),
created() {
- this.getServerName()
- this.getScreenHeight()
+ this.getServerName();
+ this.getScreenHeight();
+ this.backgroundColor =
+ this.backgroundList[
+ Math.floor(Math.random() * this.backgroundList.length)
+ ];
},
mounted() {
// 鑷姩鐧诲綍鎺ュ彛
@@ -110,7 +187,7 @@
},
watch: {},
beforeDestroy() {
- window.onresize = null
+ window.onresize = null;
},
methods: {
loginRobot() {
@@ -118,7 +195,10 @@
let user = this.getQueryVariable("username");
let passwd = this.getQueryVariable("password");
if (user.length && passwd.length) {
- sessionStorage.setItem("autoLogin", JSON.stringify({ username: user, passwd: passwd }));
+ sessionStorage.setItem(
+ "autoLogin",
+ JSON.stringify({ username: user, passwd: passwd })
+ );
this.user.loginName = user;
this.user.password = passwd;
@@ -127,7 +207,7 @@
}
// 鐧婚檰瓒呮椂鍚庣殑閲嶆柊鐧婚檰
- let sessionInfo = sessionStorage.getItem('autoLogin');
+ let sessionInfo = sessionStorage.getItem("autoLogin");
if (sessionInfo) {
let authority = JSON.parse(sessionInfo);
this.user.loginName = authority.username;
@@ -136,78 +216,78 @@
}
},
systemLogin() {
- this.nullRule = this.rules
+ this.nullRule = this.rules;
this.$nextTick(() => {
- this.$refs['ruleForm'].validate(valid => {
+ this.$refs["ruleForm"].validate((valid) => {
if (valid) {
this.loading = this.$loading({
lock: true,
- text: 'Loading',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- this.testLogin()
+ text: "Loading",
+ spinner: "el-icon-loading",
+ background: "rgba(0, 0, 0, 0.7)",
+ });
+ this.testLogin();
} else {
- this.nullRule = {}
+ this.nullRule = {};
}
- })
- this.nullRule = {}
- })
+ });
+ this.nullRule = {};
+ });
},
async testLogin() {
// location.assign("/view/desktop/")
tologin({ username: this.user.loginName, password: this.user.password })
- .then(json => {
+ .then((json) => {
const loginedInfo = {
- access_token: json.token_type + ' ' + json.access_token,
- refresh_token: json.refresh_token
- }
- sessionStorage.setItem('expires_in', json.expires_in)
- sessionStorage.setItem('loginedInfo', JSON.stringify(loginedInfo))
- this.loading.close()
- this.getLoginUserData()
+ access_token: json.token_type + " " + json.access_token,
+ refresh_token: json.refresh_token,
+ };
+ sessionStorage.setItem("expires_in", json.expires_in);
+ sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));
+ this.loading.close();
+ this.getLoginUserData();
})
- .catch(err => {
- this.loading.close()
+ .catch((err) => {
+ this.loading.close();
this.$notify({
- title: '鎻愮ず',
- type: 'error',
- message: err.msg
- })
- this.$refs.pwd.focus()
- })
+ title: "鎻愮ず",
+ type: "error",
+ message: err.msg,
+ });
+ this.$refs.pwd.focus();
+ });
},
async getLoginUserData() {
- let res = await getLoginUserData()
+ let res = await getLoginUserData();
if (res.success) {
- sessionStorage.setItem('userInfo', JSON.stringify(res.data))
- this.$notify.success("鐧诲綍鎴愬姛锛�")
+ sessionStorage.setItem("userInfo", JSON.stringify(res.data));
+ this.$notify.success("鐧诲綍鎴愬姛锛�");
// 鑾峰彇鏉冮檺
- await this.getMenuList()
- location.assign("/view/desktop/")
- return res.data
+ await this.getMenuList();
+ location.assign("/view/desktop/");
+ return res.data;
} else {
- this.$notify.error("鐧诲綍澶辫触锛�")
+ this.$notify.error("鐧诲綍澶辫触锛�");
}
},
getScreenHeight() {
- this.currentHeight = document.documentElement.clientHeight
- this.currentWidth = document.documentElement.clientWidth
+ this.currentHeight = document.documentElement.clientHeight;
+ this.currentWidth = document.documentElement.clientWidth;
window.onresize = () => {
- this.currentHeight = document.documentElement.clientHeight
- this.currentWidth = document.documentElement.clientWidth
- this.$forceUpdate()
- }
+ this.currentHeight = document.documentElement.clientHeight;
+ this.currentWidth = document.documentElement.clientWidth;
+ this.$forceUpdate();
+ };
},
async getServerName() {
- let res = await getServerName()
+ let res = await getServerName();
if (res && res.success) {
- this.serverTitle = res.data.serverName
+ this.serverTitle = res.data.serverName;
window.document.title = res.data.serverName
? res.data.serverName
- : 'SmartAI'
- sessionStorage.setItem('title', res.data.serverName)
+ : "SmartAI";
+ sessionStorage.setItem("title", res.data.serverName);
}
},
async getMenuList() {
@@ -218,12 +298,15 @@
if (results && results.length && this.$route.query.is_login) {
this.$router.replace(results[0].url);
}
- sessionStorage.setItem("buttonAuthoritys", "," + buttonAuthoritys + ",");
+ sessionStorage.setItem(
+ "buttonAuthoritys",
+ "," + buttonAuthoritys + ","
+ );
sessionStorage.setItem("menuInfo", JSON.stringify(results));
} else {
this.$toast({
type: "error",
- message: "鑿滃崟鑾峰彇澶辫触"
+ message: "鑿滃崟鑾峰彇澶辫触",
});
}
},
@@ -232,93 +315,250 @@
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
- if (pair[0] == variable) { return pair[1]; }
+ if (pair[0] == variable) {
+ return pair[1];
+ }
}
- return (false);
- }
+ return false;
+ },
},
-}
+};
</script>
<style lang="scss">
-.right-bg {
- position: fixed;
- top: 0;
- left: 0;
- background-image: url("/images/login-net.png");
-
- width: 100%;
+.login {
height: 100%;
- min-width: 1000px;
- z-index: -10;
- zoom: 1;
- background-color: #fff;
- background-repeat: no-repeat;
- background-size: cover;
- -webkit-background-size: cover;
- -o-background-size: cover;
- background-position: center 0;
-}
-.web-site {
- position: absolute;
- top: 55px;
- left: 41px;
- font-family: PingFangSC-Medium;
- font-size: 20px;
- color: #6170e1;
- letter-spacing: 6.15px;
-}
-.lang-select {
- float: right;
- color: white !important;
- font-size: 14px;
- margin: 13px;
- cursor: pointer;
-}
-.left-bg {
- position: absolute;
- top: 29%;
- right: 18%;
- width: 390px;
- height: 426px;
- background: rgba(146, 208, 255, 0.23);
- border-radius: 4px;
- text-align: center;
- .login-logo {
- margin-top: -53px;
- }
+ position: relative;
+ background-image: url("/images/login/鑳屾櫙鍥�.png");
- .login-com {
- font-family: PingFangSC-Medium;
- font-size: 22px;
- color: #ffffff;
- letter-spacing: 0.44px;
- margin: 15px;
- }
- .login-form {
- margin: 40px 10px;
- }
- .gradient-text {
- line-height: 36px;
- font-size: 17px;
- font-family: -webkit-pictograph;
- font-weight: bolder;
- position: relative;
- b {
- font-size: 20px;
+ .title {
+ position: absolute;
+ top: 345px;
+ left: 301px;
+ color: #fff;
+ text-align: center;
+
+ .en {
+ font-size: 120px;
+ }
+
+ .ch {
+ font-size: 48px;
+ letter-spacing: 9px;
}
}
- .gradient-text-one {
- background-image: linear-gradient(to right, #51feff 5%, #ff8725 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
+
+ .left_footer {
+ position: absolute;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ left: 358px;
+ bottom: 40px;
+
+ .logo {
+ width: 136px;
+ margin-right: 30px;
+ }
+
+ .web {
+ font-size: 24px;
+ font-weight: 700;
+ color: rgba(255, 255, 255, 0.7);
+ }
}
- .el-input__prefix {
- left: 8px;
+ .login-form {
+ position: absolute;
+ width: 780px;
+ height: 1000px;
+ right: 40px;
+ top: 40px;
+ padding: 0 90px;
+ box-sizing: border-box;
+
+ background: #2a2344;
+ opacity: 0.95;
+ box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.25);
+ border-radius: 56px;
+
+ .logo {
+ margin-top: 100px;
+ margin-bottom: 16px;
+ }
+
+ .el-form-item {
+ background: rgba(0, 0, 0, 0);
+ }
+
+ .el-form-item:nth-child(2) {
+ margin-top: 60px;
+ margin-bottom: 80px;
+ }
+
+ .el-button {
+ width: 600px;
+ height: 60px;
+ background: #4e94ff;
+ border-radius: 30px;
+ border: none;
+ }
+
+ .el-input {
+ width: 100%;
+ background: rgba(0, 0, 0, 0);
+ }
+
+ input {
+ width: 100%;
+ height: 56px;
+ background: rgba(255, 255, 255, 0.1) !important;
+ border: 1px solid #4e94ff;
+ box-sizing: border-box;
+ border-radius: 28px;
+ color: #fff;
+ caret-color: #fff; //鍏夋爣棰滆壊
+ padding-left: 100px;
+ padding-right: 50px;
+ font-weight: 700;
+ }
+
+ input:-webkit-autofill,
+ textarea:-webkit-autofill,
+ select:-webkit-autofill {
+ -webkit-text-fill-color: #ededed !important;
+ -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
+ background-color: transparent;
+ background-image: none;
+ transition: background-color 50000s ease-in-out 0s; //鑳屾櫙鑹查�忔槑 鐢熸晥鏃堕暱 杩囨浮鏁堟灉 鍚敤鏃跺欢杩熺殑鏃堕棿
+ }
+
+ .el-form-item__error {
+ top: 110%;
+ left: 80px;
+ }
+
+ .icon {
+ font-size: 32px;
+ color: rgb(80, 151, 255);
+ }
+
+ .el-input__prefix {
+ padding: 0 20px;
+ height: 40px;
+ left: 5px;
+ top: 8px;
+ border-right: 1px solid #4e94ff;
+ }
+
+ .el-input__suffix {
+ right: 20px;
+ }
+
+ .el-icon-circle-close {
+ display: none;
+ }
}
- .el-form-item__error {
- left: 54px;
+ .login-form.empty {
+ input {
+ border-color: #999;
+ color: #bbb;
+ }
+
+ .el-button {
+ background-color: #999;
+ color: #fff;
+ }
+
+ .icon {
+ color: #fff;
+ }
+
+ .el-input__prefix {
+ border-color: #d4d6d9;
+ }
}
}
+
+// .right-bg {
+// position: fixed;
+// top: 0;
+// left: 0;
+// background-image: url("/images/login-net.png");
+
+// width: 100%;
+// height: 100%;
+// min-width: 1000px;
+// z-index: -10;
+// zoom: 1;
+// background-color: #fff;
+// background-repeat: no-repeat;
+// background-size: cover;
+// -webkit-background-size: cover;
+// -o-background-size: cover;
+// background-position: center 0;
+// }
+// .web-site {
+// position: absolute;
+// top: 55px;
+// left: 41px;
+// font-family: PingFangSC-Medium;
+// font-size: 20px;
+// color: #6170e1;
+// letter-spacing: 6.15px;
+// }
+// .lang-select {
+// float: right;
+// color: white !important;
+// font-size: 14px;
+// margin: 13px;
+// cursor: pointer;
+// }
+// .left-bg {
+// position: absolute;
+// top: 29%;
+// right: 18%;
+// width: 390px;
+// height: 426px;
+// background: rgba(146, 208, 255, 0.23);
+// border-radius: 4px;
+// text-align: center;
+// .login-logo {
+// margin-top: -53px;
+// }
+
+// .login-com {
+// font-family: PingFangSC-Medium;
+// font-size: 22px;
+// color: #ffffff;
+// letter-spacing: 0.44px;
+// margin: 15px;
+// }
+// .login-form {
+// margin: 40px 10px;
+// }
+// .gradient-text {
+// line-height: 36px;
+// font-size: 17px;
+// font-family: -webkit-pictograph;
+// font-weight: bolder;
+// position: relative;
+// b {
+// font-size: 20px;
+// }
+// }
+// .gradient-text-one {
+// background-image: linear-gradient(to right, #51feff 5%, #ff8725 100%);
+// -webkit-background-clip: text;
+// -webkit-text-fill-color: transparent;
+// }
+
+// .el-input__prefix {
+// left: 8px;
+// }
+
+// .el-form-item__error {
+// left: 54px;
+// }
+// }
</style>
--
Gitblit v1.8.0