Fix: 修改演示平台机械设备智能安全帽模块

src/views/sevenLargeScreen/digitalConstruction/equipmentPosition/index.vue

@@ -158,7 +158,7 @@
 										</el-checkbox-group>
 									</el-scrollbar>
 								</div>
-								<div v-else style="text-align: center; margin-top: 100px; color: #fff">暂无围栏</div>
+								<div v-else style="text-align: center; margin-top: 65px; color: #fff">暂无围栏</div>
 							</div>
 							<!-- 创建围栏弹窗 -->
 							<div class="fenceCreate" v-if="fenceCreateShow">
@@ -168,7 +168,7 @@
 									</div>
 									<!-- <div class="fence-title">创建围栏</div> -->
 									<el-form size="medium" :model="addForm" ref="addFormRef" label-width="80px" :rules="formFenceRules">
-										<div class="bigFormBox">
+										<!-- <div class="bigFormBox">
 											<div class="itemBox1">
 												<div>围栏名称</div>
 												<div><el-input v-model="addForm.fenceName" placeholder="请输入"></el-input></div>
@@ -201,20 +201,19 @@
 											<div class="itemBox4" v-if="addForm.rangeType === 2">
 												<div>围栏形状</div>
 												<div>
-													<!-- <div class="fence-shape">多边形</div> -->
 													<div class="">多边形</div>
 												</div>
 											</div>
-										</div>
+										</div> -->
 
-										<!-- <el-form-item class="el-form-item__label" label="围栏名称" prop="fenceName">
+										<div style="margin-top: 15%">
+											<el-form-item class="el-form-item__label" label="围栏名称" prop="fenceName">
 												<el-input v-model="addForm.fenceName" placeholder="请输入"></el-input>
 											</el-form-item>
-
 											<el-form-item label="范围类型" prop="rangeType">
 												<el-radio-group
 													v-model="addForm.rangeType"
-												style="display: flex; justify-content: space-between; padding-top: 10px; padding-right: 10px"
+													style="display: flex; justify-content: space-between; padding-top: 0px; padding-right: 0px"
 													@change="changeAreaType"
 												>
 													<el-radio :label="1">标准区域</el-radio>
@@ -232,9 +231,10 @@
 											</el-form-item>
 											<el-form-item label="围栏形状" prop="fenceShape" v-if="addForm.rangeType === 2">
 												<div class="fence-shape">多边形</div>
-										</el-form-item> -->
+											</el-form-item>
+										</div>
 										<div class="cFooter">
-											<div class="tool tool1" @click="handleCancel">取消</div>
+											<div class="tool tool1" @click="closeFenceCreate">取消</div>
 											<div class="tool tool2" @click="submitFence(addFormRef)">保存</div>
 										</div>
 									</el-form>
@@ -281,20 +281,8 @@
 </template>
 
 <script setup lang="ts">
-// import { getWorkerInfoList } from "@/assets/js/api/laborPerson";
-import {
-	getAlarmRecordInfo,
-	getCarDevOption,
-	addstandardDevApi,
-	getRealtimeRecordInfo,
-	getRealtimeRecordList,
-	getVehiclePositionDayRecord
-} from "@/api/modules/equipmentPosition";
 
 import {
-	getFenceTypeTotal,
-	getVehiclePositionFence,
-	addVehiclePositionFence,
 	getEpDevOptionApi,
 	getEpTypeTotalApi,
 	getEpSuroundInfoApi,
@@ -314,7 +302,8 @@ import personOff from "@/assets/images/carPosition/personOff.png";
 import startIcon from "@/assets/images/carPosition/startIcon.png";
 import endIcon from "@/assets/images/carPosition/endIcon.png";
 import personOn from "@/assets/images/carPosition/personOn.png";
-import equipmentPosition from "@/assets/images/carPosition/equipmentPosition2.png";
+import equipmentPosition2 from "@/assets/images/carPosition/equipmentPosition2.png";
+import equipmentPosition3 from "@/assets/images/carPosition/equipmentPosition3.png";
 import { GlobalStore } from "@/stores";
 import { ElMessage, ElMessageBox } from "element-plus";
 import type { FormInstance, FormRules } from "element-plus";
@@ -366,6 +355,23 @@ let addForm = ref({
 	projectSn: "",
 	enterpriseId: ""
 });
+let formFenceRules = ref({
+	fenceName: [
+		{
+			required: true,
+			message: "必填",
+			trigger: "blur"
+		},
+		{ min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
+	], //
+	areaRadius: [
+		{
+			required: true,
+			message: "必填",
+			trigger: "change"
+		}
+	]
+});
 let pagInfo = ref({
 	pageNo: 1, //页数
 	pageSize: 10, //条数
@@ -399,7 +405,7 @@ let addEditForm = ref({
 	driver: ""
 });
 onMounted(() => {
-	// choiceMonth.value = formatMonthTime(dayValue.value);
+	choiceMonth.value = formatMonthTime(dayValue.value);
 	// console.log("当前月份", choiceMonth.value);
 	initMap();
 	getProgressListData();
@@ -431,6 +437,24 @@ watch(choiceMonth, newVal => {
 });
 function handleCancel() {
 	fenceCreateShow.value = false;
+	addForm.value = {
+		areaRadius: 100, //区域半径
+		fenceName: "", //围栏名称
+		addr: "",
+		rangeType: 1,
+		locationList: [
+			{
+				fenceId: 0,
+				id: 0,
+				latitude: "",
+				longitude: "",
+				sortNum: 0
+			}
+		],
+		projectSn: "",
+		enterpriseId: ""
+	};
+	exitEditFn();
 	clearFn();
 }
 
@@ -507,7 +531,7 @@ function deleteFenceInfo(idGroups) {
 	});
 }
 const submitFence = async (formEL: FormInstance | undefined) => {
-	if (locationList.value.length == 0) {
+	if (locationList.value.length === 0) {
 		ElMessage({
 			showClose: true,
 			message: "未设置围栏区域!",
@@ -607,7 +631,7 @@ function getTodayTrack(day) {
 				const element = res.result[index];
 				path.unshift([element.longitude, element.latitude]);
 			}
-			trackMapInit(path, currentData);
+			if(checked.value == 2) trackMapInit(path, currentData);
 		}
 		console.log("当前数据", path, currentData);
 	});
@@ -710,12 +734,7 @@ function openFenceCreate() {
 // 关闭创建围栏弹窗
 function closeFenceCreate() {
 	fenceCreateShow.value = false;
-	addForm.value = {
+	let tempArr = [
-		areaRadius: 100, //区域半径
-		fenceName: "", //围栏名称
-		addr: "",
-		rangeType: 1,
-		locationList: [
 		{
 			fenceId: 0,
 			id: 0,
@@ -723,7 +742,13 @@ function closeFenceCreate() {
 			longitude: "",
 			sortNum: 0
 		}
-		],
+	];
+	addForm.value = {
+		areaRadius: 100, //区域半径
+		fenceName: "", //围栏名称
+		addr: "",
+		rangeType: 1,
+		locationList: tempArr,
 		projectSn: "",
 		enterpriseId: ""
 	};
@@ -1037,7 +1062,8 @@ function trackMapInit(path: any, item: any) {
 			map: map,
 			position: path[0],
 			// icon: "https://webapi.amap.com/images/car.png",
-			icon: "src/assets/images/carPosition/equipmentPosition2.png",
+			// icon: "src/assets/images/equipmentPosition2.png",
+			icon: equipmentPosition3,
 			offset: new AMap.Pixel(-26, -13),
 			autoRotation: true,
 			angle: -90
@@ -1077,6 +1103,7 @@ function trackMapInit(path: any, item: any) {
 		info.push('<p style="padding:7px;">设备名称: ' + item.equipmentName + "</p>");
 		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
 		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
+		info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "|" + item.latitude + "</p>");
 		var infoWindow = new AMap.InfoWindow({
 			offset: new AMap.Pixel(10, -30),
 			content: info.join("") //使用默认信息窗体框样式，显示信息内容
@@ -1358,7 +1385,8 @@ function echoCarMarker(item) {
 				position: lnglats[i],
 				map: map,
 				// icon: "https://webapi.amap.com/images/car.png" // 自定义图标
-				icon: "src/assets/images/carPosition/equipmentPosition2.png"
+				// icon: "src/assets/images/equipmentPosition2.png"
+				icon: equipmentPosition2
 			});
 			// marker.content = '我是第' + (i + 1) + '个Marker';
 			marker.on("click", markerClick);
@@ -1412,13 +1440,14 @@ function echoPersonMarker(item) {
 				position: lnglats[i],
 				map: map,
 				// icon: personOn // 自定义图标
-				icon: "src/assets/images/carPosition/equipmentPosition2.png" // 自定义图标
+				// icon: "src/assets/images/equipmentPosition2.png" // 自定义图标
+				icon: equipmentPosition2 // 自定义图标
 			});
 			marker.on("click", markerClick);
 			marker.emit("click", { target: marker });
 		}
 	}
-	let address = "未知";
+	let address = "<text style='color: darkred;font-weight:bolder'>未知</text>";
 	AMap.plugin("AMap.Geocoder", function () {
 		let geocoder = new AMap.Geocoder();
 
@@ -1447,6 +1476,7 @@ function echoPersonMarker(item) {
 		info.push('<p style="padding:7px;">设备名称: ' + item.equipmentName + "</p>");
 		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
 		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
+		info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "  |  " + item.latitude + "</p>");
 
 		var infoWindow = new AMap.InfoWindow({
 			offset: new AMap.Pixel(10, -30),
@@ -1533,7 +1563,7 @@ function echoPersonMarker(item) {
 	background-size: 100% 100%;
 	box-sizing: border-box;
 	padding: 25px;
-	width: 330px;
+	width: 360px;
 	height: 380px;
 	left: 40px;
 	top: 40px;
@@ -1560,6 +1590,12 @@ function echoPersonMarker(item) {
 			color: rgba(255, 255, 255, 0.6);
 			font-size: 18px;
 		}
+		:deep(.el-form-item__label) {
+			color: #fff;
+		}
+		:deep(.el-radio__label) {
+			color: #fff;
+		}
 		.cFooter {
 			width: 70%;
 			display: flex;
@@ -1902,6 +1938,16 @@ function echoPersonMarker(item) {
 					margin-top: 1% !important;
 				}
 			}
+
+			:deep(.titltText) {
+				margin: 0 0 0 0;
+				height: 100%;
+				margin-left: 0.08rem;
+				margin-top: -0.03rem;
+				display: flex;
+				align-items: center;
+				letter-spacing: 0.01rem;
+			}
 			.wei-lan {
 				.icon-off {
 					position: absolute;
@@ -1961,9 +2007,18 @@ function echoPersonMarker(item) {
 			position: relative;
 			:deep(.h-card) {
 				.content {
-					margin-top: 1% !important;
+					margin-top: 1.25% !important;
 				}
 			}
+			:deep(.titltText) {
+				margin: 0 0 0 0;
+				height: 100%;
+				margin-left: 0.08rem;
+				margin-top: -0.025rem;
+				display: flex;
+				align-items: center;
+				letter-spacing: 0.01rem;
+			}
 			.bottom-left {
 				width: 100%;
 				height: 100%;

src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue

@@ -17,7 +17,12 @@
 								<el-form :inline="true" size="medium" :model="queryInfo" class="demo-form-inline" style="margin-left: 15px">
 									<el-form-item>
 										<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange">
-											<el-option v-for="(item, index) in nameOptions" :key="index" :label="item.label" :value="item.value"></el-option>
+											<el-option
+												v-for="(item, index) in nameOptions"
+												:key="index"
+												:label="item.label"
+												:value="item.value"
+											></el-option>
 											<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.workerName" :value="item.devSn" ></el-option> -->
 										</el-select>
 									</el-form-item>
@@ -70,7 +75,12 @@
 									<el-form-item>
 										<span style="color: #fff; margin-left: 25px; margin-right: 10px">人员名称</span>
 										<el-select filterable v-model="queryInfo.devSn" placeholder="请选择或搜索" @change="devChange" clearable>
-											<el-option v-for="(item, index) in nameOptions" :key="index" :label="item.label" :value="item.value"></el-option>
+											<el-option
+												v-for="(item, index) in nameOptions"
+												:key="index"
+												:label="item.label"
+												:value="item.value"
+											></el-option>
 											<!-- <el-option v-for="(item, index) in devList" :key="index" :label="item.workerName" :value="item.workerInfoId" ></el-option> -->
 										</el-select>
 									</el-form-item>
@@ -106,7 +116,7 @@
 								<div style="width: 50%">{{ item.fenceName }}</div>
 								<div style="width: 50%">{{ item.workerNum }}</div>
 							</div>
-							<div class="not-data" v-if="fenceList.length == 0">
+							<div class="not-data" style="top: 20%" v-if="fenceList.length == 0">
 								<img src="@/assets/images/noData.png" alt="" />
 								<p>暂无数据</p>
 							</div>
@@ -167,7 +177,7 @@
 										</el-checkbox-group>
 									</el-scrollbar>
 								</div>
-								<div v-else style="text-align: center; margin-top: 100px; color: #fff">暂无围栏</div>
+								<div v-else style="text-align: center; margin-top: 65px; color: #fff">暂无围栏</div>
 							</div>
 
 							<!-- 创建围栏弹窗 -->
@@ -178,7 +188,7 @@
 									</div>
 									<!-- <div class="fence-title">创建围栏</div> -->
 									<el-form size="medium" :model="addForm" ref="addFormRef" label-width="80px" :rules="formFenceRules">
-										<div class="bigFormBox">
+										<!-- <div class="bigFormBox">
 											<div class="itemBox1">
 												<div>围栏名称</div>
 												<div><el-input v-model="addForm.fenceName" placeholder="请输入"></el-input></div>
@@ -211,19 +221,19 @@
 											<div class="itemBox4" v-if="addForm.rangeType === 2">
 												<div>围栏形状</div>
 												<div>
-													<!-- <div class="fence-shape">多边形</div> -->
 													<div class="">多边形</div>
 												</div>
 											</div>
-										</div>
+										</div> -->
-										<!-- <el-form-item label="围栏名称" prop="fenceName">
+										<div style="margin-top: 15%">
+											<el-form-item label="围栏名称" prop="fenceName">
 												<el-input v-model="addForm.fenceName" placeholder="请输入"></el-input>
 											</el-form-item>
 
 											<el-form-item label="范围类型" prop="rangeType">
 												<el-radio-group
 													v-model="addForm.rangeType"
-												style="display: flex; justify-content: space-between; padding-top: 10px; padding-right: 10px"
+													style="display: flex; justify-content: space-between; padding-top: 0px; padding-right: 0px"
 													@change="changeAreaType"
 												>
 													<el-radio :label="1">标准区域</el-radio>
@@ -242,7 +252,9 @@
 											<el-form-item label="围栏形状" prop="fenceShape" v-if="addForm.rangeType === 2">
 												<div class="fence-shape">多边形</div>
 											</el-form-item>
-										<div class="create-footer">
+										</div>
+
+										<!-- <div class="create-footer">
 											<el-button class="cancleBtn" @click="fenceCreateShow = false" icon="el-icon-circle-close" size="medium"
 												>取消
 											</el-button>
@@ -252,7 +264,7 @@
 										</div> -->
 
 										<div class="cFooter">
-											<div class="tool tool1" @click="handleCancel">取消</div>
+											<div class="tool tool1" @click="closeFenceCreate">取消</div>
 											<div class="tool tool2" @click="submitFence(addFormRef)">保存</div>
 										</div>
 									</el-form>
@@ -289,18 +301,18 @@
 						<div class="bottom-left">
 							<div class="left-content">
 								<div class="tab-list">
-									<div style="width: 5%">序号</div>
+									<div style="width: 10%">序号</div>
 									<div style="width: 15%">人员名称</div>
 									<div style="width: 15%">设备序号</div>
-									<div style="width: 25%">报警时间</div>
+									<div style="width: 20%">报警时间</div>
 									<div style="width: 40%">报警信息</div>
 								</div>
 								<el-scrollbar class="list-box">
 									<div v-for="(item, index) in listData" class="list-style" :key="item.id">
-										<div style="width: 5%">{{ index + 1 }}</div>
+										<div style="width: 10%">{{ index + 1 }}</div>
 										<div style="width: 15%">{{ item.workerName }}</div>
 										<div style="width: 15%">{{ item.devSn }}</div>
-										<div style="width: 25%">{{ item.createTime }}</div>
+										<div style="width: 20%">{{ item.createTime }}</div>
 										<div style="width: 40%">{{ item.alarmInfo }}</div>
 									</div>
 									<div class="not-data" v-if="listData.length == 0">
@@ -382,7 +394,12 @@ let isIndeterminateFence = ref(true);
 let checked = ref(1);
 let devName = ref("");
 let locationList = ref([]);
+interface RuleForm {
+	// fenceName: string
+	// areaRadius: number
+}
 let addFormRef = ref<FormInstance>();
+// const addForm = reactive<RuleForm>({
 let addForm = ref({
 	areaRadius: 100, //区域半径
 	fenceName: "", //围栏名称
@@ -432,6 +449,7 @@ let addEditForm = ref({
 	type: 1,
 	driver: ""
 });
+// const formFenceRules = 	reactive<FormRules<RuleForm>({
 let formFenceRules = ref({
 	fenceName: [
 		{
@@ -600,7 +618,7 @@ function deleteFenceInfo(idGroups) {
 	});
 }
 const submitFence = async (formEL: FormInstance | undefined) => {
-	if (locationList.value.length == 0) {
+	if (locationList.value.length === 0) {
 		ElMessage({
 			showClose: true,
 			message: "未设置围栏区域!",
@@ -1324,7 +1342,8 @@ function trackMapInit(path: any, item: any) {
 			map: map,
 			position: path[0],
 			// icon: "https://webapi.amap.com/images/car.png",
-			icon: "src/assets/images/smartSafeHat.png", // 自定义图标
+			// icon: "src/assets/images/smartSafeHat.png", // 自定义图标
+			icon: smartSafeHat, // 自定义图标
 			// icon: "@/assets/images/carPosition/carIcon.png", // 自定义图标
 			// icon: "src/assets/images/carPosition/carIcon.png", // 自定义图标
 			offset: new AMap.Pixel(-26, -13),
@@ -1367,6 +1386,7 @@ function trackMapInit(path: any, item: any) {
 		info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
 		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
 		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
+		// info.push('<p style="padding:7px;">位置: ' + address + "</p>");
 		var infoWindow = new AMap.InfoWindow({
 			offset: new AMap.Pixel(30, -30),
 			content: info.join("") //使用默认信息窗体框样式，显示信息内容
@@ -1396,11 +1416,15 @@ function initMap() {
 	var autoOptions = {
 		input: "tipinput"
 	};
-	let auto = new AMap.Autocomplete(autoOptions);
+	// >>>>>>>>>>>>>>>>>此部分代码会导致大屏页面跳转时产生窗口抖动<<<<<<<<<<<<<<<<<<<
-	placeSearch = new AMap.PlaceSearch({
+
-		map: map
+	// let auto = new AMap.Autocomplete(autoOptions);
-	}); //构造地点查询类
+	// placeSearch = new AMap.PlaceSearch({
-	AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
+	// 	map: map
+	// }); //构造地点查询类
+	// AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
+
+	// >>>>>>>>>>>>>>>>>此部分代码会导致大屏页面跳转时产生窗口抖动<<<<<<<<<<<<<<<<<<<
 	mouseTool = new AMap.MouseTool(map);
 	mouseTool.on("draw", function (event) {
 		// event.obj 为绘制出来的覆盖物对象
@@ -1660,7 +1684,8 @@ function echoCarMarker(item) {
 				position: lnglats[i],
 				map: map,
 				// icon: "https://webapi.amap.com/images/car.png" // 自定义图标
-				icon: "src/assets/images/smartSafeHat.png" // 自定义图标
+				// icon: "src/assets/images/smartSafeHat.png" // 自定义图标
+				icon: smartSafeHat // 自定义图标
 				// icon: "@/assets/images/carPosition/carIcon.png" // 自定义图标
 				// icon: "src/assets/images/carPosition/carIcon.png" // 自定义图标
 			});
@@ -1716,13 +1741,14 @@ function echoPersonMarker(item) {
 				// position: lnglats[i],
 				position: lnglats[0],
 				map: map,
-				icon: personOn // 自定义图标
+				// icon: personOn // 自定义图标
+				icon: smartSafeHat2 // 自定义图标
 			});
 			marker.on("click", markerClick);
 			marker.emit("click", { target: marker });
 		}
 	}
-	let address = "未知";
+	let address = "<text style='color: darkred;font-weight:bolder'>未知</text>";
 	AMap.plugin("AMap.Geocoder", function () {
 		let geocoder = new AMap.Geocoder();
 
@@ -1754,6 +1780,7 @@ function echoPersonMarker(item) {
 		info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
 		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
 		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
+		info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "|" + item.latitude + "</p>");
 
 		var infoWindow = new AMap.InfoWindow({
 			offset: new AMap.Pixel(10, -30),
@@ -1838,7 +1865,7 @@ function echoPersonMarker(item) {
 	background-size: 100% 100%;
 	box-sizing: border-box;
 	padding: 25px;
-	width: 330px;
+	width: 360px;
 	height: 380px;
 	left: 40px;
 	top: 40px;
@@ -1856,7 +1883,6 @@ function echoPersonMarker(item) {
 		.create-footer {
 			margin: 100px 0 0 50px;
 		}
-	}
 		.close-icon {
 			position: absolute;
 			right: 0%;
@@ -1865,6 +1891,12 @@ function echoPersonMarker(item) {
 			color: rgba(255, 255, 255, 0.6);
 			font-size: 18px;
 		}
+		:deep(.el-form-item__label) {
+			color: #fff;
+		}
+		:deep(.el-radio__label) {
+			color: #fff;
+		}
 		.cFooter {
 			width: 70%;
 			display: flex;
@@ -1898,7 +1930,6 @@ function echoPersonMarker(item) {
 				background-size: 100% 100%;
 			}
 		}
-
 		.bigFormBox {
 			width: 100%;
 			display: flex;
@@ -1989,6 +2020,7 @@ function echoPersonMarker(item) {
 			}
 		}
 	}
+}
 .fence-box {
 	position: relative;
 	.dialog-title {
@@ -2188,14 +2220,20 @@ function echoPersonMarker(item) {
 		}
 		.bottom-data {
 			margin-top: 1%;
-			height: 40%;
+			height: 40.8%;
-
+			:deep(.h-card) {
+					.content {
+						margin-top: 4% !important;
+					}
+				}
 			.left-content {
 				height: 100%;
 				width: 100%;
+				
 				.tab-list {
 					display: flex;
 					align-items: center;
+					justify-content: center;
 					width: 100%;
 					height: 10%;
 					background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
@@ -2265,6 +2303,15 @@ function echoPersonMarker(item) {
 					margin-top: 1% !important;
 				}
 			}
+			:deep(.titltText) {
+				margin: 0 0 0 0;
+				height: 100%;
+				margin-left: 0.08rem;
+				margin-top: -0.03rem;
+				display: flex;
+				align-items: center;
+				letter-spacing: 0.01rem;
+			}
 			.wei-lan {
 				.icon-off {
 					position: absolute;
@@ -2331,7 +2378,8 @@ function echoPersonMarker(item) {
 				position: relative;
 				:deep(.h-card) {
 					.content {
-						margin-top: 1% !important;
+						margin-top: 4.65% !important;
+						// margin-top: 0;
 					}
 				}
 				.hat-container {
@@ -2380,10 +2428,8 @@ function echoPersonMarker(item) {
 				margin-top: 20px;
 				height: 100%;
 				position: relative;
-				:deep(.h-card) {
+				:deep(.content) {
-					.content {
+						margin-top: 4.2% !important;
-						margin-top: 1% !important;
-					}
 				}
 				div {
 				}
@@ -2396,14 +2442,23 @@ function echoPersonMarker(item) {
 				position: relative;
 				:deep(.h-card) {
 					.content {
-						margin-top: 1% !important;
+						margin-top: 2.1% !important;
 					}
 				}
+				:deep(.titltText) {
+					// margin: 0 0 0 0;
+					// height: 100%;
+					// margin-left: 0.08rem;
+					// margin-top: -0.025rem;
+					// display: flex;
+					// align-items: center;
+					// letter-spacing: 0.01rem;
+				}
 				.bottom-left {
 					width: 100%;
 					height: 100%;
 					box-sizing: border-box;
-					padding: 2%;
+					// padding: 0 2%;
 					.left-content {
 						height: 100%;
 						width: 100%;