366 lines
8.0 KiB
Vue
366 lines
8.0 KiB
Vue
|
<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="setup-item center-justify">
|
|||
|
|
<div></div>
|
|||
|
|
<el-dropdown>
|
|||
|
|
<span class="el-dropdown-link">
|
|||
|
|
<span style="font-size:20px; color: #fff;">
|
|||
|
|
{{ $t('login.network') }}
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
</el-dropdown>
|
|||
|
|
</div>
|
|||
|
|
<div class="setup-item center-justify">
|
|||
|
|
<div></div>
|
|||
|
|
<el-dropdown>
|
|||
|
|
<span class="el-dropdown-link">
|
|||
|
|
<span style="font-size:20px; color: #fff;">
|
|||
|
|
{{ $t('login.Language') }}
|
|||
|
|
</span>
|
|||
|
|
<!-- <el-icon class="el-icon--right">
|
|||
|
|
<arrow-down />
|
|||
|
|
</el-icon> -->
|
|||
|
|
</span>
|
|||
|
|
<template #dropdown>
|
|||
|
|
<el-dropdown-menu>
|
|||
|
|
<el-dropdown-item @click="switchLanguage('zh')">
|
|||
|
|
中文
|
|||
|
|
</el-dropdown-item>
|
|||
|
|
<el-dropdown-item @click="switchLanguage('en')">
|
|||
|
|
English
|
|||
|
|
</el-dropdown-item>
|
|||
|
|
</el-dropdown-menu>
|
|||
|
|
</template>
|
|||
|
|
</el-dropdown>
|
|||
|
|
<!-- <el-radio-group v-model="localeData" size="large">
|
|||
|
|
<el-radio-button @click="switchLanguage('zh')" label="中文" />
|
|||
|
|
<el-radio-button @click="switchLanguage('en')" label="English" />
|
|||
|
|
</el-radio-group> -->
|
|||
|
|
|
|||
|
|
</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="margin-right: 20px;height: 100%;" src="@/assets/logo.png"> -->
|
|||
|
|
<img style="height: 100%;" src="@/assets/logotext.png">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- From -->
|
|||
|
|
<div class="from">
|
|||
|
|
<div class="from-title center-justify">
|
|||
|
|
<div>{{ $t('login.title') }}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="from-input">
|
|||
|
|
<el-form label-position="left" label-width="100px" :model="formData">
|
|||
|
|
<div class="from-input-item1">
|
|||
|
|
<img src="@/assets/username.png" alt="">
|
|||
|
|
<el-input style="height: 25px;" v-model="formData.tenantName"
|
|||
|
|
:placeholder="$t('login.tenantName')" clearable @keyup.enter="onSubmit" />
|
|||
|
|
</div>
|
|||
|
|
<div class="from-input-item1">
|
|||
|
|
<img src="@/assets/username.png" alt="">
|
|||
|
|
<el-input style="height: 25px;" v-model="formData.userId"
|
|||
|
|
:placeholder="$t('login.account')" clearable @keyup.enter="onSubmit" />
|
|||
|
|
</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('login.password')" show-password @keyup.enter="onSubmit" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="from-input-item">
|
|||
|
|
<el-button class="loginButton" color="#8f7ee7" type="primary" @click="onSubmit">{{
|
|||
|
|
$t('login.login') }}</el-button>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="version center-justify ">{{ $t('login.version') }}：{{ version }}</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, onMounted } from 'vue';
|
|||
|
|
import { useRouter } from 'vue-router';
|
|||
|
|
import { login, getIdByName } from '@/api/account';
|
|||
|
|
import { getToken, setToken, setUser, setUserPass, getUserPass } from '@/utils/storage';
|
|||
|
|
import { ElLoading } from 'element-plus';
|
|||
|
|
import { usePythonBridge } from '@/utils/pythonBridge'
|
|||
|
|
import { useI18n } from 'vue-i18n'
|
|||
|
|
|
|||
|
|
|
|||
|
|
const { locale } = useI18n()
|
|||
|
|
let localeData = ref(locale.value == 'zh' ? '中文' : 'English')
|
|||
|
|
function switchLanguage(lang) {
|
|||
|
|
console.log(localeData.value)
|
|||
|
|
locale.value = lang
|
|||
|
|
localStorage.setItem('lang', lang)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const { getVersion, stopScript } = usePythonBridge();
|
|||
|
|
let version = ref('0.0.0');
|
|||
|
|
onMounted(() => {
|
|||
|
|
|
|||
|
|
stopScript();
|
|||
|
|
setTimeout(() => {
|
|||
|
|
getVersion().then((res) => {
|
|||
|
|
version.value = res;
|
|||
|
|
})
|
|||
|
|
}, 500);
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
const formData = ref({
|
|||
|
|
tenantName: getUserPass() == null ? '' : getUserPass().tenantName,
|
|||
|
|
userId: getUserPass() == null ? '' : getUserPass().userId,
|
|||
|
|
password: getUserPass() == null ? '' : getUserPass().password,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
const onSubmit = () => {
|
|||
|
|
const loading = ElLoading.service({
|
|||
|
|
lock: true,
|
|||
|
|
text: 'Loading',
|
|||
|
|
background: 'rgba(0, 0, 0, 0.7)',
|
|||
|
|
});
|
|||
|
|
setUserPass(formData.value);
|
|||
|
|
getIdByName(formData.value.tenantName).then((tenantId) => {
|
|||
|
|
console.log(tenantId)
|
|||
|
|
login({
|
|||
|
|
tenantId: Number(tenantId),
|
|||
|
|
username: formData.value.userId,
|
|||
|
|
password: formData.value.password,
|
|||
|
|
}).then((res) => {
|
|||
|
|
loading.close();
|
|||
|
|
console.log(res)
|
|||
|
|
setToken(res.tokenValue);
|
|||
|
|
setUser(res);
|
|||
|
|
router.push('/nav');
|
|||
|
|
}).catch((err) => {
|
|||
|
|
loading.close();
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.main {
|
|||
|
|
width: 1600px;
|
|||
|
|
height: 900px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
/* 页面无法选中 */
|
|||
|
|
-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;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
.setup-item {
|
|||
|
|
padding: 10px 6px;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
&>div:nth-child(1) {
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: rgb(255, 255, 255);
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
padding: 20px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center-align {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center-flex {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-input__wrapper {
|
|||
|
|
--el-input-focus-border-color: rgba(255, 255, 0, 0);
|
|||
|
|
--el-menu-hover-bg-color: rgba(255, 255, 0, 0);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
::v-deep(.el-input__wrapper) {
|
|||
|
|
background-color: rgba(255, 0, 0, 0);
|
|||
|
|
box-shadow: none;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep(.el-input__inner) {
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep(.el-input__inner::placeholder) {
|
|||
|
|
color: @bg-color;
|
|||
|
|
}
|
|||
|
|
</style>
|