feat:科技政令详情页增加政令举措

src/App.vue

@@ -294,6 +294,13 @@ body {
 .el-popper[data-popper-placement^="top"]>.el-popper__arrow:before {
 	display: none;
 }
+
+/* 单行文本溢出隐藏显示省略号 */
+.one-line-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
 </style>
 
 <style lang="scss" scoped>

src/router/modules/decree.js

@@ -4,6 +4,7 @@ import DecreeLayoutContainer from "@/views/decree/decreeLayout/index.vue";
 import DecreeOverviewLayout from "@/views/decree/decreeLayout/overview/index.vue";
 import DecreeIntroduction from "@/views/decree/decreeLayout/overview/introduction/index.vue";
 import DecreeBackground from "@/views/decree/decreeLayout/overview/background/index.vue";
+import DecreeMeasures from "@/views/decree/decreeLayout/overview/measures/index.vue";
 import DecreeDeepDig from "@/views/decree/decreeLayout/deepdig/index.vue";
 import DecreeInfluence from "@/views/decree/decreeLayout/influence/index.vue";
 import Institution from "@/views/decree/institution/index.vue"
@@ -49,7 +50,13 @@ const decreeRoutes = [
             name: "DecreeBackground",
             component: DecreeBackground,
             // meta: { title: "政令背景" }
-          }
+          },
+          {
+            path: "measures",
+            name: "DecreeMeasures",
+            component: DecreeMeasures,
+            // meta: { title: "政令举措" }
+          },
         ]
       },
       // 深度挖掘路由

src/styles/main.css

@@ -23,9 +23,9 @@
   --tag-btn1-border-color: rgba(255, 204, 199, 1);
   --tag-btn1-text-color: rgba(255, 77, 79, 1);
   
-  --tag-btn2-bg-color: rgba(255, 251, 230, 1);
-  --tag-btn2-border-color: rgba(255, 241, 184, 1);
-  --tag-btn2-text-color: rgba(250, 173, 20, 1);
+  --tag-btn4-bg-color: rgba(255, 251, 230, 1);
+  --tag-btn4-border-color: rgba(255, 241, 184, 1);
+  --tag-btn4-text-color: rgba(250, 173, 20, 1);
   
   --tag-btn2-bg-color: rgba(230, 244, 255, 1);
   --tag-btn2-border-color: rgba(186, 224, 255, 1);

src/views/decree/decreeHome/index.vue

@@ -274,25 +274,24 @@
 				<DivideHeader id="position4" class="divide4" :titleText="'资源库'"></DivideHeader>
 				<div class="home-main-footer-header">
 					<div class="search-box">
-						<el-select v-model="searchType" style="width: 100%">
-							<el-option label="全部政府部门" value=" " />
+						<el-select v-model="searchType" :empty-values="[null, undefined]" style="width: 100%">
+							<el-option label="全部政府部门" value="" />
 							<el-option v-for="item in govInsList" :key="item.id" :label="item.name" :value="item.id" />
 						</el-select>
 					</div>
 					<div style="flex: auto;"></div>
 					<el-checkbox v-model="isChina">只看涉华政令</el-checkbox>
 					<div class="select-box">
-						<div class="paixu-btn" @click="handleSwithSort">
-							<div class="icon1">
-								<img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
-								<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
-							</div>
-							<div class="text">{{ "发布时间" }}</div>
-							<div class="icon2">
-								<img v-if="isSort" src="@/assets/icons/shengxu2.png" alt="" />
-								<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
-							</div>
-						</div>
+						<el-select v-model="isSort" placeholder="发布时间" style="width:120px; margin-left:8px;">
+							<template #prefix>
+								<div class="icon1">
+									<img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
+									<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
+								</div>
+							</template>
+							<el-option label="正序" :value="true" />
+							<el-option label="倒序" :value="false" />
+						</el-select>
 					</div>
 				</div>
 				<div class="home-main-footer-main">
@@ -983,12 +982,9 @@ const handleBox8 = async () => {
 };
 
 // 资源库
-const searchType = ref(" ");
+const searchType = ref("");
 const isChina = ref(false);
-const isSort = ref(false); // true 升序  false 倒序
-const handleSwithSort = () => {
-	isSort.value = !isSort.value;
-};
+const isSort = ref(false); // true 升序  false 降序
 
 const handleToPosi = id => {
 	const element = document.getElementById(id);
@@ -1175,7 +1171,7 @@ const handleGetDecreeOrderList = async () => {
 		researchTypeIds: p1, // 全选时不传（为空）
 		sortFun: isSort.value,
 		isCN: isChina.value ? 1 : 0,
-		proposeName: searchType.value.trim(),
+		proposeName: searchType.value,
 		years: p2, // 全选时不传（为空）
 		typeIds: checkedDecreeType.value.toString()
 	};
@@ -1207,7 +1203,8 @@ const handleGetDecreeOrderList = async () => {
 };
 
 watch([activePubTime, activeAreaList, checkedGovIns, isSort, isChina, searchType], val => {
-	handleGetDecreeOrderList();
+	// 切换页码到第一页
+	handleCurrentChange(1);
 });
 
 // 切换当前政令
@@ -3115,62 +3112,26 @@ onMounted(async () => {
 				}
 
 				.select-box {
-					margin-left: 20px;
+					margin-left: 10px;
 					height: 42px;
 					box-sizing: border-box;
 					padding: 5px 0;
 
-					.paixu-btn {
-						display: flex;
-						width: 120px;
-						height: 32px;
-						box-sizing: border-box;
-						border: 1px solid rgba(230, 231, 232, 1);
-						border-radius: 4px;
-						background: rgba(255, 255, 255, 1);
-
-						&:hover {
-							background: var(--color-bg-hover);
-						}
-
-						cursor: pointer;
-
-						.icon1 {
-							width: 11px;
-							height: 14px;
-							margin-top: 10px;
-							margin-left: 9px;
-
-							img {
-								width: 100%;
-								height: 100%;
-							}
-						}
+					.icon1 {
+						width: 11px;
+						height: 14px;
+						font-size: 0px;
 
-						.text {
-							height: 19px;
-							color: rgba(95, 101, 108, 1);
-							font-family: Microsoft YaHei;
-							font-size: 14px;
-							font-weight: 400;
-							line-height: 18px;
-							letter-spacing: 0px;
-							text-align: left;
-							margin-top: 7px;
-							margin-left: 9px;
+						img {
+							width: 100%;
+							height: 100%;
 						}
+					}
 
-						.icon2 {
-							width: 10px;
-							height: 5px;
-							margin-top: 5px;
-							margin-left: 13px;
-
-							img {
-								width: 100%;
-								height: 100%;
-							}
-						}
+					:deep(.el-select__selected-item) {
+						text-align: center;
+						font-size: 16px;
+						font-family: Microsoft YaHei;
 					}
 				}
 			}
@@ -3374,18 +3335,6 @@ onMounted(async () => {
 										color: rgba(255, 149, 77, 1);
 										background: rgba(255, 149, 77, 0.1);
 									}
-									// .type1 {
-									// 	color: rgba(22, 119, 255, 1);
-									// 	background: rgba(230, 244, 255, 1);
-									// }
-									// .type2 {
-									// 	color: rgba(19, 168, 168, 1);
-									// 	background: rgba(230, 255, 251, 1);
-									// }
-									// .type3 {
-									// 	color: rgba(250, 140, 22, 1);
-									// 	background: rgba(255, 247, 230, 1);
-									// }
 								}
 
 								.desc {
@@ -3416,8 +3365,8 @@ onMounted(async () => {
 										text-align: center;
 										padding: 0 8px;
 										border-radius: 4px;
-										background: rgba(231, 243, 255, 1);
-										color: var(--color-main-active);
+										background: var(--btn-active-bg-color);
+										color: var(--btn-active-text-color);
 										font-family: Microsoft YaHei;
 										font-size: 14px;
 										font-weight: 400;

src/views/decree/decreeLayout/index.vue

@@ -60,7 +60,7 @@
 									</div>
 									<div class="text">{{ "政令原文" }}</div>
 								</div>
-								<div class="btn">
+								<div class="btn" @click="handleToInstitution">
 									<div class="icon">
 										<img src="./assets/icons/link-icon.png" alt="" />
 									</div>
@@ -277,6 +277,16 @@ const handleShowReport = () => {
 	window.open(curRoute.href, "_blank");
 };
 
+const handleToInstitution = () => {
+	// const curRoute = router.resolve({
+	// 	path: "/institution",
+	// 	query: {
+	// 		id: route.query.id
+	// 	}
+	// });
+	// window.open(curRoute.href, "_blank");
+};
+
 const handleAnalysisClick = () => {
 	router.push({
 		path: "/writtingAsstaint",
@@ -290,7 +300,7 @@ const handleAnalysisClick = () => {
 onMounted(() => {
 	handleGetSummary();
 	console.log(route.path);
-	if (route.path === "/decreeLayout/overview/introduction" || route.path === "/decreeLayout/overview/background") {
+	if (route.path === "/decreeLayout/overview/introduction" || route.path === "/decreeLayout/overview/background" || route.path === "/decreeLayout/overview/measures") {
 		activeTitle.value = "政令概况";
 	} else if (route.path === "/decreeLayout/deepDig") {
 		activeTitle.value = "深度挖掘";

src/views/decree/decreeLayout/overview/index.vue

@@ -35,7 +35,11 @@ const siderList = ref([
 	{
 		name: "政令背景",
 		path: "/decreeLayout/overview/background"
-	}
+	},
+	{
+		name: "政令举措",
+		path: "/decreeLayout/overview/measures"
+	},
 ]);
 
 const siderBtnActive = ref("政令简介");
@@ -51,10 +55,18 @@ const handleClickLeftSiderBtn = item => {
 };
 
 onMounted(() => {
-	if (route.path === "/decreeLayout/overview/introduction") {
-		siderBtnActive.value = "政令简介";
-	} else {
-		siderBtnActive.value = "政令背景";
+	switch (route.path) {
+		case "/decreeLayout/overview/introduction":
+			siderBtnActive.value = "政令简介";
+			break;
+		case "/decreeLayout/overview/background":
+			siderBtnActive.value = "政令背景";
+			break;
+		case "/decreeLayout/overview/measures":
+			siderBtnActive.value = "政令举措";
+			break;
+		default:
+			siderBtnActive.value = "政令简介";
 	}
 });
 </script>

src/views/decree/decreeLayout/overview/measures/index.vue

+<template>
+	<div class="introduction-wrap">
+		<div class="left">
+				<AnalysisBox title="主要指令" :showAllBtn="false">
+					
+				</AnalysisBox>
+		</div>
+		<div class="right">
+			<div class="box3">
+				<AnalysisBox title="发布机构" :showAllBtn="false">
+					<div class="box3-top">
+						<div class="box3-top-top" @click="handleToInstitution(box3TopTopData)">
+							<div class="left">
+								<img :src="box3TopTopData.logo ? box3TopTopData.logo : DefaultIcon2" alt="" />
+							</div>
+							<div class="right">
+								<div class="name">{{ box3TopTopData.name + " >" }}</div>
+								<div class="ename">{{ box3TopTopData.eName }}</div>
+							</div>
+						</div>
+						<div class="box3-top-bottom">
+							<div class="box3-top-bottom-header">
+								<div class="icon">
+									<img src="./assets/images/box3-icon1.png" alt="" />
+								</div>
+								<div class="text">{{ "关键人物" }}</div>
+							</div>
+							<div class="box3-top-bottom-main">
+								<div class="box3-top-bottom-item" v-for="(item, index) in box3TopBottomData" :key="index">
+									<div class="box3-top-bottom-item-left">
+										<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
+									</div>
+									<div class="box3-top-bottom-item-right">
+										<div class="name">{{ item.name }}</div>
+										<div class="position">{{ item.job }}</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</AnalysisBox>
+			</div>
+			<div class="box4">
+				<AnalysisBox title="相关实体" :showAllBtn="false">
+					<div class="left-bottom-main">
+						<div v-for="item in coopRelatedData" :key="item.id" class="main-box">
+							<div class="icon">
+								<img style="width: 100%; height: 100%;" :src="item.img || defaultCom" alt="" />
+							</div>
+							<div class="name one-line-ellipsis">{{ item.ENTITYNAME }}</div>
+							<div class="type">{{ item.type }}</div>
+						</div>
+					</div>
+				</AnalysisBox>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import router from "@/router";
+import {
+	getDecreeBasicInfo,
+	getDecreeIssueOrganization
+} from "@/api/decree/introduction";
+import { getDecreeRelatedEvent } from "@/api/decree/background";
+
+import DefaultIcon1 from "@/assets/icons/default-icon1.png";
+import DefaultIcon2 from "@/assets/icons/default-icon2.png";
+import defaultCom from "@/views/coopRestriction/assets/images/default-icon2.png"
+
+const route = useRoute();
+const decreeId = ref(route.query.id);
+
+// 基本信息
+const basicInfo = ref({
+	img: "",
+	name: "",
+	eName: "",
+	areaList: [],
+	signTime: "",
+	signPeople: "",
+	bh: "",
+	deadline: ""
+});
+
+const handleGetBasicInfo = async () => {
+	const params = {
+		id: decreeId.value
+	};
+	try {
+		const res = await getDecreeBasicInfo(params);
+		console.log("基本信息", res);
+		if (res.code === 200 && res.data) {
+			basicInfo.value.img = res.data.picture;
+			basicInfo.value.name = res.data.name;
+			basicInfo.value.eName = res.data.ename;
+			basicInfo.value.areaList = res.data.industryList;
+			basicInfo.value.signTime = res.data.postDate;
+			basicInfo.value.bh = res.data.order;
+			basicInfo.value.deadline = res.data.deadline;
+			basicInfo.value.proposeOrgName = res.data.proposeOrgName;
+		}
+	} catch (error) {
+		console.error("基本信息error", error);
+	}
+};
+handleGetBasicInfo();
+
+// 合作限制-查询相关实体
+const coopRelatedData = ref([
+	{ id: "1", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
+	{ id: "2", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
+	{ id: "3", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
+	{ id: "4", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
+	{ id: "5", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
+	{ id: "6", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
+	{ id: "7", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
+	{ id: "8", img: "", ENTITYNAME: "ENTITYNAME", type: "type" },
+]);
+// const getcoopRelatedData = async () => {
+// 	if (!route.query.id) return;
+// 	try {
+// 		const res = await getCoopRestrictionRelated({
+// 			limitId: route.query.id
+// 		});
+// 		if (res && res.code === 200) {
+// 			coopRelatedData.value = res.data || {};
+// 		}
+// 	} catch (error) {
+// 		console.error("获取合作限制相关实体数据失败:", error);
+// 	} 
+// };
+
+// 相关事件
+const relatedEvents = ref([]);
+const handleGetRelateEvents = async () => {
+	const params = {
+		id: decreeId.value
+	};
+	try {
+		const res = await getDecreeRelatedEvent(params);
+		console.log("相关事件", res);
+		if (res.code === 200 && res.data) {
+			relatedEvents.value = res.data.map(item => {
+				return {
+					image: item.imageUrl,
+					title: item.sjbt,
+					content: item.sjnr,
+					time: item.sjsj
+				};
+			});
+		} else {
+			relatedEvents.value = [];
+		}
+	} catch (error) { }
+};
+
+// 发布机构
+const box3TopTopData = ref({
+	id: "",
+	logo: "",
+	name: "",
+	eName: ""
+});
+
+const box3TopBottomData = ref([]);
+
+
+// 跳转行政机构主页
+const handleToInstitution = item => {
+	const curRoute = router.resolve({
+		path: "/institution",
+		query: {
+			id: item.id
+		}
+	});
+	window.open(curRoute.href, "_blank");
+};
+
+// 机构动态
+const eventList = ref([
+	// {
+	// 	time: "2025-07-31",
+	// 	title: "美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
+	// },
+	// {
+	// 	time: "2025-07-25",
+	// 	title: "美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
+	// },
+	// {
+	// 	time: "2025-07-21",
+	// 	title: "美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
+	// }
+]);
+
+const handleGetOrgnization = async () => {
+	const params = {
+		id: decreeId.value
+	};
+	try {
+		const res = await getDecreeIssueOrganization(params);
+		console.log("发布机构", res);
+		if (res.code === 200 && res.data) {
+			box3TopTopData.value.id = res.data.id;
+			box3TopTopData.value.logo = res.data.image;
+			box3TopTopData.value.name = res.data.name;
+			box3TopTopData.value.eName = res.data.ename;
+			// eventList.value = res.data.newsList;
+			eventList.value = res.data.orderInfoList;
+			box3TopBottomData.value = res.data.personList;
+
+		}
+	} catch (error) {
+		console.error("执行机构error", error);
+		box3TopTopData.value = {
+			id: "",
+			logo: "",
+			name: "",
+			eName: ""
+
+		};
+		eventList.value = [];
+	}
+};
+
+onMounted(() => {
+	handleGetRelateEvents();
+	handleGetOrgnization();
+});
+</script>
+
+<style lang="scss" scoped>
+.introduction-wrap {
+	display: flex;
+
+	.box-header {
+		height: 56px;
+		display: flex;
+		position: relative;
+
+		.header-left {
+			margin-top: 18px;
+			width: 8px;
+			height: 20px;
+			border-radius: 0 4px 4px 0;
+			background: var(--color-main-active);
+		}
+
+		.title {
+			margin-left: 14px;
+			margin-top: 14px;
+			height: 26px;
+			line-height: 26px;
+			color: var(--color-main-active);
+			font-family: Microsoft YaHei;
+			font-size: 20px;
+			font-weight: 700;
+		}
+
+		.header-btn-box {
+			position: absolute;
+			z-index: 9999;
+			width: 325px;
+			height: 64px;
+			top: 14px;
+			right: 82px;
+			display: flex;
+			justify-content: flex-end;
+			flex-wrap: wrap;
+			gap: 5px 8px;
+			white-space: nowrap;
+			overflow: hidden;
+			overflow-y: auto;
+			padding-right: 5px;
+
+			.btn {
+				min-width: min-content;
+				height: 28px;
+				padding: 0 8px;
+				box-sizing: border-box;
+				border: 1px solid rgba(230, 231, 232, 1);
+				border-radius: 4px;
+				background: rgba(255, 255, 255, 1);
+				color: rgba(59, 65, 75, 1);
+				font-family: Microsoft YaHei;
+				font-size: 16px;
+				font-weight: 400;
+				line-height: 28px;
+				cursor: pointer;
+			}
+
+			.btnActive {
+				border: 1px solid var(--color-main-active);
+				color: var(--color-main-active);
+				background: rgba(231, 243, 255, 1);
+			}
+		}
+
+		.header-right {
+			position: absolute;
+			top: 14px;
+			right: 12px;
+			height: 28px;
+			display: flex;
+			gap: 4px;
+
+			.icon {
+				width: 28px;
+				height: 28px;
+
+				img {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+
+	.left {
+		width: 1064px;
+		margin-top: 16px;
+	}
+
+	.right {
+		width: 520px;
+		margin-left: 16px;
+
+		.box3 {
+			margin-top: 16px;
+			width: 520px;
+
+			.box3-top {
+				margin-top: 2px;
+				// height: 241px;
+				border-bottom: 1px solid rgba(234, 236, 238, 1);
+
+				.box3-top-top {
+					width: 473px;
+					height: 88px;
+					box-sizing: border-box;
+					border: 1px solid rgba(234, 236, 238, 1);
+					border-radius: 4px;
+					background: rgba(247, 248, 249, 1);
+					display: flex;
+					align-items: center;
+					margin: 0 auto;
+					position: relative;
+					cursor: pointer;
+
+					.more {
+						position: absolute;
+						right: 17px;
+						top: 17px;
+						display: flex;
+						gap: 3px;
+
+						.text {
+							height: 16px;
+							color: rgba(5, 95, 194, 1);
+							font-family: Microsoft YaHei;
+							font-size: 14px;
+							font-weight: 400;
+							line-height: 16px;
+						}
+
+						.icon {
+							width: 16px;
+							height: 16px;
+
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+					}
+
+					.left {
+						width: 64px;
+						height: 64px;
+						margin-left: 17px;
+
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.right {
+						width: 370px;
+						margin-left: 15px;
+
+						.name {
+							height: 26px;
+							color: rgba(59, 65, 75, 1);
+							font-family: Microsoft YaHei;
+							font-size: 20px;
+							font-weight: 700;
+							line-height: 26px;
+						}
+
+						.ename {
+							margin-top: 6px;
+							height: 24px;
+							color: rgba(95, 101, 108, 1);
+							font-family: Microsoft YaHei;
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 24px;
+						}
+					}
+				}
+
+				.box3-top-bottom {
+					width: 473px;
+					height: 193px;
+					margin: 0 auto;
+
+					.box3-top-bottom-header {
+						height: 40px;
+						display: flex;
+						padding-top: 14px;
+						box-sizing: border-box;
+						gap: 12px;
+
+						.icon {
+							margin-top: 5px;
+							width: 14px;
+							height: 14px;
+
+							img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+
+						.text {
+							width: 100px;
+							height: 24px;
+							color: rgba(59, 65, 75, 1);
+							font-family: Microsoft YaHei;
+							font-style: Bold;
+							font-size: 16px;
+							font-weight: 700;
+							line-height: 24px;
+							letter-spacing: 1px;
+							text-align: left;
+						}
+					}
+
+					.box3-top-bottom-main {
+						margin-top: 2px;
+						height: 130px;
+						overflow: hidden;
+						overflow-y: auto;
+						display: flex;
+						flex-wrap: wrap;
+						justify-content: space-between;
+
+						.box3-top-bottom-item {
+							margin-top: 12px;
+							height: 48px;
+							width: 200px;
+							display: flex;
+							justify-content: flex-start;
+
+							.box3-top-bottom-item-left {
+								width: 48px;
+								height: 48px;
+								border-radius: 24px;
+								overflow: hidden;
+
+								img {
+									width: 100%;
+									height: 100%;
+								}
+							}
+
+							.box3-top-bottom-item-right {
+								margin-left: 8px;
+								width: 144px;
+
+								.name {
+									width: 144px;
+									height: 24px;
+									color: rgba(59, 65, 75, 1);
+									font-family: Microsoft YaHei;
+									font-style: Bold;
+									font-size: 16px;
+									font-weight: 700;
+									line-height: 24px;
+									letter-spacing: 0px;
+									text-align: left;
+									overflow: hidden;
+									text-overflow: ellipsis;
+									white-space: nowrap;
+								}
+
+								.position {
+									margin-top: 1px;
+									width: 144px;
+									height: 24px;
+									color: rgba(95, 101, 108, 1);
+									font-family: Microsoft YaHei;
+									font-style: Regular;
+									font-size: 16px;
+									font-weight: 400;
+									line-height: 24px;
+									letter-spacing: 0px;
+									text-align: left;
+									overflow: hidden;
+									text-overflow: ellipsis;
+									white-space: nowrap;
+								}
+							}
+						}
+					}
+				}
+			}
+
+			.box3-bottom {
+				.box3-bottom-header {
+					height: 59px;
+					display: flex;
+
+					.header-icon {
+						margin-left: 22px;
+						margin-top: 27px;
+						width: 16px;
+						height: 16px;
+
+						img {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.header-title {
+						margin-left: 12px;
+						margin-top: 23px;
+						height: 24px;
+						color: rgba(59, 65, 75, 1);
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 700;
+						line-height: 24px;
+					}
+				}
+
+				.box3-bottom-main {
+					width: 510px;
+					height: 440px;
+					overflow: hidden;
+					overflow-y: auto;
+
+					:deep(.el-timeline) {
+						padding: 8px 0px 0px 25px !important;
+					}
+
+					:deep(.el-timeline-item__node) {
+						border: 4px solid var(--color-main-active) !important;
+						background-color: #fff;
+					}
+
+					:deep(.el-timeline-item) {
+						padding-bottom: 12px !important;
+					}
+
+					:deep(.el-timeline-item__timestamp) {
+						color: var(--color-main-active) !important;
+						font-family: Microsoft YaHei !important;
+						font-size: 16px !important;
+						font-weight: 600 !important;
+						padding-top: 0px !important;
+					}
+
+					.timeline-content {
+						color: var(--text-primary-65-color);
+						font-family: Microsoft YaHei;
+						font-size: 14px;
+						font-weight: 400;
+						line-height: 26px;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 3;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+				}
+			}
+		}
+
+		.box4 {
+			margin-top: 16px;
+			height: 528px;
+
+			.left-bottom-main {
+				padding: 20px 20px 0;
+				height: 100%;
+				overflow-y: auto;
+				.main-box {
+					height: 48px;
+					border-radius: 50px;
+					border: 1px solid rgb(234, 236, 238);
+					background-color: rgba(247, 248, 249, 1);
+					margin-bottom: 12px;
+					padding: 0 15px;
+					display: flex;
+					align-items: center;
+					cursor: pointer;
+
+					.icon {
+						width: 24px;
+						height: 24px;
+						font-size: 0px;
+					}
+					.name {
+						font-size: 16px;
+						font-weight: 700;
+						font-family: "Microsoft YaHei";
+						line-height: 24px;
+						color: rgb(59, 65, 75);
+						flex: auto;
+						width: 20px;
+						margin: 0 10px;
+					}
+					.type {
+						font-size: 16px;
+						font-weight: 400;
+						font-family: "Microsoft YaHei";
+						line-height: 24px;
+						color: rgb(95, 101, 108);
+					}
+				}
+			}
+		}
+	}
+
+	.report {
+		padding: 10px 150px;
+		position: absolute;
+		left: 0;
+		top: 0;
+		z-index: 999999;
+		width: 100%;
+		height: 100%;
+		background: #f7f8f9;
+
+		.report-close {
+			position: absolute;
+			top: 20px;
+			right: 230px;
+			width: 20px;
+			height: 20px;
+			cursor: pointer;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.report-header {
+			width: 100%;
+			height: 50px;
+			color: rgba(59, 65, 75, 1);
+			font-family: Microsoft YaHei;
+			font-style: Bold;
+			font-size: 20px;
+			font-weight: 700;
+			line-height: 50px;
+			letter-spacing: 0px;
+			text-align: left;
+			padding-left: 30px;
+			border-bottom: 1px solid rgba(234, 236, 238, 1);
+		}
+
+		.report-main {
+			display: flex;
+			height: calc(100% - 100px);
+			justify-content: space-between;
+
+			.left {
+				width: 800px;
+
+				.noContent {
+					height: 100px;
+					line-height: 100px;
+					text-align: center;
+					color: rgba(59, 65, 75, 1);
+					font-family: Microsoft YaHei;
+					font-style: Regular;
+					font-size: 20px;
+					font-weight: 400;
+				}
+			}
+
+			.right {
+				width: 800px;
+
+				.noContent {
+					height: 100px;
+					line-height: 100px;
+					text-align: center;
+					color: rgba(59, 65, 75, 1);
+					font-family: Microsoft YaHei;
+					font-style: Regular;
+					font-size: 20px;
+					font-weight: 400;
+				}
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file