添加新图片文件：src/assets/images/head/*, src/assets/images/user/*；修改文件：src/views/Main.vue, src/views/Navigation.vue, vite.config.js

src/views/Main.vue

@@ -1,13 +1,509 @@
 <template>
-  <div>
+  <div class="main">
-    <h1>About Page zhuyemian</h1>
+
+    <header class="header">
+      <!-- <div class="time">
+        <img src="../assets/images/logo/time.png" alt="" style="float: right;margin-right: 250px;margin-top: -150px;">
+        <span>2025.06.09 08:18</span>
+      </div> -->
+    </header>
+    <div class="search">
+      <!-- 使用 el-autocomplete 组件替换原输入框 -->
+        <input type="text" placeholder="南海争端系列舆情事件" style="
+          width:400px;
+          height: 36px;
+          margin-left: 36px;
+          margin-top: 6px;
+          border: none;
+          background-image: none;
+          background-color: transparent;
+          outline: none;
+          color: #FFFFFF;
+          font-family: OPPOSans;
+          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>
+
+      </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 }}
+                </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>
+          <div class="containner4">
+            <img src="../assets/images/head/jiankong.png" alt="" style="margin-top: -3px;">
+          </div>
+        </div>
+      </div>
   </div>
 </template>
-
 <script setup>
-// 组件逻辑
+import { ref } from 'vue';
-</script>
+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');
+  } else {
+    alert('请输入正确的事件类别关键词');
+  }
+};
+
+const inputValue = ref('');
+const suggestions = ref([]);
+
+const allOptions = [
+  { value: '南海争端系列舆情事件', link: './Main' },
+  { value: '美国大选系列舆情事件', link: '' },
+  { value: '涉台系列舆情事件', link: '' },
+  { value: '俄乌冲突系列舆情事件', link: '' },
+  { value: '中美贸易战系列舆情事件', link: '' },
+  { value: '全球供应链系列舆情事件', link: '' },
+  { value: '虚拟货币系列舆情事件', link: '' },
+  { value: '企业信用危机系列舆情事件', link: '' },
+  { value: '金融市场动荡系列舆情事件', link: '' },
+  { value: '校园暴力系列舆情事件', link: '' },
+  { value: '食品安全系列舆情事件', link: '' },
+  { value: '公共卫生系列舆情事件', link: '' },
+  { value: '教育公平系列舆情事件', link: '' },
+  { value: '劳资纠纷系列舆情事件', link: '' },
+  { value: '科技进步系列舆情事件', link: '' },
+];
+
+const handleInput = () => {
+  if (inputValue.value) {
+    suggestions.value = allOptions.filter((item) =>
+      item.value.toLowerCase().includes(inputValue.value.toLowerCase())
+    );
+    console.log('过滤后的建议项:', suggestions.value);
+  } else {
+    suggestions.value = [];
+  }
+};
+
+const selectSuggestion = (item) => {
+  inputValue.value = item.value;
+  suggestions.value = [];
+  console.log('选中项:', item);
+};
+
+// 定义按钮列表
+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();
+  } else {
+    const type = buttonList[index];
+    currentInfo.value = infoData[type];
+  }
+};
+
+// 初始化显示全部信息
+changeType(0);
+</script>
 <style scoped>
-/* 样式 */
+
+.main {
+  width: 1920px;
+  height: 1080px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: #050B23;
+}
+
+.header {
+  height: 140px;
+  background-image: url('../assets/images/head/main.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+  z-index: 1;
+}
+
+
+
+.time span {
+  font-family: LCD2;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 100%;
+  letter-spacing: 9.5%;
+  color: #1EA0FD;
+  float: right;
+  margin-right: 90px;
+  margin-top: -148px;
+}
+
+.search {
+  width: 530px;
+  height: 48px;
+  margin-left: 695px;
+  margin-top: -50px;
+  border-radius: 58px;
+  border-width: 1px;
+  background-image: linear-gradient(to top, #051634, #081D40, #04285C);
+  border: 1px solid;
+  border-image: linear-gradient(to right, #214A8E, #214A8E00);
+  position: relative;
+  z-index: 999;
+}
+
+.search-button {
+  float: right;
+  border: none;
+  padding: 0;
+  background: transparent;
+  width: auto;
+  height: auto;
+  margin-top: 6px;
+  margin-right: 6px;
+  cursor: pointer;
+}
+
+.suggestions {
+  position: absolute;
+  width: 400px;
+  margin-left: 36px;
+  padding: 0;
+  list-style-type: none;
+  color: rgb(49, 52, 54);
+  background-color: rgba(222, 241, 250, 0.9);
+  border: 1px solid;
+  border-radius: 10px;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
+.suggestions li {
+  padding: 8px;
+  cursor: pointer;
+}
+
+.suggestions li:hover {
+  background-color: rgba(186, 230, 250, 0.9);
+}
+
+.containner1 {
+  width: 457px;
+  height: 545px;
+  margin-left: 16px;
+  margin-top: -60px;
+  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);
+}
+.containner2 {
+  width: 457px;
+  height: 394px;
+  margin-left: 16px;
+  margin-top: 30px;
+  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);
+}
+.containner3 {
+  width: 457px;
+  height: 545px;
+  display: flexbox;
+  float: right;
+  margin-right: 16px;
+
+  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);
+}
+.containner4 {
+  width: 457px;
+  height: 394px;
+  margin-left: 16px;
+  margin-top: 30px;
+  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;
+  justify-content: space-between;
+  margin-top: -60px;
+  margin-left: 16px;
+  gap: 940px;
+}
+
+.left-container {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  margin-left: 16px;
+}
+
+.right-container {
+  
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.containner1, .containner2, .containner3, .containner4 {
+  margin: 0; /* 移除原有的外边距设置 */
+}
+
+/* 修改模板结构 */
+.type-selector {
+  display: flex;
+margin-left: 90px;
+}
+.suggestion button {
+  display: inline-block;
+  margin: 5px;
+  padding: 5px 10px;
+  background-color: #051634;
+  color: #FFFFFF;
+  border: 1px solid #214A8E;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.suggestion button:hover {
+  background-color: #214A8E;
+}
+
+.suggestion ul {
+  margin-left: 15px;
+  list-style-type: none;
+  padding: 0;
+}
+
+.suggestion li {
+  width: 360px;
+  height: 48px;
+  color: #FFFFFF;
+  margin-top: 5px;
+  margin-left: 30px;
+}
+
+.suggestions li {
+  padding: 8px;
+  cursor: pointer;
+}
+
+.suggestions li:hover {
+  background-color: rgba(186, 230, 250, 0.9);
+}
+
+.containner1 {
+  width: 457px;
+  height: 545px;
+  margin-left: 16px;
+  margin-top: -60px;
+  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);
+}
+.containner2 {
+  width: 457px;
+  height: 394px;
+  margin-left: 16px;
+  margin-top: 30px;
+  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);
+}
+.containner3 {
+  width: 457px;
+  height: 545px;
+  display: flexbox;
+  float: right;
+  margin-right: 16px;
+
+  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);
+}
+.containner4 {
+  width: 457px;
+  height: 394px;
+  margin-left: 16px;
+  margin-top: 30px;
+  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;
+  justify-content: space-between;
+  margin-top: -60px;
+  margin-left: 16px;
+  gap: 940px;
+}
+
+.left-container {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  margin-left: 16px;
+}
+
+.right-container {
+  
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.containner1, .containner2, .containner3, .containner4 {
+  margin: 0; /* 移除原有的外边距设置 */
+}
+
+/* 修改模板结构 */
 </style>

src/views/Navigation.vue

@@ -39,6 +39,11 @@
             display: block;
           ">
         </button>
+
+      </div>
+      <div class="time">
+        <img src="../assets/images/logo/time.png" alt="" style="float: right;margin-right: 250px;margin-top: -150px;">
+        <span>2025.06.09 08:18</span>
       </div>
     </header>
 
@@ -189,8 +194,12 @@ const selectSuggestion = (item) => {
 </script>
 
 <style scoped>
+html, body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden; /* 防止出现水平滚动条 */
+}
 .main {
-  width: 1920px;
   height: 1080px;
   background-image: url("../assets/images/bci.png");
   background-size: cover;
@@ -199,10 +208,21 @@ const selectSuggestion = (item) => {
   background-color: #02131F;
 }
 
+.time span{
+font-family: LCD2;
+font-weight: 400;
+font-size: 18px;
+line-height: 100%;
+letter-spacing: 9.5%;
+color: #1EA0FD;
+float: right;
+margin-right: 90px;
+margin-top: -148px;
+}
 .search {
   width: 530px;
   height: 48px;
-  margin-left: 695px;
+  margin-left: 680px;
   margin-top: -50px;
   border-radius: 58px;
   border-width: 1px;
@@ -250,7 +270,8 @@ const selectSuggestion = (item) => {
   gap: 100px;
   /* 增加 div 之间的间距 */
   margin-top: 50px;
-  margin-left: 50px;
+  margin-left: 25px;
+  margin-right: 25px;
 }
 
 .main1,

vite.config.js

@@ -5,4 +5,5 @@ import vue from '@vitejs/plugin-vue'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+
 })