fix: 修复退出登录之后显示的登录页图片错误的问题

src/views/login/index.vue

@@ -1,22 +1,12 @@
 <template>
-	<div class="login-container flex-row">
-		<el-switch
-			class="switch"
-			v-model="getThemeConfig.isIsDark"
-			size="large"
-			inline-prompt
-			@change="onAddDarkChange"
-			:active-icon="Sunny"
-			:inactive-icon="Moon"
-			style="--el-switch-on-color: #fff; --el-switch-off-color: #151515"
-		></el-switch>
+	<div class="login-container flex-row" v-if="showImg">
+		<el-switch class="switch" v-model="getThemeConfig.isIsDark" size="large" inline-prompt @change="onAddDarkChange" :active-icon="Sunny" :inactive-icon="Moon" style="--el-switch-on-color: #fff; --el-switch-off-color: #151515"></el-switch>
 		<div class="part left">
 			<div class="flex logo">
-				<el-image v-if="sysinfo.systemLogo" class="logoimg" :src="sysinfo.systemLogo" />
-				<el-image v-else class="logoimg" src="/imgs/logo.png" />
-				{{ sysinfo.systemName }}</div>
-			<el-image class="img" v-if="sysinfo.systemLoginPIC" :src="sysinfo.systemLoginPIC" />
-			<el-image class="img" v-else src="/imgs/login-box-bg.svg" />
+				<el-image class="logoimg" :src="sysinfo.systemLogo" />
+				{{ sysinfo.systemName }}
+			</div>
+			<el-image class="img" :src="sysinfo.systemLoginPIC" />
 			<span class="text" v-if="sysinfo.buildTime">{{ sysinfo.buildVersion }} </span>
 			<span class="text" v-if="sysinfo.buildTime">{{ dayjs(sysinfo.buildTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
 		</div>
@@ -34,6 +24,8 @@ import { useStore } from '/@/store/index';
 import logoMini from '/imgs/logo.png';
 import { Sunny, Moon } from '@element-plus/icons-vue';
 import dayjs from 'dayjs';
+import CloseFull from '/@/layout/navBars/breadcrumb/closeFull.vue';
+import api from '/@/api/system';
 
 // 定义接口来定义对象的类型
 interface LoginState {
@@ -51,6 +43,7 @@ export default defineComponent({
 			Sunny,
 			Moon,
 			dayjs,
+			showImg: false,
 			sysinfo: {
 				buildVersion: '',
 				systemName: '',
@@ -62,7 +55,9 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		this.sysinfo = JSON.parse(localStorage.sysinfo || '{}');
+		api.sysinfo().then((res: any) => {
+			this.sysinfo = res
+		}).finally(() => this.showImg = true)
 	},
 	setup() {
 		const store = useStore();
@@ -102,50 +97,61 @@ html[data-theme='dark'] {
 	.login-container {
 		background: #293146;
 	}
+
 	.left {
 		background-image: url(/@/assets/login-bg-dark.svg);
 	}
+
 	.title {
 		color: #aaa;
 	}
 }
+
 .flex {
 	display: flex;
 	align-items: center;
 }
+
 .text {
 	color: #fff;
 }
+
 .switch {
 	position: fixed;
 	right: 20px;
 	top: 20px;
 }
+
 .login-container {
 	width: 100vw;
 	height: 100vh;
 	position: relative;
 	background: #fff;
+
 	.title {
 		font-size: 30px;
 		color: #333;
 		font-weight: bold;
 		letter-spacing: 20px;
 	}
+
 	.logo {
 		font-size: 30px;
 		color: #fff;
+
 		.logoimg {
 			height: 50px;
 			display: block;
 			margin-right: 12px;
 		}
 	}
+
 	.img {
 		width: 50%;
 		display: block;
 		margin: 15vh 0;
 	}
+
 	.part {
 		flex: 1;
 		display: flex;
@@ -153,6 +159,7 @@ html[data-theme='dark'] {
 		justify-content: center;
 		align-items: center;
 	}
+
 	.left {
 		height: 100vh;
 		background-image: url(/@/assets/login-bg.svg);
@@ -162,24 +169,29 @@ html[data-theme='dark'] {
 		align-items: flex-start;
 		padding-left: 8%;
 	}
+
 	.login-icon-group {
 		width: 100%;
 		height: 100%;
 		position: relative;
+
 		.login-icon-group-title {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			margin: 12px 0;
+
 			img {
 				width: auto;
 				height: 40px;
 			}
+
 			&-text {
 				padding-left: 20px;
 				color: var(--el-color-primary);
 			}
 		}
+
 		&-icon {
 			width: 60%;
 			height: 70%;
@@ -188,11 +200,13 @@ html[data-theme='dark'] {
 			bottom: 0;
 		}
 	}
+
 	.login-content-out {
 		width: 100%;
 		height: 100%;
 		padding-top: calc(50vh - 227px);
 	}
+
 	.login-content {
 		width: 500px;
 		padding: 20px;
@@ -203,9 +217,11 @@ html[data-theme='dark'] {
 		overflow: hidden;
 		z-index: 1;
 		position: relative;
+
 		.login-content-main {
 			margin: 0 auto;
 			width: 80%;
+
 			.login-content-title {
 				color: var(--el-text-color-primary);
 				font-weight: 500;
@@ -219,6 +235,7 @@ html[data-theme='dark'] {
 				transition: all 0.3s ease;
 			}
 		}
+
 		.login-content-main-sacn {
 			position: absolute;
 			top: 0;
@@ -229,6 +246,7 @@ html[data-theme='dark'] {
 			cursor: pointer;
 			transition: all ease 0.3s;
 			color: var(--el-text-color-primary);
+
 			&-delta {
 				position: absolute;
 				width: 35px;
@@ -239,11 +257,13 @@ html[data-theme='dark'] {
 				background: var(--el-color-white);
 				transform: rotate(-45deg);
 			}
+
 			&:hover {
 				opacity: 1;
 				transition: all ease 0.3s;
 				color: var(--el-color-primary) !important;
 			}
+
 			i {
 				width: 47px;
 				height: 50px;
@@ -255,13 +275,16 @@ html[data-theme='dark'] {
 			}
 		}
 	}
+
 	.login-footer {
 		position: absolute;
 		bottom: 5px;
 		width: 100%;
+
 		&-content {
 			width: 100%;
 			display: flex;
+
 			&-warp {
 				margin: auto;
 				color: #e0e3e9;