顶部时间

src/components/Components/MenuTime.vue

@@ -0,0 +1,120 @@
+<template>
+  <!--时间展示区（包含毫秒）-->
+  <div class="military-time-display">
+    <div class="time-content">
+      <div class="time-line utc-time">
+        <span class="time-value">天文时间:{{ formattedUTCTime }}</span>
+      </div>
+      <div class="time-line local-time">
+        <span class="time-value">绝对时间:{{ formattedLocalTime }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "VabTimeDisplay",
+    data() {
+      return {
+        timer: null,
+        currentTime: new Date(),
+      };
+    },
+    computed: {
+      formattedUTCTime() {
+        return this.formatUTCTime(this.currentTime);
+      },
+      formattedLocalTime() {
+        return this.formatLocalTime(this.currentTime);
+      },
+    },
+    mounted() {
+      // 改为每10毫秒更新一次（确保毫秒级精度）
+      this.timer = setInterval(() => {
+        this.currentTime = new Date();
+      }, 10);
+    },
+    beforeDestroy() {
+      clearInterval(this.timer);
+    },
+    methods: {
+      // 格式化UTC时间（包含毫秒）
+      formatUTCTime(date) {
+        const pad = (num, length = 2) => String(num).padStart(length, "0");
+        return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(
+          date.getUTCDate()
+        )} ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(
+          date.getUTCSeconds()
+        )} UTC`;
+      },
+      // 格式化本地时间（包含毫秒）
+      formatLocalTime(date) {
+        const pad = (num, length = 2) => String(num).padStart(length, "0");
+        const hours = date.getHours();
+        const ampm = hours >= 12 ? "PM" : "AM";
+        const displayHours = hours % 12 || 12;
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
+          date.getDate()
+        )} ${pad(displayHours)}:${pad(date.getMinutes())}:${pad(
+          date.getSeconds()
+        )} ${ampm}`;
+      },
+    },
+  };
+</script>
+<style scoped lang="scss">
+  .military-time-display {
+    font-family: "Courier New", monospace;
+    padding: 10px 15px;
+    border-radius: 4px;
+    background-color: transparent;
+    /*border: 2px solid rgba(95, 96, 95, 0.43);*/
+    box-shadow: 0 0 10px rgba(94, 97, 94, 0.3);
+    line-height: 1.4;
+    display: inline-block;
+    vertical-align: middle;
+    min-width: 320px;
+
+    .time-header {
+      text-align: center;
+      margin-bottom: 8px;
+      padding-bottom: 5px;
+
+      .time-value {
+        color: #6c6e6c;
+        font-weight: bold;
+        font-size: 1.1rem;
+        letter-spacing: 1px;
+      }
+    }
+
+    .time-content {
+      .time-line {
+        display: flex;
+        margin-bottom: 6px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .time-value {
+          color: #727572;
+          flex: 1;
+          font-size: 1.1rem;
+        }
+
+        &.utc-time {
+          .time-value {
+            color: #727572;
+          }
+        }
+
+        &.local-time {
+          .time-value {
+            color: #727572;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/GlobalComponents/ImporTaskCard.vue

@@ -170,7 +170,7 @@
 
 <script>
   export default {
-    name: "ImporTaskCard",
+    name: "ImportTaskCard",
     props: {
       plan: {
         type: Object,

src/components/index.js

@@ -11,7 +11,7 @@ import VirtualCard from "./GlobalComponents/VirtualCard.vue";
 //总体设计方案 卡片
 import OverallCard from "./GlobalComponents/OverallCard.vue";
 import VabTime from "./GlobalComponents/VabTime.vue";
-import ImporTaskCard from "./GlobalComponents/ImporTaskCard.vue"; //任务导入
+import ImportTaskCard from "./GlobalComponents/ImporTaskCard.vue"; //任务导入
 import DarkDrawer from "./GlobalComponents/DarkDrawer.vue"; //深色抽屉
 
 const components = {
@@ -26,7 +26,7 @@ const components = {
   OverallCard,
   VirtualCard,
   VabTime,
-  ImporTaskCard,
+  ImportTaskCard,
   DarkDrawer,
 };
 

src/layouts/components/VabLogo/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="'logo-container-' + layout">
     <router-link to="/">
+      <!-- 这里是logo变更的位置 -->
       <vab-remix-icon v-if="logo" class="logo" :icon-class="logo" />
       <span
         class="title"
@@ -10,161 +11,82 @@
         {{ title }}
       </span>
     </router-link>
-    <!--时间展示区（包含毫秒）-->
-    <span class="compact-time-display">
-      <span class="time-line utc-time">
-        {{ "天文时间：" + formattedUTCTime }}
-      </span>
-      <br />
-      <span class="time-line local-time">
-        {{ "绝对时间：" + formattedLocalTime }}
-      </span>
-    </span>
   </div>
 </template>
-
 <script>
-import { mapGetters } from "vuex";
-
-export default {
-  name: "VabLogo",
-  data() {
-    return {
-      title: this.$baseTitle,
-      timer: null,
-      currentTime: new Date(),
-    };
-  },
-  computed: {
-    ...mapGetters({
-      logo: "settings/logo",
-      layout: "settings/layout",
-    }),
-    formattedUTCTime() {
-      return this.formatUTCTime(this.currentTime);
-    },
-    formattedLocalTime() {
-      return this.formatLocalTime(this.currentTime);
+  import { mapGetters } from "vuex";
+
+  export default {
+    name: "VabLogo",
+    data() {
+      return {
+        title: this.$baseTitle,
+      };
     },
-  },
-  mounted() {
-    // 改为每10毫秒更新一次（确保毫秒级精度）
-    this.timer = setInterval(() => {
-      this.currentTime = new Date();
-    }, 10);
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-  },
-  methods: {
-    // 格式化UTC时间（包含毫秒）
-    formatUTCTime(date) {
-      const pad = (num, length = 2) => String(num).padStart(length, "0");
-      return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(
-        date.getUTCDate()
-      )} ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(
-        date.getUTCSeconds()
-      )} UTC`;
+    computed: {
+      ...mapGetters({
+        logo: "settings/logo",
+        layout: "settings/layout",
+      }),
     },
-    // 格式化本地时间（包含毫秒）
-    formatLocalTime(date) {
-      const pad = (num, length = 2) => String(num).padStart(length, "0");
-      const hours = date.getHours();
-      const ampm = hours >= 12 ? "PM" : "AM";
-      const displayHours = hours % 12 || 12;
-      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
-        date.getDate()
-      )} ${pad(displayHours)}:${pad(date.getMinutes())}:${pad(
-        date.getSeconds()
-      )} ${ampm}`;
-    },
-  },
-};
+  };
 </script>
-
 <style lang="scss" scoped>
-@mixin container {
-  position: relative;
-  height: $base-top-bar-height;
-  overflow: hidden;
-  line-height: $base-top-bar-height;
-  background: $base-menu-background;
-}
-
-@mixin logo {
-  display: inline-block;
-  width: 34px;
-  height: 34px;
-  margin-right: 3px;
-  color: $base-title-color;
-  vertical-align: middle;
-}
-
-@mixin title {
-  display: inline-block;
-  overflow: hidden;
-  font-size: 20px;
-  line-height: 55px;
-  color: $base-title-color;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.logo-container-horizontal {
-  @include container;
-
-  .logo {
-    @include logo;
+  @mixin container {
+    position: relative;
+    height: $base-top-bar-height;
+    overflow: hidden;
+    line-height: $base-top-bar-height;
+    background: $base-menu-background;
   }
 
-  .title {
-    @include title;
+  @mixin logo {
+    display: inline-block;
+    width: 34px;
+    height: 34px;
+    margin-right: 3px;
+    color: $base-title-color;
+    vertical-align: middle;
   }
-}
-
-.logo-container-vertical {
-  @include container;
-
-  height: $base-logo-height;
-  line-height: $base-logo-height;
-  text-align: center;
 
-  .logo {
-    @include logo;
+  @mixin title {
+    display: inline-block;
+    overflow: hidden;
+    font-size: 20px;
+    line-height: 55px;
+    color: $base-title-color;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
   }
 
-  .title {
-    @include title;
+  .logo-container-horizontal {
+    @include container;
 
-    max-width: calc(#{$base-left-menu-width} - 60px);
+    .logo {
+      @include logo;
+    }
+
+    .title {
+      @include title;
+    }
   }
-}
 
-.compact-time-display {
-  font-family: "Courier New", monospace;
-  padding: 12px;
-  border-radius: 6px;
-  background-color: transparent;
-  line-height: 1.5;
-  display: inline-block;
-  vertical-align: middle;
+  .logo-container-vertical {
+    @include container;
 
-  .time-line {
-    font-weight: 800;
-    white-space: nowrap;
-    font-size: 12px;
+    height: $base-logo-height;
+    line-height: $base-logo-height;
+    text-align: center;
 
-    &.utc-time {
-      color: #8d978f;
-      font-size: 1rem;
-      font-weight: 800;
+    .logo {
+      @include logo;
     }
 
-    &.local-time {
-      color: #8d978f;
-      font-size: 1rem;
+    .title {
+      @include title;
+
+      max-width: calc(#{$base-left-menu-width} - 60px);
     }
   }
-}
 </style>

src/main.js

@@ -10,6 +10,8 @@ import "@/layouts/export";
 
 //导入全局组件
 import "@/components";
+//引入全局时间组件
+import MenuTime from "@/components/Components/MenuTime.vue";
 /**
  * @copyright chuzhixin 1204505056@qq.com
  * @description 生产环境默认都使用mock，如果正式用于生产环境时，记得去掉
@@ -28,7 +30,8 @@ Vue.use($perms);
 Vue.use($dict);
 // 添加全局公钥
 Vue.use($publicKey);
-
+//注册全局时间组件
+Vue.component("MenuTime", MenuTime);
 new Vue({
   el: "#vue-admin-beautiful",
   router,