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

src/components/base/messageBubble/index.vue

@@ -4,7 +4,9 @@
 			<div class="header-icon">
 				<img src="./image1.png" alt="" />
 			</div>
-			<div class="header-title">{{ "社交媒体" }}</div>
+			<div class="header-title">
+				<slot name='title'>{{ "社交媒体" }}</slot>
+			</div>
 			<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
 		</div>
 		<div class="box4-main">
@@ -148,7 +150,7 @@ const handleToMoreNews = (item) => {
 		}
 
 		.header-title {
-			width: 80px;
+			width: 100%;
 			margin-top: 11px;
 			margin-left: 18px;
 			height: 26px;

src/components/devStyle/components/constStyle.vue

@@ -3,7 +3,9 @@ import { ElSpace, ElButton } from 'element-plus';
 import "@/styles/main.css"
 import { copyToClipboardThenTip } from '@/utils/systemUtils'
 
-const colors = [
+// 黑色到白色主色一行
+const rowBlackToWhite = [
+    { title: "黑色", name: "--text-primary-color" },
     { title: "黑色90% / 主标题文字颜色", name: "--text-primary-90-color" },
     { title: "黑色80% / 小标题文字颜色", name: "--text-primary-80-color" },
     { title: "黑色65% / 正文颜色", name: "--text-primary-65-color" },
@@ -12,7 +14,25 @@ const colors = [
     { title: "黑色5% / 分割线颜色", name: "--bg-black-5" },
     { title: "黑色2% / 灰色背景色", name: "--bg-black-2" },
     { title: "白色主色", name: "--bg-white-100" },
+]
+// 主色到主色高亮背景一行（主色高亮背景为浅色，需黑色文字）
+const rowPrimaryToHighlight = [
     { title: "主色", name: "--color-primary-100" },
+    { title: "主色50%", name: "--color-primary-50", light: true },
+    { title: "主色35%", name: "--color-primary-35" },
+    { title: "主色10%", name: "--color-primary-10", light: true },
+    { title: "主色高亮背景", name: "--color-primary-2", light: true },
+]
+// 红色到绿色10%一行（*10% 为浅色背景，需黑色文字）
+const rowRedToGreen10 = [
+    { title: "红色", name: "--color-red-100" },
+    { title: "红色10%", name: "--color-red-10", light: true },
+    { title: "橙色", name: "--color-orange-100" },
+    { title: "橙色10%", name: "--color-orange-10", light: true },
+    { title: "黄色", name: "--color-yellow-100" },
+    { title: "黄色10%", name: "--color-yellow-10", light: true },
+    { title: "绿色", name: "--color-green-100" },
+    { title: "绿色10%", name: "--color-green-10", light: true },
 ]
 function copyColorVar(item) {
     const color = `var(${item.name})`
@@ -23,13 +43,36 @@ function copyColorVar(item) {
 <template>
     <el-space direction="vertical" alignment="flex-start">
         <div class="text-title-2">颜色</div>
-        <el-space>
-            <el-button v-for="(item, index) in colors" :key="index" :color="`var(${item.name})`"
-                v-on:click="copyColorVar(item)">
+        <el-space direction="vertical" alignment="flex-start">
+            <el-space wrap>
+                <el-button v-for="(item, index) in rowBlackToWhite" :key="'bw-' + index" :color="`var(${item.name})`"
+                    @click="copyColorVar(item)">
                     {{ item.title }}
                 </el-button>
             </el-space>
+            <el-space wrap>
+                <el-button v-for="(item, index) in rowPrimaryToHighlight" :key="'ph-' + index"
+                    :class="{ 'color-btn-text-black': item.light }"
+                    :style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
+                    @click="copyColorVar(item)">
+                    {{ item.title }}
+                </el-button>
+            </el-space>
+            <el-space wrap>
+                <el-button v-for="(item, index) in rowRedToGreen10" :key="'rg-' + index"
+                    :class="{ 'color-btn-text-black': item.light }"
+                    :style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
+                    @click="copyColorVar(item)">
+                    {{ item.title }}
+                </el-button>
+            </el-space>
+        </el-space>
     </el-space>
 </template>
 
-<style scoped></style>
+<style scoped>
\ No newline at end of file
+/* 浅色背景按钮：文字黑色 */
+:deep(.color-btn-text-black) {
+    color: var(--el-color-black) !important;
+}
+</style>
\ No newline at end of file

src/styles/main.css

@@ -39,10 +39,22 @@
 
   /* 主色 设计定义*/
   --color-primary-100: #055FC2;
-  --color-primary-50: #82AFE0;
-  --color-primary-35: #AED6FF;
+  --color-primary-50: #89C1FF;
+  --color-primary-35: #B9DCFF;
   --color-primary-10: #E7F3FF;
   --color-primary-2: #F6FAFF;
+  /* 红色 设计定义 */
+  --color-red-100:#CE4F51;
+  --color-red-10:rgba(206, 79, 81, 0.1);
+  /* 橙色 设计定义 */
+  --color-orange-100:#FF954D;
+  --color-orange-10:rgba(255, 149, 77, 0.1);
+  /* 黄色 设计定义 */
+  --color-yellow-100:#E8BD0B;
+  --color-yellow-10:rgba(232, 189, 11, 0.1);
+  /* 绿色 设计定义 */
+  --color-green-100:#218139;
+  --color-green-10:rgba(33, 129, 57, 0.1);
 }
 
 .hover-dialog {

src/views/ruleRestriction/index2.vue

@@ -29,7 +29,7 @@
 					<div class="btn-icon">
 						<img src="@/assets/icons/arrow-right-icon.png" alt />
 					</div>
-				</div>
+				</div>,
 				<div class="btn" @click="handleToPosi('position4')">
 					<div class="btn-text">资源库</div>
 					<div class="btn-icon">

src/views/thinkTank/ThinkTankDetail/index.vue

@@ -17,7 +17,12 @@
 						<AreaTag v-for="(tag, index) in thinkTank.tags" :key="index" :tagName="tag.industryName"></AreaTag>
 					</div>
 				</div>
-				<!-- <div class="header-top-right">{{ '查看智库官网' }}</div> -->
+				<div class="header-top-right">
+					<button class="blue-btn">
+						<img class="btn-img" src="./images/image1.png" alt="" />
+						<span class="text">{{ '查看智库官网' }}</span>
+					</button>
+				</div>
 			</div>
 			<div class="header-footer">
 				<div class="tab" :class="{ tabActive: tabActiveName === '智库动态' }" @click="switchTab('智库动态')">
@@ -94,19 +99,22 @@ onMounted(async () => {
 	height: 100%;
 	overflow: hidden;
 	overflow-y: auto;
+
 	.header {
 		width: 100%;
 		height: 188px;
 		box-sizing: border-box;
-		padding: 0 160px;
-		border-bottom: 1px solid rgba(234, 236, 238, 1);
-		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+
+		border-bottom: 1px solid rgb(234, 236, 238);
+		border-top: 1px solid rgb(234, 236, 238);
+		box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
 		background: rgba(255, 255, 255, 1);
 		position: relative;
 		position: sticky;
 		top: 0;
 		z-index: 99999;
-		overflow: hidden;
+		overflow: visible;
+
 		.header-top {
 			width: 1600px;
 			margin: 0 auto;
@@ -116,6 +124,8 @@ onMounted(async () => {
 			.header-top-left {
 				width: 88px;
 				height: 88px;
+
+
 				img {
 					width: 100%;
 					height: 100%;
@@ -130,8 +140,8 @@ onMounted(async () => {
 
 					.name {
 						height: 26px;
-						color: rgba(59, 65, 75, 1);
-						font-family: Microsoft YaHei;
+						color: rgb(59, 65, 75);
+						font-family: 'Source Han Sans CN';
 						font-size: 20px;
 						font-weight: 700;
 						line-height: 26px;
@@ -142,11 +152,11 @@ onMounted(async () => {
 					.e-name {
 						margin-left: 11px;
 						height: 26px;
-						color: rgba(132, 136, 142, 1);
-						font-family: Microsoft YaHei;
+						color: rgb(132, 136, 142);
+						font-family: 'Source Han Sans CN';
 						font-size: 14px;
 						font-weight: 400;
-						line-height: 26px;
+						line-height: 22px;
 						letter-spacing: 0px;
 						text-align: left;
 					}
@@ -156,12 +166,13 @@ onMounted(async () => {
 					margin-top: 4px;
 					width: 769px;
 					height: 24px;
-					color: rgba(132, 136, 142, 1);
-					font-family: Microsoft YaHei;
+					color: rgb(132, 136, 142);
+					font-family: 'Source Han Sans CN';
 					font-size: 16px;
 					font-weight: 400;
 					line-height: 24px;
 					letter-spacing: 0px;
+					text-align: justify;
 				}
 
 				.center-footer {
@@ -171,18 +182,71 @@ onMounted(async () => {
 
 					.tag {
 						height: 26px;
-						line-height: 26px;
-						text-align: center;
-						padding: 0 8px;
+
+
+						padding: 1px 8px 1px 8px;
 						box-sizing: border-box;
-						border: 1px solid rgba(231, 243, 255, 1);
+						border: 1px solid rgb(231, 243, 255);
 						border-radius: 4px;
-						background: rgba(246, 250, 255, 1);
-						color: rgba(5, 95, 194, 1);
+						background: rgb(246, 250, 255);
+						position: relative;
+						display: inline-flex;
+						align-items: center;
+
+						.tag-industryName {
+							color: rgb(5, 95, 194);
+							font-family: 'Source Han Sans CN';
+							font-size: 16px;
+							font-weight: 400;
+							line-height: 23px;
+							text-align: left;
+							letter-spacing: 0px;
+
+						}
+					}
+				}
+			}
+
+			.header-top-right {
+				margin-left: auto;
+				height: 36px;
+
+				box-sizing: border-box;
+				position: relative;
+
+
+				.blue-btn {
+					height: 100%;
+					box-sizing: border-box;
+					border: none;
+					outline: none;
+					border-radius: 6px;
+					background: rgba(5, 95, 194, 1);
+					padding: 7px 16px;
+					display: flex;
+					align-items: center;
+
+					&:focus {
+						outline: none;
+					}
+
+					.btn-img {
+						width: 16px;
+						height: 16px;
+						margin-left: 0px;
+						margin-top: 3px;
+						margin-bottom: 3px;
+
+						margin-right: 8px;
+
+					}
+
+					.text {
+						color: #fff;
 						font-family: Microsoft YaHei;
 						font-size: 16px;
 						font-weight: 400;
-						line-height: 24px;
+						line-height: 22px;
 					}
 				}
 			}
@@ -191,14 +255,14 @@ onMounted(async () => {
 		.header-footer {
 			width: 1600px;
 			margin: 0 auto;
-			margin-top: 25px;
+			margin-top: 28px;
 			height: 48px;
 			display: flex;
 			gap: 24px;
 
 			.tab {
-				width: 94px;
 				height: 48px;
+				box-sizing: border-box;
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -218,21 +282,21 @@ onMounted(async () => {
 
 				.text {
 					height: 24px;
-					color: rgba(59, 65, 75, 1);
-					font-family: Microsoft YaHei;
+					color: rgb(59, 65, 75);
+					font-family: 'Source Han Sans CN';
 					font-size: 18px;
 					font-weight: 400;
 					line-height: 24px;
 				}
 
 				.textActive {
-					color: rgba(5, 95, 194, 1);
+					color: rgb(5, 95, 194);
 					font-weight: 700;
 				}
 			}
 
-			.tabActive {
-				border-bottom: 2px solid rgba(5, 95, 194, 1);
+			.tab.tabActive {
+				border-bottom: 2px solid rgb(5, 95, 194);
 			}
 		}
 	}
@@ -241,167 +305,7 @@ onMounted(async () => {
 		margin: 0 auto;
 		width: 1600px;
 
-		.main-header {
-			height: 64px;
-			display: flex;
-			justify-content: space-between;
-
-			.search-box {
-				margin-top: 16px;
-				display: flex;
-				width: 300px;
-				height: 32px;
-				box-sizing: border-box;
-				border: 1px solid rgba(230, 231, 232, 1);
-				border-radius: 4px;
-				background: rgba(255, 255, 255, 1);
-
-				.icon {
-					width: 16px;
-					height: 16px;
-					margin: 8px 7px;
-					cursor: pointer;
-
-					img {
-						width: 100%;
-						height: 100%;
-					}
-				}
-			}
-
-			.select-box {
-				margin-top: 16px;
-				margin-right: 5px;
-			}
-		}
 
-		.main-content {
-			display: flex;
-			gap: 16px;
-
-			.left {
-				width: 300px;
-				height: 806px;
-				box-sizing: border-box;
-				border: 1px solid rgba(234, 236, 238, 1);
-				border-radius: 10px;
-				box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
-				background: rgba(255, 255, 255, 1);
-				position: relative;
-
-				.select-box {
-					margin-top: 21px;
-
-					.select-box-header {
-						display: flex;
-						gap: 17px;
-
-						.icon {
-							margin-top: 4px;
-							width: 8px;
-							height: 16px;
-							background: var(--color-main-active);
-							border-radius: 0 4px 4px 0;
-						}
-
-						.title {
-							height: 24px;
-							color: var(--color-main-active);
-							font-family: Microsoft YaHei;
-							font-size: 16px;
-							font-weight: 700;
-							line-height: 24px;
-							letter-spacing: 1px;
-							text-align: left;
-						}
-					}
-
-					.select-main {
-						margin-left: 25px;
-					}
-
-					.select-main1 {
-						width: 100px;
-					}
-				}
-			}
-
-			.right {
-				width: 1284px;
-				height: 1377px;
-
-				.card-box {
-					width: 1284px;
-					height: 1248px;
-					display: flex;
-					justify-content: space-between;
-					flex-wrap: wrap;
-
-					.footer-card {
-						width: 418px;
-						height: 300px;
-						border-radius: 10px;
-						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-						background: rgba(255, 255, 255, 1);
-
-						.footer-card-top {
-							width: 384px;
-							height: 206px;
-							margin: 0 auto;
-							margin-top: 15px;
-
-							img {
-								width: 100%;
-								height: 100%;
-							}
-						}
-
-						.footer-card-title {
-							margin: 0 auto;
-							margin-top: 13px;
-							width: 376px;
-							height: 24px;
-							color: rgba(59, 65, 75, 1);
-							font-family: Microsoft YaHei;
-							font-size: 18px;
-							font-weight: 700;
-							line-height: 24px;
-						}
-
-						.footer-card-footer {
-							margin: 0 auto;
-							margin-top: 5px;
-							width: 376px;
-							height: 22px;
-							display: flex;
-							justify-content: space-between;
-							color: rgba(95, 101, 108, 1);
-							font-family: Microsoft YaHei;
-							font-size: 14px;
-							font-weight: 400;
-							line-height: 22px;
-						}
-					}
-				}
-
-				.right-footer {
-					margin-top: 43px;
-					display: flex;
-					justify-content: space-between;
-
-					.info {
-						height: 19px;
-						color: rgba(132, 136, 142, 1);
-						font-family: Microsoft YaHei;
-						font-size: 14px;
-						font-weight: 400;
-						line-height: 18px;
-						letter-spacing: 0px;
-						text-align: left;
-					}
-				}
-			}
-		}
 	}
 }
 

src/views/thinkTank/index.vue

@@ -13,7 +13,7 @@
 				</div> -->
 
 				<div class="home-main-header-center">
-					<SearchContainer style="margin-bottom: 0; margin-top: 48px; height: fit-content" v-if="containerRef"
+					<SearchContainer style="margin-bottom: 0; margin-top: 51px; height: fit-content" v-if="containerRef"
 						placeholder="搜索智库报告" :containerRef="containerRef" areaName="智库" />
 					<!-- <el-input v-model="searchThinktankText" @keyup.enter="handleSearch"
 						style="width: 838px; height: 100%" placeholder="搜索智库报告" />