diff --git a/public/images/top-nav/setting-active.png b/public/images/top-nav/setting-active.png
new file mode 100644
index 0000000..e6bc7d9
Binary files /dev/null and b/public/images/top-nav/setting-active.png differ
diff --git a/public/images/top-nav/setting.png b/public/images/top-nav/setting.png
new file mode 100644
index 0000000..b632b53
Binary files /dev/null and b/public/images/top-nav/setting.png differ
diff --git a/src/assets/content/shang.png b/src/assets/content/shang.png
new file mode 100644
index 0000000..89de8d1
Binary files /dev/null and b/src/assets/content/shang.png differ
diff --git a/src/assets/content/xia.png b/src/assets/content/xia.png
new file mode 100644
index 0000000..c285570
Binary files /dev/null and b/src/assets/content/xia.png differ
diff --git a/src/assets/content/you.png b/src/assets/content/you.png
new file mode 100644
index 0000000..25fdcd5
Binary files /dev/null and b/src/assets/content/you.png differ
diff --git a/src/assets/content/zuo.png b/src/assets/content/zuo.png
new file mode 100644
index 0000000..835f52a
Binary files /dev/null and b/src/assets/content/zuo.png differ
diff --git a/src/assets/fonts/BOOKOS.ttf b/src/assets/fonts/BOOKOS.ttf
new file mode 100644
index 0000000..d5ed82f
Binary files /dev/null and b/src/assets/fonts/BOOKOS.ttf differ
diff --git a/src/assets/fonts/MicrogrammaDMedExt.ttf b/src/assets/fonts/MicrogrammaDMedExt.ttf
new file mode 100644
index 0000000..33f8cc6
Binary files /dev/null and b/src/assets/fonts/MicrogrammaDMedExt.ttf differ
diff --git a/src/assets/header/bg.png b/src/assets/header/bg.png
new file mode 100644
index 0000000..237695b
Binary files /dev/null and b/src/assets/header/bg.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
index 1c356e3..2c5a318 100644
Binary files a/src/assets/logo.png and b/src/assets/logo.png differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index 676115d..0000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1,172 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="293px" height="293px" viewBox="0 0 293 293" enable-background="new 0 0 293 293" xml:space="preserve">  <image id="image0" width="293" height="293" x="0" y="0"
-    href="data:image/png;base64,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
-OjAwP26CAAAAAABJRU5ErkJggg==" />
-</svg>
diff --git a/src/components/layouts/TabLayout.vue b/src/components/layouts/TabLayout.vue
index 28fc18d..ef53001 100644
--- a/src/components/layouts/TabLayout.vue
+++ b/src/components/layouts/TabLayout.vue
@@ -1,23 +1,5 @@
 <template>
   <global-layout @dynamicRouterShow="dynamicRouterShow">
-    <!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
-    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect"/>
-    <!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
-    <a-tabs
-      @contextmenu.native="e => onContextmenu(e)"
-      v-if="multipage"
-      :active-key="activePage"
-      class="tab-layout-tabs"
-      style="height:52px"
-      :hide-add="true"
-      type="editable-card"
-      @change="changePage"
-      @tabClick="tabCallBack"
-      @edit="editPage">
-      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList" :closable="!(page.meta.title=='首页')">
-        <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
-      </a-tab-pane>
-    </a-tabs>
     <div style="margin: 12px 12px 0;">
       <!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
       <keep-alive v-if="multipage">
diff --git a/src/components/layouts/UserLayout.vue b/src/components/layouts/UserLayout.vue
index ca3de55..a0281dc 100644
--- a/src/components/layouts/UserLayout.vue
+++ b/src/components/layouts/UserLayout.vue
@@ -4,7 +4,7 @@
       <div class="top">
         <div class="header">
           <a href="/">
-            <img src="~@/assets/logo.svg" class="logo" alt="logo">
+            <img src="~@/assets/logo.png" class="logo" alt="logo">
             <span class="title">Jeecg Boot</span>
           </a>
         </div>
diff --git a/src/components/menu/CustomTopMenu.vue b/src/components/menu/CustomTopMenu.vue
new file mode 100644
index 0000000..8446d6a
--- /dev/null
+++ b/src/components/menu/CustomTopMenu.vue
@@ -0,0 +1,101 @@
+<template>
+  <div style="height: 100%; overflow: hidden;">
+    <a-menu mode="horizontal" v-model="selectedKeys" @click="onMenuSelect">
+      <a-menu-item v-for="menu in menus" :key="menu.name">
+        <img class="menu-logo" :src="'/images/top-nav/' + menu.meta.icon + '.png'" alt="">
+        <span v-html="menu.meta.title.split(' ').join('<br>')"></span>
+      </a-menu-item>
+    </a-menu>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    menus: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selectedKeys: []
+    }
+  },
+  created() {
+
+    const currTopMenu = this.findTopMenuByRouteName(this.menuItems, this.$route.name)
+    this.selectedKeys = [currTopMenu.name]
+  },
+  methods: {
+    onMenuSelect({ key }) {
+      const childPath = this.getChildrenPath(this.menuItems.find(menu => menu.name === key))
+      this.$router.push(childPath)
+    },
+    getChildrenPath(menuItem) {
+      if (menuItem.children) {
+        return this.getChildrenPath(menuItem.children[0])
+      }
+      return menuItem.path
+    },
+
+    /**
+     * 根据路由查找一级路由列表
+     * @param {Array} menus
+     * @param {String} routeName
+     */
+     findTopMenuByRouteName(menus, routeName) {
+      for (const menu of menus) {
+        if (menu.name === routeName) {
+          return menu
+        } else if (menu.children) {
+          const find = this.findTopMenuByRouteName(menu.children, routeName)
+          if (find) {
+            return menu
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    $route(route) {
+      const currTopMenu = this.findTopMenuByRouteName(this.menuItems, route.name)
+      this.selectedKeys = [currTopMenu.name]
+    }
+  },
+  computed: {
+    menuItems() {
+      return this.menus.filter(item => !item.hidden)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ant-menu {
+  background: transparent;
+  height: 100% !important;
+  font-size: 16px;
+  &-item {
+    color: #0CECCA !important;
+    border-bottom: 0 !important;
+    height: 100%;
+    padding: 0 31px;
+    border: 1px solid transparent;
+    font-family: MicrogrammaD-MediExte;
+    display: inline-flex !important;
+    align-items: center;
+    line-height: normal;
+    &-selected,
+    &-active {
+      background-color: rgba(9, 255, 212, .3) !important;
+      color: #fff !important;
+      border-color: rgba(5, 255, 184, 0.46);
+    }
+  }
+}
+.menu-logo {
+  height: 40px;
+  margin-right: 10px;
+}
+</style>
diff --git a/src/components/page/GlobalHeader.vue b/src/components/page/GlobalHeader.vue
index 4463912..1bdfe19 100644
--- a/src/components/page/GlobalHeader.vue
+++ b/src/components/page/GlobalHeader.vue
@@ -4,42 +4,12 @@
     v-if="!headerBarFixed"
     :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
     :style="{ padding: '0' }">
-
-    <div v-if="mode === 'sidemenu'" class="header" :class="theme">
-      <a-icon
-        v-if="device==='mobile'"
-        class="trigger"
-        :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-        @click="toggle"></a-icon>
-      <a-icon
-        v-else
-        class="trigger"
-        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
-        @click="toggle"/>
-
-      <span v-if="device === 'desktop'">欢迎进入 Jeecg-Boot 企业级低代码平台</span>
-      <span v-else>Jeecg-Boot</span>
-
-      <user-menu :theme="theme"/>
-    </div>
     <!-- 顶部导航栏模式 -->
-    <div v-else :class="['top-nav-header-index', theme]">
+    <div :class="['top-nav-header-index', theme]">
       <div class="header-index-wide">
         <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
-          <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"/>
-          <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
-            <s-menu
-              mode="horizontal"
-              :menu="menus"
-              :theme="theme"
-              @updateMenuTitle="handleUpdateMenuTitle"
-            ></s-menu>
-          </div>
-          <a-icon
-            v-else
-            class="trigger"
-            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-            @click="toggle"></a-icon>
+          <logo class="top-nav-header" />
+          <custom-top-menu :menus="menus"></custom-top-menu>
         </div>
         <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
       </div>
@@ -50,16 +20,16 @@
 
 <script>
   import UserMenu from '../tools/UserMenu'
-  import SMenu from '../menu/'
   import Logo from '../tools/Logo'
   import { mixin } from '@/utils/mixin.js'
+  import CustomTopMenu from '../menu/CustomTopMenu.vue'
 
   export default {
     name: 'GlobalHeader',
     components: {
       UserMenu,
-      SMenu,
       Logo,
+      CustomTopMenu
     },
     mixins: [mixin],
     props: {
@@ -150,11 +120,7 @@
             this.topMenuStyle.headerIndexRight = {}
             this.topMenuStyle.headerIndexLeft = {}
           } else {
-            let rightWidth = '400px'
-            this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
-            this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 165px)' }
-            this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth, 'white-space': 'nowrap' }
-            this.topMenuStyle.headerIndexLeft = { 'width': `calc(100% - ${rightWidth})` }
+            this.topMenuStyle.headerIndexRight = { 'white-space': 'nowrap' }
           }
         }
       },
@@ -218,10 +184,42 @@
   }
 
   .ant-layout-header {
-    height: @height;
-    line-height: @height;
+    line-height: unset;
+    height: 73px;
   }
 
   /* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
 
+.top-nav-header-index {
+  background: url(~@/assets/header/bg.png) no-repeat;
+  background-size: 100% 120%;
+  height: 100%;
+  background-color: transparent !important;
+  .header-index-wide {
+    height: 100%;
+  }
+
+  .header-index-left {
+    overflow: hidden;
+  }
+
+  .header-index-right {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    flex-shrink: 0;
+  }
+
+  .top-nav-header {
+    height: 100%;
+    padding-top: 6px;
+    margin-right: 60px;
+    width: initial !important;
+    img {
+      width: 284px;
+      height: 60px;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index 7b0aa51..8472a31 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -1,59 +1,5 @@
 <template>
   <a-layout class="layout" :class="[device]">
-
-    <template v-if="layoutMode === 'sidemenu'">
-      <a-drawer
-        v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
-        @close="() => this.collapsed = false"
-        :closable="false"
-        :visible="collapsed"
-        width="200px"
-      >
-        <side-menu
-          mode="inline"
-          v-if="device === 'mobile'"
-          :menus="menus"
-          @menuSelect="menuSelect"
-          @updateMenuTitle="handleUpdateMenuTitle"
-          :theme="navTheme"
-          :collapsed="false"
-          :collapsible="true"></side-menu>
-      </a-drawer>
-
-      <side-menu
-        v-show="device === 'desktop'"
-        mode="inline"
-        :menus="menus"
-        @menuSelect="myMenuSelect"
-        @updateMenuTitle="handleUpdateMenuTitle"
-        :theme="navTheme"
-        :collapsed="collapsed"
-        :collapsible="true"></side-menu>
-    </template>
-    <!-- 下次优化这些代码 -->
-    <template v-else>
-      <a-drawer
-        v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
-        @close="() => this.collapsed = false"
-        :closable="false"
-        :visible="collapsed"
-        width="200px"
-      >
-        <side-menu
-          mode="inline"
-          :menus="menus"
-          @menuSelect="menuSelect"
-          @updateMenuTitle="handleUpdateMenuTitle"
-          :theme="navTheme"
-          :collapsed="false"
-          :collapsible="true"></side-menu>
-      </a-drawer>
-    </template>
-
     <a-layout
       :class="[layoutMode, `content-width-${contentWidth}`]"
       :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
@@ -67,16 +13,14 @@
         @toggle="toggle"
         @updateMenuTitle="handleUpdateMenuTitle"
       />
+      <div class="sub-menus" v-if="currentChildrenMenus && currentChildrenMenus.length">
+        <s-menu :menu="currentChildrenMenus" mode="horizontal" theme="light"></s-menu>
+      </div>
 
       <!-- layout content -->
       <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
         <slot></slot>
       </a-layout-content>
-
-      <!-- layout footer -->
-      <a-layout-footer style="padding: 0px">
-        <global-footer/>
-      </a-layout-footer>
     </a-layout>
 
     <!-- update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ---- -->
@@ -92,6 +36,7 @@
   import { triggerWindowResizeEvent } from '@/utils/util'
   import { mapActions, mapState } from 'vuex'
   import { mixin, mixinDevice } from '@/utils/mixin.js'
+  import SMenu from '../menu/index'
   // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
   // import SettingDrawer from '@/components/setting/SettingDrawer'
   // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
@@ -103,6 +48,7 @@
       SideMenu,
       GlobalHeader,
       GlobalFooter,
+      SMenu
       // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
       // // SettingDrawer
       // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
@@ -123,7 +69,12 @@
         mainRouters: state => state.permission.addRouters,
         // 后台菜单
         permissionMenuList: state => state.user.permissionList
-      })
+      }),
+
+      // 当前页面子路由
+      currentChildrenMenus () {
+        return this.findSubMenus(this.$route.name)
+      }
     },
     watch: {
       sidebarOpened(val) {
@@ -148,6 +99,22 @@
     },
     methods: {
       ...mapActions(['setSidebar']),
+      /**
+       * 根据路由名查找二级路由列表
+       * @param {Array} menus
+       * @param {String} routeName
+       */
+       findSubMenus(routeName) {
+        for (const menu of this.menus) {
+          if (menu.children) {
+            const find = menu.children.find(child => child.name === routeName || child.children && child.children.find(item => item.child.name === routeName))
+            if (find) {
+              return menu.children
+            }
+          }
+        }
+        return []
+      },
       toggle() {
         this.collapsed = !this.collapsed
         this.setSidebar(!this.collapsed)
@@ -339,10 +306,6 @@
           height: 70%;
           line-height: 46px;
 
-          &.action-full {
-            height: 100%;
-          }
-
           &:hover {
             background: rgba(255, 255, 255, 0.3);
           }
@@ -450,7 +413,6 @@
         margin: auto;
         padding: 0 20px 0 0;
         display: flex;
-        height: 59px;
 
         .ant-menu.ant-menu-horizontal {
           border: none;
@@ -463,17 +425,10 @@
           display: flex;
 
           .logo.top-nav-header {
-            width: 165px;
-            height: 64px;
             position: relative;
-            line-height: 64px;
-            transition: all .3s;
-            overflow: hidden;
-
             img {
               display: inline-block;
               vertical-align: middle;
-              height: 32px;
             }
 
             h1 {
@@ -488,8 +443,6 @@
         }
 
         .header-index-right {
-          float: right;
-          height: 59px;
           overflow: hidden;
           .action:hover {
             background-color: rgba(0, 0, 0, 0.05);
@@ -696,4 +649,53 @@
       }
     }
   }
+
+  .sub-menus {
+    .ant-menu {
+      font-size: 16px;
+      background: transparent;
+      border-bottom: none;
+      .ant-menu-item {
+        background: rgba(58, 236, 240, .22) !important;
+        border-bottom: none !important;
+        margin-right: 10px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 15px;
+        position: relative;
+        > a {
+          color: #c9f6f6;
+        }
+        &-selected {
+          > a {
+            color: #2affdf;
+          }
+        }
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          border: 2px solid #569e9e;
+          width: 7px;
+          height: 30px;
+          top: 0;
+        }
+        &::before {
+          left: 0;
+          border-right: 0;
+        }
+        &::after {
+          right: 0;
+          border-left: 0;
+        }
+      }
+    }
+  }
 </style>
+
+<style lang="less" scoped>
+.ant-layout {
+  background: #061314;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tools/Logo.vue b/src/components/tools/Logo.vue
index 7808fba..f275de5 100644
--- a/src/components/tools/Logo.vue
+++ b/src/components/tools/Logo.vue
@@ -4,10 +4,8 @@
 
       <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
       <img v-if="navTheme === 'dark'" src="~@/assets/logo-white.png" alt="logo">
-      <img v-else src="~@/assets/logo.svg" alt="logo">
+      <img v-else src="~@/assets/logo.png" alt="logo">
       <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
-
-      <h1 v-if="showTitle">{{ title }}</h1>
     </router-link>
   </div>
 </template>
@@ -21,7 +19,7 @@
     props: {
       title: {
         type: String,
-        default: 'Jeecg-Boot Pro',
+        default: '',
         required: false
       },
       showTitle: {
diff --git a/src/components/tools/UserMenu.vue b/src/components/tools/UserMenu.vue
index 6efba61..a09d340 100644
--- a/src/components/tools/UserMenu.vue
+++ b/src/components/tools/UserMenu.vue
@@ -1,41 +1,9 @@
 <template>
   <div class="user-wrapper" :class="theme">
-    <!-- update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
-    <!-- update-begin author:sunjianlei date:20191@20 for: 解决全局样式冲突的问题 -->
-    <span class="action" @click="showClick">
-      <a-icon type="search"></a-icon>
-    </span>
-    <!-- update-begin author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 -->
-    <component :is="searchMenuComp" v-show="searchMenuVisible || isMobile()" class="borders" :visible="searchMenuVisible" title="搜索菜单" :footer="null" @cancel="searchMenuVisible=false">
-      <a-select
-        class="search-input"
-        showSearch
-        :showArrow="false"
-        placeholder="搜索菜单"
-        optionFilterProp="children"
-        :filterOption="filterOption"
-        :open="isMobile()?true:null"
-        :getPopupContainer="(node) => node.parentNode"
-        :style="isMobile()?{width: '100%',marginBottom:'50px'}:{}"
-        @change="searchMethods"
-        @blur="hiddenClick"
-      >
-        <a-select-option v-for="(site,index) in searchMenuOptions" :key="index" :value="site.id">{{site.meta.title}}</a-select-option>
-      </a-select>
-    </component>
-    <!-- update-end author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 -->
-    <!-- update-end author:sunjianlei date:20191220 for: 解决全局样式冲突的问题 -->
-    <!-- update_end  author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
-    <span class="action">
-      <a class="logout_title" target="_blank" href="http://doc.jeecg.com">
-        <a-icon type="question-circle-o"></a-icon>
-      </a>
-    </span>
     <header-notice class="action"/>
     <a-dropdown>
       <span class="action action-full ant-dropdown-link user-dropdown-menu">
-        <a-avatar class="avatar" size="small" :src="getAvatar()"/>
-        <span v-if="isDesktop()">欢迎您，{{ nickname() }}</span>
+        人头icon
       </span>
       <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
         <a-menu-item key="0">
@@ -66,23 +34,11 @@
           <a-icon type="sync"/>
           <span>清理缓存</span>
         </a-menu-item>
-       <!-- <a-menu-item key="2" disabled>
-          <a-icon type="setting"/>
-          <span>测试</span>
-        </a-menu-item>
-        <a-menu-divider/>
-        <a-menu-item key="3">
-          <a href="javascript:;" @click="handleLogout">
-            <a-icon type="logout"/>
-            <span>退出登录</span>
-          </a>
-        </a-menu-item>-->
       </a-menu>
     </a-dropdown>
     <span class="action">
       <a class="logout_title" href="javascript:;" @click="handleLogout">
         <a-icon type="logout"/>
-        <span v-if="isDesktop()">&nbsp;退出登录</span>
       </a>
     </span>
     <user-password ref="userPassword"></user-password>
diff --git a/src/defaultSettings.js b/src/defaultSettings.js
index 832264f..fa2f344 100644
--- a/src/defaultSettings.js
+++ b/src/defaultSettings.js
@@ -16,7 +16,7 @@
 export default {
   primaryColor: '#1890FF', // primary color of ant design
   navTheme: 'light', // theme for nav menu
-  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
+  layout: 'topmenu', // nav menu position: sidemenu or topmenu
   contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
   fixedHeader: false, // sticky header
   fixSiderbar: false, // sticky siderbar
diff --git a/src/main.js b/src/main.js
index 0809df2..4a46881 100644
--- a/src/main.js
+++ b/src/main.js
@@ -47,6 +47,7 @@ import '@/assets/less/JAreaLinkage.less'
 import VueAreaLinkage from 'vue-area-linkage'
 import '@/components/jeecg/JVxeTable/install'
 import '@/components/JVxeCells/install'
+import './style.less'
 //表单验证
 import { rules } from '@/utils/rules'
 Vue.prototype.rules = rules
diff --git a/src/style.less b/src/style.less
new file mode 100644
index 0000000..6615055
--- /dev/null
+++ b/src/style.less
@@ -0,0 +1,76 @@
+// 重置样式
+
+@font-face {
+  font-family: MicrogrammaD-MediExte;
+  src: url(~@/assets/fonts/MicrogrammaDMedExt.ttf);
+}
+
+.ant-card {
+  background-color: transparent;
+}
+
+.ant-table {
+  color: #ade6ee;
+  &-thead {
+    tr {
+      th {
+        background-color: #126b82 !important;
+        color: #fff;
+      }
+    }
+  }
+  &-tbody {
+    tr {
+      background-color: #06282A;
+      &:nth-child(2n) {
+        background-color: #08373A;
+      }
+    }
+  }
+}
+
+.ant-form {
+  &-item {
+    &-label {
+      > label {
+        color: #5b9cba;
+      }
+    }
+  }
+}
+
+
+@formInputBgColor: #03353f;
+@formInputBorderColor: #0b8c82;
+.ant-input {
+  background-color: @formInputBgColor;
+  border-color: @formInputBorderColor;
+  color: #fff;
+  &::placeholder {
+    color: #fff;
+  }
+}
+
+.ant-select {
+  &-selection  {
+    background-color: @formInputBgColor;
+    border-color: @formInputBorderColor;
+    &__placeholder {
+      color: #fff;
+    }
+  }
+
+  &-dropdown {
+    background: #03353f;
+    &-menu {
+      &-item {
+        color: #fff;
+        &:hover,
+        &-selected,
+        &-active {
+          background-color: #0CECCA !important;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/system/DataBase.vue b/src/views/system/DataBase.vue
new file mode 100644
index 0000000..51cf4bf
--- /dev/null
+++ b/src/views/system/DataBase.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    DATABASE
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/system/UserList.vue b/src/views/system/UserList.vue
index 73dceb5..126bc4e 100644
--- a/src/views/system/UserList.vue
+++ b/src/views/system/UserList.vue
@@ -97,11 +97,6 @@
 
     <!-- table区域-begin -->
     <div>
-      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
-        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
-      </div>
-
       <a-table
         ref="table"
         bordered
diff --git a/vue.config.js b/vue.config.js
index dd1ecae..882e98f 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -76,8 +76,8 @@ module.exports = {
       less: {
         modifyVars: {
           /* less 变量覆盖，用于自定义 ant design 主题 */
-          'primary-color': '#1890FF',
-          'link-color': '#1890FF',
+          'primary-color': '#1397a3',
+          'link-color': '#1397a3',
           'border-radius-base': '4px',
         },
         javascriptEnabled: true,