登录页优化
This commit is contained in:
28
package-lock.json
generated
28
package-lock.json
generated
@@ -92,7 +92,6 @@
|
||||
"integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "^2.2.0",
|
||||
"@babel/code-frame": "^7.26.2",
|
||||
@@ -1769,7 +1768,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
@@ -1793,7 +1791,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
@@ -1878,7 +1875,6 @@
|
||||
"integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
@@ -2226,7 +2222,6 @@
|
||||
"integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
@@ -3272,7 +3267,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
|
||||
"integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
@@ -3699,7 +3693,6 @@
|
||||
"integrity": "sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/helper-compilation-targets": "^7.12.16",
|
||||
"@soda/friendly-errors-webpack-plugin": "^1.8.0",
|
||||
@@ -4438,7 +4431,6 @@
|
||||
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
@@ -4965,7 +4957,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"caniuse-lite": "^1.0.30001688",
|
||||
"electron-to-chromium": "^1.5.73",
|
||||
@@ -5772,7 +5763,6 @@
|
||||
"integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
@@ -5787,7 +5777,6 @@
|
||||
"integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"icss-utils": "^5.1.0",
|
||||
"postcss": "^8.4.33",
|
||||
@@ -5876,7 +5865,6 @@
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
@@ -8524,15 +8512,13 @@
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash-es": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
|
||||
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash-unified": {
|
||||
"version": "1.0.3",
|
||||
@@ -8969,7 +8955,6 @@
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
@@ -9844,7 +9829,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.8",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -10773,7 +10757,6 @@
|
||||
"integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
@@ -12942,7 +12925,6 @@
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
@@ -13332,7 +13314,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
|
||||
"integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.5.13",
|
||||
"@vue/compiler-sfc": "3.5.13",
|
||||
@@ -13515,7 +13496,6 @@
|
||||
"integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/eslint-scope": "^3.7.7",
|
||||
"@types/estree": "^1.0.6",
|
||||
@@ -13652,7 +13632,6 @@
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
@@ -13770,7 +13749,6 @@
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
@@ -13865,7 +13843,6 @@
|
||||
"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
@@ -13883,7 +13860,6 @@
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
|
||||
BIN
src/assets/logo2.png
Normal file
BIN
src/assets/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/logoBg2.png
Normal file
BIN
src/assets/logoBg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
@@ -11,6 +11,7 @@ export default {
|
||||
login: 'Login',
|
||||
version: 'Version',
|
||||
expirationtime: 'Expiration Time',
|
||||
assistant: 'TK high-value fan assistant',
|
||||
},
|
||||
hostsList: {
|
||||
// 顶部筛选
|
||||
|
||||
@@ -11,6 +11,8 @@ export default {
|
||||
login: '登录',
|
||||
version: '版本号',
|
||||
expirationtime: '过期时间',
|
||||
assistant: 'TK高价值粉丝助手',
|
||||
|
||||
},
|
||||
hostsList: {
|
||||
filterPrivateUsers: '过滤隐私用户',
|
||||
|
||||
@@ -1,123 +1,125 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
<div class="right">
|
||||
<img src="../assets/logoBg.png" class="background-video" alt="" />
|
||||
<!-- 设置 -->
|
||||
<div class="center-align">
|
||||
<div></div>
|
||||
<div class="setup">
|
||||
<div class="auth-shell">
|
||||
<!-- 顶部操作 -->
|
||||
<div class="top-actions">
|
||||
<div class="setup-item center-justify">
|
||||
<div></div>
|
||||
<span>{{ $t('common.networkSettings') }}</span>
|
||||
</div>
|
||||
<!-- <div class="setup-item center-justify"> -->
|
||||
<div class="">
|
||||
<el-select
|
||||
v-model="currentLanguage"
|
||||
:placeholder="$t('common.language')"
|
||||
@change="changeLanguage"
|
||||
size="small"
|
||||
style="width: 120px;"
|
||||
>
|
||||
<el-option
|
||||
:label="$t('common.simplifiedChinese')"
|
||||
value="zh-CN"
|
||||
/>
|
||||
<el-option
|
||||
:label="$t('common.english')"
|
||||
value="en-US"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-line" style="margin-top: 40px">
|
||||
<!-- logo -->
|
||||
<div class="logo">
|
||||
<!-- <div class="center-justify" style="height: 80px; width: 300px;">
|
||||
<img style="height: 100%;" src="@/assets/logotext.png">
|
||||
</div> -->
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
<span class="setup-text">{{ $t('common.networkSettings') }}</span>
|
||||
</span>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- From -->
|
||||
<!-- 语言选择：用 el-select，但外观套进 setup-item -->
|
||||
<div class="setup-item setup-item--dropdown">
|
||||
<el-dropdown trigger="click" @command="changeLanguage">
|
||||
<span class="lang-dropdown">
|
||||
<span class="lang-dropdown__label">{{ currentLanguageLabel }}</span>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="zh-CN">
|
||||
{{ $t('common.simplifiedChinese') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="en-US">
|
||||
{{ $t('common.english') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主卡片 -->
|
||||
<div class="auth-card">
|
||||
<!-- 左侧登录 -->
|
||||
<div class="auth-left">
|
||||
<div class="logo center-justify">
|
||||
<!-- 你原本 logo 是空的，这里给你留一个位 -->
|
||||
<!-- 想放logo就取消注释 -->
|
||||
<img class="logo-image" src="@/assets/logo2.png" alt="" />
|
||||
<span class="logo-title">{{ $t('common.assistant') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="welcome">{{ $t('common.accountLogin') }}</div>
|
||||
|
||||
<div class="from">
|
||||
<div class="from-title center-justify">
|
||||
<div>{{ $t('common.accountLogin') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="from-input">
|
||||
<el-form label-position="left" label-width="100px" :model="formData">
|
||||
<div class="field-label">{{ $t('common.tenantName') }}</div>
|
||||
<div class="from-input-item1">
|
||||
<img src="@/assets/username.png" alt="" />
|
||||
<el-input
|
||||
style="height: 25px"
|
||||
v-model="formData.tenantName"
|
||||
:placeholder="$t('common.tenantName')"
|
||||
clearable
|
||||
@keyup.enter="onSubmit"
|
||||
/>
|
||||
<el-input style="height: 25px" v-model="formData.tenantName" :placeholder="$t('common.tenantName')"
|
||||
clearable @keyup.enter="onSubmit" />
|
||||
</div>
|
||||
|
||||
<div class="field-label">{{ $t('common.account') }}</div>
|
||||
<div class="from-input-item1">
|
||||
<img src="@/assets/username.png" alt="" />
|
||||
<el-input
|
||||
style="height: 25px"
|
||||
v-model="formData.userId"
|
||||
:placeholder="$t('common.account')"
|
||||
clearable
|
||||
@keyup.enter="onSubmit"
|
||||
/>
|
||||
<el-input style="height: 25px" v-model="formData.userId" :placeholder="$t('common.account')" clearable
|
||||
@keyup.enter="onSubmit" />
|
||||
</div>
|
||||
|
||||
<div class="field-label">{{ $t('common.password') }}</div>
|
||||
<div class="from-input-item1">
|
||||
<img src="@/assets/password.png" alt="" />
|
||||
<el-input
|
||||
style="height: 25px"
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
:placeholder="$t('common.password')"
|
||||
show-password
|
||||
@keyup.enter="onSubmit"
|
||||
/>
|
||||
<el-input style="height: 25px" v-model="formData.password" type="password"
|
||||
:placeholder="$t('common.password')" show-password @keyup.enter="onSubmit" />
|
||||
</div>
|
||||
|
||||
<div class="from-input-item">
|
||||
<el-button
|
||||
class="loginButton"
|
||||
color="#8f7ee7"
|
||||
type="primary"
|
||||
@click="onSubmit"
|
||||
>{{ $t('common.login') }}</el-button
|
||||
>
|
||||
<el-button class="loginButton" type="primary" :loading="isSubmitting" @click="onSubmit">
|
||||
{{ $t('common.login') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="version">{{ $t('common.version') }}：{{ version }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧插画 -->
|
||||
<div class="auth-right">
|
||||
<img src="../assets/logoBg2.png" class="illustration" alt="" />
|
||||
</div>
|
||||
<div class="version center-justify">{{ $t('common.version') }}：{{ version }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { login, rentgetloginID } from "@/api/account";
|
||||
import { getToken, setToken, setUser, setUserPass, getUserPass } from "@/utils/storage";
|
||||
import { ElLoading } from "element-plus";
|
||||
import { setToken, setUser, setUserPass, getUserPass } from "@/utils/storage";
|
||||
import { usePythonBridge } from "@/utils/pythonBridge";
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { tokenStore,UserStore } from '@/stores/notice'
|
||||
import { tokenStore, UserStore } from "@/stores/notice";
|
||||
|
||||
const router = useRouter();
|
||||
const { locale, t } = useI18n();
|
||||
|
||||
const tokenCache = tokenStore();
|
||||
const userCache = UserStore();
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const tokenCache = tokenStore()
|
||||
const userCache = UserStore()
|
||||
const { getVersion } = usePythonBridge();
|
||||
let version = ref("0.0.0");
|
||||
|
||||
// 当前语言
|
||||
const currentLanguage = ref(localStorage.getItem('language') || 'zh-CN');
|
||||
const currentLanguage = ref(localStorage.getItem("language") || "zh-CN");
|
||||
const currentLanguageLabel = computed(() =>
|
||||
currentLanguage.value === "zh-CN"
|
||||
? t("common.simplifiedChinese")
|
||||
: t("common.english")
|
||||
);
|
||||
|
||||
const formData = ref({
|
||||
tenantName: "",
|
||||
userId: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
@@ -128,7 +130,7 @@ onMounted(() => {
|
||||
}, 500);
|
||||
});
|
||||
|
||||
async function getpassword(){
|
||||
async function getpassword() {
|
||||
const res = await getUserPass();
|
||||
formData.value = {
|
||||
tenantName: res == null ? "" : res.tenantName,
|
||||
@@ -141,204 +143,60 @@ async function getpassword(){
|
||||
const changeLanguage = (lang) => {
|
||||
locale.value = lang;
|
||||
currentLanguage.value = lang;
|
||||
localStorage.setItem('language', lang);
|
||||
// 重新加载页面以应用Element Plus语言包
|
||||
localStorage.setItem("language", lang);
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const formData = ref({});
|
||||
const isSubmitting = ref(false);
|
||||
|
||||
const onSubmit = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: "Loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
rentgetloginID({
|
||||
name: formData.value.tenantName,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (isSubmitting.value) return;
|
||||
isSubmitting.value = true;
|
||||
|
||||
rentgetloginID({ name: formData.value.tenantName })
|
||||
.then((tenantId) => {
|
||||
login({
|
||||
username: formData.value.userId,
|
||||
tenantId: res,
|
||||
tenantId: tenantId,
|
||||
password: formData.value.password,
|
||||
})
|
||||
.then((res) => {
|
||||
loading.close();
|
||||
console.log("123123123123",res);
|
||||
isSubmitting.value = false;
|
||||
setToken(res.tokenValue);
|
||||
tokenCache.setToken(res.tokenValue)
|
||||
userCache.setUser(res)
|
||||
tokenCache.setToken(res.tokenValue);
|
||||
userCache.setUser(res);
|
||||
setUser(res);
|
||||
setUserPass(formData.value);
|
||||
router.push("/nav");
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.close();
|
||||
.catch(() => {
|
||||
isSubmitting.value = false;
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.close();
|
||||
isSubmitting.value = false;
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/* ✅ 全屏自适应 */
|
||||
.main {
|
||||
width: 1600px;
|
||||
height: 900px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, #f3f5f9 0%, #eef1f5 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
|
||||
/* 页面无法选中 */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 1600px;
|
||||
height: 900px;
|
||||
|
||||
.right {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 1600px;
|
||||
height: 900px;
|
||||
padding: 20px 40px 20px 50px;
|
||||
border-left: 3px solid #23516e;
|
||||
position: relative;
|
||||
/* 添加 position: relative */
|
||||
overflow: hidden;
|
||||
/* 防止内容溢出 */
|
||||
|
||||
.version {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
bottom: 20px;
|
||||
left: calc(50% - 50px);
|
||||
// box-sizing: border-box;
|
||||
// width: 1600px;
|
||||
}
|
||||
|
||||
.background-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
/* 确保视频在内容之下 */
|
||||
}
|
||||
|
||||
.setup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.setup-item {
|
||||
padding: 10px 6px;
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 20px 0;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.from {
|
||||
width: 420px;
|
||||
// height: 320px;
|
||||
color: @bg-color;
|
||||
background-color: #ffffff44;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #fff;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.from-title {
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: @bg-color;
|
||||
line-height: 37px;
|
||||
|
||||
div {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
// border-bottom: 4px solid #1db97d;
|
||||
}
|
||||
}
|
||||
|
||||
.from-input {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
|
||||
.from-input-item {
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
|
||||
.from-input-item-title {
|
||||
color: @bg-color;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.loginButton {
|
||||
width: 359px;
|
||||
height: 50px;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
border: 1px solid #ffffff;
|
||||
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: @bg-color;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.from-input-item1 {
|
||||
display: flex;
|
||||
width: 359px;
|
||||
height: 50px;
|
||||
background: @bg-color-light-light;
|
||||
border-radius: 24px;
|
||||
border: 1px solid #ffffff;
|
||||
padding: 12px 25px 13px 25px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center-justify {
|
||||
@@ -347,17 +205,268 @@ const onSubmit = () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center-align {
|
||||
/* 外壳：自适应 */
|
||||
.auth-shell {
|
||||
width: min(1320px, 92vw);
|
||||
height: min(760px, 86vh);
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.center-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 背景柔光 */
|
||||
.auth-shell::before,
|
||||
.auth-shell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
.auth-shell::before {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
background: radial-gradient(circle, rgba(214, 226, 255, 0.7), rgba(214, 226, 255, 0));
|
||||
left: -80px;
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.auth-shell::after {
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
background: radial-gradient(circle, rgba(255, 236, 214, 0.6), rgba(255, 236, 214, 0));
|
||||
right: -40px;
|
||||
bottom: -60px;
|
||||
}
|
||||
|
||||
/* 顶部操作 */
|
||||
.top-actions {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 80px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.setup-item {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid #e1e6f2;
|
||||
border-radius: 16px;
|
||||
padding: 8px 12px 8px 14px;
|
||||
box-shadow: 0 8px 18px rgba(40, 57, 108, 0.12);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.setup-item::after {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-right: 2px solid #9aa1b3;
|
||||
border-bottom: 2px solid #9aa1b3;
|
||||
transform: rotate(45deg);
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.setup-item:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: #c9d2f4;
|
||||
box-shadow: 0 12px 24px rgba(40, 57, 108, 0.16);
|
||||
}
|
||||
|
||||
.setup-text {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #2b3347;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* el-select 这块不要小箭头重复：setup-item 自带 after 箭头，所以把 after 去掉 */
|
||||
.setup-item--select::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* 主卡片 */
|
||||
.auth-card {
|
||||
width: min(1200px, 92vw);
|
||||
height: min(680px, 80vh);
|
||||
display: flex;
|
||||
background: #ffffff;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 60px rgba(40, 57, 108, 0.16);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 左侧 */
|
||||
.auth-left {
|
||||
width: 42%;
|
||||
padding: clamp(20px, 3vw, 56px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: 200px;
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
.logo-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #2b3347;
|
||||
letter-spacing: 2px;
|
||||
position: relative;
|
||||
padding-left: 14px;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
|
||||
.logo-title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(180deg, #4f6ef7, #5b7bff);
|
||||
}
|
||||
|
||||
.welcome {
|
||||
margin-top: 14px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #2b3347;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.from {
|
||||
width: 100%;
|
||||
color: #2b3347;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.from-input {
|
||||
width: 100%;
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: 12px 0 6px;
|
||||
}
|
||||
|
||||
.from-input-item {
|
||||
display: flex;
|
||||
padding: 16px 0 0 0;
|
||||
}
|
||||
|
||||
/* 输入框胶囊 */
|
||||
.from-input-item1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #f6f8fc;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e6eaf2;
|
||||
padding: 10px 14px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 4px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.from-input-item1 img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 按钮同款 */
|
||||
.loginButton {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, #4f6ef7, #5b7bff);
|
||||
border-radius: 14px;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 12px 24px rgba(79, 110, 247, 0.28);
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: 24px;
|
||||
font-size: 12px;
|
||||
color: #9aa1b3;
|
||||
}
|
||||
|
||||
/* 右侧插画 */
|
||||
.auth-right {
|
||||
width: 58%;
|
||||
background: linear-gradient(160deg, #f8f9fc 0%, #f0f3f9 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
max-height: 88%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 30px 60px rgba(40, 57, 108, 0.25));
|
||||
}
|
||||
|
||||
/* 小屏：上下 */
|
||||
@media (max-width: 900px) {
|
||||
.auth-shell {
|
||||
width: 94vw;
|
||||
height: auto;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.auth-left,
|
||||
.auth-right {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.auth-right {
|
||||
min-height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
/* element-plus 变量 */
|
||||
.el-input__wrapper {
|
||||
--el-input-focus-border-color: rgba(255, 255, 0, 0);
|
||||
--el-menu-hover-bg-color: rgba(255, 255, 0, 0);
|
||||
@@ -365,16 +474,54 @@ const onSubmit = () => {
|
||||
</style>
|
||||
|
||||
<style scoped lang="less">
|
||||
/* 输入框内层去默认阴影 */
|
||||
::v-deep(.el-input__wrapper) {
|
||||
background-color: rgba(255, 0, 0, 0);
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 输入文字/placeholder 同款深色 */
|
||||
::v-deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
color: #2b3347;
|
||||
}
|
||||
|
||||
::v-deep(.el-input__inner::placeholder) {
|
||||
color: @bg-color;
|
||||
color: #9aa1b3;
|
||||
}
|
||||
|
||||
/* 语言下拉：去边框、透明底，融入 setup-item */
|
||||
::v-deep(.lang-select .el-select__wrapper) {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
padding: 0 8px;
|
||||
min-height: 24px;
|
||||
/* 或者 height: 24px */
|
||||
}
|
||||
|
||||
::v-deep(.lang-select .el-select__selected-item) {
|
||||
color: #2b3347;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
::v-deep(.lang-select .el-select__caret) {
|
||||
color: #9aa1b3;
|
||||
}
|
||||
|
||||
.lang-dropdown {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
min-height: 24px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.lang-dropdown__label {
|
||||
color: #2b3347;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user