your commit message

src/views/Main.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="main">
+    <div v-if="showTooltip" class="tooltip">
+      <img src="../assets/images/logo/jubaiqi.png" alt="" style="margin-left: 700px;margin-top: 100px;">
 
+      <img src="../assets/images/logo/cancel.png" alt=""
+        style="margin-left: -52px;margin-bottom: 600px;cursor: pointer;" @click="showTooltip = false">
+    </div>
     <header class="header">
       <!-- <div class="time">
         <img src="../assets/images/logo/time.png" alt="" style="float: right;margin-right: 250px;margin-top: -150px;">
@@ -9,7 +14,7 @@
     </header>
     <div class="search">
       <!-- 使用 el-autocomplete 组件替换原输入框 -->
-        <input type="text" placeholder="南海争端系列舆情事件" style="
+      <input type="text" placeholder="南海争端系列舆情事件" style="
           width:400px;
           height: 36px;
           margin-left: 36px;
@@ -23,66 +28,160 @@
           font-weight: 300;
           font-size: 18px;
         " v-model="inputValue" @input="handleInput">
-        <ul v-if="suggestions.length > 0" class="suggestions">
-          <li v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)">
-            {{ item.value }}
-          </li>
-        </ul>
-        <button class="search-button" @click="handleSearch">
-          <img src="../assets/images/logo/search.png" alt="" style="width: 36px; display: block;">
-        </button>
+      <ul v-if="suggestions.length > 0" class="suggestions">
+        <li v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)">
+          {{ item.value }}
+        </li>
+      </ul>
+      <button class="search-button" @click="handleSearch">
+        <img src="../assets/images/logo/search.png" alt="" style="width: 36px; display: block;">
+      </button>
 
-      </div>
-      <div class="container-wrapper">
-        <div class="left-container">
-          <div class="containner1">
-            <img src="../assets/images/head/tuijian.png" alt="" style="margin-top: -3px;">
-            <div class="suggestion">
-              <div class="type-selector">
-              <button v-for="(item, index) in buttonList" :key="index" @click="changeType(index)" class="type-select">
-                {{ item }}
-              </button>
-              </div>
-              <ul v-if="currentInfo.length > 0">
-                <li v-for="(info, index) in currentInfo" :key="index">
-                  <img :src="info.img" alt="info.name" style="width: 30px; height: 30px; vertical-align: middle; margin-right: 10px;">
-                  {{ info.name }} - 粉丝数: {{ info.fansCount }}
+    </div>
+    <div class="container-wrapper">
+      <div class="left-container">
+        <div class="containner1">
+          <img src="../assets/images/head/tuijian.png" alt="" style="margin-top: -3px;">
+          <div class="suggestion">
+            <div class="type-selector">
+              <!-- 添加四个按钮 -->
+              <button @click="switchCategory('全部')" :class="{ active: currentCategory === '全部' }">全部</button>
+              <button @click="switchCategory('新闻媒体')" :class="{ active: currentCategory === '新闻媒体' }">新闻媒体</button>
+              <button @click="switchCategory('自媒体')" :class="{ active: currentCategory === '自媒体' }">自媒体</button>
+              <button @click="switchCategory('政府官号')" :class="{ active: currentCategory === '政府官号' }">政府官号</button>
+            </div>
+            <div class="suggestion-containner">
+              <ul>
+                <li v-for="item in filteredData" :key="item.id">
+                  <!-- 显示用户头像 -->
+                  <img :src="item.avatar">
+                  <!-- 显示其他信息 -->
+                  <div class="span-data">
+                    <span class="span-1">{{ item.name }}</span>
+                    <span class="span-2">粉丝数：&nbsp;{{ item.number }}</span>
+                    <span class="span-3">推荐监控频率</span>
+                  </div>
                 </li>
               </ul>
             </div>
           </div>
-          <div class="containner2">
-            <img src="../assets/images/head/xinxi.png" alt="" style="margin-top: -3px;">
-          </div>
         </div>
-        <div class="right-container">
-          <div class="containner3">
-            <img src="../assets/images/head/events.png" alt="" style="margin-top: -3px;">
+        <div class="containner2">
+          <img src="../assets/images/head/xinxi.png" alt="" style="margin-top: -3px;">
+          <div class="containner2-alldata">
+            <div class="containner2-data">
+              <li><img src="../assets/images/logo/point.png" alt="">锚点数量：&nbsp;&nbsp;&nbsp;{{ currentData.anchorCount }}
+              </li>
+              <li><img src="../assets/images/logo/point.png" alt="">平均发帖频率：{{ currentData.postFrequency }}</li>
+              <li><img src="../assets/images/logo/point.png" alt="">锚点画像分布</li>
+            </div>
+            <div class="containner2-range">
+              <li><img src="../assets/images/logo/point.png" alt="">平均粉丝数量：&nbsp;&nbsp;&nbsp;{{ currentData.fansCount }}
+              </li>
+              <li><img src="../assets/images/logo/point.png" alt="">平均参与互动数：&nbsp;{{ currentData.interactionCount }}
+              </li>
+            </div>
           </div>
-          <div class="containner4">
-            <img src="../assets/images/head/jiankong.png" alt="" style="margin-top: -3px;">
+          <div class="intime">
+            <img src="../assets/images/percent/intime.png" alt="" style="margin-left:30px;margin-top: 30px;">
+            <img src="../assets/images/percent/intime-data.png " style="margin-left:30px;margin-bottom: 10px;">
+            <img src="../assets/images/logo/xingwei.png" alt="" style="margin-left:30px;margin-top: 30px;">
+            <img src="../assets/images/logo/xingwei-data.png" style="margin-left:30px;margin-bottom: 30px;">
           </div>
         </div>
       </div>
+      <div class="right-container">
+        <div class="containner3">
+          <img src="../assets/images/head/events.png" alt="" style="margin-top: -3px;">
+          <div class="focus-events">
+            <div class="focus-events-z" @click="showTooltip = true">
+              <img src="../assets/images/logo/ruank1.png" alt="">
+              <div class="focus-events-text">#中国海警首次登检菲律宾运补船只#</div>
+              <img src="../assets/images/logo/high1.png" alt=""
+                style="width: 60px;margin-top: 15px;margin-right: 10px;float: right;">
+            </div>
+            <div class="focus-events-z" @click="showTooltip = true">
+              <img src="../assets/images/logo/ruank2.png" alt="">
+              <div class="focus-events-text">#中方回应菲称我海警挥舞刀具#</div>
+              <img src="../assets/images/logo/high2.png" alt=""
+                style="width: 60px;margin-top: 15px;margin-right: 10px;float: right;">
+            </div>
+            <div class="focus-events-z" @click="showTooltip = true">
+              <img src="../assets/images/logo/ruank3.png" alt="">
+              <div class="focus-events-text">#中国海警夺回菲方盗窃赃物#</div>
+              <img src="../assets/images/logo/high3.png" alt=""
+                style="width: 60px;margin-top: 15px;margin-right: 10px;float: right;">
+            </div>
+            <div class="focus-events-z" @click="showTooltip = true">
+              <img src="../assets/images/logo/ruank3.png" alt="">
+              <div class="focus-events-text">#菲自曝被中国海警缴枪的是顶级特种部队#</div>
+              <img src="../assets/images/logo/high3.png" alt=""
+                style="width: 60px;margin-top: 15px;margin-right: 10px;float: right;">
+            </div>
+            <div class="focus-events-z" @click="showTooltip = true">
+              <img src="../assets/images/logo/ruank3.png" alt="">
+              <div class="focus-events-text">#菲律宾希望与中国就南海问题进行对话#</div>
+              <img src="../assets/images/logo/high3.png" alt=""
+                style="width: 60px;margin-top: 15px;margin-right: 10px;float: right;">
+            </div>
+          </div>
+          <img src="../assets/images/logo/high-words.png" alt="" style="margin-left: 120px;margin-top: 10px;">
+          <img src="../assets/images/logo/high-events.png" alt="" style="margin-left: 15px;margin-top: 2px;">
+        </div>
+        <div class="containner4">
+          <img src="../assets/images/head/jiankong.png" alt="" style="margin-top: -3px;">
+          <div class="containner4-alldata" ref="scrollContainer">
+    <div
+      v-for="(item, index) in visibleData"
+      :key="index"
+      class="containner4-data"
+      :class="{ 'temporary-style': item.showTemporaryStyle }"
+      @appear="applyTemporaryStyle(index)"
+    >
+      <!-- 人物头像 -->
+      <img :src="item.avatar" alt="人物头像" />
+      <!-- 评论人员 -->
+      <p1>{{ item.commenter }}</p1>
+      <!-- 评论时间 -->
+      <p3 style="float: right;font-size: 12px;font-weight: 200;">{{ item.time }}</p3>
+      <!-- 评论内容 -->
+      <p>{{ item.comment }}</p>
+    </div>
+  </div>
+        </div>
+      </div>
+    </div>
+    <div class="containner5">
+      <img src="./keypoint/key.png" alt="" style="width: 880px;margin-top: 10px;margin-left: 250px;z-index: 1;">
+    </div>
+    <div class="hiden">
+      <button v-if="button1Visible" class="image-button1">
+        <img :src="image1Src" alt="按钮 1">
+      </button>
+      <button v-if="button2Visible" class="image-button2">
+        <img :src="image2Src" alt="按钮 2">
+      </button>
+      <button v-if="button3Visible" class="image-button3">
+        <img :src="image3Src" alt="按钮 3">
+      </button>
+      <button v-if="button4Visible" class="image-button4">
+        <img :src="image4Src" alt="按钮 4">
+      </button>
+      <button v-if="button5Visible" class="image-button5">
+        <img :src="image5Src" alt="按钮 5">
+      </button>
+    </div>
+    <div class="containner6">
+      <img src="../assets/images/logo/Frame1.png" alt="" style="margin-left: 50px;margin-top: 30px;">
+    </div>
   </div>
 </template>
 <script setup>
-import { ref } from 'vue';
+import { ref, computed, onMounted, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
 
-// 动态导入图片
-const importImage = async (path) => {
-  try {
-    const module = await import(`@${path}`);
-    return module.default;
-  } catch (error) {
-    console.error('图片导入失败:', error);
-    return '';
-  }
-};
-
 const handleSearch = () => {
   if (inputValue.value === '南海争端系列舆情事件') {
     router.push('/Main');
@@ -123,66 +222,136 @@ const handleInput = () => {
   }
 };
 
-const selectSuggestion = (item) => {
-  inputValue.value = item.value;
-  suggestions.value = [];
-  console.log('选中项:', item);
+const mediaData = [
+  { id: 1, type: '新闻媒体', name: '新浪军事', avatar: 'src/views/user/xinlang.png', number: '5005.8w' },
+  { id: 2, type: '新闻媒体', name: '环球时报', avatar: 'src/views/user/huanqiu.png', number: '3126.1w' },
+  { id: 3, type: '自媒体', name: '大侠啊啊啊啊', avatar: 'src/views/user/daxia.png', number: '288' },
+  { id: 4, type: '自媒体', name: '外贸发布BBS', avatar: 'src/views/user/bbs.png', number: '1.3w' },
+  { id: 5, type: '自媒体', name: '空天砺剑', avatar: 'src/views/user/kongtian.png', number: '516.5w' },
+  { id: 6, type: '自媒体', name: '爱锤盾海桃-霆恩启副', avatar: 'src/views/user/ai.png', number: '223' },
+  { id: 7, type: '自媒体', name: '苍龙飞天79', avatar: 'src/views/user/79.png', number: '516.6w' },
+  { id: 8, type: '自媒体', name: '盖世英雄玉椒龙', avatar: 'src/views/user/gaishi.png', number: '42w' },
+  { id: 9, type: '自媒体', name: '十八子91221', avatar: 'src/views/user/91221.png', number: '1947' },
+  { id: 10, type: '自媒体', name: '江夏云飞', avatar: 'src/views/user/jiang.png', number: '1629' },
+  { id: 11, type: '自媒体', name: '唐宁20150903', avatar: 'src/views/user/tang.png', number: '25' },
+  { id: 12, type: '自媒体', name: '钻石狗Boss', avatar: 'src/views/user/bbs.png', number: '1184' },
+  { id: 13, type: '自媒体', name: '乐之567', avatar: 'src/views/user/567.png', number: '266' },
+  { id: 14, type: '自媒体', name: '地瓜熊老六', avatar: 'src/views/user/lao.png', number: '667.5w' },
+  { id: 15, type: '自媒体', name: 'CGTN记者团', avatar: 'src/views/user/cgtn.png', number: '322.1w' },
+  { id: 16, type: '自媒体', name: '钱局长本人', avatar: 'src/views/user/qian.png', number: '40万' },
+  { id: 17, type: '自媒体', name: '肥_谍_gg', avatar: 'src/views/user/gg.png', number: '245' },
+  { id: 18, type: '自媒体', name: '深海一万米', avatar: 'src/views/user/shenhai.png', number: '126w' },
+  { id: 19, type: '政府官号', name: '中国海警', avatar: 'src/views/user/haijing.png', number: '80.9w' },
+  { id: 20, type: '政府官号', name: '平安泸县', avatar: 'src/views/user/luxian.png', number: '3.9w' },
+];
+const categoryData = {
+  '全部': {
+    anchorCount: 36,
+    postFrequency: '5.1天/次',
+    fansCount: '1.7w',
+    interactionCount: 0
+  },
+  // 修改键名，使其与按钮传递的参数一致
+  '自媒体': {
+    anchorCount: 16,
+    postFrequency: '4.3天/次',
+    fansCount: '117.8w',
+    interactionCount: 20
+  },
+  '政府官号': {
+    anchorCount: 2,
+    postFrequency: '11.2天/次',
+    fansCount: '42.4w',
+    interactionCount: 2
+  },
+  '新闻媒体': {
+    anchorCount: 2,
+    postFrequency: '14.8天/次',
+    fansCount: '4065.5w',
+    interactionCount: 0
+  }
 };
-
-// 定义按钮列表
-const buttonList = ['全部', '新闻媒体', '自媒体', '政府官号'];
-// 定义当前激活的按钮索引
-const activeButtonIndex = ref(0);
-// 定义不同类型的信息
-// 修正 infoData 里的 img 属性，统一使用 importImage
-const infoData = {
-  '新闻媒体': [
-    { name: '新浪军事', fansCount: '1000000', img: await importImage('/assets/images/user/xinlang.png')},
-    { name: '环球时报', fansCount: '1500000', img: await importImage('/assets/images/user/huanqiu.png') }
-  ],
-  '自媒体': [
-    { name: '大侠啊啊啊啊', fansCount: '50000', img: await importImage('/assets/images/user/daxia.png') },
-    { name: '外贸发布BBS', fansCount: '30000', img: await importImage('/assets/images/user/waimao.png') },
-    { name: '空天砺剑', fansCount: '40000', img: '' },
-    { name: '爱锤盾海桃-霆恩启副', fansCount: '20000', img: '' },
-    { name: '苍龙飞天79', fansCount: '25000', img: '' },
-    { name: '盖世英雄玉椒龙', fansCount: '35000', img: '' },
-    { name: '十八子91221', fansCount: '18000', img: '' },
-    { name: '江夏云飞', fansCount: '22000', img: '' },
-    { name: '唐宁20150903', fansCount: '28000', img: '' },
-    { name: '钻石狗Boss', fansCount: '32000', img: '' },
-    { name: '乐之567', fansCount: '15000', img: '' },
-    { name: '地瓜熊老六', fansCount: '45000', img: '' },
-    { name: 'CGTN记者团', fansCount: '60000', img: '' },
-    { name: '钱局长本人', fansCount: '55000', img: '' },
-    { name: '肥_谍_gg', fansCount: '23000', img: '' },
-    { name: '深海一万米', fansCount: '38000', img: '' }
-  ],
-  '政府官号': [
-    { name: '中国海警', fansCount: '2000000', img: await importImage('/assets/images/user/haijing.png') },
-    { name: '平安泸县', fansCount: '1200000', img: await importImage('/assets/images/user/luxian.png') }
-  ]
-};
-// 定义当前显示的信息
-const currentInfo = ref([]);
-
-// 切换类型的方法
-const changeType = (index) => {
-  activeButtonIndex.value = index;
-  if (index === 0) {
-    // 全部类型
-    currentInfo.value = Object.values(infoData).flat();
+// 当前显示的分类
+const currentCategory = ref('全部');
+// 当前显示的数据
+const currentData = computed(() => categoryData[currentCategory.value]);
+// 计算过滤后的数据
+const filteredData = computed(() => {
+  if (currentCategory.value === '全部') {
+    return mediaData;
   } else {
-    const type = buttonList[index];
-    currentInfo.value = infoData[type];
+    return mediaData.filter(item => item.type === currentCategory.value);
+  }
+});
+// 切换分类的方法
+const switchCategory = (category) => {
+  currentCategory.value = category;
+};
+const showTooltip = ref(false);
+
+const allData = Array.from({ length: 5 }, (_, index) => ({ id: index, showTemporaryStyle: false }));
+const currentIndex = ref(0);
+
+const visibleData = ref([
+  {
+    avatar: 'path/to/avatar1.jpg',
+    commenter: '钻石狗Boss',
+    comment: '干的漂亮，赞一个！',
+    time: '2024-06-19 16:03:26'
+  },
+  {
+    avatar: 'path/to/avatar2.jpg',
+    commenter: '爱锤盾海桃-霆恩启副',
+    comment: '转发微博',
+    time: '2024-06-20 18:25:02 '
+  },
+  {
+    avatar: 'path/to/avatar2.jpg',
+    commenter: '空天砺剑',
+    comment: '#中国海警首次登检菲律宾运补船只# 有了第一次就会有第二次第三次，以后登检就形成常态了，一步...   ',
+    time: '2024-06-19 18:15:53'
+  },
+  {
+    avatar: 'path/to/avatar2.jpg',
+    commenter: '李四',
+    comment: '非常赞同你的观点。',
+    time: '2024-01-02 13:30'
+  },
+  {
+    avatar: 'path/to/avatar2.jpg',
+    commenter: '李四',
+    comment: '非常赞同你的观点。',
+    time: '2024-01-02 13:30'
+  },
+  {
+    avatar: 'path/to/avatar2.jpg',
+    commenter: '李四',
+    comment: '非常赞同你的观点。',
+    time: '2024-01-02 13:30'
+  },
+
+]);
+
+
+const showNextItem = () => {
+  if (currentIndex.value < allData.length - 1) {
+    currentIndex.value++;
   }
 };
 
-// 初始化显示全部信息
-changeType(0);
+const applyTemporaryStyle = (index) => {
+  allData[index].showTemporaryStyle = true;
+  setTimeout(() => {
+    allData[index].showTemporaryStyle = false;
+  }, 3000);
+};
+
+onMounted(() => {
+  const intervalId = setInterval(showNextItem, 12000);
+  return () => clearInterval(intervalId);
+});
 </script>
 <style scoped>
-
 .main {
   width: 1920px;
   height: 1080px;
@@ -283,6 +452,7 @@ changeType(0);
   /* 为了兼容 Safari 浏览器 */
   -webkit-backdrop-filter: blur(4px);
 }
+
 .containner2 {
   width: 457px;
   height: 394px;
@@ -300,6 +470,7 @@ changeType(0);
   /* 为了兼容 Safari 浏览器 */
   -webkit-backdrop-filter: blur(4px);
 }
+
 .containner3 {
   width: 457px;
   height: 545px;
@@ -319,6 +490,7 @@ changeType(0);
   /* 为了兼容 Safari 浏览器 */
   -webkit-backdrop-filter: blur(4px);
 }
+
 .containner4 {
   width: 457px;
   height: 394px;
@@ -337,6 +509,104 @@ changeType(0);
   -webkit-backdrop-filter: blur(4px);
 }
 
+.temporary-style {
+  background-image: linear-gradient(to right, #003F7D, #5DB9FF7A);
+  border-image: linear-gradient(to bottom, #95CEFF, #3AA1F833);
+  border: 0px solid;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.containner5 {
+  width: 1410px;
+  height: 900px;
+  margin-left: 280px;
+  margin-top: -1000px;
+  background-color: #04142166;
+  background-image: url('../assets/images/backp.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-style: solid;
+  border-width: 0px;
+  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
+  border-radius: 2px;
+  /* 添加内阴影 */
+}
+
+.hiden {
+  width: 1410px;
+  height: 900px;
+  margin-top: -900px;
+  margin-left: 280px;
+  flex-direction: column;
+  display: flex;
+}
+
+.image-button1 {
+  margin-left: 898px;
+  margin-top: 34px;
+  width: 63px;
+  height: 63px;
+  background: radial-gradient(circle, #2863FB, #2863FB, #5887FF);
+  border-radius: 50%;
+  object-fit: cover;
+  border: 0px solid #000000;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.image-button1 img {
+  width: 90px;
+  margin-left: -18px;
+  margin-top: -18px;
+}
+
+.image-button2 {
+  width: 58px;
+  height: 58px;
+  margin-left: 393px;
+  margin-top: -38px;
+  background: radial-gradient(circle, #2863FB, #2863FB, #5887FF);
+  border-radius: 50%;
+  object-fit: cover;
+  border: 0px solid #000000;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.image-button3 {
+  width: 56px;
+  height: 56px;
+  background: radial-gradient(circle, #2863FB, #2863FB, #5887FF);
+  border-radius: 50%;
+  object-fit: cover;
+  border: 0px solid #000000;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.image-button4 {
+  width: 56px;
+  height: 56px;
+  background: radial-gradient(circle, #2863FB, #2863FB, #5887FF);
+  border-radius: 50%;
+  object-fit: cover;
+  border: 0px solid #000000;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.image-button5 {
+  width: 56px;
+  height: 56px;
+  background: radial-gradient(circle, #2863FB, #2863FB, #5887FF);
+  border-radius: 50%;
+  object-fit: cover;
+  border: 0px solid #000000;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
 /* 添加一个容器来包裹 containner1 - 4 */
 .container-wrapper {
   display: flex;
@@ -354,38 +624,72 @@ changeType(0);
 }
 
 .right-container {
-  
+
   display: flex;
   flex-direction: column;
   gap: 30px;
 }
 
-.containner1, .containner2, .containner3, .containner4 {
-  margin: 0; /* 移除原有的外边距设置 */
+.containner1,
+.containner2,
+.containner3,
+.containner4 {
+  margin: 0;
+  /* 移除原有的外边距设置 */
 }
 
 /* 修改模板结构 */
 .type-selector {
-  display: flex;
-margin-left: 90px;
+  margin-left: 110px;
+  margin-top: 10px;
 }
+
 .suggestion button {
-  display: inline-block;
-  margin: 5px;
-  padding: 5px 10px;
-  background-color: #051634;
-  color: #FFFFFF;
-  border: 1px solid #214A8E;
-  border-radius: 5px;
+  height: 24px;
+  margin-left: 0px;
+  font-family: OPPOSans;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  text-align: center;
   cursor: pointer;
+  background-color: #04142166;
+  color: #E1F4FF;
+  border: 1px solid #1C588F;
+  border-radius: 0px;
+  /* 确保默认没有圆角 */
+  display: inline-block;
+  /* 让按钮横向排列 */
+  vertical-align: middle;
+  /* 垂直居中对齐 */
+}
+
+/* 第一个按钮添加左圆角 */
+.suggestion button:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+/* 最后一个按钮添加右圆角 */
+.suggestion button:nth-child(4) {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+/* 激活按钮样式 */
+.suggestion button.active {
+  background-color: #236291;
 }
 
 .suggestion button:hover {
-  background-color: #214A8E;
+  background-color: #236291;
 }
 
 .suggestion ul {
-  margin-left: 15px;
+  margin-left: 10px;
+  width: 400px;
+  height: 480px;
   list-style-type: none;
   padding: 0;
 }
@@ -394,10 +698,66 @@ margin-left: 90px;
   width: 360px;
   height: 48px;
   color: #FFFFFF;
-  margin-top: 5px;
+  margin-top: 15px;
   margin-left: 30px;
 }
 
+.suggestion li img {
+  width: 48px;
+  height: 48px;
+  margin-right: 10px;
+  border-radius: 4px;
+}
+
+.suggestion-containner {
+  margin-left: 10px;
+  margin-top: 15px;
+  width: 360px;
+  height: 480px;
+  max-height: 380px;
+  /* 可根据需要调整最大高度 */
+  overflow-y: auto;
+  /* 当内容超出最大高度时显示垂直滚动条 */
+  overflow-x: hidden;
+  /* 隐藏水平滚动条 */
+  scrollbar-width: none;
+  /* Firefox */
+  ;
+}
+
+.suggestion-containner::-webkit-scrollbar {
+  display: none;
+}
+
+.span-data {
+  display: flex;
+  flex-direction: column;
+  margin-left: 80px;
+  margin-top: -50px;
+}
+
+.span-1 {
+  font-family: OPPOSans;
+  font-weight: 300;
+  font-size: 16px;
+  margin-top: -5px;
+}
+
+.span-2 {
+  font-family: PingFang SC;
+  font-weight: 200;
+  font-size: 14px;
+  margin-top: 5px;
+}
+
+.span-3 {
+  font-family: PingFang SC;
+  font-weight: 200;
+  font-size: 14px;
+  margin-left: 150px;
+  margin-top: -20px;
+}
+
 .suggestions li {
   padding: 8px;
   cursor: pointer;
@@ -424,6 +784,7 @@ margin-left: 90px;
   /* 为了兼容 Safari 浏览器 */
   -webkit-backdrop-filter: blur(4px);
 }
+
 .containner2 {
   width: 457px;
   height: 394px;
@@ -440,14 +801,112 @@ margin-left: 90px;
   backdrop-filter: blur(4px);
   /* 为了兼容 Safari 浏览器 */
   -webkit-backdrop-filter: blur(4px);
+
 }
+
+.containner2-alldata {
+  margin-left: 25px;
+  width: 420px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.containner2-alldata li {
+  margin-top: 15px;
+}
+
+.containner2-alldata li img {
+  width: 15px;
+  margin-right: 12px;
+}
+
+.containner2-data,
+.containner2-range {
+  font-family: PingFang SC;
+  font-weight: 200;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  justify-content: center;
+  align-items: center;
+  color: #C6E3F5;
+  width: 200px;
+  list-style-type: none;
+  flex: 1;
+  min-width: 0;
+}
+
+.intime {
+  margin-left: 5px;
+  width: 420px;
+  height: 200px;
+  max-height: 200px;
+  /* 可根据需要调整最大高度 */
+  overflow-y: auto;
+  /* 当内容超出最大高度时显示垂直滚动条 */
+  overflow-x: hidden;
+  /* 隐藏水平滚动条 */
+  scrollbar-width: none;
+  /* Firefox */
+  ;
+
+}
+
+.color-block1 {
+  width: 10px;
+  height: 10px;
+  background-color: #D83D6C;
+  display: inline-block;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.color-block2 {
+  width: 10px;
+  height: 10px;
+  background-color: #00CEFF;
+  display: inline-block;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.color-block3 {
+  width: 10px;
+  height: 10px;
+  background-color: #D3ADF7;
+  display: inline-block;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.color-block4 {
+  width: 10px;
+  height: 10px;
+  background-color: #1890FF;
+  display: inline-block;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.intime li {
+  list-style-type: none;
+  padding-left: 0;
+  margin-top: 10px;
+  font-family: PingFang SC;
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  color: #FFFFFF;
+}
+
 .containner3 {
   width: 457px;
   height: 545px;
   display: flexbox;
   float: right;
   margin-right: 16px;
-
   background-color: #04142166;
   border-style: solid;
   border-width: 0px;
@@ -460,6 +919,59 @@ margin-left: 90px;
   /* 为了兼容 Safari 浏览器 */
   -webkit-backdrop-filter: blur(4px);
 }
+
+.focus-events {
+  width: 420px;
+  height: 200px;
+  max-height: 200px;
+  /* 可根据需要调整最大高度 */
+  overflow-y: auto;
+  /* 当内容超出最大高度时显示垂直滚动条 */
+  overflow-x: hidden;
+  /* 隐藏水平滚动条 */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+.focus-events-z {
+  width: 410px;
+  height: 45px;
+  margin-top: 20px;
+  margin-left: 20px;
+}
+
+.focus-events-z:hover {
+  background-image: linear-gradient(to right, #003F7D, #5DB9FF7A);
+  border-image: linear-gradient(to bottom, #95CEFF, #3AA1F833);
+  border: 0px solid;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.focus-events-text {
+  font-family: PingFang SC;
+  font-weight: 300;
+  font-size: 16px;
+  color: #FFFFFF;
+  display: inline-flex;
+  align-items: center;
+  transform: translateY(-12px);
+}
+
+.tooltip {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 1920px;
+  height: 1080px;
+  border-style: solid;
+  position: fixed;
+  z-index: 9999;
+  backdrop-filter: blur(4px);
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
 .containner4 {
   width: 457px;
   height: 394px;
@@ -478,6 +990,42 @@ margin-left: 90px;
   -webkit-backdrop-filter: blur(4px);
 }
 
+.containner4-data {
+  color: rgba(255, 255, 255, 0.80);
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.14px;
+  margin-left: 25px;
+  margin-top: 25px;
+}
+
+.containner4-alldata {
+  height: 300px;
+  overflow: hidden;
+}
+
+.containner6 {
+  width: 900px;
+  height: 200px;
+  display: flexbox;
+  margin-left: 510px;
+  margin-top: -184px;
+  background-color: #04142166;
+  border-style: solid;
+  border-width: 0px;
+  border-image: linear-gradient(to bottom, #3AA1F8, #3AA1F833) 1;
+  border-radius: 2px;
+  /* 添加内阴影 */
+  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
+  /* 添加背景模糊 */
+  backdrop-filter: blur(4px);
+  /* 为了兼容 Safari 浏览器 */
+  -webkit-backdrop-filter: blur(4px);
+}
+
 /* 添加一个容器来包裹 containner1 - 4 */
 .container-wrapper {
   display: flex;
@@ -495,15 +1043,35 @@ margin-left: 90px;
 }
 
 .right-container {
-  
+
   display: flex;
   flex-direction: column;
   gap: 30px;
 }
 
-.containner1, .containner2, .containner3, .containner4 {
-  margin: 0; /* 移除原有的外边距设置 */
+.containner1,
+.containner2,
+.containner3,
+.containner4 {
+  margin: 0;
+  /* 移除原有的外边距设置 */
 }
 
-/* 修改模板结构 */
-</style>
+
+.circular-image {
+  border-radius: 50%;
+  object-fit: cover;
+  width: 100px;
+  height: 100px;
+}
+
+.circular-gradient-container {
+  border-radius: 50%;
+  background: radial-gradient(circle, #ff0000, #00ff00);
+  width: 120px;
+  height: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

visualize-components

@@ -0,0 +1 @@
+Subproject commit 04e5e65f507b10ef83a80f8a9e518420e51bafa4

vite.config.js

@@ -1,9 +1,12 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
 
-
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
-
-})
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
+});