From 8e670c72c12da6bb91e1039635b007227c9782c9 Mon Sep 17 00:00:00 2001
From: changyunju <2743319061@qq.com>
Date: Mon, 23 Jun 2025 11:46:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E6=A1=86=E6=9E=B6page1=E8=AF=8D?=
 =?UTF-8?q?=E4=BA=91=E5=B8=83=E5=B1=80=E6=95=88=E6=9E=9C=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=20Signed-off-by:=20changyunju=20<2743319061@qq.com>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/GroupEvolution1.vue               |   2 +-
 src/views/KeyNodeRecognition1/WordCloud.vue | 309 +++++++++++++++++++-
 src/views/KeyNodeRecognition3.vue           |   1 +
 3 files changed, 299 insertions(+), 13 deletions(-)

diff --git a/src/views/GroupEvolution1.vue b/src/views/GroupEvolution1.vue
index fe25ded..33ac5af 100644
--- a/src/views/GroupEvolution1.vue
+++ b/src/views/GroupEvolution1.vue
@@ -189,7 +189,7 @@ const changeData = (index) => {
   border-radius: 2px;
   background-color: #04142166;
   border-style: solid;
-  border-width: 0px;
+  border-width: 0px; 
   border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
   border-radius: 2px;
   /* 添加内阴影 */
diff --git a/src/views/KeyNodeRecognition1/WordCloud.vue b/src/views/KeyNodeRecognition1/WordCloud.vue
index 9dcc763..6f146dd 100644
--- a/src/views/KeyNodeRecognition1/WordCloud.vue
+++ b/src/views/KeyNodeRecognition1/WordCloud.vue
@@ -1,21 +1,306 @@
 <template>
-    <div class="words">
-        <img src="../../assets/images/words.png" alt="" style="margin-top: -6px;">
-        <img src="../../assets/images/wordsimg.png" alt="" style="margin-top: 10px;margin-left: 20px;">
+  <div class="word-cloud-container">
+    <!-- Header -->
+    <div class="header">
+      <svg class="header-bg" width="302" height="42" viewBox="1 6 301 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="header-bg-fill" x1="200" y1="32.5585" x2="-98.5844" y2="32.5585" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#04192F"/>
+            <stop offset="1" stop-color="#04192F" stop-opacity="0.1"/>
+          </linearGradient>
+          <linearGradient id="header-border-fill-1" x1="81" y1="7" x2="81" y2="39" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#0E76C3" stop-opacity="0"/>
+            <stop offset="1" stop-color="#0E76C3" stop-opacity="0.32"/>
+          </linearGradient>
+          <linearGradient id="header-border-stroke-1" x1="81" y1="7" x2="81" y2="39" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#2AB9FE"/>
+            <stop offset="1" stop-color="#196F98" stop-opacity="0"/>
+          </linearGradient>
+          <linearGradient id="header-line-stroke-1" x1="197.27" y1="70.9998" x2="1.13774" y2="70.9998" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#37F2FF" stop-opacity="0"/>
+            <stop offset="0.300536" stop-color="#37F2FF"/>
+            <stop offset="0.82807" stop-color="#37F2FF" stop-opacity="0"/>
+          </linearGradient>
+          <linearGradient id="header-line-stroke-2" x1="162.723" y1="7" x2="162.723" y2="41" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#28A8E2" stop-opacity="0.35"/>
+            <stop offset="1" stop-color="#28A8E2" stop-opacity="0"/>
+          </linearGradient>
+          <linearGradient id="header-line-stroke-3" x1="246.353" y1="9.2159" x2="189.422" y2="37.9664" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#28A6E0" stop-opacity="0"/>
+            <stop offset="0.491986" stop-color="#28A6E0"/>
+            <stop offset="1" stop-color="#28A8E2" stop-opacity="0"/>
+          </linearGradient>
+          <filter id="slash-filter" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset/>
+            <feGaussianBlur stdDeviation="1"/>
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.129412 0 0 0 0 0.494118 0 0 0 0 0.780392 0 0 0 1 0"/>
+            <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
+          </filter>
+        </defs>
+        <path d="M193.5 7H1.5V39H177.774L200 14.4805L193.5 7Z" fill="black" fill-opacity="0.7"/>
+        <path d="M193.5 7H1.5V39H177.774L200 14.4805L193.5 7Z" fill="url(#header-bg-fill)"/>
+        <path d="M192.698 7.5L199.304 14.4727L175.556 38.5H1.5V7.5H192.698Z" fill="url(#header-border-fill-1)" stroke="url(#header-border-stroke-1)"/>
+        <path d="M1 6.99976L193 6.99974" stroke="url(#header-line-stroke-1)" stroke-width="1.26227"/>
+        <path d="M187 41L212.498 13.5L206.688 7H269.578L267 9.5H259.925L255 13.5H218.442L192.942 41" stroke="url(#header-line-stroke-2)" stroke-width="1.32953"/>
+        <path d="M187 41L212.498 13.5L206.688 7H269.578L267 9.5H259.925L255 13.5" stroke="url(#header-line-stroke-3)" stroke-width="1.32953"/>
+        <g filter="url(#slash-filter)">
+            <path d="M225 23H236L220 39.5H209L225 23Z" fill="#0E365A" fill-opacity="0.38"/>
+            <path d="M247 23H258L242 39.5H231L247 23Z" fill="#0E365A" fill-opacity="0.38"/>
+            <path d="M269 23H280L264 39.5H253L269 23Z" fill="#0E365A" fill-opacity="0.38"/>
+            <path d="M291 23H302L286 39.5H275L291 23Z" fill="#0E365A" fill-opacity="0.38"/>
+        </g>
+      </svg>
+      <div class="title-text"><img src="../../assets/images/words.png" alt="" style=""></div>
     </div>
+
+    <!-- Central Globe and Rings -->
+    <div class="globe-center">
+        <div class="ring-dashed"></div>
+        <div class="ring-solid"></div>
+        <div class="globe-icon">
+            <div class="globe-land"></div>
+        </div>
+    </div>
+    
+    <!-- Word Items -->
+    <div
+      v-for="word in words"
+      :key="word.text"
+      class="word-item"
+      :style="getWordStyle(word)"
+    >
+      <span class="dot"></span>
+      <span class="text">{{ word.text }}</span>
+    </div>
+    
+    <!-- Bottom decoration -->
+    <div class="bottom-decor">
+        <svg width="29" height="9" viewBox="164 278 29 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <linearGradient id="diamond-fill" x1="-0.0829921" y1="0.082992" x2="3.0011" y2="3.16708" gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#47CAF7" stop-opacity="0"/>
+                    <stop offset="1" stop-color="#47CAF7"/>
+                </linearGradient>
+                <filter id="diamond-shadow" x="0" y="0" width="13" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                    <feOffset/>
+                    <feGaussianBlur stdDeviation="2"/>
+                    <feComposite in2="hardAlpha" operator="out"/>
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.396078 0 0 0 0 0.921569 0 0 0 0 0.992157 0 0 0 1 0"/>
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+                </filter>
+            </defs>
+            <g filter="url(#diamond-shadow)" transform="translate(2, -2)">
+                <rect width="2.90771" height="2.90771" transform="matrix(0.725875 0.687827 -0.725875 0.687827 166.109 278)" fill="#74FBFE"/>
+                <rect width="2.90771" height="2.90771" transform="matrix(0.725875 0.687827 -0.725875 0.687827 166.109 278)" fill="url(#diamond-fill)"/>
+            </g>
+            <g filter="url(#diamond-shadow)" transform="translate(11.83, -2)">
+                <rect width="2.90771" height="2.90771" transform="matrix(0.725875 0.687827 -0.725875 0.687827 166.109 278)" fill="#74FBFE"/>
+                <rect width="2.90771" height="2.90771" transform="matrix(0.725875 0.687827 -0.725875 0.687827 166.109 278)" fill="url(#diamond-fill)"/>
+            </g>
+            <g filter="url(#diamond-shadow)" transform="translate(21.78, -2)">
+                 <rect width="2.90771" height="2.90771" transform="matrix(0.725875 0.687827 -0.725875 0.687827 166.109 278)" fill="#74FBFE"/>
+                <rect width="2.90771" height="2.90771" transform="matrix(0.725875 0.687827 -0.725875 0.687827 166.109 278)" fill="url(#diamond-fill)"/>
+            </g>
+        </svg>
+    </div>
+
+  </div>
 </template>
 
-<script setup>
-// 目前没有逻辑
+<script>
+export default {
+  name: 'WorldCloud',
+  data() {
+    return {
+      words: [
+        { text: '佩洛西', top: 115.5, left: 215.5, width: 109, height: 40, fontSize: 28, opacity: 1 },
+        { text: '中国', top: 183.5, left: 69.5, width: 73, height: 35, fontSize: 22, opacity: 1 },
+        { text: '中国人民解放军', top: 72.5, left: 132.5, width: 123, height: 22, fontSize: 12, opacity: 1 },
+        { text: '中美关系', top: 171.5, left: 212.5, width: 81, height: 22, fontSize: 14, opacity: 0.8 },
+        { text: '台独', top: 135.5, left: 42.5, width: 57, height: 24, fontSize: 16, opacity: 1 },
+        { text: '台海和平', top: 228.5, left: 230.5, width: 81, height: 22, fontSize: 14, opacity: 0.8 },
+        { text: '坚决反对', top: 233.5, left: 38.5, width: 73, height: 19, fontSize: 12, opacity: 0.7 },
+        { text: '联合公报', top: 241.5, left: 130.5, width: 73, height: 19, fontSize: 12, opacity: 0.7 },
+        { text: '有力反制', top: 211.5, left: 143.5, width: 73, height: 19, fontSize: 12, opacity: 1 },
+        { text: '白宫', top: 176.5, left: 15.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
+        { text: '内政', top: 87.5, left: 36.5, width: 53, height: 22, fontSize: 14, opacity: 1 },
+        { text: '访台', top: 103.5, left: 95.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
+        { text: '领土', top: 57.5, left: 72.5, width: 49, height: 19, fontSize: 12, opacity: 0.6 },
+        { text: '原则', top: 77.5, left: 264.5, width: 49, height: 19, fontSize: 12, opacity: 0.7 },
+        { text: '台湾', top: 195.5, left: 287.5, width: 49, height: 19, fontSize: 12, opacity: 0.8 },
+      ]
+    };
+  },
+  methods: {
+    getWordStyle(word) {
+      return {
+        top: `${word.top}px`,
+        left: `${word.left}px`,
+        width: `${word.width}px`,
+        height: `${word.height}px`,
+        borderRadius: `${word.height / 2}px`,
+        opacity: word.opacity,
+        fontSize: `${word.fontSize}px`,
+        paddingLeft: `${word.fontSize * 0.8}px`,
+        paddingRight: '10px'
+      };
+    }
+  }
+};
 </script>
 
 <style scoped>
-.words {
-	width: 372px;
-	height: 296px;
-	background-color: #04142166;
-	border-radius: 2px;
-	box-shadow: 0px 0px 18px 0px #0A2E55 inset;
-	backdrop-filter: blur(4px);
+.word-cloud-container {
+  position: relative;
+  width: 352px;
+  height: 286px;
+  background-color: rgba(4, 20, 33, 0.4);
+  background-image: linear-gradient(to right, rgba(6, 61, 113, 0.2), rgba(8, 30, 56, 0.8));
+  border: 1px solid #3AA1F8;
+  border-image-source: linear-gradient(to bottom, #3AA1F8, rgba(58, 161, 248, 0.2));
+  border-image-slice: 1;
+  border-radius: 2px;
+  box-shadow: inset 0 0 18px rgba(6, 45, 84, 1);
+  overflow: hidden;
+  font-family: 'Microsoft YaHei', sans-serif;
+}
+
+.header {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.header-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.title-text {
+    position: absolute;
+    top: 6px;
+    left: 15px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #97E3F8;
+    text-shadow: 0 0 8px #0076e5, 2px 4px 4px rgba(9, 18, 25, 0.26);
+    background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: 2px;
+}
+
+
+.globe-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 200px;
+}
+
+.globe-center > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+}
+
+.ring-dashed {
+    width: 125px;
+    height: 125px;
+    background: conic-gradient(from 0deg, 
+        #3FA9F5 0.5deg, transparent 0.5deg 3.6deg,
+        #3FA9F5 3.6deg 4.1deg, transparent 4.1deg 7.2deg,
+        #3FA9F5 7.2deg 7.7deg, transparent 7.7deg 10.8deg,
+        #3FA9F5 10.8deg 11.3deg, transparent 11.3deg 14.4deg,
+        #3FA9F5 14.4deg 14.9deg, transparent 14.9deg 18deg,
+        #3FA9F5 18deg 18.5deg, transparent 18.5deg 21.6deg,
+        #3FA9F5 21.6deg 22.1deg, transparent 22.1deg 25.2deg,
+        #3FA9F5 25.2deg 25.7deg, transparent 25.7deg 28.8deg,
+        #3FA9F5 28.8deg 29.3deg, transparent 29.3deg 32.4deg,
+        #3FA9F5 32.4deg 32.9deg, transparent 32.9deg 36deg,
+        #3FA9F5 36deg 36.5deg, transparent 36.5deg 360deg
+    );
+    opacity: 0.5;
+    animation: spin 20s linear infinite;
+}
+
+.ring-solid {
+    width: 108px;
+    height: 108px;
+    background: radial-gradient(circle, rgba(0, 151, 225, 0.1) 0%, rgba(0, 151, 225, 0.5) 100%);
+    opacity: 0.2;
+}
+
+.globe-icon {
+    width: 70px;
+    height: 70px;
+    border: 1px solid #2974b3;
+    background: linear-gradient(135deg, #22629E09, #2975B534 38%, #3693DA72 75%, #3FA9F5 100%);
+}
+
+.globe-land {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, #FFFFFF, rgba(255, 255, 255, 0.1));
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.006 18.317C11.488 17.53 11.115 16.962 9.693 17.187C7.008 17.613 6.71 18.084 6.582 18.856L6.545 19.091L6.509 19.34C6.362 20.364 6.368 20.752 6.838 21.246C8.736 23.237 9.873 24.673 10.217 25.512C10.386 25.923 10.818 27.163 10.52 28.389C12.356 27.66 13.973 26.5 15.248 25.034C15.413 24.473 15.533 23.775 15.533 22.928V22.771C15.533 21.387 15.533 20.756 14.555 20.197C14.142 19.963 13.834 19.822 13.587 19.71C13.037 19.459 12.672 19.295 12.18 18.575C12.121 18.489 12.064 18.404 12.006 18.317ZM10 4.75C6.524 4.75 3.386 6.198 1.156 8.523C1.422 8.708 1.653 8.967 1.812 9.324C2.118 10.01 2.118 10.717 2.118 11.341C2.117 11.834 2.117 12.301 2.275 12.64C2.492 13.102 3.425 13.298 4.248 13.471C4.542 13.533 4.846 13.596 5.122 13.673C5.881 13.883 6.468 14.565 6.939 15.112C7.134 15.34 7.423 15.674 7.567 15.758C7.643 15.703 7.885 15.441 8.005 15.01C8.096 14.682 8.07 14.39 7.936 14.231C7.097 13.242 7.143 11.335 7.402 10.632C7.81 9.524 9.086 9.606 10.018 9.666C10.366 9.689 10.694 9.71 10.939 9.68C11.872 9.562 12.159 8.143 12.362 7.865C12.801 7.265 14.141 6.361 14.974 5.802C13.454 5.126 11.771 4.75 10 4.75Z" fill="black"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.006 18.317C11.488 17.53 11.115 16.962 9.693 17.187C7.008 17.613 6.71 18.084 6.582 18.856L6.545 19.091L6.509 19.34C6.362 20.364 6.368 20.752 6.838 21.246C8.736 23.237 9.873 24.673 10.217 25.512C10.386 25.923 10.818 27.163 10.52 28.389C12.356 27.66 13.973 26.5 15.248 25.034C15.413 24.473 15.533 23.775 15.533 22.928V22.771C15.533 21.387 15.533 20.756 14.555 20.197C14.142 19.963 13.834 19.822 13.587 19.71C13.037 19.459 12.672 19.295 12.18 18.575C12.121 18.489 12.064 18.404 12.006 18.317ZM10 4.75C6.524 4.75 3.386 6.198 1.156 8.523C1.422 8.708 1.653 8.967 1.812 9.324C2.118 10.01 2.118 10.717 2.118 11.341C2.117 11.834 2.117 12.301 2.275 12.64C2.492 13.102 3.425 13.298 4.248 13.471C4.542 13.533 4.846 13.596 5.122 13.673C5.881 13.883 6.468 14.565 6.939 15.112C7.134 15.34 7.423 15.674 7.567 15.758C7.643 15.703 7.885 15.441 8.005 15.01C8.096 14.682 8.07 14.39 7.936 14.231C7.097 13.242 7.143 11.335 7.402 10.632C7.81 9.524 9.086 9.606 10.018 9.666C10.366 9.689 10.694 9.71 10.939 9.68C11.872 9.562 12.159 8.143 12.362 7.865C12.801 7.265 14.141 6.361 14.974 5.802C13.454 5.126 11.771 4.75 10 4.75Z" fill="black"/></svg>');
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+.word-item {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  color: #DEF6FF;
+  background: linear-gradient(135deg, rgba(47,101,195,0) 0%, rgba(45,102,196,0.02) 15%, rgba(40,110,200,0.08) 33%, rgba(32,116,204,0.19) 48%, rgba(6,143,220,0.51) 92%, rgba(0,151,225,0.6) 100%);
+  border: 1px solid transparent;
+  border-image-source: linear-gradient(135deg, rgba(63,169,245,0) 0%, rgba(63,169,245,0.04) 49%, rgba(61,169,246,0.08) 64%, rgba(49,174,247,0.15) 71%, rgba(0,192,255,0.7) 100%);
+  border-image-slice: 1;
+  font-weight: 500;
+}
+
+.word-item .dot {
+  width: 3px;
+  height: 3px;
+  background: #D9E021;
+  border-radius: 50%;
+  box-shadow: 0 0 3px 1.5px rgba(217, 224, 33, 0.4);
+  margin-right: 5px;
+}
+.word-item .text {
+    white-space: nowrap;
+}
+
+.bottom-decor {
+    position: absolute;
+    bottom: -3px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+@keyframes spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/KeyNodeRecognition3.vue b/src/views/KeyNodeRecognition3.vue
index fe25ded..1bb3427 100644
--- a/src/views/KeyNodeRecognition3.vue
+++ b/src/views/KeyNodeRecognition3.vue
@@ -241,3 +241,4 @@ background-color: #04142166;
   margin-left: 10px;
 }
 </style>
+