1234

package.json

@@ -30,7 +30,8 @@
     "three": "^0.148.0",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "dayjs": "^1.11.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",

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

@@ -1,8 +1,24 @@
 <template>
   <div class="navbar">
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
+    <!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
+    <div class="left">
+      <img src="@/assets/logo/logo.png" alt="dark" />
+      <span>
+        若依管理系统
+      </span>
+    </div>
+    <div class="middle">
+      BIM运维管理系统
+    </div>
     <div class="right-menu">
       <template v-if="appStore.device !== 'mobile'">
+        <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" />
 
         <el-tooltip content="源码地址" effect="dark" placement="bottom">
@@ -57,11 +73,23 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
 import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
+import dayjs from "dayjs";
 
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 
+const data = reactive({
+  interval: "",
+  currentTime: "",
+  time: "",
+  week: ""
+});
+const { interval, currentTime, time, week } = toRefs(data);
+
+onMounted(() => {
+  setInterval(updateTime, 1000);
+});
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
@@ -90,7 +118,37 @@ function logout() {
     })
   }).catch(() => { });
 }
+const updateTime = () => {
+  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');
@@ -104,6 +162,55 @@ function setLayout() {
   position: relative;
   background: #fff;
   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;
+  }
+
+  .middle {
+    width: 33%;
+    // border: 1px solid red;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .right-menu {
+    width: 33%;
+    // 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;
@@ -184,5 +291,4 @@ function setLayout() {
       }
     }
   }
-}
-</style>
+}</style>

src/utils/dayjs.js

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'  // 导入中文语言包
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+import weekday from 'dayjs/plugin/weekday'
+
+dayjs.extend(weekOfYear)
+dayjs.extend(weekday)
+dayjs.locale('zh-cn')  // 设置语言为中文

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;
     }
   }
 }