fix: 样式调整

src/assets/json/dynamicRouter.json

@@ -1,20 +1,6 @@
 {
 	"code": 200,
 	"result": [
-		{
-			"path": "/largeScreen",
-			"name": "largeScreen",
-			"component": "/goverment/largeScreen/index",
-			"meta": {
-				"icon": "leftGover",
-				"title": "首页",
-				"isLink": "",
-				"isHide": false,
-				"isFull": true,
-				"isAffix": true,
-				"isKeepAlive": true
-			}
-		},
 		{
 			"path": "/config",
 			"name": "config",

src/components/layoutTop/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="back-model">
+	<div class="back-model" v-if="globalStore.contentType == 1">
 		<el-header>
 			<div class="header-lf">
 				<div @click="goHome" class="logo flx-center">
@@ -12,11 +12,11 @@
 			</div>
 			<img class="angel" src="@/assets/images/Mars3DIcon/Rectangle.png" alt="" />
 			<div class="header-menu">
-				<div @click="router.push('/largeScreen')" :class="route.path == '/largeScreen' ? 'selected-class' : ''">
+				<div @click="toCenter" :class="route.path == '/largeScreen' ? 'selected-class' : ''">
 					<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
 					<span>首页</span>
 				</div>
-				<div @click="router.push('/config')" :class="route.path == '/config' ? 'selected-class' : ''">
+				<div @click="router.push('/config')" :class="route.path != '/largeScreen' ? 'selected-class' : ''">
 					<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
 					<span>信息展示</span>
 				</div>
@@ -25,7 +25,7 @@
 			<ToolBarRight />
 		</el-header>
 	</div>
-	<div class="front-model" v-if="false">
+	<div class="front-model" v-if="globalStore.contentType == 2">
 		<el-header>
 			<div class="date-content">
 				<span>2023-10-25</span>
@@ -44,10 +44,16 @@ import { useRoute, useRouter } from "vue-router";
 import { GlobalStore } from "@/stores";
 import { HOME_URL } from "@/enums/Home";
 import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
+const emits = defineEmits(["toCenter"]);
 const route = useRoute();
 const router = useRouter();
 const globalStore = GlobalStore();
 const moduleTitle = globalStore.moduleName;
+// 跳转到地图中心点
+const toCenter = () => {
+	emits("toCenter");
+	router.push("/largeScreen");
+};
 const goHome = () => {
 	router.push(HOME_URL[globalStore.accountType - 1]);
 };

src/config/config.ts

@@ -1,7 +1,7 @@
 // ? 全局不动配置项 只做导出不做修改
 
-// * 首页地址（默认）
+// * 配置中心（默认）
-export const HOME_URL: string = "/largeScreen";
+export const HOME_URL: string = "/config";
 
 // * 登录页地址（默认）
 export const LOGIN_URL: string = "/login";

src/enums/Home/index.ts

@@ -1 +1 @@
-export const HOME_URL: string[] = ["/largeScreen", "/home", "/home", "/home"];
+export const HOME_URL: string[] = ["/config", "/home", "/home", "/home"];

src/layouts/LayoutClassic/index.vue

@@ -17,7 +17,7 @@
 					<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
 					<span>首页</span>
 				</div>
-				<div @click="router.push('/config')" :class="route.path == '/config' ? 'selected-class' : ''">
+				<div @click="router.push('/config')" :class="route.path != '/largeScreen' ? 'selected-class' : ''">
 					<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
 					<span>信息展示</span>
 				</div>

src/routers/modules/staticRouter.ts

@@ -25,7 +25,16 @@ export const staticRouter: RouteRecordRaw[] = [
 		name: "frontLargeScreen",
 		component: () => import("@/views/goverment/frontLargeScreen/index.vue"),
 		meta: {
-			title: "首页",
+			title: "前台首页",
+			showSidebar: false
+		}
+	},
+	{
+		path: "/largeScreen",
+		name: "largeScreen",
+		component: () => import("@/views/goverment/largeScreen/index.vue"),
+		meta: {
+			title: "后台首页",
 			showSidebar: false
 		}
 	},

src/stores/index.ts

@@ -17,6 +17,7 @@ export const GlobalStore = defineStore({
 		account: "",
 		moduleId: "", //模块id
 		accountType: undefined, //登录账号类型
+		contentType: undefined, // 登录选择的内容类型(后台：1/前台：2)
 		moduleName: "", //登录账号类型
 		// 都是控制退出或者修改密码的时候遮挡视频的问题
 		editPassword: false,
@@ -87,6 +88,9 @@ export const GlobalStore = defineStore({
 		setAccountType(accountType: number | undefined) {
 			this.accountType = accountType;
 		},
+		setContentType(contentType: number | undefined) {
+			this.contentType = contentType;
+		},
 		setAccount(account: string | null) {
 			this.account = account;
 		},
@@ -131,6 +135,7 @@ export const GlobalStore = defineStore({
 			this.token = null;
 			this.moduleId = null;
 			this.accountType = undefined;
+			this.contentType = undefined;
 			this.account = null;
 			this.userInfo = null;
 			this.projectDateAuth = null;

src/stores/interface/index.ts

@@ -4,6 +4,7 @@ export interface GlobalState {
 	token: string | null;
 	userInfo: any | null;
 	accountType: number | undefined;
+	contentType: number | undefined;
 	moduleId: string | null;
 	account: string | null;
 	assemblySize: AssemblySizeType | "";

src/views/goverment/frontLargeScreen/index.vue

@@ -833,8 +833,6 @@ const initMars3d = (option: any) => {
 	getPointPosition();
 	// 查询配置线效果
 	getLineEffect();
-	// 飞到地图中心
-	map.flyHome();
 };
 // 取区域内的随机点
 const randomPoint = (position: any) => {

src/views/login/index.scss

@@ -52,38 +52,168 @@
 		}
 	}
 	.login-pannel {
-		width: 380px;
+		width: 672px;
-		height: 500px;
+		height: 470px;
-		position: fixed;
+		margin-top: 100px;
-		right: 75px;
+		background-image: url("@/assets/images/login/login-form-border.png");
-		top: 50%;
-		transform: translateY(-46.5%);
-		background-image: url("@/assets/images/login/login-content-bg.png");
 		background-size: 100% 100%;
 		background-repeat: no-repeat;
-		padding: 30px 30px 0;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 		&_text {
-			font-size: 30px;
+			font-size: 22px;
-			font-family: Source Han Sans CN;
+			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
-			font-weight: 700;
+			font-weight: 500;
-			color: #fff;
+			line-height: 28px;
+			letter-spacing: 2px;
+			text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.25);
+			background: linear-gradient(180deg, #ffffff 0%, #87cbff 100%);
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+			margin-top: 25px;
+			margin-right: 4px;
 		}
-		:deep() {
+		.form {
-			.el-input__wrapper {
+			width: 422px;
-				background-color: rgba(255, 255, 255, 0.1);
+			margin-top: 70px;
-				box-shadow: none;
+			:deep() {
+				.el-input__wrapper {
+					background-color: rgba(255, 255, 255, 0.1);
+					box-shadow: none;
+					padding: 0;
+					margin: 0;
+					width: 422px;
+					height: 56px;
+					background: rgba(39, 88, 192, 0.3);
+					border-radius: 0px 0px 0px 0px;
+					opacity: 1;
+					border: 2px solid #2758c0;
+				}
+				.el-input__prefix {
+					width: 56px;
+					height: 100%;
+					opacity: 1;
+					border-right: 2px solid #2758c0;
+					.el-input__prefix-inner {
+						margin: 0 auto;
+						img {
+							width: 18px;
+							height: 18px;
+							margin: 0;
+						}
+					}
+				}
+				.el-input__inner {
+					color: #fff;
+					padding-left: 15px;
+					font-size: 16px;
+				}
+				.el-form-item--large:not(:last-child) {
+					margin-bottom: 30px;
+				}
+				.el-form-item--large:last-child {
+					margin-bottom: 10px;
+				}
+				.el-input__suffix {
+					margin-right: 15px;
+					.el-icon {
+						font-size: 16px;
+						color: #3676ff;
+					}
+				}
 			}
-			.el-input__inner {
+		}
-				color: #fff;
+		.other-operate {
+			width: 422px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			> span {
+				font-size: 14px;
+				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.7);
+			}
+			:deep() {
+				.el-checkbox__inner {
+					background: rgba(39, 88, 192, 0.3);
+					border: 1px solid #2758c0;
+				}
+				.el-checkbox__label {
+					color: rgba(255, 255, 255, 0.7);
+				}
+			}
+		}
+		.login-btn {
+			margin-top: 25px;
+			width: 422px;
+			:deep() {
+				.el-button {
+					width: 100%;
+					height: 50px;
+					background: linear-gradient(90deg, #2758c0 0%, #65d7f9 100%);
+					border-radius: 0;
+					border: 0;
+					span {
+						font-size: 18px;
+						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+						font-weight: 500;
+						color: #ffffff;
+						line-height: 23px;
+						letter-spacing: 10px;
+					}
+				}
 			}
 		}
 	}
-	.login-btn {
+	.type-select {
-		margin-top: 40px;
+		width: 1142px;
-		width: 100%;
+		height: 510px;
-		:deep() {
+		margin-top: 100px;
-			.el-button {
+		background-image: url("@/assets/images/login/type-bg.png");
-				width: 100%;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		&-item:not(:last-child) {
+			margin-right: 20px;
+		}
+		&-item {
+			width: 270px;
+			height: 370px;
+			margin-top: 36px;
+			background-image: url("@/assets/images/login/type-item-bg.png");
+			background-size: 100% 100%;
+			background-repeat: no-repeat;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			cursor: pointer;
+			img {
+				width: 66px;
+				height: 58px;
+				margin-bottom: 33px;
+			}
+			span {
+				display: inline-block;
+				width: 182px;
+				height: 23px;
+				font-size: 32px;
+				font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
+				font-weight: 400;
+				color: #ffffff;
+				line-height: 5px;
+				text-align: center;
+				letter-spacing: 1px;
+				background-image: url("@/assets/images/login/type-name-bg.png");
+				background-size: 100% 100%;
+				background-repeat: no-repeat;
+				position: absolute;
+				bottom: 20px;
 			}
 		}
 	}

src/views/login/index.vue

@@ -4,9 +4,9 @@
 			<div class="login-title">佳信捷30综合态势展示系统</div>
 			<div class="login-title-bg"></div>
 		</div>
-		<!-- <div class="login-pannel">
+		<div class="login-pannel" v-if="!nonLogin">
-			<p class="login-pannel_text">欢迎登录！</p>
+			<div class="login-pannel_text">系统登录</div>
-			<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large">
+			<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large" :show-message="false">
 				<el-form-item prop="account">
 					<el-input v-model="loginForm.account" placeholder="请输入账号">
 						<template #prefix>
@@ -28,15 +28,34 @@
 					</el-input>
 				</el-form-item>
 			</el-form>
+			<div class="other-operate">
+				<el-checkbox>记住密码</el-checkbox>
+				<span>忘记密码?</span>
+			</div>
 			<div class="login-btn">
 				<el-button @click="login(loginFormRef)" type="primary" size="large"> 登录 </el-button>
 			</div>
-		</div> -->
+		</div>
+		<div class="type-select" v-else>
+			<div class="type-select-item" @click="toBackLargeScreen">
+				<img src="@/assets/images/login/type-icon-1.png" alt="" srcset="" />
+				<span>企业后台</span>
+			</div>
+			<div class="type-select-item" @click="toFrontLargeScreen">
+				<img src="@/assets/images/login/type-icon-2.png" alt="" srcset="" />
+				<span>企业前台</span>
+			</div>
+			<!-- <div class="type-select-item">
+				<img src="@/assets/images/login/type-icon-3.png" alt="" srcset="" />
+				<span>企业后台</span>
+			</div> -->
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts" name="login">
 import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
+import { ElMessage } from "element-plus";
 import { useRouter } from "vue-router";
 import { Login } from "@/api/interface";
 import { loginApi } from "@/api/modules/login";
@@ -45,7 +64,7 @@ import { TabsStore } from "@/stores/modules/tabs";
 import { KeepAliveStore } from "@/stores/modules/keepAlive";
 import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
 import type { ElForm } from "element-plus";
-
+const nonLogin = ref(false);
 const router = useRouter();
 const tabsStore = TabsStore();
 const keepAlive = KeepAliveStore();
@@ -64,10 +83,13 @@ const loginForm = reactive<Login.ReqLoginForm>({ account: "", showPassword: "" }
 const login = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.validate(async (valid, params) => {
-		if (!valid) return;
+		if (!valid) {
+			ElMessage.error("请输入账号密码");
+			return;
+		}
 		loading.value = true;
 		try {
-			const arr = ref(["/largeScreen", "/home", "/home", "/home"]);
+			const arr = ref(["/config", "/home", "/home", "/home"]);
 			// 1.执行登录接口
 			const { result } = await loginApi({ ...loginForm, showPassword: loginForm.showPassword });
 			console.log(result);
@@ -84,13 +106,13 @@ const login = (formEl: FormInstance | undefined) => {
 			// 3.清空 tabs、keepAlive 保留的数据
 			tabsStore.closeMultipleTab();
 			keepAlive.setKeepAliveName();
-
+			nonLogin.value = true;
-			if (result.accountType === 1) {
+			// if (result.accountType === 1) {
-				await initDynamicRouter();
+			// 	await initDynamicRouter();
-				router.push(arr.value[result.accountType - 1]);
+			// 	router.push(arr.value[result.accountType - 1]);
-			} else {
+			// } else {
-				router.push(arr.value[result.accountType - 1]);
+			// 	router.push(arr.value[result.accountType - 1]);
-			}
+			// }
 			// router.go(0);
 			// router.push(arr.value[result.accountType - 1]);
 			// 4.跳转到首页
@@ -107,6 +129,16 @@ const login = (formEl: FormInstance | undefined) => {
 		}
 	});
 };
+// 跳转到后台系统
+const toBackLargeScreen = () => {
+	globalStore.setContentType(1);
+	router.push("/largeScreen");
+};
+// 跳转到前台系统
+const toFrontLargeScreen = () => {
+	globalStore.setContentType(2);
+	router.push("/frontLargeScreen");
+};
 onMounted(() => {
 	// 监听enter事件（调用登录）
 	document.onkeydown = (e: any) => {