合并分支 'lzl-dev' 到 'master'

src/views/ZMOverView/commonTitle/comTitle.vue

@@ -21,11 +21,12 @@ const props = defineProps({
 
 <style scoped lang="scss">
 .com-title {
-	width: 100%;
+	width: 1601px;
 	height: 42px;
     display: flex;
     align-items: center;
-    margin-bottom: 36px;
+    // margin-bottom: 36px;
+    margin: 0 auto;
     .cl1 {
         width: 24px;
         height: 30px;

src/views/ZMOverView/components/fourSuppress/components/addDomain/multiLineChart.js

@@ -10,18 +10,17 @@ const getMultiLineChart = (data) => {
   const echartsSeries = series.map((item, index) => ({
     name: item.name,
     type: 'line',
-    // areaStyle: {
-    //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    //     {
-    //       offset: 0,
-    //       color: item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)` // 随机颜色
-    //     },
-    //     {
-    //       offset: 1,
-    //       color: item.color ? `${item.color.replace('0.7', '0')}` : `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)` // 随机颜色
-    //     }
-    //   ])
-    // },
+    symbol: 'circle',
+    symbolSize: 8,
+    itemStyle: {
+      color: '#fff', // 图表圆点内部为白色
+      borderColor: item.color, // 圆点边框为系列颜色
+      borderWidth: 2
+    },
+    lineStyle: {
+      width: 2,
+      color: item.color
+    },
     emphasis: {
       focus: 'series'
     },
@@ -29,38 +28,84 @@ const getMultiLineChart = (data) => {
   }));
 
   return {
+    color: series.map(item => item.color),
     tooltip: {
       trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
-      }
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      textStyle: {
+        color: '#666'
+      },
+      extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 4px;'
     },
     grid: {
       top: '15%',
-      right: '1%',
-      bottom: '0%',
-      left: '1%',
+      right: '2%',
+      bottom: '5%',
+      left: '2%',
       containLabel: true
     },
     legend: {
       show: true,
-      top: 10,
-      left: 'center'
+      top: 0,
+      left: 'center',
+      icon: 'circle',
+      itemWidth: 12,
+      itemHeight: 12,
+      data: series.map(item => ({
+        name: item.name,
+        itemStyle: {
+          color: item.color, // 强制图例使用实心系列颜色
+          borderWidth: 0
+        }
+      })),
+      textStyle: {
+        fontFamily: 'Microsoft YaHei',
+        fontSize: 16,
+        fontWeight: 400,
+        lineHeight: 24,
+        color: 'rgb(95, 101, 108)'
+      }
     },
-    color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
     xAxis: [
       {
         type: 'category',
         boundaryGap: false,
-        data: title
+        data: title,
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: '#999',
+          fontSize: 12,
+          margin: 15
+        }
       }
     ],
     yAxis: [
       {
-        type: 'value'
+        type: 'value',
+        min: 0,
+        max: 100,
+        interval: 20,
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: '#999',
+          fontSize: 12
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dashed',
+            color: '#E0E6F1'
+          }
+        }
       }
     ],
     series: echartsSeries

src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue

@@ -559,7 +559,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .content-wrapper {
 	width: 1666px;
-	height: 2132px;
+	height: 1076px;
 	// background: orange;
 	.header {
 		width: 1664px;
@@ -567,6 +567,7 @@ onMounted(() => {
 		display: flex;
 		justify-content: center;
 		gap: 16px;
+		margin: 0 auto;
 		position: relative;
 		.header-arrow-left {
 			position: absolute;

src/views/ZMOverView/components/fourSuppress/index.vue

@@ -47,8 +47,8 @@ const handleNavClick = name => {
 <style lang="scss" scoped>
 .content-wrapper {
 	// width: 1601px;
-    width: 1666px;
-	height: 2203px;
+    width: 1601px;
+	height: auto;
 	margin: 0 auto;
 	.main-nav {
 		width: 1601px;

src/views/ZMOverView/components/gameProfile/index.vue

@@ -8,7 +8,7 @@
 			</div>
 			<div style="display: flex; height: 650px; width: 100%">
 				<div style="width: 50%">
-					<div style="display: flex; justify-content: space-between; margin-right: 50px; ine-height: 32px">
+					<div style="display: flex; justify-content: space-between; margin-right: 50px; line-height: 32px;align-items: center;" >
 						<div style="display: flex; margin-left: 50px">
 							数据来源:
 							<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px">
@@ -61,9 +61,9 @@
 			<div v-for="(value, index) in btnList" class="btn-item" :style="{
 				background: value.background
 			}">
-				<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px;margin:0 22px" />
+				<img :src="`/public/icon/ZM/btn-icon-${index}.png`" style="width: 22px; height: 19px; margin: 0 22px" />
 				{{ value.text }}
-				<img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-right: 22px; width: 22px; height: 19px" />
+				<img :src="`/public/icon/ZM/btn-icon-arrow.png`" style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />
 			</div>
 		</div>
 	</div>
@@ -263,9 +263,9 @@ const btnList = ref([
 
 <style lang="scss" scoped>
 .content-wrapper {
-	width: 100%;
+	width: 1600px;
 	height: 1600px;
-
+	margin: 0 auto;
 	.card-box {
 		width: 1600px;
 		height: 700px;
@@ -277,7 +277,7 @@ const btnList = ref([
 		background: rgba(255, 255, 255, 1);
 
 		.card-title {
-			width: 1602px;
+			width: 100%;
 			height: 48px;
 			display: flex;
 
@@ -412,7 +412,7 @@ const btnList = ref([
 
 .btn-box {
 	margin-top: 16px;
-	width: 1601px;
+	width: 100%;
 	height: auto;
 	/* 高度自适应内容 */
 	display: flex;
@@ -420,7 +420,7 @@ const btnList = ref([
 	/* 行方向布局 */
 	flex-wrap: wrap;
 	/* 允许换行 */
-	justify-content: space-between;
+	justify-content: flex-start;
 	align-items: stretch;
 	/* 使所有按钮高度一致 */
 	gap: 16px 16px;
@@ -430,8 +430,7 @@ const btnList = ref([
 }
 
 .btn-item {
-	width: calc(20% - 16px);
-	/* 宽度为容器宽度的20%减去一个间隙的宽度 */
+	width: 307px;
 	height: 60px;
 	border-radius: 10px;
 	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
@@ -442,7 +441,7 @@ const btnList = ref([
 	display: flex;
 	/* 使用flex布局 */
 	color: rgba(255, 255, 255, 1);
-	justify-content: space-between;
+	justify-content: flex-start;
 	font-family: Microsoft YaHei;
 	font-style: Bold;
 	font-size: 16px;

src/views/ZMOverView/components/newRisk/WaveBall.vue

@@ -70,10 +70,40 @@ const makeOption = () => {
       },
       label: {
         show: true,
-        formatter: `${props.data.change}` + `${props.data.unit}`,
+        formatter: function () {
+          const change = props.data.change;
+          const unit = props.data.unit;
+          if (change === '无新增') {
+            return `{noChange|${change}}\n{b|共${props.data.count}${unit}}`
+          }
+          return `{num|${change}}{unit| ${unit}}\n{b|共${props.data.count}${unit}}`
+        },
+        rich: {
+          num: {
+            fontSize: 36, 
+            fontWeight: 'bold',
+            color: `${props.color[5]}`,
+            padding: [-4, 0, 8, 0] 
+          },
+          noChange: {
             fontSize: 24, 
+            fontWeight: 'bold',
+            color: `${props.color[5]}`,
+            padding: [0, 0, 8, 0]
+          },
+          unit: {
+            fontSize: 18, 
+            fontWeight: 'normal',
+            color: `${props.color[5]}`,
+            padding: [0, 0, 12, 0], 
+            verticalAlign: 'bottom'
+          },
+          b: {
+            fontSize: 16,
             color: `${props.color[5]}`,
-        insideColor: `${props.color[5]}`,
+            opacity: 0.8
+          }
+        }
       }
     }]
   }

src/views/ZMOverView/components/newRisk/index.vue

@@ -11,7 +11,10 @@
 					<div class="stats">
 						<div v-for="value in sections[index].waveBall">
 							<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
-							<div class="waveBall-text">{{ value.title }}</div>
+							<div class="waveBall-text">
+								{{ value.title }}
+								<span v-if="value.change !== '无新增'" class="red-dot"></span>
+							</div>
 						</div>
 					</div>
 					<div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'">
@@ -31,6 +34,9 @@
 
 					<div>风险信号</div>
 					<div class="num">12</div>
+					<div class="manage-btn" @click="handleToRiskManage">
+						风险信号管理 >
+					</div>
 				</div>
 				<div style="display: flex">
 					<div class="risk-signals">
@@ -159,7 +165,7 @@ const sections = ref([
 	},
 	{
 		title: "对实体清单的更新及修订",
-		date: "12-18",
+		date: "12-19",
 		waveBall: [
 			{
 				percent: 10, // 估算的百分比
@@ -179,6 +185,7 @@ const sections = ref([
 	},
 	{
 		title: "SDN清单更新",
+		date: "12-15",
 		waveBall: [
 			{
 				percent: 15, // 估算的百分比
@@ -198,7 +205,7 @@ const sections = ref([
 	},
 	{
 		title: "232调查：商用飞机和喷气发动机进口对国家安全的...",
-		date: "12-18",
+		date: "12-15",
 		waveBall: [
 			{
 				percent: 3, // 估算的百分比
@@ -269,6 +276,12 @@ const handleCarouselChange = index => {
 	}
 };
 
+const handleToRiskManage = () => {
+	// 这里的路由路径请根据实际情况修改
+	// router.push('/riskSignalManage');
+	console.log('跳转到风险信号管理');
+};
+
 const handleSwithCurNews = name => {
 	if (name === "left") {
 		carouselRef.value.prev();
@@ -290,12 +303,15 @@ onMounted(() => {
 
 	.policy-monitoring {
 		font-family: Arial, sans-serif;
+		width: 1601px;
+		margin: 0 auto;
 	}
 
 	.header {
+		width: 1601px;
 		display: flex;
-		justify-content: space-around;
-		margin-bottom: 20px;
+		justify-content: space-between;
+		margin-bottom: 16px;
 	}
 
 	.content {
@@ -327,7 +343,7 @@ onMounted(() => {
 			letter-spacing: 0px;
 			text-align: left;
 			display: flex;
-
+			align-items: center;
 			img {
 				/* 矢量 347 */
 				width: 22px;
@@ -357,6 +373,26 @@ onMounted(() => {
 				letter-spacing: 0px;
 				text-align: center;
 			}
+
+			.manage-btn {
+				margin-left: auto; /* 推到最右侧 */
+				margin-right: 16px; /* 适当的右边距 */
+				padding: 4px 12px;
+				border-radius: 20px;
+				background-color: rgba(206, 79, 81, 0.1);
+				border: 1px solid rgba(206, 79, 81, 0.1);
+				
+				font-family: "Microsoft YaHei";
+				font-size: 16px;
+				font-weight: 400;
+				line-height: 24px;
+				color: rgb(206, 79, 81);
+				cursor: pointer;
+				
+				&:hover {
+					background-color: rgba(206, 79, 81, 0.2);
+				}
+			}
 		}
 	}
 
@@ -373,7 +409,7 @@ onMounted(() => {
 	}
 
 	.section-title {
-		margin: 16px;
+		margin: 8px 16px;
 		/* 容器 1559 */
 		width: 125px;
 		height: 31px;
@@ -383,9 +419,8 @@ onMounted(() => {
 		/* 容器 519 */
 		height: 210px;
 		display: flex;
-		justify-content: left;
-		margin-top: 10px;
-		padding: 0 39px;
+		justify-content: space-between;
+		padding: 0 35px;
 
 		.waveBall-text {
 			margin-top: 17px;
@@ -398,6 +433,23 @@ onMounted(() => {
 			line-height: 26px;
 			letter-spacing: 0px;
 			text-align: center;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+
+			.red-dot {
+				width: 6px;
+				height: 6px;
+				border-radius: 50%;
+				background-color: rgba(255, 77, 79, 1);
+				margin-left: 8px;
+				// 如果需要绝对定位，可以使用下面的样式，但在 flex 布局中 margin-left 更简单
+				// position: absolute;
+				// right: -14px;
+				// top: 50%;
+				// transform: translateY(-50%);
+			}
 		}
 	}
 
@@ -441,6 +493,7 @@ onMounted(() => {
 
 	.risk-signals {
 		width: 769px;
+		height: 470px;
 		overflow-y: auto;
 		overflow-x: hidden;
 		box-sizing: border-box;

src/views/ZMOverView/index.vue

 <!--ZM博弈概览页-->
 <template>
 	<div class="home-wrapper">
-        <img :src="background" alt="" class="background-img">
+		<img :src="background" alt="" class="background-img" />
 		<div class="home-header">
 			<div class="header-left">
 				<HeaderMenu></HeaderMenu>
@@ -22,18 +22,6 @@
 				</div>
 			</div>
 		</div>
-        <div class="data-select">
-            <div 
-                v-for="item in dateList" 
-                :key="item.type" 
-                class="date-item" 
-                :class="{ active: activeDate === item.type }"
-                @click="handleDateClick(item.type)"
-            >
-                <img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
-                <span>{{ item.name }}</span>
-            </div>
-        </div>
 		<div class="content-box">
 			<!-- 导航栏 -->
 			<div class="content-nav">
@@ -46,16 +34,46 @@
 				</div>
 			</div>
 			<!-- 最新风险动态 -->
-            <commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;"></commonTitle>
+			<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px; margin-bottom: 36px"></commonTitle>
 			<newRisk></newRisk>
 			<!-- 最新科技要闻 -->
 			<!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
 			<!-- 美对华“四全”打压 -->
-            <commonTitle id="us-pressure" title="美对华“四全”打压" style="margin-top: 64px;"></commonTitle>
+			<div id="us-pressure" class="us-pressure-section">
+				<div class="data-select">
+					<div
+						v-for="item in dateList"
+						:key="item.type"
+						class="date-item"
+						:class="{ active: activeDate === item.type }"
+						@click="handleDateClick(item.type)"
+					>
+						<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
+						<span>{{ item.name }}</span>
+					</div>
+				</div>
+				<commonTitle title="美对华“四全”打压" style="margin-bottom: 36px"></commonTitle>
+			</div>
 			<fourSuppress></fourSuppress>
 			<!-- 中美博弈概况 -->
-            <commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;"></commonTitle>
+			<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px; margin-bottom: 36px"></commonTitle>
 			<gameProfile></gameProfile>
+			<div class="bottom-info">
+				<div class="info-item">
+					<div class="info-item-left">
+						<img :src="logo1" alt="" />
+						<div class="info-item-left-content">
+							<p>地址：北京市海淀区复兴路15号 邮编：100038</p>
+							<p>办公电话：010-58882033 办公传真：010-58882590</p>
+							<p>中国科学技术信息研究所 版权所有 京ICP备10027328号</p>
+						</div>
+					</div>
+					<div class="info-item-right">
+						<img :src="logo2" alt="" />
+						<img :src="logo3" alt="" />
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
@@ -64,22 +82,23 @@
 import { onMounted, ref, computed } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
-import background from "./assets/images/backgroundBT.png"
+import background from "./assets/images/backgroundBT.png";
 import HeaderMenu from "@/components/headerMenu.vue";
-import right from "./assets/icons/right.png"
-import commonTitle from "./commonTitle/comTitle.vue"
-import week from "./assets/icons/week.png"
-import weekActive from "./assets/icons/week-active.png"
-import month from "./assets/icons/month.png"
-import monthActive from "./assets/icons/month-active.png"
-import year from "./assets/icons/year.png"
-import yearActive from "./assets/icons/year-active.png"
+import right from "./assets/icons/right.png";
+import commonTitle from "./commonTitle/comTitle.vue";
+import week from "./assets/icons/week.png";
+import weekActive from "./assets/icons/week-active.png";
+import month from "./assets/icons/month.png";
+import monthActive from "./assets/icons/month-active.png";
+import year from "./assets/icons/year.png";
+import yearActive from "./assets/icons/year-active.png";
+import logo1 from "./assets/images/logo1.png";
+import logo2 from "./assets/images/logo2.png";
+import logo3 from "./assets/images/logo3.png";
 // 组件引入
-import newRisk from "./components/newRisk/index.vue"
-import fourSuppress from "./components/fourSuppress/index.vue"
-import gameProfile from "./components/gameProfile/index.vue"
-
-
+import newRisk from "./components/newRisk/index.vue";
+import fourSuppress from "./components/fourSuppress/index.vue";
+import gameProfile from "./components/gameProfile/index.vue";
 
 const router = useRouter();
 
@@ -90,9 +109,9 @@ const navList = ref([
 	{ name: "中美博弈概况", id: "zm-overview" }
 ]);
 
-const handleScrollTo = (id) => {
+const handleScrollTo = id => {
 	const element = document.getElementById(id);
-	const container = document.querySelector('.content-box');
+	const container = document.querySelector(".content-box");
 	if (element && container) {
 		const targetOffsetTop = element.offsetTop - container.offsetTop;
 		container.scrollTo({
@@ -128,12 +147,16 @@ const dateList = ref([
 	{ name: "今年", type: "year", icon: year, activeIcon: yearActive }
 ]);
 const activeDate = ref("week");
-const handleDateClick = (type) => {
+const handleDateClick = type => {
 	activeDate.value = type;
 };
 </script>
 
 <style lang="scss" scoped>
+* {
+	margin: 0;
+	padding: 0;
+}
 .home-wrapper {
 	width: 100%;
 	height: 100vh;
@@ -141,55 +164,6 @@ const handleDateClick = (type) => {
 	flex-direction: column;
 	overflow: hidden;
 	position: relative;
-    .data-select {
-        width: 120px;
-        height: 144px;
-        position: absolute;
-        top: 291px;
-        left: 0;
-        background-color: rgba(255, 255, 255, 0.65);
-        border-top-right-radius: 10px;
-        border-bottom-right-radius: 10px;
-        padding: 2px 2px 2px 0px;
-        box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        z-index: 10;
-
-        .date-item {
-            display: flex;
-            align-items: center;
-            padding-left: 18px;
-            height: 46px;
-            cursor: pointer;
-            // transition: all 0.3s;
-            border-top-right-radius: 10px;
-            border-bottom-right-radius: 10px;
-
-            img {
-                width: 18px;
-                height: 18px;
-                margin-right: 18px;
-            }
-
-            span {
-                font-family: Microsoft YaHei;
-                font-size: 16px;
-                font-weight: 400;
-                line-height: 30px;
-                color: rgb(95, 101, 108);
-            }
-
-            &.active {
-                background-color: rgba(231, 243, 255, 1);
-                span {
-                    font-weight: 700;
-                    color: rgb(5, 95, 194);
-                }
-            }
-        }
-    }
 	.background-img {
 		width: 100%;
 		height: 700px;
@@ -285,7 +259,59 @@ const handleDateClick = (type) => {
 		flex: 1;
 		width: 100%;
 		overflow-y: auto;
-		padding: 48px 160px;
+		padding-top: 48px;
+		.us-pressure-section {
+			position: relative;
+			margin-top: 64px;
+			.data-select {
+				width: 120px;
+				height: 144px;
+				position: absolute;
+				top: 80px;
+				left: 0; /* 临时改为0，检查是否能显示 */
+				background-color: rgba(255, 255, 255, 0.65);
+				border-top-right-radius: 10px;
+				border-bottom-right-radius: 10px;
+				padding: 2px 2px 2px 0px;
+				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				z-index: 10;
+
+				.date-item {
+					display: flex;
+					align-items: center;
+					padding-left: 18px;
+					height: 46px;
+					cursor: pointer;
+					border-top-right-radius: 10px;
+					border-bottom-right-radius: 10px;
+
+					img {
+						width: 18px;
+						height: 18px;
+						margin-right: 18px;
+					}
+
+					span {
+						font-family: Microsoft YaHei;
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 30px;
+						color: rgb(95, 101, 108);
+					}
+
+					&.active {
+						background-color: rgba(231, 243, 255, 1);
+						span {
+							font-weight: 700;
+							color: rgb(5, 95, 194);
+						}
+					}
+				}
+			}
+		}
 		.content-nav {
 			.nav-title {
 				font-size: 48px;
@@ -335,6 +361,49 @@ const handleDateClick = (type) => {
 				}
 			}
 		}
+		.bottom-info {
+			width: 100%;
+			height: 176px;
+			margin-bottom: 80px;
+			background-color: rgb(247, 248, 249);
+			.info-item {
+				width: 1601px;
+				height: 176px;
+				margin: 0 auto;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.info-item-left {
+					display: flex;
+					align-items: center;
+					img {
+						width: 134px;
+						height: 91px;
+						margin-right: 27px;
+					}
+					.info-item-left-content {
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 32px;
+						color: rgb(59, 65, 75);
+						font-family: Microsoft YaHei;
+					}
+				}
+				.info-item-right {
+					display: flex;
+					align-items: center;
+					img:first-child {
+						width: 300px;
+						height: 48.8px;
+						margin-right: 24px;
+					}
+					img:last-child {
+						width: 300px;
+						height: 43.5px;
+					}
+				}
+			}
+		}
 	}
 }
 </style>