init

1.修改项目基础结构

src/views/index.vue

@@ -2,12 +2,13 @@
     <div class="outer">
         <div class="title-d">
             <div class="title-d-left">
-                left
+                {{dayTimeO}}
             </div>
             <div class="title-d-middle">
+                应急就医服务中心
             </div>
             <div class="title-d-right">
-                right
+                累计运行时间：{{dayTimeT}}
             </div>
         </div>
         <div class="body-d">
@@ -25,10 +26,11 @@
                 <three-r/>
             </div>
         </div>
+        <div class="bottom-d"></div>
     </div>
 </template>
 <script setup lang="ts">
-
+import {ref} from "vue";
 import OneL from "../components/body-d-left/oneL.vue";
 import TwoL from "../components/body-d-left/twoL.vue";
 import ThreeL from "../components/body-d-left/threeL.vue";
@@ -36,6 +38,33 @@ import OneR from "../components/body-d-right/oneR.vue";
 import TwoR from "../components/body-d-right/twoR.vue";
 import ThreeR from "../components/body-d-right/threeR.vue";
 import ChinaMap from '../components/chinaMap/chinaMap.vue'
+import * as dayjs from "dayjs";
+const dayTimeO = ref();
+const dayTimeT = ref();
+
+function init() {
+    getTime();
+    setInterval(() => {
+        getTime();
+    }, 1000)
+}
+
+function getTime() {
+    dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒')
+    dayTimeT.value = dayjs().diff(dayjs('2020-01-01'), 'day')+'天'
+        +getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD')+' 00:00:00'), 'hours'))+'时'
+        +getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH')+':00:00'), 'minutes'))+'分'
+        +getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm')+':00'), 'seconds'))+'秒';
+}
+
+function getZero(num: any) {
+    if (num < 10) {
+        return '0'+num;
+    }
+    return num
+}
+
+init();
 </script>
 <style lang="less" scoped>
 .outer {
@@ -50,20 +79,35 @@ import ChinaMap from '../components/chinaMap/chinaMap.vue'
     line-height: 80px;
     display: flex;
     padding-bottom: 9px;
-    border-bottom: 1px dashed #e6e6e6;
     background: url("../assets/top-title.png") no-repeat;
     background-size: 100% 100%;
 
     .title-d-left, .title-d-middle, .title-d-right {
-        width: calc(100% / 3);
+        font-size: 27px;
+        color: #ffffff;
+        line-height: 60px;
         text-align: center;
-        border-right: 1px solid red;
+    }
+
+
+    > :nth-child(1) {
+        width: 29%;
+    }
+
+    > :nth-child(2) {
+        width: 42%;
+        font-size: 40px;
+        font-weight: bold;
+    }
+
+    > :nth-child(3) {
+        width: 29%;
     }
 }
 
 .body-d {
     display: flex;
-    height: calc(100% - 80px);
+    height: calc(100% - 120px);
     padding-top: 10px;
 
     > :nth-child(1) {
@@ -87,7 +131,6 @@ import ChinaMap from '../components/chinaMap/chinaMap.vue'
         > :nth-child(n) {
             width: 100%;
             height: calc(100% / 3);
-            border: 1px solid red;
             padding: 10px;
         }
     }
@@ -96,4 +139,10 @@ import ChinaMap from '../components/chinaMap/chinaMap.vue'
 		flex-direction: column;
 	}
 }
+
+.bottom-d {
+    height: 40px;
+    background: url("../assets/bottom-b.png") no-repeat;
+    background-size: 100% 100%;
+}
 </style>