优化
This commit is contained in:
pengxiaolong
@@ -1,356 +1,351 @@
|
||||
<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>
|
||||
<span>
|
||||
网络设置
|
||||
</span>
|
||||
</div>
|
||||
<div class="setup-item center-justify">
|
||||
<div></div>
|
||||
<span>
|
||||
简体中文
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-line" style="margin-top: 40px;">
|
||||
<!-- logo -->
|
||||
<div class="logo">
|
||||
<!-- <div class="center-justify" style="height: 80px; width: 300px;">
|
||||
<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>
|
||||
<span> 网络设置 </span>
|
||||
</div>
|
||||
<div class="setup-item center-justify">
|
||||
<div></div>
|
||||
<span> 简体中文 </span>
|
||||
</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> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- From -->
|
||||
<div class="from">
|
||||
<div class="from-title center-justify">
|
||||
<div>账号登陆</div>
|
||||
</div>
|
||||
<!-- From -->
|
||||
<div class="from">
|
||||
<div class="from-title center-justify">
|
||||
<div>账号登陆</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="租户名称"
|
||||
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="账号" 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="密码" show-password @keyup.enter="onSubmit" />
|
||||
</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="租户名称"
|
||||
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="账号"
|
||||
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="密码"
|
||||
show-password
|
||||
@keyup.enter="onSubmit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="from-input-item">
|
||||
<el-button class="loginButton" color="#8f7ee7" type="primary"
|
||||
@click="onSubmit">登录</el-button>
|
||||
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="version center-justify ">版本号：{{ version }}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="from-input-item">
|
||||
<el-button
|
||||
class="loginButton"
|
||||
color="#8f7ee7"
|
||||
type="primary"
|
||||
@click="onSubmit"
|
||||
>登录</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="version center-justify">版本号：{{ version }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { login, rentgetloginID } from '@/api/account';
|
||||
import { getToken, setToken, setUser, setUserPass, getUserPass } from '@/utils/storage';
|
||||
import { ElLoading } from 'element-plus';
|
||||
import { usePythonBridge } from '@/utils/pythonBridge'
|
||||
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { login, rentgetloginID } from "@/api/account";
|
||||
import { getToken, setToken, setUser, setUserPass, getUserPass } from "@/utils/storage";
|
||||
import { ElLoading } from "element-plus";
|
||||
import { usePythonBridge } from "@/utils/pythonBridge";
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { tokenStore,UserStore } from '@/stores/notice'
|
||||
|
||||
const tokenCache = tokenStore()
|
||||
const userCache = UserStore()
|
||||
const { getVersion } = usePythonBridge();
|
||||
let version = ref('0.0.0');
|
||||
|
||||
// 测试 localStorage
|
||||
const testLocalStorage = () => {
|
||||
try {
|
||||
// 尝试设置一个测试项
|
||||
localStorage.setItem('testKey', 'testValue');
|
||||
// 尝试获取这个测试项
|
||||
const testValue = localStorage.getItem('testKey');
|
||||
if (testValue === 'testValue') {
|
||||
} else {
|
||||
console.error('localStorage is not working');
|
||||
ElMessage.error('localStorage 被禁用');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('localStorage is not available:', error);
|
||||
ElMessage.error('localStorage 不可用');
|
||||
}
|
||||
};
|
||||
let version = ref("0.0.0");
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
getVersion().then((res) => {
|
||||
version.value = res;
|
||||
});
|
||||
getpassword();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
getVersion().then((res) => {
|
||||
version.value = res;
|
||||
})
|
||||
// 测试localStorage;
|
||||
testLocalStorage();
|
||||
}, 500);
|
||||
|
||||
})
|
||||
|
||||
async function getpassword(){
|
||||
const res = await getUserPass();
|
||||
formData.value = {
|
||||
tenantName: res == null ? "" : res.tenantName,
|
||||
userId: res == null ? "" : res.userId,
|
||||
password: res == null ? "" : res.password,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const formData = ref({
|
||||
tenantName: getUserPass() == null ? '' : getUserPass().tenantName,
|
||||
userId: getUserPass() == null ? '' : getUserPass().userId,
|
||||
password: getUserPass() == null ? '' : getUserPass().password,
|
||||
});
|
||||
|
||||
|
||||
const formData = ref({});
|
||||
|
||||
const onSubmit = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
setUserPass(formData.value);
|
||||
rentgetloginID({
|
||||
name: formData.value.tenantName,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: "Loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
setUserPass(formData.value);
|
||||
rentgetloginID({
|
||||
name: formData.value.tenantName,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
|
||||
login({
|
||||
username: formData.value.userId,
|
||||
tenantId: res,
|
||||
password: formData.value.password,
|
||||
}).then((res) => {
|
||||
loading.close();
|
||||
console.log(res)
|
||||
setToken(res.tokenValue);
|
||||
setUser(res);
|
||||
router.push('/nav');
|
||||
}).catch((err) => {
|
||||
loading.close();
|
||||
});
|
||||
|
||||
}).catch((err) => {
|
||||
loading.close();
|
||||
console.log(err)
|
||||
});
|
||||
login({
|
||||
username: formData.value.userId,
|
||||
tenantId: res,
|
||||
password: formData.value.password,
|
||||
})
|
||||
.then((res) => {
|
||||
loading.close();
|
||||
console.log(res);
|
||||
setToken(res.tokenValue);
|
||||
tokenCache.setToken(res.tokenValue)
|
||||
userCache.setUser(res)
|
||||
setUser(res);
|
||||
router.push("/nav");
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.close();
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.close();
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.main {
|
||||
width: 1600px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
/* 页面无法选中 */
|
||||
-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;
|
||||
.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;
|
||||
/* 防止内容溢出 */
|
||||
.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;
|
||||
.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;
|
||||
|
||||
.background-video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
/* 确保视频在内容之下 */
|
||||
}
|
||||
.setup-item {
|
||||
padding: 10px 6px;
|
||||
display: flex;
|
||||
|
||||
.setup {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
div {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setup-item {
|
||||
padding: 10px 6px;
|
||||
display: flex;
|
||||
.logo {
|
||||
padding: 20px 0;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.from {
|
||||
width: 420px;
|
||||
// height: 320px;
|
||||
color: @bg-color;
|
||||
background-color: #ffffff44;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #fff;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.logo {
|
||||
padding: 20px 0;
|
||||
height: 80px;
|
||||
}
|
||||
.from-title {
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: @bg-color;
|
||||
line-height: 37px;
|
||||
|
||||
.from {
|
||||
width: 420px;
|
||||
// height: 320px;
|
||||
color: @bg-color;
|
||||
background-color: #ffffff44;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #fff;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
// border-bottom: 4px solid #1db97d;
|
||||
}
|
||||
}
|
||||
|
||||
.from-title {
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: @bg-color;
|
||||
line-height: 37px;
|
||||
.from-input {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
|
||||
.from-input-item {
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
|
||||
div {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
// border-bottom: 4px solid #1db97d;
|
||||
}
|
||||
}
|
||||
.from-input-item-title {
|
||||
color: @bg-color;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.from-input {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
.loginButton {
|
||||
width: 359px;
|
||||
height: 50px;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
border: 1px solid #ffffff;
|
||||
|
||||
.from-input-item {
|
||||
display: flex;
|
||||
padding: 8px 0;
|
||||
font-family: Source Han Sans SC;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: @bg-color;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center-justify {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center-align {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.center-flex {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
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);
|
||||
|
||||
--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;
|
||||
|
||||
background-color: rgba(255, 0, 0, 0);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
::v-deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep(.el-input__inner::placeholder) {
|
||||
color: @bg-color;
|
||||
color: @bg-color;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user