From dff9fb32c1bac52d378a6d196f670b92610c01d3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期四, 16 十二月 2021 17:21:49 +0800 Subject: [PATCH] 自适应2 --- src/pages/login/App.vue | 1154 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 577 insertions(+), 577 deletions(-) diff --git a/src/pages/login/App.vue b/src/pages/login/App.vue index b752383..fdd8d7b 100644 --- a/src/pages/login/App.vue +++ b/src/pages/login/App.vue @@ -1,577 +1,577 @@ -<template> - <!-- <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> - <particle-network /> - </div> - <div class="left-bg"> - <div class="login-logo"> - <img src="/images/login-logo.png" alt width="105px" height="105px" /> - </div> - <div class="login-com"> - <span>{{ $t('login.company') }}</span> - </div> - <div class="login-form"> - <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" style="width:280px" :placeholder="$t('placeholder.enterUsername')"> - <i slot="prefix" class="iconfont iconyonghu1"></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" - style="width:280px" - :placeholder="$t('placeholder.enterPassword')" - > - <i slot="prefix" class="iconfont iconmima"></i> - </el-input> - </el-form-item> - <el-form-item> - <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">{{ $t('button.login') }}</el-button> - </el-form-item> - </el-form> - </div> - <p class="gradient-text gradient-text-one"> - 鈥斺�� - <b>SmartAI</b> {{ $t('login.aios') }} 鈥斺�� - </p> - <p - class="gradient-text gradient-text-one" - style="letter-spacing: 1.8px;font-size:15px;" - >V1.0.0</p> - </div> - </div> --> - <div class="login"> - <div class="title"> - <div class="en">{{ data.title_firstLine }}</div> - <div class="ch">{{ data.title_secondLine }}</div> - </div> - - <div class="left_footer"> - <img class="logo" src="/apps/loginData/LOGO.png" alt="" /> - <div class="web">{{ data.website }}</div> - </div> - - <div - class="login-form" - :style="{ background: backgroundColor }" - :class="{ empty: !user.loginName && !user.password }" - > - <img class="logo" src="/apps/loginData/leftImg.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 { getMenuListData } from "@/api/utils"; -import loginData from "../../../public/apps/loginData/login.json"; - -export default { - name: "login-pgae", - metaInfo: { - title: "鐧诲綍椤�", - }, - components: { - // 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", - }, - ], - }; - }, - }, - data: () => ({ - data: {}, - serverTitle: "", - user: { - loginName: "", - password: "", - rememberMe: false, - }, - nullRule: {}, - - loading: "", - vLoading: false, - currentHeight: 1057, - currentWidth: 1920, - backgroundColor: "", - backgroundList: [ - "#2A2344", - "#342344", - "#000000", - "#233044", - "#0B252E", - "#150051", - "#110040", - ], - }), - created() { - this.getServerName(); - this.getScreenHeight(); - this.data = loginData; - this.backgroundColor = - this.backgroundList[ - Math.floor(Math.random() * this.backgroundList.length) - ]; - }, - mounted() { - // 鑷姩鐧诲綍鎺ュ彛 - this.loginRobot(); - }, - watch: {}, - beforeDestroy() { - window.onresize = null; - }, - methods: { - loginRobot() { - // 瑙f瀽璺敱鍙傛暟锛屽苟缂撳瓨 - let user = this.getQueryVariable("username"); - let passwd = this.getQueryVariable("password"); - if (user.length && passwd.length) { - sessionStorage.setItem( - "autoLogin", - JSON.stringify({ username: user, passwd: passwd }) - ); - - this.user.loginName = user; - this.user.password = passwd; - this.systemLogin(); - return; - } - - // 鐧婚檰瓒呮椂鍚庣殑閲嶆柊鐧婚檰 - let sessionInfo = sessionStorage.getItem("autoLogin"); - if (sessionInfo) { - let authority = JSON.parse(sessionInfo); - this.user.loginName = authority.username; - this.user.password = authority.passwd; - this.systemLogin(); - } - }, - systemLogin() { - this.nullRule = this.rules; - this.$nextTick(() => { - 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(); - } else { - this.nullRule = {}; - } - }); - this.nullRule = {}; - }); - }, - async testLogin() { - // location.assign("/view/desktop/") - tologin({ username: this.user.loginName, password: this.user.password }) - .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(); - }) - .catch((err) => { - this.loading.close(); - this.$notify({ - title: "鎻愮ず", - type: "error", - message: err.msg, - }); - this.$refs.pwd.focus(); - }); - }, - async getLoginUserData() { - let res = await getLoginUserData(); - if (res.success) { - sessionStorage.setItem("userInfo", JSON.stringify(res.data)); - this.$notify.success("鐧诲綍鎴愬姛锛�"); - // 鑾峰彇鏉冮檺 - await this.getMenuList(); - location.assign("/view/desktop/"); - return res.data; - } else { - this.$notify.error("鐧诲綍澶辫触锛�"); - } - }, - - getScreenHeight() { - this.currentHeight = document.documentElement.clientHeight; - this.currentWidth = document.documentElement.clientWidth; - window.onresize = () => { - this.currentHeight = document.documentElement.clientHeight; - this.currentWidth = document.documentElement.clientWidth; - this.$forceUpdate(); - }; - }, - async getServerName() { - let res = await getServerName(); - if (res && res.success) { - this.serverTitle = res.data.serverName; - window.document.title = res.data.serverName - ? res.data.serverName - : "SmartAI"; - sessionStorage.setItem("title", res.data.serverName); - } - }, - async getMenuList() { - let results = await getMenuListData({}); - if (results && results.success) { - /* 瀛樺偍鏉冮檺 */ - let buttonAuthoritys = results.data; - if (results && results.length && this.$route.query.is_login) { - this.$router.replace(results[0].url); - } - sessionStorage.setItem( - "buttonAuthoritys", - "," + buttonAuthoritys + "," - ); - sessionStorage.setItem("menuInfo", JSON.stringify(results)); - } else { - this.$toast({ - type: "error", - message: "鑿滃崟鑾峰彇澶辫触", - }); - } - }, - getQueryVariable(variable) { - var query = window.location.search.substring(1); - var vars = query.split("&"); - for (var i = 0; i < vars.length; i++) { - var pair = vars[i].split("="); - if (pair[0] == variable) { - return pair[1]; - } - } - return false; - }, - }, -}; -</script> -<style lang="scss"> -html, -body, -.login { - height: 100%; - min-width: 1200px; - min-height: 680px; - position: relative; - background-image: url("/apps/loginData/background.png"); - - .title { - position: absolute; - top: 40%; - left: 15.6%; - color: #fff; - text-align: center; - - .en { - font-size: 120px; - } - - .ch { - font-size: 48px; - letter-spacing: 9px; - } - } - - .left_footer { - position: absolute; - display: flex; - justify-content: start; - align-items: center; - left: 18.6%; - bottom: 40px; - - .logo { - width: 136px; - margin-right: 30px; - } - - .web { - font-size: 24px; - font-weight: 700; - color: rgba(255, 255, 255, 0.7); - } - } - - .login-form { - position: absolute; - width: 40%; - height: 92.5%; - right: 3.75%; - top: 3.75%; - 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; - overflow: hidden; - - .logo { - width: 100%; - margin-top: 13%; - margin-bottom: 20px; - } - - .el-form { - width: 100%; - } - - .el-form-item { - background: rgba(0, 0, 0, 0); - } - - .el-form-item:nth-child(2) { - margin-top: 10%; - margin-bottom: 13%; - } - - .el-button { - width: 100%; - 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; - } - } - - .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> +<template> + <!-- <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> + <particle-network /> + </div> + <div class="left-bg"> + <div class="login-logo"> + <img src="/images/login-logo.png" alt width="105px" height="105px" /> + </div> + <div class="login-com"> + <span>{{ $t('login.company') }}</span> + </div> + <div class="login-form"> + <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" style="width:280px" :placeholder="$t('placeholder.enterUsername')"> + <i slot="prefix" class="iconfont iconyonghu1"></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" + style="width:280px" + :placeholder="$t('placeholder.enterPassword')" + > + <i slot="prefix" class="iconfont iconmima"></i> + </el-input> + </el-form-item> + <el-form-item> + <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">{{ $t('button.login') }}</el-button> + </el-form-item> + </el-form> + </div> + <p class="gradient-text gradient-text-one"> + 鈥斺�� + <b>SmartAI</b> {{ $t('login.aios') }} 鈥斺�� + </p> + <p + class="gradient-text gradient-text-one" + style="letter-spacing: 1.8px;font-size:15px;" + >V1.0.0</p> + </div> + </div> --> + <div class="login"> + <div class="title"> + <div class="en">{{ data.title_firstLine }}</div> + <div class="ch">{{ data.title_secondLine }}</div> + </div> + + <div class="left_footer"> + <img class="logo" src="/apps/loginData/LOGO.png" alt="" /> + <div class="web">{{ data.website }}</div> + </div> + + <div + class="login-form" + :style="{ background: backgroundColor }" + :class="{ empty: !user.loginName || !user.password }" + > + <img class="logo" src="/apps/loginData/leftImg.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 { getMenuListData } from "@/api/utils"; +import loginData from "../../../public/apps/loginData/login.json"; + +export default { + name: "login-pgae", + metaInfo: { + title: "鐧诲綍椤�", + }, + components: { + // 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", + }, + ], + }; + }, + }, + data: () => ({ + data: {}, + serverTitle: "", + user: { + loginName: "", + password: "", + rememberMe: false, + }, + nullRule: {}, + + loading: "", + vLoading: false, + currentHeight: 1057, + currentWidth: 1920, + backgroundColor: "", + backgroundList: [ + "#2A2344", + "#342344", + "#000000", + "#233044", + "#0B252E", + "#150051", + "#110040", + ], + }), + created() { + this.getServerName(); + this.getScreenHeight(); + this.data = loginData; + this.backgroundColor = + this.backgroundList[ + Math.floor(Math.random() * this.backgroundList.length) + ]; + }, + mounted() { + // 鑷姩鐧诲綍鎺ュ彛 + this.loginRobot(); + }, + watch: {}, + beforeDestroy() { + window.onresize = null; + }, + methods: { + loginRobot() { + // 瑙f瀽璺敱鍙傛暟锛屽苟缂撳瓨 + let user = this.getQueryVariable("username"); + let passwd = this.getQueryVariable("password"); + if (user.length && passwd.length) { + sessionStorage.setItem( + "autoLogin", + JSON.stringify({ username: user, passwd: passwd }) + ); + + this.user.loginName = user; + this.user.password = passwd; + this.systemLogin(); + return; + } + + // 鐧婚檰瓒呮椂鍚庣殑閲嶆柊鐧婚檰 + let sessionInfo = sessionStorage.getItem("autoLogin"); + if (sessionInfo) { + let authority = JSON.parse(sessionInfo); + this.user.loginName = authority.username; + this.user.password = authority.passwd; + this.systemLogin(); + } + }, + systemLogin() { + this.nullRule = this.rules; + this.$nextTick(() => { + 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(); + } else { + this.nullRule = {}; + } + }); + this.nullRule = {}; + }); + }, + async testLogin() { + // location.assign("/view/desktop/") + tologin({ username: this.user.loginName, password: this.user.password }) + .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(); + }) + .catch((err) => { + this.loading.close(); + this.$notify({ + title: "鎻愮ず", + type: "error", + message: err.msg, + }); + this.$refs.pwd.focus(); + }); + }, + async getLoginUserData() { + let res = await getLoginUserData(); + if (res.success) { + sessionStorage.setItem("userInfo", JSON.stringify(res.data)); + this.$notify.success("鐧诲綍鎴愬姛锛�"); + // 鑾峰彇鏉冮檺 + await this.getMenuList(); + location.assign("/view/desktop/"); + return res.data; + } else { + this.$notify.error("鐧诲綍澶辫触锛�"); + } + }, + + getScreenHeight() { + this.currentHeight = document.documentElement.clientHeight; + this.currentWidth = document.documentElement.clientWidth; + window.onresize = () => { + this.currentHeight = document.documentElement.clientHeight; + this.currentWidth = document.documentElement.clientWidth; + this.$forceUpdate(); + }; + }, + async getServerName() { + let res = await getServerName(); + if (res && res.success) { + this.serverTitle = res.data.serverName; + window.document.title = res.data.serverName + ? res.data.serverName + : "SmartAI"; + sessionStorage.setItem("title", res.data.serverName); + } + }, + async getMenuList() { + let results = await getMenuListData({}); + if (results && results.success) { + /* 瀛樺偍鏉冮檺 */ + let buttonAuthoritys = results.data; + if (results && results.length && this.$route.query.is_login) { + this.$router.replace(results[0].url); + } + sessionStorage.setItem( + "buttonAuthoritys", + "," + buttonAuthoritys + "," + ); + sessionStorage.setItem("menuInfo", JSON.stringify(results)); + } else { + this.$toast({ + type: "error", + message: "鑿滃崟鑾峰彇澶辫触", + }); + } + }, + getQueryVariable(variable) { + var query = window.location.search.substring(1); + var vars = query.split("&"); + for (var i = 0; i < vars.length; i++) { + var pair = vars[i].split("="); + if (pair[0] == variable) { + return pair[1]; + } + } + return false; + }, + }, +}; +</script> +<style lang="scss"> +html, +body, +.login { + height: 100%; + min-width: 1200px; + min-height: 680px; + position: relative; + background-image: url("/apps/loginData/background.png"); + + .title { + position: absolute; + top: 40%; + left: 15.6%; + color: #fff; + text-align: center; + + .en { + font-size: 120px; + } + + .ch { + font-size: 48px; + letter-spacing: 9px; + } + } + + .left_footer { + position: absolute; + display: flex; + justify-content: start; + align-items: center; + left: 18.6%; + bottom: 40px; + + .logo { + width: 136px; + margin-right: 30px; + } + + .web { + font-size: 24px; + font-weight: 700; + color: rgba(255, 255, 255, 0.7); + } + } + + .login-form { + position: absolute; + width: 40%; + height: 92.5%; + right: 3.75%; + top: 3.75%; + 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; + overflow: hidden; + + .logo { + width: 100%; + margin-top: 13%; + margin-bottom: 20px; + } + + .el-form { + width: 100%; + } + + .el-form-item { + background: rgba(0, 0, 0, 0); + } + + .el-form-item:nth-child(2) { + margin-top: 10%; + margin-bottom: 13%; + } + + .el-button { + width: 100%; + 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; + } + } + + .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