修改样式

src/App.vue

@@ -24,6 +24,11 @@ export default {
 <style scoped>
 #app .theme-picker {
   display: none;
+  //position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 </style>

src/assets/styles/index.scss

@@ -121,7 +121,15 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  width: 100vw; /* 视口宽度 */
+  height: 100vh; /* 视口高度 */
+  margin: 0;
+  //padding: 0;
+  overflow: hidden; /* 防止内容溢出 */
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  background-color: #D4D9E5;
 }
 
 .components-container {

src/components/TopNav/index.vue

@@ -2,11 +2,13 @@
   <el-menu
     :default-active="activeMenu"
     mode="horizontal"
+    active-text-color="#ffd04b"
     @select="handleSelect"
   >
     <template v-for="(item, index) in newTopNev">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index"
+      <el-menu-item class="menuStyle" style="font-size: medium;background-color: #F6F6FA;border-top-right-radius: 30%;border-top-left-radius: 30%;text-align: center" :index="item.path" :key="index"
       >
+        <i :class="item.icon" style="width: 10px;height: 10px;margin-top: -12px"></i>
         {{ item.name }}</el-menu-item
       >
     </template>
@@ -31,24 +33,30 @@
 
 <script>
 import { constantRoutes } from "@/router";
+import Menu from "@/views/system/menu/index.vue";
 
 // 隐藏侧边栏路由
 const hideList = ['/index', '/user/profile'];
 
 export default {
+  components: {Menu},
   data() {
     return {
       newTopNev: [
         {
-          path: '/',
-          name: '首页',
-        }, {
           path: '/monitoring/video',
-          name: '视频监控',
+          icon: 'el-icon-house',
+          name: '首页',
+        },
+        {
+          path: '/',
+          icon: 'el-icon-user',
+          name: '员工信息',
         },
         {
           path: '/user/profile',
-          name: '个人中心',
+          icon: 'el-icon-view',
+          name: '历史记录',
         }
       ],
       // 顶部栏初始数
@@ -135,6 +143,7 @@ export default {
     },
     // 菜单选择事件
     handleSelect(key, keyPath) {
+      console.info('key',key)
       this.currentIndex = key;
       const route = this.routers.find(item => item.path === key);
       if (this.ishttp(key)) {
@@ -180,27 +189,62 @@ export default {
 </script>
 
 <style lang="scss">
-.topmenu-container.el-menu--horizontal > .el-menu-item {
-  float: left;
-  height: 50px !important;
-  line-height: 50px !important;
-  color: #999093 !important;
-  padding: 0 5px !important;
-  margin: 0 10px !important;
+//.topmenu-container.el-menu--horizontal > .el-menu-item {
+//  float: left;
+//  height: 50px !important;
+//  line-height: 70px !important;
+//  color: #999093 !important;
+//  padding: 5px 5px !important;
+//  //margin: 0 10px !important;
+//  background-color: #F6F6FA;
+//  border-top-left-radius: 30%;
+//  border-top-right-radius: 30%;
+//  font-size: medium;
+//}
+//
+//.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+//  border-bottom: 2px solid transparent !important;
+//  background-color: #D4D9E5;
+//  color: #303133;
+//}
+//
+///* submenu item */
+//.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
+//  float: left;
+//  height: 50px !important;
+//  line-height: 50px !important;
+//  color: #999093 !important;
+//  padding: 0 5px !important;
+//  margin: 0 10px !important;
+//}
+.menuStyle{
+  box-shadow: 0 0 8px #D4D9E5;
+  height: 30px;
+  border-bottom: transparent;
 }
-
-.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
-  border-bottom: 2px solid #{'var(--theme)'} !important;
-  color: #303133;
+.menuStyle:hover{
+  color: #30B08F;
+  border-bottom: 0px transparent;
 }
-
-/* submenu item */
-.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
-  float: left;
-  height: 50px !important;
-  line-height: 50px !important;
-  color: #999093 !important;
-  padding: 0 5px !important;
-  margin: 0 10px !important;
+::v-deep .el-menu::before{
+  color: transparent;
+}
+::v-deep .el-submenu{
+  height: 30px;
+}
+.el-menu-item.is-active{
+  color: white !important;
+  background-color: #0D8EEE !important;
+}
+.el-menu-item {
+  width: 130px;
+  color: #2E2E2E !important;
+  background-color:#F6F6FA !important;
+}
+.el-menu--horizontal > .el-submenu{
+  height: 10px;
+}
+.el-menu--horizontal > .el-submenu.is-active{
+  height: 80px;
 }
 </style>

src/layout/components/Navbar.vue

 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" v-if = "false"/>
+<!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
+    <img src="../../assets/images/titlePic.png" alt="" style="width: 200px;height: 80px;">
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
-
-    <div class="right-menu">
-<!--      <template v-if="device!=='mobile'">-->
-<!--        <search id="header-search" class="right-menu-item" />-->
-
-<!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
-<!--          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
-<!--        </el-tooltip>-->
-
-<!--        <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
-<!--          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
-<!--        </el-tooltip>-->
-
-<!--        <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
-
-<!--        <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
-<!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
-<!--        </el-tooltip>-->
-
-<!--      </template>-->
-
+    <div class="right-menu" style="margin-top: 20px">
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
@@ -113,13 +93,12 @@ export default {
 <style lang="scss" scoped>
 .navbar {
   display: flex;
-  height: 50px;
+  height: 80px;
   overflow: hidden;
   position: relative;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
   justify-content: space-between;
-
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -138,6 +117,9 @@ export default {
   }
 
   .topmenu-container {
+    margin-top:30px ;
+    //margin-left: -10px;
+    //height: 80px;
     //position: absolute;
     //left: 50px;
   }

src/layout/index.vue

@@ -108,6 +108,6 @@ export default {
     width: 100%;
   }
   .app-wrapper{
-    background: gray;
+    background: #D4D9E5;
   }
 </style>

src/views/login.vue

@@ -193,7 +193,7 @@ export default {
     top: 50%;
     transform: translate(-50%, -50%);
     width: 800px;
-    height: 500px;
+    height: 490px;
     border-radius: 8px;
     overflow: hidden;
     display: flex;
@@ -204,7 +204,8 @@ export default {
 
     width: 375px;
     height: 500px;
-    background: #388fff;
+    background-image: url("../../src/assets/images/bgImg.png");
+    background-size: contain;
   }
 
   .login-right {