框架样式

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>canteen2.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

src/assets/icons/svg/canteen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749116452711" class="icon" viewBox="0 0 1099 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4380" width="34.34375" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M468.715774 431.803817c-7.269107 5.192219-10.384438 13.688577-7.741127 21.712916l0.283212 1.038444c4.436987 13.688577 22.184936 19.069604 34.36305 10.384438 38.233613-27.188347 38.233613-62.306629 38.233613-81.187425V238.275652c0-19.44722 15.010233-32.569374 32.00295-41.160136 6.985895-3.304139 11.517286-10.290034 11.61169-18.031161 0-15.765465-18.031161-25.583479-32.852586-18.125565-28.132387 14.255001-55.320734 38.044805-55.320734 77.50567v145.570941c0.094404 15.671061-0.188808 33.041394-20.580068 47.768416zM369.969208 431.803817c-7.269107 5.192219-10.290034 13.688577-7.741127 21.712916l0.283212 1.038444c4.436987 13.688577 22.27934 19.069604 34.36305 10.384438 38.233613-27.188347 38.233613-62.306629 38.233613-81.187425V238.275652c0-19.44722 15.010233-32.569374 32.00295-41.160136 6.985895-3.304139 11.517286-10.290034 11.61169-18.031161 0-15.765465-18.125565-25.583479-32.852586-18.125565-28.132387 14.255001-55.320734 38.044805-55.320734 77.50567v145.570941c-0.188808 15.671061-0.188808 33.041394-20.580068 47.768416zM265.558403 454.743985c4.342583 13.688577 22.184936 19.164008 34.36305 10.384438 38.233613-27.188347 38.233613-62.306629 38.233613-81.093022V238.275652c0-19.44722 15.010233-32.569374 32.097354-41.160136 6.985895-3.304139 11.517286-10.290034 11.61169-18.031161 0-15.765465-18.125565-25.583479-32.852586-18.125565-28.226791 14.255001-55.320734 38.044805-55.320734 77.50567v145.570941c0 15.765465 0 33.324606-20.674472 48.051628-7.269107 5.192219-10.290034 13.688577-7.741127 21.712916l0.283212 0.94404zM164.26293 529.700747c0 126.123721 86.568452 233.649857 207.783166 274.149165v43.709044c0 10.006822 8.118743 18.125565 18.125564 18.125565h318.896654c10.006822 0 18.125565-8.118743 18.125564-18.125565v-43.425832c121.214714-40.593713 207.783166-148.119849 207.783166-274.149165v-13.688578c0-10.006822-8.118743-18.125565-18.125564-18.125564h-734.462985c-10.006822 0-18.125565 8.118743-18.125565 18.125564v13.405366zM906.844658 271.505854H620.894994c-15.671061 0-28.321195-12.650134-28.321195-28.321195s12.650134-28.321195 28.321195-28.321194h285.949664c15.671061 0 28.321195 12.650134 28.321194 28.321194s-12.650134 28.321195-28.321194 28.321195zM906.844658 384.601825H620.894994c-15.671061 0-28.321195-12.650134-28.321195-28.321194s12.650134-28.321195 28.321195-28.321195h285.949664c15.671061 0 28.321195 12.650134 28.321194 28.321195s-12.650134 28.321195-28.321194 28.321194zM221.754955 271.505854h-29.454042c-15.671061 0-28.321195-12.650134-28.321195-28.321195s12.650134-28.321195 28.321195-28.321194h29.454042c15.671061 0 28.321195 12.650134 28.321195 28.321194s-12.650134 28.321195-28.321195 28.321195zM221.754955 384.601825h-29.454042c-15.671061 0-28.321195-12.650134-28.321195-28.321194s12.650134-28.321195 28.321195-28.321195h29.454042c15.671061 0 28.321195 12.650134 28.321195 28.321195s-12.650134 28.321195-28.321195 28.321194z" p-id="4381" fill="#ffffff"></path></svg>

src/assets/icons/svg/canteen2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749117486370" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4732" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 341.333333c-164.949333 0-298.666667 133.717333-298.666667 298.666667v42.666667H128v-42.666667c0-212.074667 171.925333-384 384-384s384 171.925333 384 384v42.666667h-85.333333v-42.666667c0-164.949333-133.717333-298.666667-298.666667-298.666667z" fill="#ffffff" p-id="4733"></path><path d="M504.576 470.869333l-38.784 17.792a214.549333 214.549333 0 0 0-71.146667 52.906667l-28.224 32-63.978666-56.469333 28.224-32a299.797333 299.797333 0 0 1 99.541333-73.984l38.762667-17.813334 35.605333 77.568zM85.333333 640h853.333334v85.333333H85.333333v-85.333333zM85.333333 789.333333h853.333334v85.333334H85.333333v-85.333334zM512 213.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v42.666667h-85.333333v-42.666667a128 128 0 0 1 256 0v42.666667h-85.333333v-42.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z" fill="#ffffff" p-id="4734"></path></svg>

src/assets/styles/sidebar.scss

@@ -2,9 +2,12 @@
 
   .main-container {
     height: 100%; 
+    // width: calc(100%-240px);
+    width: -webkit-fill-available;
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
-    position: relative;
+    position: absolute;
+    top: 84px;
   }
 
   .sidebarHide {
@@ -16,10 +19,10 @@
     transition: width 0.28s;
     width: $base-sidebar-width !important;
     background-color: $base-menu-background;
-    height: 100%;
+    height: auto;
-    position: fixed;
+    position: absolute;
     font-size: 0px;
-    top: 0;
+    top: 84px;
     bottom: 0;
     left: 0;
     z-index: 1001;

src/assets/styles/variables.scss

@@ -9,17 +9,17 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
+$base-menu-color:#000;
-$base-menu-color-active:#f4f4f5;
+$base-menu-color-active:#000;
-$base-menu-background:#00594F;
+$base-menu-background:#fff;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
 $base-menu-light-background:#ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#02423b;
+$base-sub-menu-background:#fff;
-$base-sub-menu-hover:#0a302c;
+$base-sub-menu-hover:#ccc;
 
 // 自定义暗色菜单风格
 /**

src/components/TopNav/index.vue

@@ -2,13 +2,11 @@
   <el-menu
     :default-active="activeMenu"
     mode="horizontal"
-    @select="handleSelect"
+    @select="handleSelect" style="background: transparent;border-bottom: 0;"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber">
+      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" style="background: transparent;">
-        <svg-icon
+        <svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon"/>
-        v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
-        :icon-class="item.meta.icon"/>
         {{ item.meta.title }}
       </el-menu-item>
     </template>
@@ -171,16 +169,18 @@ export default {
 <style lang="scss">
 .topmenu-container.el-menu--horizontal > .el-menu-item {
   float: left;
-  height: 50px !important;
+  height: 80px !important;
-  line-height: 50px !important;
+  line-height: 80px !important;
-  color: #999093 !important;
+  color: #FFF !important;
+  font-size: 22px;
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
 
 .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;
+  border-bottom: 0!important;
-  color: #303133;
+  background-color: #4C9A95!important;
+  // color: #303133;
 }
 
 /* submenu item */

src/layout/components/Navbar.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
-
+    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> -->
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
+    <div style="position: absolute;left: 0;top: 20px;width: 15%;">
+      <router-link key="collapse" class="sidebar-logo-link" to="/">
+        <div style="height: 40px;width: 40px;background: #fff;border-radius: 50%;margin-right: 20px;display: flex;align-items: center;justify-content: center;">
+          <img :src="logo" class="sidebar-logo" />
+        </div>
+        <h1 class="sidebar-title">{{ title }} </h1>
+      </router-link>
+    </div> 
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
 
     <div class="right-menu">
@@ -10,7 +17,6 @@
         <search id="header-search" class="right-menu-item" />
  
 
-
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
@@ -50,7 +56,7 @@ import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 import bonusGit from '@/components/bonus/Git'
 import bonusDoc from '@/components/bonus/Doc'
-
+import logoImg from '@/assets/logo/logo.png'
 export default {
   components: {
     Breadcrumb,
@@ -85,6 +91,12 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      title: process.env.VUE_APP_TITLE,
+      logo: logoImg
+    }
+  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
@@ -106,10 +118,10 @@ export default {
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  height: 84px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  background: #026559;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
@@ -131,7 +143,8 @@ export default {
 
   .topmenu-container {
     position: absolute;
-    left: 50px;
+    left: 15%;
+    top: 0px;
   }
 
   .errLog-container {
@@ -142,7 +155,7 @@ export default {
   .right-menu {
     float: right;
     height: 100%;
-    line-height: 50px;
+    line-height: 80px;
 
     &:focus {
       outline: none;
@@ -153,7 +166,7 @@ export default {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      color: #fff;
       vertical-align: text-bottom;
 
       &.hover-effect {
@@ -191,4 +204,29 @@ export default {
     }
   }
 }
+
+.sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle; 
+    }
+
+    .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 24px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
 </style>

src/layout/components/TagsView/index.vue

@@ -242,8 +242,8 @@ export default {
   height: 34px;
   width: 100%;
   background: #fff;
-  border-bottom: 1px solid #d8dce5;
+  // border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  // box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;

src/layout/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <navbar/>
     <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
+      <div :class="{'fixed-header':fixedHeader}" style="display: flex;border-bottom: 1px solid #d8dce5;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);align-items: center;">
-        <navbar/>
+        <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" style="width: 2%;"/>
-        <tags-view v-if="needTagsView"/>
+        <tags-view v-if="needTagsView" style="width: 98%;"/>
       </div>
       <app-main/>
       <right-panel>
@@ -44,7 +45,8 @@ import { validateNewPassword } from '@/utils/validate'
 import { updateUserPwd, checkPasswordStatus } from '@/api/system/user'
 import { handleNoWarningLog } from '@/api/system/log'
 import {MessageBox} from "element-ui";
-
+import { mapGetters } from 'vuex'
+import Hamburger from '@/components/Hamburger'
 export default {
   name: 'Layout',
   data() {
@@ -89,11 +91,15 @@ export default {
     Navbar,
     RightPanel,
     Settings,
+    Hamburger,
     Sidebar,
     TagsView
   },
   mixins: [ResizeMixin],
   computed: {
+    ...mapGetters([
+      'sidebar'
+    ]),
     ...mapState({
       theme: state => state.settings.theme,
       sideTheme: state => state.settings.sideTheme,
@@ -123,6 +129,9 @@ export default {
     this.handleNoWarningLog()
   },
   methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
     checkPasswordStatus() {
       checkPasswordStatus().then(response => {
         if (response.code === 200) {
@@ -311,4 +320,17 @@ export default {
 .mobile .fixed-header {
   width: 100%;
 }
+
+.hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
 </style>

src/router/index.js

@@ -64,15 +64,15 @@ export const constantRoutes = [
   {
     path: '',
     component: Layout,
-    redirect: 'index',
+    redirect: '/canteen/index',
-    children: [
+    // children: [
-      {
+    //   {
-        path: 'index',
+    //     path: 'index',
-        component: () => import('@/views/index_v1'),
+    //     component: () => import('@/views/index_v1'),
-        name: 'Index',
+    //     name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+    //     meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
+    //   }
-    ]
+    // ]
   },
   {
     path: '/user',

src/settings.js

@@ -12,7 +12,7 @@ module.exports = {
   /**
    * 是否显示顶部导航
    */
-  topNav: false,
+  topNav: true,
 
   /**
    * 是否显示 tagsView
@@ -27,7 +27,7 @@ module.exports = {
   /**
    * 是否显示logo
    */
-  sidebarLogo: true,
+  sidebarLogo: false,
 
   /**
    * 是否显示动态标题