更新 header组件动态时间;logo

index.html

@@ -8,6 +8,8 @@
     <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.0&&type=webgl&ak=sUDwQMPuY7yO3ZqC8l4EEZB0jeVrx6wi"></script>
     <script src="/swiper-bundle.min.js"></script>
     <link rel="stylesheet" href="/swiper-bundle.min.css">
+    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
+
     <style>
       * {
         margin: 0;

src/components/Header.vue

@@ -2,6 +2,7 @@
   <div class="header df aic jcsb">
     <div class="df aic">
       <div class="start df aic">
+        <img class="mr10" src="/logo-white.png" alt="" />
         <div class="logo mr30">汇很多</div>
         <div class="title">汇很多航运数字经济总控平台</div>
       </div>
@@ -24,7 +25,7 @@
     </div>
     <div class="end df aic">
       <div class="question">?</div>
-      <div class="timer">2021-09-02 13:58:23</div>
+      <div class="timer">{{ time }}</div>
       <div class="user">Admin</div>
       <div class="quit" @click="logOut">[退出登录]</div>
     </div>
@@ -37,6 +38,7 @@ import store from "store";
 import { ref, onMounted } from "vue";
 export default {
   setup() {
+    let time = ref("");
     let tabs = ref([
       { path: "/transportationSafetyCenter", tabText: "运输安全管理中心" },
       { path: "/transportationSafetyCenter", tabText: "智能交易中心" },
@@ -58,11 +60,16 @@ export default {
         router.replace("/login");
       }
     }
-    onMounted(() => {});
+    onMounted(() => {
+      setInterval(() => {
+        time.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
+      }, 1000);
+    });
     return {
       tabs,
       changeTab,
       logOut,
+      time,
     };
   },
 };
@@ -121,4 +128,8 @@ export default {
   font-weight: 500;
   color: #ffffff;
 }
+
+.timer {
+  width: 160px;
+}
 </style>