fix:政令模块细节优化

src/views/decree/decreeHome/index.vue

@@ -63,12 +63,18 @@
 						</div>
 					</div>
 				</div> -->
-				<div class="home-main-header-item-box">
-					<div class="item" v-for="(item, index) in govInsList.slice(0, 12)" :key="index" @click="handleToInstitution(item)">
+				<div class="home-main-header-item-box" v-if="govInsList.length">
+					<div class="item" v-for="(item, index) in govInsList.slice(0, 7)" :key="index" @click="handleToInstitution(item)">
 						<div class="item-left">
-							<img :src="item.img ? item.img : DefaultIcon2" alt="" />
+							<img :src="item.orgImage || DefaultIcon2" alt="" />
+						</div>
+						<div class="item-right one-line-ellipsis">{{ item.orgName }}</div>
+						<div class="item-num">{{ item.total }}项</div>
+						<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
 					</div>
-						<div class="item-right">{{ item.name }}</div>
+					<div class="item">
+						<div class="item-num item-more">查看全部机构 ({{govInsList.length+1}}家)</div>
+						<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
 					</div>
 				</div>
 			</div>
@@ -271,7 +277,7 @@
 					<div class="search-box">
 						<el-select v-model="searchType" :empty-values="[null, undefined]" style="width: 100%" filterable>
 							<el-option label="全部政府部门" value="" />
-							<el-option v-for="item in govInsList" :key="item.id" :label="item.name" :value="item.id" />
+							<el-option v-for="item in govInsList" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
 						</el-select>
 					</div>
 					<div style="flex: auto;"></div>
@@ -417,11 +423,11 @@ import { ElMessage } from "element-plus";
 
 // 跳转行政机构主页
 const handleToInstitution = item => {
-	window.sessionStorage.setItem("curTabName", item.name);
+	window.sessionStorage.setItem("curTabName", item.orgName);
 	const curRoute = router.resolve({
 		path: "/institution",
 		query: {
-			id: item.id
+			id: item.orgId
 		}
 	});
 	window.open(curRoute.href, "_blank");
@@ -447,13 +453,7 @@ const handleGetDepartmentList = async () => {
 		const res = await getDepartmentList();
 		console.log("机构列表", res);
 		if (res.code === 200 && res.data) {
-			govInsList.value = res.data.map(item => {
-				return {
-					id: item.orgId,
-					name: item.orgName,
-					img: item.orgImage
-				};
-			});
+			govInsList.value = res.data;
 		}
 	} catch (error) {
 		console.error("获取机构列表error", error);
@@ -1390,15 +1390,17 @@ onMounted(async () => {
 			}
 
 			.home-main-header-item-box {
-				margin-top: 48px;
-				margin-bottom: 64px;
+				margin: 48px 0 64px;
 				width: 1600px;
 				display: flex;
 				flex-wrap: wrap;
+				gap: 16px;
 
 				.item {
-					width: 254px;
-					height: 72px;
+					width: 20%;
+					flex: auto;
+					height: 80px;
+					padding: 0 16px;
 					display: flex;
 					box-sizing: border-box;
 					background: rgba(255, 255, 255, 0.65);
@@ -1406,8 +1408,7 @@ onMounted(async () => {
 					border-radius: 10px;
 					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 					align-items: center;
-					gap: 17px;
-					margin: 0 6px 16px 6px;
+					justify-content: center;
 					cursor: pointer;
 					transition:
 						transform 0.3s ease,
@@ -1419,10 +1420,9 @@ onMounted(async () => {
 					}
 
 					.item-left {
-						margin-left: 24px;
 						width: 48px;
 						height: 48px;
-
+						font-size: 0px;
 						img {
 							width: 100%;
 							height: 100%;
@@ -1430,12 +1430,28 @@ onMounted(async () => {
 					}
 
 					.item-right {
-						width: 140px;
+						width: 20px;
+						flex: auto;
 						color: rgba(59, 65, 75, 1);
 						font-family: Microsoft YaHei;
 						font-size: 20px;
 						font-weight: 700;
-						line-height: 24px;
+						line-height: 20px;
+						margin: 0 16px;
+					}
+
+					.item-num {
+						white-space: nowrap;
+						font-family: Microsoft YaHei;
+						font-size: 20px;
+						font-weight: 700;
+						line-height: 20px;
+						margin-right: 2px;
+						color: var(--color-primary-100);
+					}
+					.item-more {
+						margin-right: 12px;
+						font-size: 16px;
 					}
 				}
 			}