1234

src/assets/styles/index.scss

@@ -123,7 +123,8 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  height: 80px;
+  
 }
 
 .components-container {

src/layoutMain/components/Navbar.vue

@@ -8,12 +8,16 @@
       </span>
     </div>
     <div class="middle">
-        BIM运维管理系统
+      BIM运维管理系统
     </div>
     <div class="right-menu">
       <template v-if="appStore.device !== 'mobile'">
-        <p class="mr10">
-          {{ currentTime }}
+        <p class="time">
+          <font> {{ time }} </font>
+        <div class="currentTime-week">
+          <div>{{ currentTime }}</div>
+          <div>{{ week }}</div>
+        </div>
         </p>
         <header-search id="header-search" class="right-menu-item" />
 
@@ -75,11 +79,16 @@ const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 
-const currentTime = ref("");
-const interval = ref("");
+const data = reactive({
+  interval: "",
+  currentTime: "",
+  time: "",
+  week: ""
+});
+const { interval, currentTime, time, week } = toRefs(data);
 
 onMounted(() => {
-  interval = setInterval(updateTime, 1000);
+  setInterval(updateTime, 1000);
 });
 function toggleSideBar() {
   appStore.toggleSideBar()
@@ -110,8 +119,36 @@ function logout() {
   }).catch(() => { });
 }
 const updateTime = () => {
-  currentTime = dayjs().format("YYYY年 MM月 DD日");
+  currentTime.value = dayjs().format("YYYY年 MM月 DD日");
+  time.value = dayjs().format("HH:mm");
+  week.value = format(dayjs().day());
 };
+const format = (week) => {
+  switch (week) {
+    case 1:
+      return '星期一';
+      break;
+    case 2:
+      return '星期二';
+      break;
+    case 3:
+      return '星期三';
+      break;
+    case 4:
+      return '星期四';
+      break;
+    case 5:
+      return '星期五';
+      break;
+    case 6:
+      return '星期六';
+      break;
+    case 0:
+      return '星期日';
+      break;
+
+  }
+}
 const emits = defineEmits(['setLayout'])
 function setLayout() {
   emits('setLayout');
@@ -127,27 +164,54 @@ function setLayout() {
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   display: flex;
   justify-content: space-between;
+
   .left {
     width: 33%;
     display: flex;
     align-items: center;
     height: 100%;
-    border: 1px solid red;
+    // border: 1px solid red;
   }
+
   .middle {
     width: 33%;
-    border: 1px solid red;
+    // border: 1px solid red;
     display: flex;
     align-items: center;
     justify-content: center;
   }
+
   .right-menu {
     width: 33%;
-    border: 1px solid red;
+    // border: 1px solid red;
     display: flex;
     align-items: center;
     justify-content: end;
+
+    .time {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      font {
+        font-size: 30px;
+      }
+
+      .currentTime-week {
+        height: 100%;
+        margin: 0 10px;
+
+        >div {
+          width: 100%;
+          height: 50% !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center;
+        }
+      }
+    }
   }
+
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -227,5 +291,4 @@ function setLayout() {
       }
     }
   }
-}
-</style>
+}</style>

src/views/index.vue

@@ -33,15 +33,20 @@ const gotoPage = (item) => {
 .home {
   .topMenu {
     width: 100%;
-    height: 45px;
-    border: 1px solid red;
+    height: 100%;
+    // border: 1px solid red;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    background: rgba(0, 225, 255, 0.445); 
     > div {
-      width: 240px;
-      cursor: pointer;
-      background: red;
+      width: 260px;
+      height: 100%;
+      cursor: pointer; 
+      display: flex;
+      align-items: center; 
+      border-right: 1px solid #fff;
+      justify-content: center;
+      font-size: 20px;
     }
   }
 }