From 08134f2f82d399306e1209e25057fba58a4b3692 Mon Sep 17 00:00:00 2001
From: X_Rian <904416525@qq.com>
Date: Wed, 29 May 2024 10:51:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routers/modules/staticRouter.ts           |   4 +-
 .../dialogCompnnents/ai-alarm.vue             | 124 +++---
 src/views/commandScreen/indexCommand.vue      |   2 +-
 src/views/login/index.vue                     | 366 +++++++++---------
 4 files changed, 257 insertions(+), 239 deletions(-)

diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 09a23d5..d09e333 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -24,8 +24,8 @@ export const staticRouter: RouteRecordRaw[] = [
 	{
 		path: "/large",
 		name: "大屏",
-		component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
-		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
+		// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
+		component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
 		children: [
 			{
diff --git a/src/views/commandScreen/dialogCompnnents/ai-alarm.vue b/src/views/commandScreen/dialogCompnnents/ai-alarm.vue
index cfd6cdd..6515aa5 100644
--- a/src/views/commandScreen/dialogCompnnents/ai-alarm.vue
+++ b/src/views/commandScreen/dialogCompnnents/ai-alarm.vue
@@ -4,21 +4,29 @@
 			<!-- v-show="topDangerList.length > 0" -->
 			<div class="top-statistics" v-show="topDangerList.length > 0">
 				<el-scrollbar class="statistics-listBox" ref="refAlarmScrollbar">
-					<div class="statistics-item" :style="{background: `url(${bgImgSet(index)}) no-repeat`,backgroundSize: '100% 100%'}" v-for="(item,index) in topDangerList" :key="index">
-						<span class="title">{{item.alarmTypeName}}</span>
+					<div
+						class="statistics-item"
+						:style="{
+							background: `url(${bgImgSet(index)}) no-repeat`,
+							backgroundSize: '100% 100%'
+						}"
+						v-for="(item, index) in topDangerList"
+						:key="index"
+					>
+						<span class="title">{{ item.alarmTypeName }}</span>
 						<span class="statistics-item-content">今日报警次数：{{ item.alarmNumToday }}</span>
 						<span class="statistics-item-content">本月报警次数：{{ item.alarmNumMonth }}</span>
 						<span class="statistics-item-content">历史报警次数：{{ item.alarmNum }}</span>
 					</div>
 				</el-scrollbar>
 			</div>
-			<div style="position: relative; height: 180px;"  v-if="topDangerList.length == 0">
+			<div style="position: relative; height: 180px" v-if="topDangerList.length == 0">
 				<div class="notoDta">
-						<img src="@/assets/images/noData.png" alt="" />
-						<p>暂无数据</p>
-					</div>
+					<img src="@/assets/images/noData.png" alt="" />
+					<p>暂无数据</p>
+				</div>
 			</div>
-			
+
 			<div class="table-one">
 				<div class="tabList">
 					<div>序号</div>
@@ -30,7 +38,7 @@
 				</div>
 				<el-scrollbar class="listBox" ref="refScrollbar">
 					<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
-						<div>{{index + 1}}</div>
+						<div>{{ index + 1 }}</div>
 						<div class="list-img">
 							<el-image
 								fit="contain"
@@ -38,17 +46,17 @@
 								:src="BASEURL + '/image/' + item.imageUrl"
 								:preview-src-list="[BASEURL + '/image/' + item.imageUrl]"
 							>
-							<template #error>
-										<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-no-img" alt="" />
+								<template #error>
+									<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-no-img" alt="" />
 								</template>
 							</el-image>
 							<!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> -->
 						</div>
-						<div>{{item.hardwareName}}</div>
+						<div>{{ item.hardwareName }}</div>
 						<div>{{ item.alarmTypeName }}</div>
 						<!-- <div>{{item.alarmType == 1?'烟感报警':item.alarmType == 2?'明火报警':item.alarmType == 3?'人员到底报警':item.alarmType == 4?'未带安全帽报警':item.alarmType == 5?'区域入侵报警':item.alarmType == 6?'越界入侵报警':'人员聚集报警'}}</div> -->
-						<div>{{item.createTime}}</div>
-						<div style="color: #1FADC5;" @click="openDetailDialog(item)">查看详情</div>
+						<div>{{ item.createTime }}</div>
+						<div style="color: #1fadc5" @click="openDetailDialog(item)">查看详情</div>
 					</div>
 					<div class="notoDta" v-if="partyMemberList.length == 0">
 						<img src="@/assets/images/noData.png" alt="" />
@@ -65,7 +73,9 @@
 					<div class="detail-text">
 						<div class="text-box">
 							<div class="type">告警类型</div>
-							<div class="text">{{ detailData.alarmType ? getWarnName(detailData.alarmType) : "" }}</div>
+							<div class="text">
+								{{ detailData.alarmType ? getWarnName(detailData.alarmType) : "" }}
+							</div>
 						</div>
 						<div class="text-box" style="margin-top: 5%">
 							<div class="type">设备名称</div>
@@ -89,10 +99,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted } from "vue";
 import { GlobalStore } from "@/stores";
-import { getCompanyDataList, getMemberInfoList } from "@/api/modules/labor";
-import type { TabsPaneContext } from 'element-plus'
+import { getCompanyDataList } from "@/api/modules/labor";
+// import type { TabsPaneContext } from "element-plus";
 import { getAlarmTypeOption } from "@/api/modules/aIEarlyWarn";
 import noDataImage from "@/assets/images/vehicleManagement/car.png";
 import { getAlarmRecordApi, getAlarmTypeCountPageApi } from "@/api/modules/agjtCommandApi";
@@ -104,39 +114,40 @@ import bgImg5 from "@/assets/images/commandScreen/bg5.png";
 import bgImg6 from "@/assets/images/commandScreen/bg6.png";
 import bgImg7 from "@/assets/images/commandScreen/bg7.png";
 import bgImg8 from "@/assets/images/commandScreen/bg8.png";
-const bgImgList = ref([bgImg1,bgImg2,bgImg3,bgImg4,bgImg5,bgImg6,bgImg7,bgImg8])
+const bgImgList = ref([bgImg1, bgImg2, bgImg3, bgImg4, bgImg5, bgImg6, bgImg7, bgImg8]);
 const store = GlobalStore();
+// eslint-disable-next-line vue/require-prop-types, @typescript-eslint/no-unused-vars
 const props = defineProps(["tip"]);
 const BASEURL = import.meta.env.VITE_API_URL;
 let showDialog = ref(false as any);
 const enterpriseListData = ref([] as any);
-const topDangerList = ref([] as any)
+const topDangerList = ref([] as any);
 let pageNo = ref(1 as any);
 const alarmPageInfo = ref({
 	pageNo: 1
-})
+});
 let moreAlarmScroll = ref(true as any);
 const refAlarmScrollbar = ref(null as any); // 绑定到滚动的盒子上
 let moreScroll = ref(true as any);
 const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
-const detailData = ref({}  as any);
+const detailData = ref({} as any);
 const partyMemberList = ref({} as any);
 let aiAlarmTypeEnum = ref([] as any);
 // 背景图设置
-const bgImgSet = (index:any) => {
-	return bgImgList.value[index % bgImgList.value.length]
-}
+const bgImgSet = (index: any) => {
+	return bgImgList.value[index % bgImgList.value.length];
+};
 // 获取顶部数据
 const getQualityStatisticsNumDataFn = async (tip: any) => {
-	let requestData:any = {
+	let requestData: any = {
 		sn: store.sn,
 		type: 1,
-		pageNo: tip == 'search'?1:alarmPageInfo.value.pageNo,
-		pageSize: 100,
-	}
+		pageNo: tip == "search" ? 1 : alarmPageInfo.value.pageNo,
+		pageSize: 100
+	};
 	const res: any = await getAlarmTypeCountPageApi(requestData);
 	console.log("获取人员信息列表", res);
-	if(tip == 'more'){
+	if (tip == "more") {
 		topDangerList.value = topDangerList.value.concat(res.result.alarmPage.records);
 	} else {
 		topDangerList.value = res.result.alarmPage.records;
@@ -149,7 +160,7 @@ const getQualityStatisticsNumDataFn = async (tip: any) => {
 };
 //获取告警类型枚举
 const getWarnTypeOption = async () => {
-	const res: any = await getAlarmTypeOption({ projectSn: store.sn, });
+	const res: any = await getAlarmTypeOption({ projectSn: store.sn });
 	// console.log("获取告警类型", res.result);
 	let warnType = res.result.map((item: any) => {
 		return {
@@ -195,16 +206,16 @@ const getCompanyList = async () => {
 	}
 };
 //获取数据
-const getMemberCountList = async (tip:any) => {
-	let requestData:any = {
+const getMemberCountList = async (tip: any) => {
+	let requestData: any = {
 		projectSn: store.sn,
-		pageNo: tip == 'search'?1:pageNo.value,
+		pageNo: tip == "search" ? 1 : pageNo.value,
 		pageSize: 100,
-		isPushed: 1,
-	}
+		isPushed: 1
+	};
 	const res: any = await getAlarmRecordApi(requestData);
 	console.log("获取人员信息列表", res);
-	if(tip == 'more'){
+	if (tip == "more") {
 		partyMemberList.value = partyMemberList.value.concat(res.result.records);
 	} else {
 		partyMemberList.value = res.result.records;
@@ -222,8 +233,8 @@ const getMemberCountList = async (tip:any) => {
 
 onMounted(async () => {
 	await getCompanyList();
-	await getMemberCountList('search');
-	await getQualityStatisticsNumDataFn('search');
+	await getMemberCountList("search");
+	await getQualityStatisticsNumDataFn("search");
 	getWarnTypeOption();
 	refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
 		// console.log("滚动容器", e);
@@ -372,48 +383,51 @@ onMounted(async () => {
 		// background: url("@/assets/images/cardImg.png") no-repeat;
 		background-size: 100% 100%;
 		padding: 20px 15px;
-		.top-statistics{
+		.top-statistics {
 			width: 90%;
 			height: 35%;
 			color: white;
 			margin: 0 auto;
-			.statistics-listBox{
+			.statistics-listBox {
 				height: 100%;
-				:deep(){
-					.el-scrollbar__view{
+				:deep() {
+					.el-scrollbar__view {
 						display: grid;
 						grid-template-columns: repeat(4, 1fr);
 						grid-gap: 20px;
 					}
 				}
 			}
-			.statistics-item{
+			.statistics-item {
 				width: 200px;
 				// height: 95px;
 				display: flex;
 				flex-direction: column;
 				position: relative;
 				background-size: 100% 100%;
-				.title{
+				.title {
 					position: absolute;
 					top: 4%;
 					left: 4%;
 				}
-				&-content{
+				&-content {
 					display: inline-block;
 					width: 100%;
 					height: auto;
 					text-indent: 1.5em;
 				}
-				&-content:nth-child(2){
+				&-content:nth-child(2) {
 					margin-top: 15%;
 				}
-				&-content:nth-child(3){
+				&-content:nth-child(3) {
 					margin-top: 2%;
 				}
-				&-content:nth-child(4){
+				&-content:nth-child(4) {
 					margin-top: 2%;
 				}
+				&-content:last-child {
+					margin-bottom: 4%;
+				}
 				// &-content:nth-child(3){
 				// 	margin-top: 8%;
 				// }
@@ -465,7 +479,7 @@ onMounted(async () => {
 				}
 			}
 		}
-		.table-one{
+		.table-one {
 			height: 50%;
 			.tabList {
 				display: flex;
@@ -506,10 +520,10 @@ onMounted(async () => {
 								height: 100%;
 							}
 						}
-						.el-no-img{
+						.el-no-img {
 							width: 30px;
 							height: 30px;
-							}
+						}
 					}
 					div {
 						width: 17%;
@@ -523,12 +537,12 @@ onMounted(async () => {
 				}
 			}
 		}
-		:deep(){
-			.el-tabs__item{
+		:deep() {
+			.el-tabs__item {
 				color: white;
 			}
-			.el-tabs__item.is-active{
-				color: var(--el-color-primary)
+			.el-tabs__item.is-active {
+				color: var(--el-color-primary);
 			}
 		}
 	}
diff --git a/src/views/commandScreen/indexCommand.vue b/src/views/commandScreen/indexCommand.vue
index 784e2f4..db00d7a 100644
--- a/src/views/commandScreen/indexCommand.vue
+++ b/src/views/commandScreen/indexCommand.vue
@@ -67,7 +67,7 @@ let agjtCommandList = ref([
 	{
 		moduleName: "指挥部大屏",
 		modulePath: "/commandScreen"
-	},
+	}
 ]);
 
 const itemList = ref([]);
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index c917478..caa4ca2 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,47 +1,53 @@
 <template>
-		<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
-
-	<div class="loginBigImg">
-		<div class="loginTitle">
-			<div>数字化项目监管平台</div>
-			<div class="titltText">SHUZIHUAXIANGMUJIANGUANPINGTAI</div>
-		</div>
-		<div class="loginFrom">
-			<div class="inutFrom">
-				<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large">
-					<el-form-item prop="account" style="margin-bottom: 10%">
-						<el-input v-model="loginForm.account" placeholder="请输入账号">
-							<template #prefix>
-								<img src="@/assets/images/login/accountImg1.png" alt="" />
-							</template>
-						</el-input>
-					</el-form-item>
-					<el-form-item prop="password">
-						<el-input
-							type="password"
-							v-model="loginForm.password"
-							placeholder="请输入密码"
-							show-password
-							autocomplete="new-password"
-						>
-							<template #prefix>
-								<img src="@/assets/images/login/passwordImg1.png" alt="" />
-							</template>
-						</el-input>
-					</el-form-item>
-					<!-- <div class="passwordBox">
+  <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
+    <div class="loginBigImg">
+      <div class="loginTitle">
+        <div>数字化项目监管平台</div>
+        <div class="titltText">SHUZIHUAXIANGMUJIANGUANPINGTAI</div>
+      </div>
+      <div class="loginFrom">
+        <div class="inutFrom">
+          <el-form
+            ref="loginFormRef"
+            class="form"
+            :model="loginForm"
+            :rules="loginRules"
+            size="large"
+          >
+            <el-form-item prop="account" style="margin-bottom: 10%">
+              <el-input v-model="loginForm.account" placeholder="请输入账号">
+                <template #prefix>
+                  <img src="@/assets/images/login/accountImg1.png" alt="" />
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                type="password"
+                v-model="loginForm.password"
+                placeholder="请输入密码"
+                show-password
+                autocomplete="new-password"
+              >
+                <template #prefix>
+                  <img src="@/assets/images/login/passwordImg1.png" alt="" />
+                </template>
+              </el-input>
+            </el-form-item>
+            <!-- <div class="passwordBox">
 						<span><el-checkbox style="color: #fff" v-model="checked">记住密码</el-checkbox></span>
 						<span style="float: right; margin-top: 2.5%">忘记密码？</span>
 					</div> -->
-				</el-form>
-				<div style="height: 45%">
-					<el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading">登录</el-button>
-				</div>
-			</div>
-		</div>
-	</div>
-</ScaleBox>
-
+          </el-form>
+          <div style="height: 45%">
+            <el-button class="loginBtn" @click="login(loginFormRef)" :loading="loading"
+              >登录</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </ScaleBox>
 </template>
 
 <script setup lang="ts" name="logonPage">
@@ -72,203 +78,201 @@ const globalStore = GlobalStore();
 type FormInstance = InstanceType<typeof ElForm>;
 const loginFormRef = ref<FormInstance>();
 const loginRules = reactive({
-	account: [{ required: true, message: "请输入账号", trigger: "blur" }],
-	password: [{ required: true, message: "请输入密码", trigger: "blur" }]
+  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
 });
 
 const loading = ref(false);
 const loginForm = reactive<Login.ReqLoginForm>({ account: "", password: "" });
 const login = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.validate(async (valid, params) => {
-		if (!valid) return;
-		loading.value = true;
-		try {
-			const arr = ref(["/government", "/home", "/home", "/home"]);
-			// 1.执行登录接口
-			const { result } = await loginApi({ ...loginForm, password: loginForm.password });
-			console.log("执行登录接口 ：结果：=========", result);
-			globalStore.setSN(result.sn);
-			globalStore.setToken(result.token);
-			globalStore.setAccount(result.account);
-			globalStore.setAccountType(result.accountType);
-			globalStore.setProjectDateAuth(result.menuAuthority);
-			globalStore.setIsManager(result.isManager); //我已知晓
+  if (!formEl) return;
+  formEl.validate(async (valid, params) => {
+    if (!valid) return;
+    loading.value = true;
+    try {
+      const arr = ref(["/government", "/home", "/home", "/home"]);
+      // 1.执行登录接口
+      const { result } = await loginApi({ ...loginForm, password: loginForm.password });
+      console.log("执行登录接口 ：结果：=========", result);
+      globalStore.setSN(result.sn);
+      globalStore.setToken(result.token);
+      globalStore.setAccount(result.account);
+      globalStore.setAccountType(result.accountType);
+      globalStore.setProjectDateAuth(result.menuAuthority);
+      globalStore.setIsManager(result.isManager); //我已知晓
 
-			// 2.添加动态路由
-			// await initDynamicRouter();
-			// router.push(arr[result.accountType - 1]);
-			// 3.清空 tabs、keepAlive 保留的数据
-			tabsStore.closeMultipleTab();
-			keepAlive.setKeepAliveName();
+      // 2.添加动态路由
+      // await initDynamicRouter();
+      // router.push(arr[result.accountType - 1]);
+      // 3.清空 tabs、keepAlive 保留的数据
+      tabsStore.closeMultipleTab();
+      keepAlive.setKeepAliveName();
 
-			if (COMPANY === "agjtCommand") {
-				// menuList.value = AGJTCommandMenu;
-				if(![5,10].includes(result.accountType)){
-					ElMessage({
-						message: "账号类型不匹配",
-						type: "warning"
-					});
-					return;
-				}
-				router.push("/commandScreen");
-			} else {
-				router.push("/projectOverview");
-			}
-			// router.push(arr.value[result.accountType - 1]);
-			// 4.跳转到首页
+      if (COMPANY === "agjtCommand") {
+        // menuList.value = AGJTCommandMenu;
+        if (![5, 10].includes(result.accountType)) {
+          ElMessage({
+            message: "账号类型不匹配",
+            type: "warning",
+          });
+          return;
+        }
+        router.push("/commandScreen");
+      } else {
+        router.push("/projectOverview");
+      }
+      // router.push(arr.value[result.accountType - 1]);
+      // 4.跳转到首页
 
-			// ElNotification({
-			// 	title: getTimeState(),
-			// 	message: "欢迎登录",
-			// 	type: "success",
-			// 	duration: 3000
-			// });
-			// return router.go(0);
-		} finally {
-			loading.value = false;
-		}
-	});
+      // ElNotification({
+      // 	title: getTimeState(),
+      // 	message: "欢迎登录",
+      // 	type: "success",
+      // 	duration: 3000
+      // });
+      // return router.go(0);
+    } finally {
+      loading.value = false;
+    }
+  });
 };
 
 // resetForm
 const resetForm = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.resetFields();
+  if (!formEl) return;
+  formEl.resetFields();
 };
 
 onMounted(async () => {
-	
-
-	// 监听enter事件（调用登录）
-	document.onkeydown = (e: any) => {
-		e = window.event || e;
-		if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
-			if (loading.value) return;
-			login(loginFormRef.value);
-		}
-	};
+  // 监听enter事件（调用登录）
+  document.onkeydown = (e: any) => {
+    e = window.event || e;
+    if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
+      if (loading.value) return;
+      login(loginFormRef.value);
+    }
+  };
 });
 // login页面销毁时，需要去掉enter监听
 onBeforeUnmount(() => {
-	document.onkeydown = null;
+  document.onkeydown = null;
 });
 </script>
 
 <style lang="scss" scoped>
 .loginBigImg {
-	width: 100%;
-	height: 100%;
-	background: url("@/assets/images/login/loginImg.gif") no-repeat;
-	background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  background: url("@/assets/images/login/loginImg.gif") no-repeat;
+  background-size: 100% 100%;
 
-	.loginTitle {
-		width: 20%;
-		top: 30%;
-		position: relative;
-		left: 70%;
-		font-size: 40px;
-		color: #65c4f9;
-		font-family: "pmzd";
-		background-image: linear-gradient(to right, #65c4f9, #82fbea);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
+  .loginTitle {
+    width: 20%;
+    top: 30%;
+    position: relative;
+    left: 70%;
+    font-size: 40px;
+    color: #65c4f9;
+    font-family: "pmzd";
+    background-image: linear-gradient(to right, #65c4f9, #82fbea);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 
-		.titltText {
-			margin-top: 2%;
-			font-size: 17px;
-			font-family: "normal";
-		}
-	}
+    .titltText {
+      margin-top: 2%;
+      font-size: 17px;
+      font-family: "normal";
+    }
+  }
 
-	.loginFrom {
-		width: 22%;
-		height: 35%;
-		position: relative;
-		top: 33%;
-		left: 68%;
-		background: url("@/assets/images/login/loginFormImg.png") no-repeat;
-		background-size: 100% 100%;
+  .loginFrom {
+    width: 22%;
+    height: 35%;
+    position: relative;
+    top: 33%;
+    left: 68%;
+    background: url("@/assets/images/login/loginFormImg.png") no-repeat;
+    background-size: 100% 100%;
 
-		.inutFrom {
-			width: 80%;
-			height: 68%;
-			position: absolute;
-			top: 18%;
-			left: 10%;
-			color: #fff;
+    .inutFrom {
+      width: 80%;
+      height: 68%;
+      position: absolute;
+      top: 18%;
+      left: 10%;
+      color: #fff;
 
-			.passwordBox {
-				font-family: SourceHanSansCN-Regular;
-				color: #fff;
-				font-size:14px;
-				margin-top: -4%;
-			}
-		}
+      .passwordBox {
+        font-family: SourceHanSansCN-Regular;
+        color: #fff;
+        font-size: 14px;
+        margin-top: -4%;
+      }
+    }
 
-		.loginBtn {
-			width: 100%;
-			height: 45%;
-			color: #eeeeee;
-			font-family: SourceHanSansCN-Regular;
-			font-size: 20px;
-			border: none !important;
-			border-radius: 0 !important;
-			background: linear-gradient(to right, #2758c0 0.5%, #65d7f9 99%);
-			margin-top: 2%;
-		}
-	}
+    .loginBtn {
+      width: 100%;
+      height: 45%;
+      color: #eeeeee;
+      font-family: SourceHanSansCN-Regular;
+      font-size: 20px;
+      border: none !important;
+      border-radius: 0 !important;
+      background: linear-gradient(to right, #2758c0 0.5%, #65d7f9 99%);
+      margin-top: 2%;
+    }
+  }
 }
 
 ::v-deep .el-input__wrapper {
-	background: #2758c0;
-	background: rgba(39, 88, 192, 0.4);
-	box-shadow: none;
-	border: 1px solid #2758c0;
-	border-radius: 0 !important;
+  background: #2758c0;
+  background: rgba(39, 88, 192, 0.4);
+  box-shadow: none;
+  border: 1px solid #2758c0;
+  border-radius: 0 !important;
 }
 
 ::v-deep .el-input__inner {
-	color: #fff;
-	font-size: 16px;
-	font-family: SourceHanSansCN-Regular;
+  color: #fff;
+  font-size: 16px;
+  font-family: SourceHanSansCN-Regular;
 }
 
 ::v-deep .el-input {
-	height: 110%;
+  height: 110%;
 }
 
 ::v-deep .el-input__prefix {
-	width: 10%;
-	border-right: 1px solid #2758c0;
-	margin-right: 5%;
+  width: 10%;
+  border-right: 1px solid #2758c0;
+  margin-right: 5%;
 }
 
 ::v-deep .el-input .el-input__icon {
-	color: #3676ff;
+  color: #3676ff;
 }
 
 ::v-deep .el-input .el-input__icon:hover {
-	color: #3676ff;
+  color: #3676ff;
 }
 
 ::v-deep .el-checkbox__inner {
-	border-color: #2758c0;
-	background: #2758c0;
-	background: rgba(39, 88, 192, 0.4);
+  border-color: #2758c0;
+  background: #2758c0;
+  background: rgba(39, 88, 192, 0.4);
 }
 
 ::v-deep .el-input__inner:-webkit-autofill {
-	transition: background-color 50000s ease-in-out 0s;
-	-webkit-text-fill-color: #fff; //记住密码的颜色
-	caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色
+  transition: background-color 50000s ease-in-out 0s;
+  -webkit-text-fill-color: #fff; //记住密码的颜色
+  caret-color: #fff; //改变输入框光标颜色,同时又不改变输入框里面的内容的颜色
 }
 
 //鼠标聚焦修改图标颜色
 ::v-deep .el-input__inner:focus {
-	.el-input__prefix-inner {
-		img {
-		}
-	}
+  .el-input__prefix-inner {
+    img {
+    }
+  }
 }
 </style>