基础功能实现-屏幕适配

package-lock.json

@@ -8,6 +8,7 @@
       "name": "pre-warning-system",
       "version": "0.0.0",
       "dependencies": {
+        "echarts": "^5.6.0",
         "element-plus": "^2.10.1",
         "tdesign-vue-next": "^1.13.2",
         "vue": "^3.5.13",
@@ -1124,6 +1125,22 @@
       "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/element-plus": {
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.10.1.tgz",
@@ -1816,6 +1833,21 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }

package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "echarts": "^5.6.0",
     "element-plus": "^2.10.1",
     "tdesign-vue-next": "^1.13.2",
     "vue": "^3.5.13",

src/components/ScrollContainer.vue

@@ -2,10 +2,9 @@
   <div :class="containerClass" ref="scrollContainer">
     <div v-for="(item, index) in displayData" :key="index" class="containner4-data" 
       :class="{ 'temporary-style': item.showTemporaryStyle }">
-      <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>
+      <img :src="item.avatar" alt="人物头像"  />
+      <p1 style="margin-left: 10px;">{{ item.commenter }}</p1>
+      <p style="margin-left: 10px;">{{ item.comment }}</p>
     </div>
   </div>
 </template>
@@ -25,7 +24,8 @@ const props = defineProps({
   },
   scrollSpeed: {
     type: Number,
-    default: 20
+    // 将默认值从10修改为新的默认速度
+    default: 10
   }
 });
 
@@ -95,10 +95,10 @@ onBeforeUnmount(() => {
 .containner4-alldata {
   height: 330px;
   overflow: hidden;
-  
+  padding: 10px;
 }
 .containner4-data {
-  color: rgba(255, 255, 255, 0.80);
+  color: rgba(0, 0, 0, 0.8);
   font-family: "PingFang SC";
   font-size: 14px;
   font-style: normal;
@@ -107,10 +107,13 @@ onBeforeUnmount(() => {
   letter-spacing: 0.14px;
   margin-left: 25px;
   margin-top: 25px;
-  background-image: linear-gradient(to right,#7db4eb99, #67A4E100);
+  background-image: linear-gradient(to right,#4ea2f599, #646464);
   border-radius: 8px;
   cursor: pointer;
 }
+.containner4-alldata .text-content {
+  margin-left: 100px;
+}
 .containner4-data img{
   width: 24px;
   height: px;

src/views/App.vue

@@ -37,7 +37,7 @@ nav a.router-link-exact-active {
 }
 
 nav a.router-link-exact-active:hover {
-  background-color: transparent;
+  background-color: #041421;
 }
 
 nav a {

src/views/Navigation.vue

@@ -41,10 +41,10 @@
         </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 class="realtime-clock" style="position: absolute; top: 20px; right: 20px; color: #1EA0FD; font-family: LCD2; font-size: 18px;">
+        {{ currentTime }}
       </div>
+
     </header>
 
     <body>
@@ -101,8 +101,25 @@
 
 <script setup>
 import { useRouter } from 'vue-router';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted,onUnmounted } from 'vue';
 import { ElLoading } from 'element-plus';
+// 实时时钟实现
+const currentTime = ref('');
+
+// 格式化时间为 HH:MM:SS 格式
+const formatTime = () => {
+  const now = new Date();
+  return now.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  });
+};
+
+// 定时器存储
+const timers = [];
+
 
 const router = useRouter();
 let loadingInstance = null;
@@ -125,10 +142,12 @@ const hideLoading = () => {
 
 // 页面加载完成后，显示 Loading 组件，一秒后隐藏
 onMounted(() => {
-  showLoading();
-  setTimeout(() => {
-    hideLoading();
+      // 初始化时钟并每秒更新
+  currentTime.value = formatTime();
+  const clockTimer = setInterval(() => {
+    currentTime.value = formatTime();
   }, 1000);
+  timers.push(clockTimer);
 });
 
 // 监听路由变化，跳转页面时显示 Loading 组件，一秒后隐藏
@@ -190,7 +209,15 @@ const selectSuggestion = (item) => {
   suggestions.value = [];
   console.log('选中项:', item);
 };
-
+onUnmounted(() => {
+  // 清理定时器
+  timers.forEach(timer => {
+    if (timer) {
+      clearInterval(timer);
+      clearTimeout(timer);
+    }
+  });
+});
 </script>
 
 <style scoped>

src/views/visualize/index.vue

@@ -547,7 +547,7 @@ onBeforeUnmount(() => {
 
 <style lang="less" scoped>
 .sky-page-box {
-  height: 100%;
+  height: 85%;
   width: 100%;
   min-width: 600px;
   min-height: 600px;