组件更新

src/components/BoxBackground/analysisBox.vue

@@ -3,6 +3,12 @@
     <div class="wrapper-header">
       <div class="header-icon"></div>
       <div class="header-title">{{ title }}</div>
+      <div class="header-btn" v-if="!showAllBtn">
+        <slot name="headerBtn"></slot>
+      </div>
+      <div class="header-btn1" v-else>
+        <slot name="headerBtn"></slot>
+      </div>
       <div class="header-right">
         <div class="header-right-btn" @click="handleSave" v-if="showAllBtn">
           <img src="@/assets/icons/box-header-icon1.png" alt="">
@@ -22,6 +28,7 @@
 </template>
 
 <script setup>
+import { ElMessage } from 'element-plus'
 import { ref, computed } from 'vue'
 
 const props = defineProps({
@@ -44,17 +51,23 @@ const props = defineProps({
 })
 
 const handleSave = () => {
-  alert('save')
+  ElMessage.success('保存当前内容')
+  // emit('save')
 }
 
 const handleDownload = () => {
-  alert('download')
+  ElMessage.success('下载当前内容')
+  // emit('download')
+
 }
 
 const handleCollect = () => {
-  alert('collect')
+  ElMessage.success('收藏当前内容')
+  // emit('collect')
+
 }
 
+const emit = defineEmits(['save','download','collect'])
 
 </script>
 
@@ -83,19 +96,39 @@ const handleCollect = () => {
       margin-left: 14px;
       margin-top: 14px;
       height: 26px;
+      // color: var(--color-main-active);
+      // font-family: Source Han Sans CN;
+      // font-size: 20px;
+      // font-weight: 700;
+      // line-height: 26px;
+      // letter-spacing: 0px;
+      height: 26px;
       color: var(--color-main-active);
-      font-family: Source Han Sans CN;
-      font-style: Bold;
+      font-family: Microsoft YaHei;
       font-size: 20px;
       font-weight: 700;
       line-height: 26px;
-      letter-spacing: 0px;
+    }
+
+    .header-btn {
+      position: absolute;
+      top: 14px;
+      right: 84px;
+      // display: flex;
+      // justify-content: flex-end;
+      // gap: 8px;
+    }
+
+    .header-btn1 {
+      position: absolute;
+      top: 14px;
+      right: 104px;
     }
 
     .header-right {
       position: absolute;
       top: 14px;
-      right: 12px;
+      right: 14px;
       height: 28px;
       display: flex;
       justify-content: flex-end;
@@ -117,9 +150,8 @@ const handleCollect = () => {
   .wrapper-main {
     height: calc(100% - 45px);
     overflow: hidden;
-    overflow-y: auto;
-    box-sizing: border-box;
-    padding: 5px 10px;
+    // overflow-y: auto;
+    padding: 5px auto;
   }
 }
 </style>

src/components/NavBarV2/index.vue

@@ -365,7 +365,7 @@ onMounted(() => {
 
 		.menu-box {
 			position: absolute;
-			z-index: 999999;
+			z-index: 999999999;
 			width: 713px;
 			height: 413px;
 			top: 52px;

src/components/areaTag.vue

@@ -30,7 +30,6 @@ const classObject = computed(() => ({
   'tag13': props.tagName === '极地',
   'tag14': props.tagName === '核',
   'tag15': props.tagName === '其他',
-
 }))
 
 
@@ -50,6 +49,9 @@ const classObject = computed(() => ({
   letter-spacing: 0px;
   box-sizing: border-box;
   border-radius: 4px;
+  border: 1px solid rgba(183, 235, 143, 1);
+  background: rgba(246, 255, 237, 1);
+  color: rgba(82, 196, 26, 1);
 }
 
 .tag1 {

src/main.js

@@ -35,9 +35,9 @@ app.use(ElementPlus, {
 })
 app.use(pinia) // 挂载 Pinia
 app.component("CardTitle", CardTitle);
-app.component('AreaTag', AreaTag)
+app.component('AreaTag', AreaTag)  // 领域标签
 app.component('leftBtn', leftBtn)
 app.component('rightBtn', rightBtn)
-app.component('OverviewBox', OverviewBox)
-app.component('AnalysisBox', AnalysisBox)
+app.component('OverviewBox', OverviewBox)  // 概览页模块背景
+app.component('AnalysisBox', AnalysisBox)  // 分析页模块背景
 app.mount("#app");

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

@@ -78,9 +78,10 @@
 					<div v-for="value in newsList" class="news-item">
 						<div class="news-item-title">
 							<div class="tag-container">
-								<div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
+								<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
 									{{ tag }}
-								</div>
+								</div> -->
+								<AreaTag v-for="tag,index in value.tags" :key="index" :tagName="tag"></AreaTag>
 							</div>
 
 							<div class="date">
@@ -237,7 +238,8 @@
 							>
 								<div class="timeline-content-item">
 									<div class="item-tags">
-										<span v-for="tag in node.tags" :key="tag" :class="getTagClass(tag)">{{ tag }}</span>
+										<!-- <span v-for="tag in node.tags" :key="tag" :class="getTagClass(tag)">{{ tag }}</span> -->
+										<AreaTag v-for="tag,idx in node.tags" :key="idx" :tagName="tag"></AreaTag>
 									</div>
 									<div class="item-title">
 										<CommonPrompt :content="node.title" />
@@ -1921,7 +1923,8 @@ watch(activeDate, () => {
 			gap: 8px;
 
 			.item-tags {
-				width: 350px;
+				width: 355px;
+				height: 30px;
 				display: flex;
 				gap: 8px;
 				overflow: auto;

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

@@ -16,10 +16,11 @@
 						<div class="item-title">{{ item.name }}</div>
 
 						<div class="type">
-							<div class="type-item" :class="getTagClass(ele.industryName)" v-for="ele, idxx in item.industryList"
+							<!-- <div class="type-item" :class="getTagClass(ele.industryName)" v-for="ele, idxx in item.industryList"
 								:key="idxx">
 								{{ ele.industryName }}
-							</div>
+							</div> -->
+							<AreaTag v-for="ele, idxx in item.industryList" :key="idxx" :tagName="ele.industryName"></AreaTag>
 						</div>
 					</div>
 				</div>
@@ -101,10 +102,11 @@
 						</el-tooltip>
 						<div class="item-bottom">
 							<div class="bottom-left">
-								<div class="left-item" :class="getTagClass(ele.industryName)" v-for="ele, idx in item.industryList"
+								<!-- <div class="left-item" :class="getTagClass(ele.industryName)" v-for="ele, idx in item.industryList"
 									:key="idx">
 									<span>{{ ele.industryName }}</span>
-								</div>
+								</div> -->
+								<AreaTag v-for="ele, idx in item.industryList" :key="idx" :tagName="ele.industryName"></AreaTag>
 							</div>
 							<div class="bottom-right">{{ getTime(item.time) }}</div>
 						</div>
@@ -131,8 +133,9 @@
 						</div>
 						<div class="item-content">
 							<div class="content-list" v-for="(ele, idx) in item.statementList" :key="idx" @click="handleClick(ele)">
-								<div class="list-left" :class="getTagClass(getName(ele.industryList))">
-									<span>{{ getName(ele.industryList) }}</span>
+								<div class="list-left">
+									<!-- <span>{{ getName(ele.industryList) }}</span> -->
+									<AreaTag v-if="getName(ele.industryList)" :tagName="getName(ele.industryList)"></AreaTag>
 								</div>
 								<div class="list-content">{{ ele.summary }}</div>
 								<div class="list-time">{{ getTime(ele.stateTime) }}</div>
@@ -171,6 +174,7 @@ import { getAllUnionList, getDynamic, getPrediction, getUnionCount, getIndustry,
 import defaultImg from "../../../../assets/images/default-icon2.png";
 import mapJson from "./assets/world.json";
 import { ElMessage } from "element-plus";
+import AreaTag from "@/components/areaTag.vue";
 
 const currentPage = ref(1);
 const pageSize = ref(10);
@@ -983,7 +987,7 @@ const initRightDonut = async () => {
 		},
 		tooltip: {
 			trigger: 'item', // 针对Graph的节点/边触发（必配，否则弹框不生效）
-    		triggerOn: 'click',
+			triggerOn: 'click',
 			formatter: function (params) {
 				// params.data 是当前点击节点的完整数据对象
 				const { name, value } = params.data;
@@ -1382,12 +1386,16 @@ watch(activeDate, async () => {
 
 				.type {
 					margin-left: 22px;
-					margin-top: 51px;
+					margin-top: 31px;
 					margin-bottom: 8px;
 					overflow-x: auto;
 					overflow-y: hidden;
 					width: calc(100% - 22px);
-					height: 25px;
+					height: 55px;
+					display: flex;
+					align-items: center;
+					gap: 4px;
+					flex-wrap: wrap;
 
 					.type-item {
 						display: inline-block;
@@ -1757,6 +1765,7 @@ watch(activeDate, async () => {
 						.bottom-left {
 							display: flex;
 							align-items: center;
+							gap: 8px;
 
 							.left-item {
 								/* 数据展示/Tag标签/亮色/蓝 */
@@ -1922,11 +1931,8 @@ watch(activeDate, async () => {
 								/* 自动布局 */
 								display: flex;
 								flex-direction: row;
-								justify-content: center;
+								justify-content: right;
 								align-items: center;
-								padding: 2px 8px;
-								box-sizing: border-box;
-								border-radius: 4px;
 
 								span {
 									font-family: Microsoft YaHei;

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

@@ -25,7 +25,7 @@
               <div style="justify-content: space-between;display: flex;width: 300px;">
                 <div class="tag">{{ item.eventStrategy }}</div>
                 <img :src="item.eventCountryImg" class="icon"
-                  style="border-radius: 14px;height: 28px;width: 28px;;"></img>
+                  style="border-radius: 14px;height: 28px;width: 28px;" />
 
               </div>
               <div class="title" :style="{