统一更新每个模块概览页背景

src/views/coopRestriction/index.vue

@@ -13,13 +13,9 @@
 		</div> -->
 		<!-- 主页面 -->
 		<div class="main-content" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
+			<div class="home-top-bg"></div>
 			<!-- 搜索栏部分 -->
-			<SearchContainer
-				v-if="homeMainRef"
-				placeholder="搜索合作限制"
-				:containerRef="homeMainRef"
-				areaName=""
-			/>
+			<SearchContainer v-if="homeMainRef" placeholder="搜索合作限制" :containerRef="homeMainRef" areaName="" />
 
 			<!-- 最新动态 -->
 			<div class="newdata" id="position1">
@@ -108,6 +104,7 @@ const handleToPosi = id => {
 	margin: 0;
 	padding: 0;
 }
+
 .coop-page {
 	width: 100%;
 	height: 100%;
@@ -127,9 +124,22 @@ const handleToPosi = id => {
 		overflow-y: auto;
 		width: 100%;
 		height: 100%;
-		background: url("./assets/images/background.png");
+		// background: url("./assets/images/background.png");
+		// background-size: 100% 100%;
+		padding: 44px 0 30px 0;
+
+		.home-top-bg {
+			background:
+				url("./assets/images/background.png"),
+				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
 			background-size: 100% 100%;
-		padding: 44px 160px 30px 160px;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
+
 		.search {
 			width: 960px;
 			height: 168px;
@@ -146,9 +156,11 @@ const handleToPosi = id => {
 				background-color: rgba(255, 255, 255, 0.65);
 				border-radius: 10px;
 				border: 1px solid transparent;
+
 				&:hover {
 					border: 1px solid var(--color-main-active);
 				}
+
 				.search-input {
 					border: none;
 					outline: none;
@@ -166,6 +178,7 @@ const handleToPosi = id => {
 						color: #a8abb2;
 					}
 				}
+
 				.search-btn {
 					margin-right: -3px;
 					cursor: pointer;
@@ -181,6 +194,7 @@ const handleToPosi = id => {
 					font-family: "Microsoft YaHei";
 					line-height: 24px;
 					color: #fff;
+
 					img {
 						width: 22px;
 						height: 22px;
@@ -188,6 +202,7 @@ const handleToPosi = id => {
 					}
 				}
 			}
+
 			.search-center {
 				width: 440px;
 				height: 57px;
@@ -195,10 +210,12 @@ const handleToPosi = id => {
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
+
 				.search-item {
 					box-sizing: border-box;
 					width: 120px;
 					height: 57px;
+
 					.search-item-num {
 						width: 120px;
 						height: 22px;
@@ -210,6 +227,7 @@ const handleToPosi = id => {
 						text-align: center;
 						cursor: pointer;
 					}
+
 					.search-item-name {
 						width: 120px;
 						height: 24px;
@@ -223,6 +241,7 @@ const handleToPosi = id => {
 					}
 				}
 			}
+
 			.search-bottom {
 				width: 688px;
 				height: 48px;
@@ -230,6 +249,7 @@ const handleToPosi = id => {
 				margin-top: 36px;
 				display: flex;
 				justify-content: space-between;
+
 				// gap: 16px;
 				.btn {
 					display: flex;
@@ -243,9 +263,11 @@ const handleToPosi = id => {
 					background: #e7f3ff;
 					cursor: pointer;
 					position: relative;
+
 					&:hover {
 						background: #cae3fc;
 					}
+
 					.btn-text {
 						width: 80px;
 						color: var(--color-main-active);
@@ -256,12 +278,14 @@ const handleToPosi = id => {
 						margin-left: 36px;
 						text-align: center;
 					}
+
 					.btn-icon {
 						position: absolute;
 						top: 16px;
 						right: 19px;
 						width: 6px;
 						height: 12px;
+
 						img {
 							width: 100%;
 							height: 100%;
@@ -270,40 +294,48 @@ const handleToPosi = id => {
 				}
 			}
 		}
+
 		.newdata {
 			width: 1600px;
 			height: 538px;
 			margin: 36px auto 64px auto;
+
 			.newdata-main {
 				width: 1600px;
 				height: 460px;
 				margin-top: 36px;
 			}
 		}
+
 		.ask {
 			width: 1600px;
 			height: 528px;
 			margin: 0 auto 64px auto;
+
 			.ask-main {
 				width: 1600px;
 				height: 450px;
 				margin-top: 36px;
 			}
 		}
+
 		.datasub {
 			width: 1600px;
 			height: 538px;
 			margin: 0 auto 88px auto;
+
 			.datasub-main {
 				width: 1600px;
 				height: 460px;
 				margin-top: 36px;
 			}
 		}
+
 		.reslib {
 			width: 1600px;
 			height: 1633px;
 			margin: 0 auto 0px auto;
+
 			.reslib-main {
 				width: 1600px;
 				height: 1565px;
@@ -368,6 +400,7 @@ const handleToPosi = id => {
 				.search-icon {
 					width: 18px;
 					height: 18px;
+
 					img {
 						width: 100%;
 						height: 100%;
@@ -426,6 +459,7 @@ const handleToPosi = id => {
 					right: 19px;
 					width: 6px;
 					height: 12px;
+
 					img {
 						width: 100%;
 						height: 100%;

src/views/exportControl/index.vue

@@ -48,6 +48,7 @@
 			</div>
 		</div> -->
 		<div class="home-main" ref="homeMainRef">
+			<div class="home-top-bg"></div>
 			<div class="home-main-header">
 				<SearchContainer style="margin-bottom: 0; margin-top: 48px; height: fit-content" v-if="homeMainRef"
 					placeholder="搜索出口管制" :containerRef="homeMainRef" areaName="实体清单" />
@@ -597,7 +598,7 @@
 </template>
 
 <script setup>
-
+import NewsList from "@/components/NewsList/NewsList.vue";
 import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
 import { onMounted, ref, computed, reactive, shallowRef, watch, nextTick } from "vue";
 import { useContainerScroll } from "@/hooks/useScrollShow";
@@ -2160,8 +2161,18 @@ const handleMediaClick = item => {
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
-		background: url("./assets/images/background.png");
+
+		.home-top-bg {
+			background:
+				url("./assets/images/background.png"),
+				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
 			background-size: 100% 100%;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
 
 		.home-main-header {
 			display: flex;

src/views/finance/index.vue

@@ -9,6 +9,7 @@
 			</div>
 		</div> -->
 		<div class="home-main" ref="containerRef">
+						<div class="home-top-bg"></div>
 			<div class="home-main-header">
 				<div class="home-main-header-center">
 					<SearchContainer style="margin-bottom: 0;  height: fit-content" v-if="containerRef" placeholder="搜索投融资限制政策"
@@ -1713,11 +1714,24 @@ onMounted(async () => {
 	overflow-y: hidden;
 
 	.home-main {
+		position: relative;
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
-		background: url("./assets/images/background.png");
+		// background: url("./assets/images/background.png");
+		// background-size: 100% 100%;
+
+				.home-top-bg {
+			background:
+				url("./assets/images/background.png"),
+				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
 			background-size: 100% 100%;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
 
 		.home-main-header {
 			margin-top: 43px;

src/views/innovationSubject/index.vue

@@ -3,6 +3,7 @@
 	<div class="home-wrapper">
 
 		<div class="home-main" ref="containerRef">
+			<div class="home-top-bg"></div>
 			<div class="home-main-header">
 				<!-- <div class="home-main-header-top" v-show="!isShow">
 					<div class="header-left">
@@ -1179,8 +1180,21 @@ onMounted(async () => {
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
-		background: url("./assets/images/background.png");
+		// background: url("./assets/images/background.png");
+		// background-size: 100% 100%;
+		position: relative;
+
+		.home-top-bg {
+			background:
+				url("./assets/images/background.png"),
+				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
 			background-size: 100% 100%;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
 
 		.home-main-header {
 			display: flex;

src/views/marketAccessRestrictions/marketAccessHome/index.vue

 <template>
 	<div class="home-wrapper">
 		<div class="home-main" ref="containerRef">
+			<div class="home-top-bg"></div>
 			<div class="home-main-header">
 				<!-- <div class="home-main-header-top">
 					<div class="header-left">
@@ -1572,8 +1573,21 @@ onMounted(async () => {
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
-		background: url("./assets/images/background.png");
+		// background: url("./assets/images/background.png");
+		// background-size: 100% 100%;
+		position: relative;
+
+		.home-top-bg {
+			background:
+				url("./assets/images/background.png"),
+				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
 			background-size: 100% 100%;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
 
 		.home-main-header {
 			display: flex;

src/views/ruleRestriction/index.vue

 <template>
 	<div class="coop-page">
 		<div class="main-content" ref="homeMainRef">
+			<div class="home-top-bg"></div>
 			<!-- 搜索栏部分 -->
-			<SearchContainer
-				v-if="homeMainRef"
-				:countInfo="statCountInfo"
-				placeholder="搜索规则限制"
-				:containerRef="homeMainRef"
-				areaName=""
-			/>
+			<SearchContainer v-if="homeMainRef" :countInfo="statCountInfo" placeholder="搜索规则限制" :containerRef="homeMainRef"
+				areaName="" />
 			<!-- 最新动态 -->
 			<div class="newdata" id="position1">
 				<com-title title="最新动态" />
@@ -138,9 +134,11 @@ onMounted(async () => {
 	margin: 0;
 	padding: 0;
 }
+
 .coop-page {
 	width: 100%;
 	height: 100%;
+
 	// .breadcrumb {
 	// 	width: 100%;
 	// 	height: 64px;
@@ -156,9 +154,21 @@ onMounted(async () => {
 		overflow-y: auto;
 		width: 100%;
 		height: 100%;
-		background: url("./assets/images/background.png");
+		// background: url("./assets/images/background.png");
+		// background-size: 100% 100%;
+		padding: 44px 0px 30px 0px;
+
+		.home-top-bg {
+			background:
+				url("./assets/images/background.png"),
+				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
 			background-size: 100% 100%;
-		padding: 44px 160px 30px 160px;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
 
 		&.scroll-main {
 			height: calc(100% - 144px);
@@ -168,6 +178,7 @@ onMounted(async () => {
 			width: 960px;
 			height: 168px;
 			margin: 0 auto 68px auto;
+
 			.search-center {
 				width: 688px;
 				height: 48px;
@@ -207,6 +218,7 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.search-main {
 				display: flex;
 				padding-right: 3px;
@@ -218,9 +230,11 @@ onMounted(async () => {
 				background-color: rgba(255, 255, 255, 0.65);
 				border-radius: 10px;
 				border: 1px solid #fff;
+
 				&:hover {
 					border: 1px solid var(--color-main-active);
 				}
+
 				.search-input {
 					border: none;
 					outline: none;
@@ -238,6 +252,7 @@ onMounted(async () => {
 						color: #a8abb2;
 					}
 				}
+
 				.search-btn {
 					cursor: pointer;
 					display: flex;
@@ -253,6 +268,7 @@ onMounted(async () => {
 					font-family: "Microsoft YaHei";
 					line-height: 22px;
 					color: #fff;
+
 					img {
 						width: 18px;
 						height: 18px;
@@ -260,6 +276,7 @@ onMounted(async () => {
 					}
 				}
 			}
+
 			.search-bottom {
 				width: 688px;
 				height: 48px;
@@ -267,6 +284,7 @@ onMounted(async () => {
 				margin-top: 36px;
 				display: flex;
 				justify-content: space-between;
+
 				// gap: 16px;
 				.btn {
 					display: flex;
@@ -280,9 +298,11 @@ onMounted(async () => {
 					background: #e7f3ff;
 					cursor: pointer;
 					position: relative;
+
 					&:hover {
 						background: #cae3fc;
 					}
+
 					.btn-text {
 						width: 80px;
 						color: var(--color-main-active);
@@ -293,12 +313,14 @@ onMounted(async () => {
 						margin-left: 36px;
 						text-align: center;
 					}
+
 					.btn-icon {
 						position: absolute;
 						top: 16px;
 						right: 19px;
 						width: 6px;
 						height: 12px;
+
 						img {
 							width: 100%;
 							height: 100%;
@@ -307,40 +329,48 @@ onMounted(async () => {
 				}
 			}
 		}
+
 		.newdata {
 			width: 1600px;
 			height: 538px;
 			margin: 36px auto 64px auto;
+
 			.newdata-main {
 				width: 1600px;
 				height: 460px;
 				margin-top: 36px;
 			}
 		}
+
 		.ask {
 			width: 1600px;
 			height: 528px;
 			margin: 0 auto 64px auto;
+
 			.ask-main {
 				width: 1600px;
 				height: 450px;
 				margin-top: 36px;
 			}
 		}
+
 		.datasub {
 			width: 1600px;
 			height: 538px;
 			margin: 0 auto 88px auto;
+
 			.datasub-main {
 				width: 1600px;
 				height: 460px;
 				margin-top: 36px;
 			}
 		}
+
 		.reslib {
 			width: 1600px;
 			height: 1633px;
 			margin: 0 auto 0px auto;
+
 			.reslib-main {
 				width: 1600px;
 				height: 1565px;
@@ -409,6 +439,7 @@ onMounted(async () => {
 				.search-icon {
 					width: 18px;
 					height: 18px;
+
 					img {
 						width: 100%;
 						height: 100%;
@@ -445,9 +476,11 @@ onMounted(async () => {
 				background: #e7f3ff;
 				cursor: pointer;
 				position: relative;
+
 				&:hover {
 					background: #cae3fc;
 				}
+
 				.btn-text {
 					width: 80px;
 					color: var(--color-main-active);
@@ -458,12 +491,14 @@ onMounted(async () => {
 					margin-left: 36px;
 					text-align: center;
 				}
+
 				.btn-icon {
 					position: absolute;
 					top: 16px;
 					right: 19px;
 					width: 6px;
 					height: 12px;
+
 					img {
 						width: 100%;
 						height: 100%;

src/views/scientificFunding/index.vue

@@ -12,15 +12,10 @@
 		</div> -->
 		<!-- 主页面 -->
 		<div class="main-content" ref="containerRef">
+			<div class="home-top-bg"></div>
 			<!-- 搜索栏部分 -->
-			 <SearchContainer
-					style="margin-bottom: 48px;height: fit-content;"
-					v-if="containerRef"
-					:countInfo="countInfo"
-					placeholder="搜索科研资助实体、资助记录"
-					:containerRef="containerRef"
-					areaName=""
-				/>
+			<SearchContainer style="margin-bottom: 48px;height: fit-content;" v-if="containerRef" :countInfo="countInfo"
+				placeholder="搜索科研资助实体、资助记录" :containerRef="containerRef" areaName="" />
 			<!-- <div class="search"> -->
 
 			<!-- <div class="search-main">
@@ -148,20 +143,20 @@ import img06 from "./assets/images/img06.png";
 let containerRef = ref(null);
 let countInfo = ref([
 	{
-		name:'科研资助机构',
-		count:18
+		name: '科研资助机构',
+		count: 18
 	},
 	{
-		name:'科研资助动态',
-		count:633
+		name: '科研资助动态',
+		count: 633
 	},
 	{
-		name:'科研资助项目',
-		count:312
+		name: '科研资助项目',
+		count: 312
 	},
 	{
-		name:'经费总额(亿美元)',
-		count:'15,556'
+		name: '经费总额(亿美元)',
+		count: '15,556'
 	},
 ]);
 // 搜索框
@@ -282,9 +277,22 @@ onMounted(async () => {
 		overflow-y: auto;
 		width: 100%;
 		height: 100%;
-		background: url("./assets/images/background.png");
+		// background: url("./assets/images/background.png");
+		// background-size: 100% 100%;
+		padding: 44px 0 30px 0;
+		position: relative;
+
+		.home-top-bg {
+			background:
+				url("./assets/images/background.png"),
+				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
 			background-size: 100% 100%;
-		padding: 44px 160px 30px 160px;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
 
 		.search {
 			width: 960px;
@@ -459,11 +467,13 @@ onMounted(async () => {
 				display: flex;
 				align-items: center;
 				padding: 0px 24px;
+
 				&:hover {
 					transform: translateY(-3px);
 					box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 				}
-				.data-text-item{
+
+				.data-text-item {
 					display: flex;
 					flex-direction: column;
 					justify-content: center;
@@ -472,6 +482,7 @@ onMounted(async () => {
 					margin-left: 16px;
 					margin-bottom: 4px;
 				}
+
 				img {
 					width: 88px;
 					height: 88px;

src/views/technologyFigures/index.vue

@@ -9,6 +9,7 @@
 				<div class="header-item">></div>
 				<div class="header-item">科技人物观点</div>
 			</div> -->
+			<div class="home-top-bg"></div>
 			<div class="home-main">
 				<div class="home-main-header" v-show="!isShow">
 					<!-- <div class="home-main-header-top">
@@ -19,13 +20,8 @@
 						<div class="header-item">科技人物观点</div>
 					</div> -->
 					<div class="home-main-header-center">
-						<SearchContainer
-							style="margin-bottom: 0;margin-top: 48px; "
-							v-if="containerRef"
-							placeholder="搜索科技人物及观点"
-							:containerRef="containerRef"
-							areaName="人物"
-						/>
+						<SearchContainer style="margin-bottom: 0;margin-top: 48px; " v-if="containerRef" placeholder="搜索科技人物及观点"
+							:containerRef="containerRef" areaName="人物" />
 						<!-- <el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" />
 						<div class="search">
 							<div class="search-icon">
@@ -1048,9 +1044,22 @@ onMounted(async () => {
 	.home-box {
 		width: 100%;
 		height: 100%;
-		background: url("./assets/images/background.png");
-		background-size: 100% 100%;
+		// background: url("./assets/images/background.png");
+		// background-size: 100% 100%;
 		overflow-y: auto;
+		position: relative;
+
+		.home-top-bg {
+			background:
+				url("./assets/images/background.png"),
+				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
+			background-size: 100% 100%;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: -100;
+			top: -64px;
+		}
 
 		// .home-header {
 		// 	height: 64px;

src/views/thinkTank/index.vue

@@ -1603,6 +1603,7 @@ onMounted(async () => {
 	}
 
 	.home-main {
+		position: relative;
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;