Header V1

.eslintignore

@@ -2,3 +2,4 @@ build/*.js
 src/assets
 public
 dist
+src/icons/iconfont.js

src/components/HeaderSearch/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{'show':show}" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+    <!-- <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /> -->
     <el-select
       ref="headerSearchSelect"
       v-model="search"
@@ -8,7 +8,7 @@
       filterable
       default-first-option
       remote
-      placeholder="Search"
+      placeholder="搜索"
       class="header-search-select"
       @change="change"
     >
@@ -30,7 +30,7 @@ export default {
       search: '',
       options: [],
       searchPool: [],
-      show: false,
+      show: true,
       fuse: undefined
     }
   },
@@ -45,13 +45,6 @@ export default {
     },
     searchPool(list) {
       this.initFuse(list)
-    },
-    show(value) {
-      if (value) {
-        document.body.addEventListener('click', this.close)
-      } else {
-        document.body.removeEventListener('click', this.close)
-      }
     }
   },
   mounted() {
@@ -64,11 +57,6 @@ export default {
         this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
       }
     },
-    close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
-      this.options = []
-      this.show = false
-    },
     change(val) {
       this.$router.push(val.path)
       this.search = ''
@@ -141,7 +129,7 @@ export default {
 
 <style lang="scss" scoped>
 .header-search {
-  font-size: 0 !important;
+  padding-left: 20px;
 
   .search-icon {
     cursor: pointer;
@@ -150,30 +138,15 @@ export default {
   }
 
   .header-search-select {
-    font-size: 18px;
-    transition: width 0.2s;
-    width: 0;
-    overflow: hidden;
-    background: transparent;
-    border-radius: 0;
-    display: inline-block;
-    vertical-align: middle;
-
+    width: 100%;
+    // overflow: hidden;
     ::v-deep .el-input__inner {
-      border-radius: 0;
-      border: 0;
-      padding-left: 0;
-      padding-right: 0;
-      box-shadow: none !important;
-      border-bottom: 1px solid #d9d9d9;
-      vertical-align: middle;
-    }
-  }
-
-  &.show {
-    .header-search-select {
-      width: 210px;
-      margin-left: 10px;
+      background-color: transparent;
+      border-radius: 13px;
+      // box-shadow: none !important;
+      border: 2px solid #ffffff;
+      color: #ffffff;
+      font-size: 1.1em;
     }
   }
 }

src/icons/index.js

@@ -7,3 +7,5 @@ Vue.component('svg-icon', SvgIcon)
 const req = require.context('./svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)
 requireAll(req)
+
+import './iconfont'

src/layout/components/AppMain.vue

@@ -31,10 +31,6 @@ export default {
   overflow: hidden;
 }
 
-.fixed-header+.app-main {
-  padding-top: #{$headerHeight};
-}
-
 .hasTagsView {
   .app-main {
     /* 34 = tags-view */
@@ -42,7 +38,7 @@ export default {
   }
 
   .fixed-header+.app-main {
-    padding-top: calc(34px + #{$headerHeight});
+    padding-top: 34px;
   }
 }
 </style>

src/layout/components/HeaderTop.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="header-container">
-    <div class="header-left">
+    <!-- <div class="header-left">
       <div>
-        <img class="logo" src="/images/logo.jpg" alt="logo">
+        <img class="logo" src="/images/logo.png" alt="logo">
       </div>
       <div class="tip-box">
         <div class="tip-system">天津市公安局警综平台</div>
@@ -11,32 +11,29 @@
           <div class="tip-theme-right">牢记使命</div>
         </div>
       </div>
-    </div>
-    <!-- 用户信息 -->
+    </div> -->
     <div class="header-right">
       <div class="right-top">
-        <el-row>
-          <el-link><svg-icon icon-class="cube" />应用热榜推荐</el-link>
-          <el-link><svg-icon style="font-weight:bold" icon-class="unlock" />用户权限管理</el-link>
-          <el-link><svg-icon icon-class="message" />消息提醒</el-link>
-          <el-link icon="el-icon-star-off" />
-        </el-row>
-        <!-- <div class="userInfo">
-          <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
-            <div class="userName">
-              <span>{{ name }}</span>
-              <i class="el-icon-caret-bottom" />
-            </div>
-            <el-dropdown-menu slot="dropdown" size="small">
-              <el-dropdown-item>
-                <span style="display:block;" @click="logout">Log Out</span>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div> -->
+        <el-popover class="right-top-item" placement="bottom-start" width="400" trigger="click" @show="showData">
+          <el-row v-for="item in gridData" :key="item.id">item.title</el-row>
+          <div slot="reference"><svg-icon icon-class="yingyong" />应用热榜推荐</div>
+        </el-popover>
+        <div class="right-top-item"><svg-icon icon-class="quanxian" />用户权限管理</div>
+        <div class="right-top-item"><el-badge :value="12" class="item"><svg-icon icon-class="xiaoxi" /></el-badge>消息提醒</div>
+        <el-dropdown trigger="click" class="right-top-item">
+          <div>
+            <el-avatar src="/images/avatar.png" />
+            <span class="user-name">{{ name }}<i class="el-icon-caret-bottom" /></span>
+          </div>
+          <el-dropdown-menu slot="dropdown" size="small">
+            <el-dropdown-item>
+              <span style="display:block;" @click="logout">Log Out</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
       </div>
-      <div class="right-down" style="border: solid 1px">
-        <search id="header-search" class="right-menu-item" />
+      <div class="right-down">
+        <search id="header-search" />
       </div>
     </div>
   </div>
@@ -53,7 +50,8 @@ export default {
   },
   data() {
     return {
-      userName: ''
+      userName: '',
+      gridData: []
     }
   },
   computed: {
@@ -64,9 +62,6 @@ export default {
     ])
   },
   methods: {
-    // toggleSideBar() {
-    //   this.$store.dispatch('app/toggleSideBar')
-    // },
     async logout() {
       await this.$store.dispatch('user/logout').then(() => {
         location.reload()
@@ -91,6 +86,12 @@ export default {
       this.$router.push({
         path: '/dashboard'
       })
+    },
+    showData() {
+      this.gridData = [{
+        id: 1,
+        title: 'aaa'
+      }]
     }
   }
 }

src/layout/index.vue

@@ -15,7 +15,8 @@
 
 <script>
 import { HeaderTop, Sidebar, AppMain, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
+// 不适配移动端
+// import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 
 export default {
@@ -26,7 +27,7 @@ export default {
     AppMain,
     TagsView
   },
-  mixins: [ResizeMixin],
+  // mixins: [ResizeMixin],
   computed: {
     ...mapState({
       sidebar: state => state.app.sidebar,

src/store/modules/app.js

@@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
 
 const state = {
   sidebar: {
-    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : false,
+    opened: false,
     withoutAnimation: false
   },
   device: 'desktop'
@@ -33,10 +33,10 @@ const actions = {
     commit('TOGGLE_SIDEBAR')
   },
   closeSideBar({ commit }, { withoutAnimation }) {
-    // commit('CLOSE_SIDEBAR', withoutAnimation)
+    commit('CLOSE_SIDEBAR', withoutAnimation)
   },
   toggleDevice({ commit }, device) {
-    // commit('TOGGLE_DEVICE', device)
+    commit('TOGGLE_DEVICE', device)
   }
 }
 

src/styles/headertop.scss

@@ -1,3 +1,5 @@
+$headerTextColor: #ffffff;
+
 #app {
   .header-container {
     position: fixed;
@@ -6,19 +8,20 @@
     z-index: 100;
     width: 100%;
     height: $headerHeight;
-    background: #0056dd;
+    background: url("/images/bg.png") repeat-x;
+    padding-left: 20px;
 
-    color: #ffffff;
+    color: $headerTextColor;
     // line-height: $headerHeight;
 
     .header-left {
       float: left;
       height: $headerHeight;
       display: flex;
+      align-items: center;
 
       img.logo {
-        height: $headerHeight;
-        cursor: pointer;
+        height: 78px;
       }
 
       .tip-box {
@@ -28,20 +31,21 @@
         justify-content: center;
 
         .tip-system {
-          font-size: 1.5em;
-          font-weight: 300;
+          font-size: 2em;
+          font-weight: 400;
           letter-spacing: 2px;
         }
 
         .tip-theme {
           display: flex;
           justify-content: space-between;
-          font-size: 1em;
+          font-size: 1.3em;
           font-weight: 200;
-          letter-spacing: 10px;
+          letter-spacing: 20px;
+          margin: 10px 0 0 2px;
 
           .tip-theme-right {
-            margin-right: -8px;
+            margin-right: -14px;
           }
         }
       }
@@ -50,87 +54,38 @@
     .header-right {
       float: right;
       height: $headerHeight;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .userInfo {
-      // float: right;
-      height: 100%;
-      line-height: 40px;
+      margin-right: 10px;
 
-      #screenfull {
-        display: inline-block;
-        margin-right: 20px;
-      }
-
-      #header-search,
-      #size-select {
-        margin-right: 20px;
-        color: #ffffff;
-        display: inline-block;
-        vertical-align: top;
-
-      }
-
-      // /deep/ .header-search .header-search-select {
-      .header-search .header-search-select {
-        background: #4b4c61;
-      }
+      .right-top {
+        height: $headerHeight / 2;
+        display: flex;
+        align-items: center;
+        font-size: 1.2em;
 
-      .avatar-container {
-        margin-right: 30px;
+        .right-top-item {
+          margin-left: 20px;
 
-        .userName {
-          color: #ffffff;
           cursor: pointer;
-        }
-      }
-    }
-  }
+          transition: background .3s;
 
-  .headUser {
-    height: 50px;
-    line-height: 50px;
-    background: #4b4c61;
-    color: #ffffff;
-    padding-right: 10px;
-    padding-left: 40px;
-
-    h3 {
-      float: left;
-
-      img {
-        height: 50px;
-      }
-    }
-
-    .hamburger-container {
-      color: #ffffff;
-      display: inline-block;
-      vertical-align: top;
-    }
+          &:hover {
+            background: rgba(0, 0, 0, .025)
+          }
 
-    .right-menu {
-      float: right;
-      height: 100%;
-      line-height: 50px;
-
-      #header-search,
-      #size-select {
-        margin-right: 20px;
-        color: #ffffff;
-        display: inline-block;
-        vertical-align: top;
-      }
+          .svg-icon {
+            margin-right: 5px;
+          }
 
-      .avatar-container {
-        margin-right: 30px;
+          .el-avatar,
+          .user-name {
+            vertical-align: middle;
+            font-size: 1.2em;
+            color: $headerTextColor;
+          }
 
-        .userName {
-          color: #ffffff;
-          cursor: pointer;
+          .user-name {
+            margin-left: 5px;
+          }
         }
       }
     }

src/styles/index.scss

@@ -11,7 +11,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Arial, sans-serif;
 }
 
 label {

src/styles/variables.scss

@@ -20,7 +20,7 @@ $subMenuBg: #ffffff;
 $subMenuHover: #f0f2f5;
 
 $sideBarWidth: 210px;
-$headerHeight: 0px;
+$headerHeight: 120px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass