菜单演示游戏

acupuncture-前台/src/assets/styles/sidebar.scss

@@ -87,6 +87,11 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
+      border-radius: 6px;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      -ms-border-radius: 6px;
+      -o-border-radius: 6px;
     }
     // menu hover
     .submenu-title-noDropdown,

acupuncture-前台/src/assets/styles/variables.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 120px;
+$base-sidebar-width: 90px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

acupuncture-前台/src/layout/components/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="navbar">
-    <hamburger
+    <!-- <hamburger
       id="hamburger-container"
       :is-active="sidebar.opened"
       class="hamburger-container"
@@ -11,7 +11,8 @@
       id="breadcrumb-container"
       class="breadcrumb-container"
       v-if="!topNav"
-    />
+    /> -->
+    <div class="logo-title">朱琏针灸联盟数据系统</div>
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
 
     <div class="right-menu">
@@ -33,7 +34,7 @@
         </el-tooltip>
       </template> -->
 
-      <el-dropdown
+      <!-- <el-dropdown
         class="avatar-container right-menu-item hover-effect"
         trigger="click"
       >
@@ -52,7 +53,7 @@
             <span>退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
-      </el-dropdown>
+      </el-dropdown> -->
     </div>
   </div>
 </template>
@@ -120,7 +121,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.logo-title {
+  font-size: 20px;
+  color: #70483e;
+  line-height: 50px;
+  margin-left: 20px;
+  font-weight: 600;
+}
 .navbar {
+  display: flex;
   height: 50px;
   overflow: hidden;
   position: relative;

acupuncture-前台/src/layout/components/Sidebar/Logo.vue

@@ -1,55 +1,13 @@
 <template>
-  <div
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
-    class="sidebar-logo-container"
-    :class="{ collapse: collapse }"
-    :style="{
-      backgroundColor:
-        sideTheme === 'theme-dark'
-          ? variables.menuBackground
-          : variables.menuLightBackground,
-    }"
-  >
     <transition name="sidebarLogoFade">
-      <router-link
+      <img v-if="logo" :src="logo" class="sidebar-logo" />
-        v-if="collapse"
-        key="collapse"
-        class="sidebar-logo-link"
-        to="/"
-      >
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1
-          v-else
-          class="sidebar-title"
-          :style="{
-            color:
-              sideTheme === 'theme-dark'
-                ? variables.logoTitleColor
-                : variables.logoLightTitleColor,
-          }"
-        >
-          {{ title }}
-        </h1>
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1
-          class="sidebar-title"
-          :style="{
-            color:
-              sideTheme === 'theme-dark'
-                ? variables.logoTitleColor
-                : variables.logoLightTitleColor,
-          }"
-        >
-          {{ title }}
-        </h1>
-      </router-link>
     </transition>
   </div>
 </template>
 
 <script>
-import logoImg from "@/assets/logo/logo.png";
+import logoImg from "@/assets/images/zj.png";
 import variables from "@/assets/styles/variables.scss";
 
 export default {
@@ -86,37 +44,16 @@ export default {
 .sidebarLogoFade-leave-to {
   opacity: 0;
 }
-
 .sidebar-logo-container {
+  margin-top: 10px;
   position: relative;
-  width: 100%;
+  border-radius: 4px;
-  height: 50px;
+  display: flex;
-  line-height: 50px;
+  justify-content: center;
-  background: #70483e;
+  align-items: center;
-  text-align: center;
+  img {
-  overflow: hidden;
+    width: 32px;
-
+    height: 32px;
-  & .sidebar-logo-link {
-    height: 100%;
-    width: 100%;
-
-    & .sidebar-logo {
-      width: 32px;
-      height: 32px;
-      vertical-align: middle;
-      margin-right: 12px;
-    }
-
-    & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-    }
   }
 
   &.collapse {

acupuncture-前台/src/layout/components/Sidebar/SidebarItem.vue

@@ -41,7 +41,7 @@
             <img :src="itmeIcon[item.meta.title]" alt="" />
           </div>
           <div v-if="itmeIcon1[item.meta.title]" class="div-img-gl">
-            <img :src="itmeIcon1[item.meta.title]" alt="" />
+            <img :src="itmeIcon[item.meta.title]" alt="" />
           </div>
           <item
             v-if="item.meta"
@@ -162,6 +162,10 @@ export default {
 #app .sidebar-container .nest-menu .is-active {
   background-color: #fff !important;
 }
+#app .sidebar-container .nest-menu .el-menu-item {
+  padding: 0 !important;
+  min-width: 60px !important;
+}
 #app .sidebar-container .nest-menu .is-active:hover {
   color: #fff !important;
 }
@@ -171,7 +175,8 @@ export default {
   line-height: 26px !important;
 }
 >>> .el-submenu.is-active .el-submenu__title .header {
-  background-color: #fff !important;
+  border-radius: 6px;
+  color: #fff;
 }
 >>> .el-submenu .el-submenu__title .header {
   width: 100%;
@@ -201,4 +206,8 @@ export default {
   padding-top: 10px !important;
   background-color: #5a332a;
 }
+#app .sidebar-container .el-submenu__title:hover {
+  background-color: #5a3a32 !important;
+  border-radius: 6px;
+}
 </style>

acupuncture-前台/src/layout/components/Sidebar/index.vue

@@ -74,6 +74,7 @@ export default {
 <style scoped>
 >>> .is-active {
   background-color: #fff !important;
+  border-radius: 6px;
 }
 >>> .is-active .div-img {
   display: none;

acupuncture-前台/src/layout/index.vue

@@ -1,111 +1,122 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+  <div
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    :class="classObj"
-    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
+    class="app-wrapper"
-    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
+    :style="{ '--current-color': theme }"
-      <div :class="{'fixed-header':fixedHeader}">
+  >
-        <navbar/>
+    <div
-        <tags-view v-if="needTagsView"/>
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <div
+      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+      class="main-container"
+    >
+      <div :class="{ 'fixed-header': fixedHeader }">
+        <navbar />
+        <!-- <tags-view v-if="needTagsView"/> -->
       </div>
-      <app-main/>
+      <app-main />
       <right-panel>
-        <settings/>
+        <settings />
       </right-panel>
     </div>
   </div>
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
+import RightPanel from "@/components/RightPanel";
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
-import ResizeMixin from './mixin/ResizeHandler'
+import ResizeMixin from "./mixin/ResizeHandler";
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
-import variables from '@/assets/styles/variables.scss'
+import variables from "@/assets/styles/variables.scss";
 
 export default {
-  name: 'Layout',
+  name: "Layout",
   components: {
     AppMain,
     Navbar,
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
   },
   mixins: [ResizeMixin],
   computed: {
     ...mapState({
-      theme: state => state.settings.theme,
+      theme: (state) => state.settings.theme,
-      sideTheme: state => state.settings.sideTheme,
+      sideTheme: (state) => state.settings.sideTheme,
-      sidebar: state => state.app.sidebar,
+      sidebar: (state) => state.app.sidebar,
-      device: state => state.app.device,
+      device: (state) => state.app.device,
-      needTagsView: state => state.settings.tagsView,
+      needTagsView: (state) => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
+      fixedHeader: (state) => state.settings.fixedHeader,
     }),
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
+        mobile: this.device === "mobile",
-      }
+      };
     },
     variables() {
       return variables;
-    }
+    },
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
+@import "~@/assets/styles/variables.scss";
 
-  .app-wrapper {
+.app-wrapper {
-    @include clearfix;
+  @include clearfix;
-    position: relative;
+  position: relative;
-    height: 100%;
+  height: 100%;
-    width: 100%;
+  width: 100%;
 
-    &.mobile.openSidebar {
+  &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
-
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
+.drawer-bg {
-    width: calc(100% - 54px);
+  background: #000;
-  }
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .sidebarHide .fixed-header {
+.fixed-header {
-    width: 100%;
+  position: fixed;
-  }
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
+.hideSidebar .fixed-header {
-    width: 100%;
+  width: calc(100% - 54px);
-  }
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
 </style>