左侧菜单导航 路由 面包屑等排版填充调整

src/components/Breadcrumb/index.vue

@@ -68,10 +68,10 @@ export default {
   display: inline-block;
   font-size: 14px;
   line-height: 50px;
-  margin-left: 8px;
+  padding-left: 20px;
 
   .no-redirect {
-    color: #97a8be;
+    color: #000;
     cursor: text;
   }
 }

src/components/TimeArea/index.vue

@@ -0,0 +1,78 @@
+
+<template>
+
+    <div class=" date">{{ dateFormat(date) }}</div>
+
+</template>
+
+<script>
+
+export default {
+  name: "TimeArea",
+  //   components: { sbjk, monitor, alarming, handleNumber, alarmStatic,Navbar },
+  data() {
+    return {
+      date: new Date(), //实时时间
+    };
+  },
+  methods: {
+    setZero(a) {
+      //设置小于10的数字在加0
+      return a < 10 ? "0" + a : a;
+    },
+
+    dateFormat: function (time) {
+      var date = new Date(time);
+      var year = date.getFullYear();
+      /* 在日期格式中，月份是从0开始的，因此要加0
+       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
+       * */
+      var month =
+        date.getMonth() + 1 < 10
+          ? "0" + (date.getMonth() + 1)
+          : date.getMonth() + 1;
+      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+      var hours =
+        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+      var minutes =
+        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+      var seconds =
+        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      // 拼接
+      return (
+        year +
+        "年" +
+        month +
+        "月" +
+        day +
+        "日 " +
+        hours +
+        ":" +
+        minutes +
+        ":" +
+        seconds
+      );
+    },
+  },
+  mounted() {
+    var _this = this;
+    this.timer = setInterval(() => {
+      _this.date = new Date(); // 修改日期数据
+    }, 1000);
+  },
+
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer); // 在Vue实例销毁前，清除当前日期定时器
+    }
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>
+
+<style lang="scss">
+</style>

src/layout/components/AppMain.vue

@@ -20,8 +20,9 @@ export default {
 <style scoped>
 .app-main {
   /*50 = navbar  */
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - 100px);
   width: 100%;
+  background:#F0F2F5;
   position: relative;
   overflow: hidden;
 }

src/layout/components/Navbar.vue

@@ -1,93 +1,116 @@
 <template>
-  <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-    <breadcrumb class="breadcrumb-container" />
-
-    <div class="right-menu">
-      <el-dropdown class="avatar-container" trigger="click">
-        <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
-        </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/">
-            <el-dropdown-item>
-              Home
+  <div style="position:relative">
+    <div class="navbar">
+      <hamburger
+        :is-active="sidebar.opened"
+        class="hamburger-container"
+        @toggleClick="toggleSideBar"
+      />
+      <div class="right-menu">
+        <time-area class="timeArea"></time-area>
+        <!-- <div class="timeArea">2021年08月09日18:04:17</div> -->
+        <el-dropdown class="avatar-container" trigger="click">
+          <div class="avatar-wrapper">
+            <div>admin</div>
+            <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
+            <i class="el-icon-caret-bottom" />
+          </div>
+          <el-dropdown-menu slot="dropdown" class="user-dropdown">
+            <router-link to="/">
+              <el-dropdown-item> Home </el-dropdown-item>
+            </router-link>
+            <a
+              target="_blank"
+              href="https://github.com/PanJiaChen/vue-admin-template/"
+            >
+              <el-dropdown-item>Github</el-dropdown-item>
+            </a>
+            <a
+              target="_blank"
+              href="https://panjiachen.github.io/vue-element-admin-site/#/"
+            >
+              <el-dropdown-item>Docs</el-dropdown-item>
+            </a>
+            <el-dropdown-item divided @click.native="logout">
+              <span style="display: block">Log Out</span>
             </el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
-          <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
     </div>
+
+     <breadcrumb class="breadcrumb-container" />
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import Hamburger from "@/components/Hamburger";
+import TimeArea from "@/components/TimeArea";
 
 export default {
   components: {
     Breadcrumb,
-    Hamburger
+    Hamburger,
+    TimeArea
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar'
-    ])
+    ...mapGetters(["sidebar", "avatar"]),
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-    }
-  }
-}
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+
+.breadcrumb-container {
+    float: left;
+    position:absolute;
+    bottom:0;
+    width:100%;
+    border-top:1px solid rgb(250, 246, 246)
+
+    // margin-top: 50px;
+  }
 .navbar {
-  height: 50px;
+  height: 100px;
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
-  .breadcrumb-container {
-    float: left;
-  }
+  
 
   .right-menu {
     float: right;
     height: 100%;
     line-height: 50px;
+    .timeArea {
+      display: inline-block;
+      margin-right: 30px;
+    }
 
     &:focus {
       outline: none;
@@ -103,10 +126,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
@@ -129,7 +152,7 @@ export default {
           cursor: pointer;
           position: absolute;
           right: -20px;
-          top: 25px;
+          top: 19px;
           font-size: 12px;
         }
       }

src/router/index.js

@@ -36,7 +36,6 @@ export const constantRoutes = [{
             import ('@/views/login/index'),
         hidden: true
     },
-
     {
         path: '/404',
         component: () =>
@@ -44,56 +43,6 @@ export const constantRoutes = [{
         hidden: true
     },
 
-    // {
-    //     path: '/',
-    //     component: Layout,
-    //     redirect: '/dashboard',
-    //     children: [{
-    //         path: 'dashboard',
-    //         name: 'Dashboard',
-    //         component: () =>
-    //             import ('@/views/dashboard/index'),
-    //         meta: { title: 'Dashboard', icon: 'dashboard' }
-    //     }]
-    // },
-
-    // {
-    //     path: '/example',
-    //     component: Layout,
-    //     redirect: '/example/table',
-    //     name: 'Example',
-    //     meta: { title: 'Table', icon: 'el-icon-s-help' },
-    //     children: [{
-    //             path: 'table',
-    //             name: 'Table',
-    //             component: () =>
-    //                 import ('@/views/table/index'),
-    //             meta: { title: 'Table', icon: 'table' }
-    //         },
-    //         {
-    //             path: 'tree',
-    //             name: 'Tree',
-    //             component: () =>
-    //                 import ('@/views/tree/index'),
-    //             meta: { title: 'Tree', icon: 'tree' }
-    //         }
-    //     ]
-    // },
-
-    // {
-    //     path: '/form',
-    //     component: Layout,
-    //     children: [{
-    //         path: 'index',
-    //         name: 'Form',
-    //         component: () =>
-    //             import ('@/views/form/index'),
-    //         meta: { title: 'Form', icon: 'form' }
-    //     }]
-    // },
-
-
-
     // my start
 
     {
@@ -426,7 +375,53 @@ export const constantRoutes = [{
     },
 
     //my end
+    // {
+    //     path: '/',
+    //     component: Layout,
+    //     redirect: '/dashboard',
+    //     children: [{
+    //         path: 'dashboard',
+    //         name: 'Dashboard',
+    //         component: () =>
+    //             import ('@/views/dashboard/index'),
+    //         meta: { title: 'Dashboard', icon: 'dashboard' }
+    //     }]
+    // },
+
+    // {
+    //     path: '/example',
+    //     component: Layout,
+    //     redirect: '/example/table',
+    //     name: 'Example',
+    //     meta: { title: 'Table', icon: 'el-icon-s-help' },
+    //     children: [{
+    //             path: 'table',
+    //             name: 'Table',
+    //             component: () =>
+    //                 import ('@/views/table/index'),
+    //             meta: { title: 'Table', icon: 'table' }
+    //         },
+    //         {
+    //             path: 'tree',
+    //             name: 'Tree',
+    //             component: () =>
+    //                 import ('@/views/tree/index'),
+    //             meta: { title: 'Tree', icon: 'tree' }
+    //         }
+    //     ]
+    // },
 
+    // {
+    //     path: '/form',
+    //     component: Layout,
+    //     children: [{
+    //         path: 'index',
+    //         name: 'Form',
+    //         component: () =>
+    //             import ('@/views/form/index'),
+    //         meta: { title: 'Form', icon: 'form' }
+    //     }]
+    // },
 
     // {
     //     path: '/nested',

src/views/alarmManage/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="dashboard-container">
-    <div class="dashboard-text">告警管理</div>
+  <div class="app-container">
+    <div >告警管理</div>
   </div>
 </template>