优化界面

src/App.vue

@@ -21,7 +21,7 @@ export default  {
 /**挂载iconfont字体图标*/
 @font-face {
 	font-family: 'iconfont';
-	src: url('https://at.alicdn.com/t/c/font_4240724_m848p8npa6.ttf?t=1694018175516') format('truetype');
+	src: url('https://at.alicdn.com/t/c/font_4240724_15zukcks81p.ttf?t=1694136382060') format('truetype');
 }
 .icon {
 	font-family: iconfont;

src/assets/styles/index.scss

@@ -128,6 +128,7 @@ aside {
   border-radius: 5px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
   position: relative;
+  height: calc(100vh - 90px);
 }
 
 .components-container {

src/assets/styles/sidebar.scss

@@ -15,7 +15,7 @@
     -webkit-transition: width .28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    background-color: white;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -24,8 +24,6 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
 
     // reset element-ui css
     .horizontal-collapse-transition {

src/assets/styles/variables.scss

@@ -9,17 +9,18 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-color:#545555;//菜单字体颜色
+$base-menu-color-active:#1890ff;//菜单选中颜色
+$base-menu-background:white;
 $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:#1f2d3d;
-$base-sub-menu-hover:#001528;
+//菜单展开颜色
+$base-sub-menu-background:white;
+$base-sub-menu-hover:rgba(0, 0, 0, 0.06) !important;
 
 // 自定义暗色菜单风格
 /**
@@ -36,7 +37,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 230px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/components/Hamburger/index.vue

@@ -1,14 +1,9 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
-    <svg
-      :class="{'is-active':isActive}"
-      class="hamburger"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+  <div style="padding: 0 15px" @click="toggleClick">
+    <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64" :style="{ fill: '#ffffff' }">
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+      />
     </svg>
   </div>
 </template>
@@ -24,10 +19,10 @@ export default {
   },
   methods: {
     toggleClick() {
-      this.$emit('toggleClick')
+      this.$emit('toggleClick');
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -36,6 +31,7 @@ export default {
   vertical-align: middle;
   width: 20px;
   height: 20px;
+  margin-top: 17px;
 }
 
 .hamburger.is-active {

src/components/HeaderSearch/index.vue

@@ -1,27 +1,19 @@
 <template>
-  <div :class="{'show':show}" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
-    <el-select
-      ref="headerSearchSelect"
-      v-model="search"
-      :remote-method="querySearch"
-      filterable
-      default-first-option
-      remote
-      placeholder="Search"
-      class="header-search-select"
-      @change="change"
-    >
-      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
-    </el-select>
+  <div :class="{ show: show }" class="header-search">
+    <div class="msearch">
+      <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+      <el-select ref="headerSearchSelect" v-model="search" :remote-method="querySearch" filterable default-first-option remote placeholder="搜索菜单" class="header-search-select" @change="change">
+        <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
+      </el-select>
+    </div>
   </div>
 </template>
 
 <script>
 // fuse is a lightweight fuzzy-search module
 // make search results more in line with expectations
-import Fuse from 'fuse.js/dist/fuse.min.js'
-import path from 'path'
+import Fuse from 'fuse.js/dist/fuse.min.js';
+import path from 'path';
 
 export default {
   name: 'HeaderSearch',
@@ -30,59 +22,59 @@ export default {
       search: '',
       options: [],
       searchPool: [],
-      show: false,
+      show: true,
       fuse: undefined
-    }
+    };
   },
   computed: {
     routes() {
-      return this.$store.getters.permission_routes
+      return this.$store.getters.permission_routes;
     }
   },
   watch: {
     routes() {
-      this.searchPool = this.generateRoutes(this.routes)
+      this.searchPool = this.generateRoutes(this.routes);
     },
     searchPool(list) {
-      this.initFuse(list)
+      this.initFuse(list);
     },
     show(value) {
       if (value) {
-        document.body.addEventListener('click', this.close)
+        document.body.addEventListener('click', this.close);
       } else {
-        document.body.removeEventListener('click', this.close)
+        document.body.removeEventListener('click', this.close);
       }
     }
   },
   mounted() {
-    this.searchPool = this.generateRoutes(this.routes)
+    this.searchPool = this.generateRoutes(this.routes);
   },
   methods: {
     click() {
-      this.show = !this.show
+      this.show = !this.show;
       if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus();
       }
     },
     close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
-      this.options = []
-      this.show = false
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur();
+      this.options = [];
+      this.show = false;
     },
     change(val) {
       const path = val.path;
-      if(this.ishttp(val.path)) {
+      if (this.ishttp(val.path)) {
         // http(s):// 路径新窗口打开
-        const pindex = path.indexOf("http");
-        window.open(path.substr(pindex, path.length), "_blank");
+        const pindex = path.indexOf('http');
+        window.open(path.substr(pindex, path.length), '_blank');
       } else {
-        this.$router.push(val.path)
+        this.$router.push(val.path);
       }
-      this.search = ''
-      this.options = []
-      this.$nextTick(() => {
-        this.show = false
-      })
+      this.search = '';
+      this.options = [];
+     /* this.$nextTick(() => {
+        this.show = false;
+      }); */
     },
     initFuse(list) {
       this.fuse = new Fuse(list, {
@@ -92,61 +84,66 @@ export default {
         distance: 100,
         maxPatternLength: 32,
         minMatchCharLength: 1,
-        keys: [{
-          name: 'title',
-          weight: 0.7
-        }, {
-          name: 'path',
-          weight: 0.3
-        }]
-      })
+        keys: [
+          {
+            name: 'title',
+            weight: 0.7
+          },
+          {
+            name: 'path',
+            weight: 0.3
+          }
+        ]
+      });
     },
     // Filter out the routes that can be displayed in the sidebar
     // And generate the internationalized title
     generateRoutes(routes, basePath = '/', prefixTitle = []) {
-      let res = []
+      let res = [];
 
       for (const router of routes) {
         // skip hidden router
-        if (router.hidden) { continue }
+        if (router.hidden) {
+          continue;
+        }
 
         const data = {
           path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
           title: [...prefixTitle]
-        }
+        };
 
         if (router.meta && router.meta.title) {
-          data.title = [...data.title, router.meta.title]
+          data.title = [...data.title, router.meta.title];
 
           if (router.redirect !== 'noRedirect') {
             // only push the routes with title
             // special case: need to exclude parent router without redirect
-            res.push(data)
+            res.push(data);
           }
         }
 
         // recursive child routes
         if (router.children) {
-          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+          const tempRoutes = this.generateRoutes(router.children, data.path, data.title);
           if (tempRoutes.length >= 1) {
-            res = [...res, ...tempRoutes]
+            res = [...res, ...tempRoutes];
           }
         }
       }
-      return res
+      return res;
     },
     querySearch(query) {
       if (query !== '') {
-        this.options = this.fuse.search(query)
+        this.options = this.fuse.search(query);
       } else {
-        this.options = []
+        this.options = [];
       }
     },
     ishttp(url) {
-      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1;
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -157,9 +154,13 @@ export default {
     cursor: pointer;
     font-size: 18px;
     vertical-align: middle;
+    color: #999999;
+    margin-left: 14px;
+    margin-top: -3px;
   }
 
   .header-search-select {
+    margin-top: -3px;
     font-size: 18px;
     transition: width 0.2s;
     width: 0;
@@ -187,4 +188,13 @@ export default {
     }
   }
 }
+.msearch {
+  background-color: white;
+  overflow: hidden;
+  margin-top: 14px;
+  border-radius: 20px;
+  width: 350px;
+  height: 40px;
+  margin-left: 30px;
+}
 </style>

src/components/Pagination/index.vue

@@ -107,6 +107,7 @@ export default {
 .pagination-container {
   background: #fff;
   padding: 32px 16px;
+  margin-top: 7px;
 }
 .pagination-container.hidden {
   display: none;

src/components/TopNav/index.vue

@@ -1,42 +1,33 @@
 <template>
-    <el-dialog :modal="false" custom-class="testgks" width="20vw" :before-close="closeMenuHandler" :visible.sync="isShowMenu">
-      <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect">
-        <template v-for="(item, index) in topMenus">
-          <el-menu-item :style="{ '--theme': theme }" :index="item.path" :key="index"
-            v-if="index < visibleNumber"><svg-icon :icon-class="item.meta.icon" />
-            {{ item.meta.title }}</el-menu-item>
-        </template>
-
-        <!-- 顶部菜单超出数量折叠 -->
-        <el-submenu :style="{ '--theme': theme }" index="more" v-if="topMenus.length > visibleNumber">
-          <template slot="title">更多菜单</template>
-          <template v-for="(item, index) in topMenus">
-            <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber"><svg-icon
-                :icon-class="item.meta.icon" />
-              {{ item.meta.title }}</el-menu-item>
-          </template>
-        </el-submenu>
-      </el-menu>
-    </el-dialog>
+  <el-popover :default-active="activeMenu" placement="bottom" width="400" trigger="click" style="margin-top: 44px" v-model="isShowMenu">
+    <div class="cbox">
+      <div class="lable">菜单入口</div>
+      <div class="menu" v-for="(item, index) in topMenus" @click="handleSelect(item)">
+        <div class="out">
+          <div class="int">
+            <div class="icon"><svg-icon :icon-class="item.meta.icon" /></div>
+            <div class="desc">{{ item.meta.title }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div slot="reference" class="reference" >
+      <span class="icon">&#xe608;</span>
+      <div class="mtt">应用中心</div>
+    </div>
+  </el-popover>
 </template>
 
 <script>
-import { constantRoutes } from "@/router";
+import { constantRoutes } from '@/router';
 
 // 隐藏侧边栏路由
 const hideList = ['/index', '/user/profile'];
 
 export default {
-  props: {
-    isShowMenu: {
-      type: Boolean,
-      default: false,
-    }
-  },
   data() {
     return {
-      // 顶部栏初始数
-      visibleNumber: 5,
+      isShowMenu: false,
       // 当前激活菜单的 index
       currentIndex: undefined
     };
@@ -48,10 +39,10 @@ export default {
     // 顶部显示菜单
     topMenus() {
       let topMenus = [];
-      this.routers.map((menu) => {
+      this.routers.map(menu => {
         if (menu.hidden !== true) {
           // 兼容顶部栏一级菜单内部跳转
-          if (menu.path === "/") {
+          if (menu.path === '/') {
             topMenus.push(menu.children[0]);
           } else {
             topMenus.push(menu);
@@ -67,14 +58,14 @@ export default {
     // 设置子路由
     childrenMenus() {
       var childrenMenus = [];
-      this.routers.map((router) => {
+      this.routers.map(router => {
         for (var item in router.children) {
           if (router.children[item].parentPath === undefined) {
-            if (router.path === "/") {
-              router.children[item].path = "/" + router.children[item].path;
+            if (router.path === '/') {
+              router.children[item].path = '/' + router.children[item].path;
             } else {
               if (!this.ishttp(router.children[item].path)) {
-                router.children[item].path = router.path + "/" + router.children[item].path;
+                router.children[item].path = router.path + '/' + router.children[item].path;
               }
             }
             router.children[item].parentPath = router.path;
@@ -88,9 +79,9 @@ export default {
     activeMenu() {
       const path = this.$route.path;
       let activePath = path;
-      if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
+      if (path !== undefined && path.lastIndexOf('/') > 0 && hideList.indexOf(path) === -1) {
         const tmpPath = path.substring(1, path.length);
-        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
+        activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'));
         this.$store.dispatch('app/toggleSideBarHide', false);
       } else if (!this.$route.children) {
         activePath = path;
@@ -98,21 +89,20 @@ export default {
       }
       this.activeRoutes(activePath);
       return activePath;
-    },
+    }
   },
   beforeMount() {
-    window.addEventListener('resize', this.setVisibleNumber)
+    window.addEventListener('resize', this.setVisibleNumber);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setVisibleNumber)
+    window.removeEventListener('resize', this.setVisibleNumber);
   },
   mounted() {
     this.setVisibleNumber();
   },
   methods: {
-
     closeMenuHandler() {
-      this.$emit("closeMenuHandler");
+      this.$emit('closeMenuHandler');
     },
 
     // 根据宽度计算设置显示栏数
@@ -121,12 +111,14 @@ export default {
       this.visibleNumber = parseInt(width / 85);
     },
     // 菜单选择事件
-    handleSelect(key, keyPath) {
-      this.currentIndex = key;
+    handleSelect(item) {
+      this.isShowMenu = false;
+      this.currentIndex = item.path;
+      let key = item.path;
       const route = this.routers.find(item => item.path === key);
       if (this.ishttp(key)) {
         // http(s):// 路径新窗口打开
-        window.open(key, "_blank");
+        window.open(key, '_blank');
       } else if (!route || !route.children) {
         // 没有子路由路径内部打开
         this.$router.push({ path: key });
@@ -136,27 +128,27 @@ export default {
         this.activeRoutes(key);
         this.$store.dispatch('app/toggleSideBarHide', false);
       }
-      this.$emit("showHamBurger");
-      this.$emit("closeMenuHandler");
+      this.$emit('showHamBurger');
+      this.$emit('closeMenuHandler');
     },
     // 当前激活的路由
     activeRoutes(key) {
       var routes = [];
       if (this.childrenMenus && this.childrenMenus.length > 0) {
-        this.childrenMenus.map((item) => {
-          if (key == item.parentPath || (key == "index" && "" == item.path)) {
+        this.childrenMenus.map(item => {
+          if (key == item.parentPath || (key == 'index' && '' == item.path)) {
             routes.push(item);
           }
         });
       }
       if (routes.length > 0) {
-        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
+        this.$store.commit('SET_SIDEBAR_ROUTERS', routes);
       }
     },
     ishttp(url) {
-      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1;
     }
-  },
+  }
 };
 </script>
 
@@ -164,10 +156,7 @@ export default {
 .testgks {
   margin-left: 12vw;
 }
-
-
-
-.topmenu-container.el-menu--horizontal>.el-menu-item {
+.topmenu-container.el-menu--horizontal > .el-menu-item {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
@@ -176,14 +165,14 @@ export default {
   margin: 0 10px !important;
 }
 
-.topmenu-container.el-menu--horizontal>.el-menu-item.is-active,
-.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
+.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;
 }
 
 /* submenu item */
-.topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title {
+.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
   float: left;
   height: 50px !important;
   line-height: 50px !important;
@@ -191,4 +180,42 @@ export default {
   padding: 0 5px !important;
   margin: 0 10px !important;
 }
+.reference {
+  margin-top: -2px;
+  .mtt {
+    margin-top: -24px;
+    font-size: 14px;
+  }
+}
+.el-popper {
+  top: 44px !important;
+}
+.menu {
+  float: left;
+  width: 33.33%;
+  .out {
+    padding: 10px;
+    .int {
+      padding: 10px 10px 0px 10px;
+      text-align: center;
+      cursor: pointer;
+      .icon {
+        width: 45px;
+        height: 45px;
+        color: white;
+        border-radius: 12px;
+        margin: 0 auto;
+        font-size: 23px;
+        line-height: 45px;
+        background-color: rgb(37, 97, 239);
+        color: white;
+      }
+      .desc {
+        color: #545555;
+        margin-top: 9px;
+        font-size: 14px;
+      }
+    }
+  }
+}
 </style>

src/layout/components/AppMain.vue

@@ -37,7 +37,7 @@ export default {
 }
 
 .fixed-header + .app-main {
-  padding-top: 50px;
+  padding-top: 60px;
 }
 
 .hasTagsView {

src/layout/components/Navbar.vue

@@ -1,34 +1,24 @@
 <template>
   <div class="navbar">
-    <div style="display: flex; justify-content: center;">
-      <div class="cursor index menu-hover" @click="handlerIndex">首页</div>
-      <div class="cursor menu menu-hover" @click="handlerShowMenu">数据接口</div>
-      <!-- 伸缩按钮 -->
-      <hamburger id="hamburger-container" :is-active="sidebar.opened" v-show="isShowHamBurger" class="hamburger-container"
-        @toggleClick="toggleSideBar" />
-        <top-nav @showHamBurger="isShowHamBurger=true"  @closeMenuHandler="handlerShowMenu" :isShowMenu="isShowMenu"></top-nav>
+    <div style="display: flex; justify-content: center; color: white; line-height: 47px">
+      <div class="cursor index" @click="handlerIndex">
+        <span class="icon">&#xe712;</span>
+        <div class="mtt">首页</div>
       </div>
-
-
-
+      <div class="cursor index">
+        <top-nav></top-nav>
+      </div>
+      <search />
+      <hamburger id="hamburger-container" :is-active="sidebar.opened" v-show="isShowHamBurger" class="hamburger-container" @toggleClick="toggleSideBar" />
+    </div>
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
-    <!-- <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" />
-
-        <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>
-
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
+          <img :src="avatar" class="user-avatar" />
+          <div class="cons">
+            <div class="nickName">{{ user.name }}</div>
+          </div>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -48,28 +38,35 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
-
-
+import { mapGetters } from 'vuex';
+import Breadcrumb from '@/components/Breadcrumb';
+import TopNav from '@/components/TopNav';
+import Hamburger from '@/components/Hamburger';
+import Screenfull from '@/components/Screenfull';
+import SizeSelect from '@/components/SizeSelect';
+import Search from '@/components/HeaderSearch';
+import RuoYiGit from '@/components/RuoYi/Git';
+import RuoYiDoc from '@/components/RuoYi/Doc';
 
 export default {
   data() {
     return {
       // 菜单列表显示、隐藏
       isShowMenu: false,
-
+      user: this.$store.state.user,
       // 伸缩按钮显示、隐藏
-      isShowHamBurger:false,
-      routeImgs: [require('@/assets/route_images/u211.svg'), require('@/assets/route_images/u217.svg'), require('@/assets/route_images/u226.svg'), require('@/assets/route_images/u214.svg'), require('@/assets/route_images/u223.svg'), require('@/assets/route_images/u229.svg'), require('@/assets/route_images/u220.svg'), require('@/assets/route_images/u232.svg')],
-    }
+      isShowHamBurger: false,
+      routeImgs: [
+        require('@/assets/route_images/u211.svg'),
+        require('@/assets/route_images/u217.svg'),
+        require('@/assets/route_images/u226.svg'),
+        require('@/assets/route_images/u214.svg'),
+        require('@/assets/route_images/u223.svg'),
+        require('@/assets/route_images/u229.svg'),
+        require('@/assets/route_images/u220.svg'),
+        require('@/assets/route_images/u232.svg')
+      ]
+    };
   },
   components: {
     Breadcrumb,
@@ -82,84 +79,82 @@ export default {
     RuoYiDoc
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device',
-      'sidebarRouters'
-    ]),
+    ...mapGetters(['sidebar', 'avatar', 'device', 'sidebarRouters']),
     setting: {
       get() {
-        return this.$store.state.settings.showSettings
+        return this.$store.state.settings.showSettings;
       },
       set(val) {
         this.$store.dispatch('settings/changeSetting', {
           key: 'showSettings',
           value: val
-        })
+        });
       }
     },
     topNav: {
       get() {
-        return this.$store.state.settings.topNav
+        return this.$store.state.settings.topNav;
       }
     }
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch('app/toggleSideBar');
     },
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          location.href = '/ruoyi-vue-web/index';
+      })
+        .then(() => {
+          this.$store.dispatch('LogOut').then(() => {
+            location.href = '/ruoyi-vue-web/index';
+          });
         })
-      }).catch(() => { });
+        .catch(() => {});
     },
     handlerShowMenu() {
       this.isShowMenu = !this.isShowMenu;
-
     },
 
     handlerIndex() {
       this.isShowHamBurger = false;
-      this.$router.push("/")
+      this.$router.push('/');
     }
   },
 
-  watch:{
-    '$route.fullPath':{
-      handler:function(newV,oldV){
-        if(newV == '/index'){
+  watch: {
+    '$route.fullPath': {
+      handler: function (newV, oldV) {
+        if (newV == '/index') {
           this.isShowHamBurger = false;
-        }else{
+        } else {
           this.isShowHamBurger = true;
         }
-      },
+      }
       // deep:true,
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
-  // overflow: hidden;
+  height: 60px;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  background: #2561ef;
 
   .index {
-    width: 80px;
+    width: 100px;
     text-align: center;
+    .mtt {
+      margin-top: -25px;
+      font-size: 14px;
+    }
   }
 
   .cursor {
@@ -179,37 +174,31 @@ export default {
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
+    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;
   }
-
   .topmenu-container {
     position: absolute;
     left: 50px;
   }
-
   .errLog-container {
     display: inline-block;
     vertical-align: top;
   }
-
   .right-menu {
     float: right;
     height: 100%;
     line-height: 50px;
-
     &:focus {
       outline: none;
     }
-
     .right-menu-item {
       display: inline-block;
       padding: 0 8px;
@@ -217,37 +206,47 @@ export default {
       font-size: 18px;
       color: #5a5e66;
       vertical-align: text-bottom;
-
       &.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);
         }
       }
     }
-
     .avatar-container {
       margin-right: 30px;
-
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
-
         .user-avatar {
           cursor: pointer;
           width: 40px;
           height: 40px;
           border-radius: 10px;
         }
-
+        .cons {
+          float: right;
+          font-size: 13px;
+          margin-top: -4px;
+          margin-left: 10px;
+          max-width: 100px;
+          color: white;
+          .nickName {
+            height: 10px;
+          }
+          .desc {
+            margin-top: 7px;
+          }
+        }
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;
           right: -20px;
-          top: 25px;
+          top: 16px;
           font-size: 12px;
+          color: white;
         }
       }
     }

src/layout/components/Sidebar/Logo.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link 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>
+        <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>
+        <!-- <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 variables from '@/assets/styles/variables.scss'
+import logoImg from '@/assets/logo/logo.png';
+import variables from '@/assets/styles/variables.scss';
 
 export default {
   name: 'SidebarLogo',
@@ -30,16 +30,16 @@ export default {
       return variables;
     },
     sideTheme() {
-      return this.$store.state.settings.sideTheme
+      return this.$store.state.settings.sideTheme;
     }
   },
   data() {
     return {
       title: '综合保税区管理系统',
       logo: logoImg
-    }
+    };
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -55,9 +55,9 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 50px;
+  height: 60px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #2561ef !important;
   text-align: center;
   overflow: hidden;
 
@@ -76,9 +76,8 @@ export default {
       display: inline-block;
       margin: 0;
       color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
+      line-height: 61px;
+      font-size: 22px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
       vertical-align: middle;
     }

src/layout/components/Sidebar/SidebarItem.vue

@@ -7,10 +7,9 @@
         </el-menu-item>
       </app-link>
     </template>
-
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+       <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
       <sidebar-item
         v-for="child in item.children"
@@ -98,3 +97,8 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+  .el-menu-item.is-active {
+  	background-color: #e8f4ff!important;
+  }
+</style>

src/settings.js

@@ -22,7 +22,7 @@ module.exports = {
   /**
    * 是否固定头部
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * 是否显示logo

src/store/modules/settings.js

@@ -8,9 +8,9 @@ const state = {
   theme: storageSetting.theme || '#409EFF',
   sideTheme: storageSetting.sideTheme || sideTheme,
   showSettings: showSettings,
-  topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
-  tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
-  fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
+  topNav: true,
+  tagsView: false,
+  fixedHeader: true,
   sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
   dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
 }

src/utils/request.js

@@ -111,7 +111,7 @@ service.interceptors.response.use(res => {
       ).then(() => {
         isRelogin.show = false;
         store.dispatch('LogOut').then(() => {
-          location.href = '/index';
+          location.href = '/ruoyi-vue-web/index';
         })
       }).catch(() => {
         isRelogin.show = false;

src/views/ONLINE/index.vue

@@ -25,84 +25,11 @@
 
     <el-table v-loading="loading" :data="ONLINEList" @selection-change="handleSelectionChange" height="calc(100vh - 300px)">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="单位编码" align="center" prop="deptId" />
-      <el-table-column label="单位名称" align="center" prop="depName" />
+      <el-table-column label="单位名称" align="left" prop="depName" />
+      <el-table-column label="单位编码" align="center" prop="deptId" width="90" />
       <el-table-column label="位置" align="center" prop="location" />
       <el-table-column label="电话" align="center" prop="telphone" />
       <el-table-column label="邮箱" align="center" prop="email" />
-      <!--      <el-table-column label="主键" align="center" prop="id">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.id"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="创建时间" align="center" prop="createTime">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.createTime"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="创建人" align="center" prop="createBy">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.createBy"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="修改时间" align="center" prop="updateTime">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.updateTime"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="修改人" align="center" prop="updateBy">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.updateBy"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="删除标志(0.正常，1.删除)" align="center" prop="delFlag">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.delFlag"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="部门id" align="center" prop="deptId">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.deptId"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="单位名称" align="center" prop="depName">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.depName"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="单位电话" align="center" prop="telphone">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.telphone"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="单位地址" align="center" prop="location">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.location"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="单位邮箱" align="center" prop="email">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.email"/>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-      <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
-      <!--        <template slot-scope="scope">-->
-      <!--          <el-button-->
-      <!--            size="mini"-->
-      <!--            type="text"-->
-      <!--            icon="el-icon-edit"-->
-      <!--            @click="handleUpdate(scope.row)"-->
-      <!--            v-hasPermi="['business:ONLINE:edit']"-->
-      <!--          >修改</el-button>-->
-      <!--          <el-button-->
-      <!--            size="mini"-->
-      <!--            type="text"-->
-      <!--            icon="el-icon-delete"-->
-      <!--            @click="handleDelete(scope.row)"-->
-      <!--            v-hasPermi="['business:ONLINE:remove']"-->
-      <!--          >删除</el-button>-->
-      <!--        </template>-->
-      <!--      </el-table-column>-->
     </el-table>
 
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

src/views/news/index.vue

@@ -19,47 +19,10 @@
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['business:NEWS:add']">新增新闻</el-button>
       </el-col>
-      <!-- 以下暂时不需要 -->
-      <!-- <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['business:NEWS:edit']"
-          >修改</el-button
-        >
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['business:NEWS:remove']"
-          >删除</el-button
-        >
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['business:NEWS:export']"
-          >导出</el-button
-        >
-      </el-col> -->
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     <el-table v-loading="loading" :data="NEWSList" @selection-change="handleSelectionChange">
@@ -98,11 +61,6 @@
           {{ scope.row.auditTime ? scope.row.auditTime.substr(0, 10) : '无' }}
         </template>
       </el-table-column>
-      <!-- <el-table-column label="上报日期" align="center" width="120" prop="report_date">
-        <template slot-scope="scope">
-          {{ scope.row.report_date ? scope.row.report_date.substr(0, 10) : '无' }}
-        </template>
-      </el-table-column> -->
       <el-table-column label="发布日期" align="center" width="120" prop="release_date">
         <template slot-scope="scope">
           {{ scope.row.releaseDate ? scope.row.releaseDate.substr(0, 10) : '无' }}
@@ -119,7 +77,7 @@
           <span v-if="scope.row.status == 6"><el-tag>已置顶</el-tag></span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" fixed="right" width="170">
         <template slot-scope="scope">
           <el-button v-if="scope.row.status == 4" size="mini" type="text" @click="handleDownOrUp(scope.row)" v-hasPermi="['business:NEWS:remove']">下架</el-button>
           <el-button v-if="scope.row.status == 0 || scope.row.status == 2" size="mini" type="text" v-hasPermi="['business:NEWS:remove']" @click="handleCommit(scope.row)">提交审核</el-button>
@@ -135,7 +93,7 @@
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
     <!--    &lt;!&ndash; 添加或修改网站新闻对话框 &ndash;&gt;-->
-    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" :width="'65%'" @close="close" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" :width="'65%'" @close="open=false" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入标题"></el-input>