顶栏UI调整

package.json

@@ -12,11 +12,13 @@
     "dayjs": "^1.11.7",
     "element-ui": "^2.15.13",
     "js-cookie": "^3.0.1",
+    "unplugin-vue-components": "^0.24.1",
     "vue": "^2.7.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
+    "@iconify-json/ant-design": "^1.1.5",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
@@ -26,6 +28,7 @@
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "svg-sprite-loader": "^6.0.11",
+    "unplugin-icons": "^0.16.1",
     "vue-template-compiler": "^2.6.14"
   }
 }

src/App.vue

@@ -8,6 +8,12 @@
 * {
   margin: 0;
   padding: 0;
+  font-family: "PingFangSC-Regular","Microsoft YaHei UI",serif;
+}
+
+@font-face {
+  font-family: "PingFangSC-Regular";
+  src: url(@/assets/fonts/PingFangSC-Regular.ttf);
 }
 
 html,
@@ -29,7 +35,18 @@ body {
 .el-scrollbar .el-scrollbar__wrap {
   overflow-x: hidden;
 }
+.c-icon {
+  display: inline-block;
+  font-size: 25px;
+  color: #fff;
+  padding: 10px 10px 0px;
+  cursor: pointer;
+  border-radius: 8px;
 
+  &:hover {
+    background: #008ec7;
+  }
+}
 // 上面隐藏横向滚动条会导致下拉框底部遮盖问题
 .el-select-dropdown .el-scrollbar {
   padding-bottom: 17px;

src/components/home/MainFrame.vue

@@ -48,13 +48,9 @@ export default {
 }
 
 .el-header {
-  left: 0px;
-  top: 0px;
-  height: 64px !important;
-  line-height: 20px;
-  background-image: url('@/assets/background/background@3x.png');
-  text-align: center;
-  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.15);
+  height: 60px !important;
+  background-image: linear-gradient(45deg, #005bea, #00c6fb);
+  padding: 0;
 }
 
 .el-aside {

src/layout/Navbar.vue

@@ -1,29 +1,57 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <div v-show="isLogin" class="left-menu">
-        <hamburger class="hamburger-container" :is-active="opened" @toggleClick="toggleSideBar" />
+
+      <div style="background-color: #0053cb;width: 60px;height: 60px;display: inline-block">
+        <span class="c-icon collapse-btn" @click="toggleSideBar">
+          <i-ant-design-unordered-list-outlined/>
+        </span>
+      </div>
+
       <div class="title">
-        <p style="margin-top:15px">智慧运营管理中心</p>
+        <el-avatar class="title-logo" shape="square" :size="32" :src="logo"></el-avatar>
+        <span class="title-content">智慧运营管理中心</span>
       </div>
-      <el-select class="select-btn" v-model="value" placeholder="主语国际3号楼">
+
+      <el-select class="select-btn" v-model="value" >
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
+
     </div>
     <div v-show="isLogin" class="right-menu">
-      <el-image class="labtap" :src="tips.labtap"></el-image>
-      <el-image class="phone" :src="tips.phone"></el-image>
-      <el-image class="help" :src="tips.help"></el-image>
-      <el-image class="notification" :src="tips.notification"></el-image>
-      <div class="userinfo">
-        <el-avatar :size="35" :src="circleUrl"></el-avatar>
-        <el-dropdown>
-          <el-button class="usernameBtn" style="color: white;font-size: 18px">
-            <el-icon class="el-icon-user"></el-icon>
-            <span style="display: inline-block;margin-left: 8px"></span>
-          </el-button>
-          <el-dropdown-menu></el-dropdown-menu>
+      <div class="header-btn">
+        <span class="c-icon" style="margin: 10px 4px;padding: 6px 10px 0">
+          <i-ant-design-desktop-outlined />
+        </span>
+        <span class="c-icon" style="margin: 10px 4px;padding: 6px 10px 0">
+          <i-ant-design-mobile-outlined />
+        </span>
+        <span class="c-icon" style="margin: 10px 4px;padding: 6px 10px 0">
+          <i-ant-design-question-circle-outlined />
+        </span>
+
+
+        <el-avatar :size="30" style="vertical-align: top;margin: 15px 0 0 15px;background-color: #fde3cf;color: #f56a00">
+          <span style="font-size: 20px;display: inline-block;margin-top: 3px">
+              <i-ant-design-user-outlined  />
+            </span>
+        </el-avatar>
+
+
+        <el-dropdown class="userinfo" >
+          <span class="el-dropdown-link">
+            <span style="vertical-align: middle;font-size: 20px;margin-right: 4px">
+              <i-ant-design-user-outlined  />
+            </span>
+            user001
+          </span>
+          <el-dropdown-menu slot="dropdown" >
+            <el-dropdown-item>修改密码</el-dropdown-item>
+            <el-dropdown-item>退出登录</el-dropdown-item>
+          </el-dropdown-menu>
         </el-dropdown>
+
       </div>
     </div>
   </div>
@@ -31,32 +59,38 @@
 
 <script>
 import hamburger from '@/components/Hamburger/index'
+import logo from '@/assets/background/logo.png'
+
 export default {
-  components: { hamburger },
+  components: {hamburger},
   props: {
     leftVisible: Boolean,
     //isLogin: Boolean,
   },
   data() {
     return {
-      value: '主语国际3号楼',
-      options: {
-
-      },
+      logo,
+      value: '1',
+      options: [
+        {
+          label: '主语国际3号楼',
+          value: '1'
+        }
+      ],
       isLogin: true,
       opened: false,
       name: "test",
       circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
       isCollapse: false,
-      tips:{
-        labtap:require('@/assets/tips/diannao@3x.png'),
-        phone:require('@/assets/tips/shouji-4@3x.png'),
-        help:require('@/assets/tips/help@3x.png'),
-        notification:require('@/assets/tips/tongzhi@3x.png')
+      tips: {
+        labtap: require('@/assets/tips/diannao@3x.png'),
+        phone: require('@/assets/tips/shouji-4@3x.png'),
+        help: require('@/assets/tips/help@3x.png'),
+        notification: require('@/assets/tips/tongzhi@3x.png')
       }
     }
   },
-  mounted(){
+  mounted() {
     this.$emit('collapseControl', this.isCollapse);
   },
   methods: {
@@ -70,148 +104,85 @@ export default {
 
 <style lang="less" scoped>
 .left-menu {
-  float: left;
+  //float: left;
+  display: inline-block;
+  cursor: default;
+  text-align: left;
   height: 100%;
   line-height: 35px;
-  width: 700px;
-
-  .hamburger-container {
-    position: absolute;
-    line-height: 64px;
-    left: 0;
-    width: 64px;
-    float: left;
+  width: 50%;
+  color: white;
+
+  .collapse-btn {
+    margin: 7px;
     cursor: pointer;
-    transition: background .3s;
-    background-color: #368FCD;
-    ;
-    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: #266999;
+      background: #0043a3;
     }
   }
- 
+
 
   .title {
-    position: absolute;
-    left: 130px;
-    width: 320px;
-    height: 64px;
-    color: rgba(255, 255, 255, 1);
-    text-align: center;
-    letter-spacing: 15px;
-    font-size: 25px;
+    display: inline-block;
+    vertical-align: top;
+    line-height: 60px;
+    color: white;
+    margin-left: 15px;
+    .title-logo {
+      vertical-align: top;
+      margin-top: 15px;
+      margin-right: 18px;
+      background-color: transparent;
+    }
+    .title-content {
+      font-size: 22px;
+      letter-spacing: 8px;
+    }
   }
 
   .select-btn {
-    position: absolute;
-    left: 480px;
-    top: 15px;
-    width: 205px;
-    height: 36px;
-    line-height: 23px;
-    color: rgba(226, 229, 231, 1);
+    width: 180px;
+    color: white;
     font-size: 16px;
     text-align: center;
-
-    /deep/.el-input__inner {
-      background-color: #5186be;
-      color: rgba(226, 229, 231, 1);
-      border: 1px solid #5186be;
+    margin-left: 15px;
+    margin-top: 15px;
+    display: inline-block;
+    vertical-align: top;
+
+    /deep/ .el-input__inner {
+      background-color: #0062c4;
+      height: 32px !important;
+      padding-left: 20px;
+      color: white;
+      border: none;
       border-radius: 20px;
     }
   }
 }
 
 .right-menu {
-  float: right;
-  height: 100%;
-  line-height: 50px;
-  width: 344px;
-
-  &:focus {
-    outline: none;
-  }
+  display: inline-block;
+  vertical-align: top;
+  width: 50%;
+  text-align: right;
 
-  .el-image {
-    &:hover {
-      background-color: #186399;
-      height: 25px;
-      width: 25px;
-    }
+  .header-btn {
   }
-
-  .labtap {
-    position: absolute;
-    float: right;
-    right: 355px;
-    top: 20px;
-    width: 20px;
-    height: 20px;
-  }
-
-  .phone {
-    position: absolute;
-    float: right;
-    right: 320px;
-    top: 20px;
-    width: 20px;
-    height: 20px;
-  }
-
-  .help {
-    position: absolute;
-    float: right;
-    right: 285px;
-    top: 20px;
-    width: 20px;
-    height: 20px;
-  }
-
-  .notification {
-    position: absolute;
-    float: right;
-    right: 250px;
-    top: 20px;
-    width: 20px;
-    height: 20px;
-  }
-
-  .el-avatar {
-    position: absolute;
-    float: right;
-    right: 100px;
-    top: 6px;
-    width: 50px;
-    height: 50px;
-  }
-
   .userinfo {
-    position: absolute;
-    float: right;
-    right: 86px;
-    width: 98px;
-    height: 50px;
-    top: 7px;
-    bottom: 7px;
-    color: rgba(255, 255, 255, 1);
-
-    .usernameBtn {
-      width: 120px;
-      margin: 5px 0 0 15px;
-      border: 0;
-      border-radius: 10px;
-      background-color: #48BBE4;
-      height: 40px;
-
-      &:hover {
-        background-color: #3c9cd3;
-      }
-
-      .el-icon-user {
-        margin-right: 100px;
-      }
+    cursor: default;
+    color: white;
+    vertical-align: top;
+    line-height: 20px;
+    margin-top: 15px;
+    margin-right: 20px;
+    font-size: 18px;
+    padding: 6px 15px;
+    margin-left: 5px;
+    border-radius: 20px;
+    &:hover {
+      background: #3c9cd3;
     }
   }
 }

vue.config.js

@@ -1,6 +1,20 @@
 const { defineConfig } = require('@vue/cli-service')
+
+const Icons = require('unplugin-icons/webpack')
+const IconResolver = require('unplugin-icons/resolver')
+const Components = require('unplugin-vue-components/webpack');
+
 module.exports = defineConfig({
   transpileDependencies: true,
+    configureWebpack: {
+        plugins: [
+            Components({
+                dts: false,
+                resolvers: [IconResolver({ componentPrefix: 'i' })]
+            }),
+            Icons({ compiler: 'vue2', scale: 1, autoInstall: true })
+        ]
+    },
   devServer:{
     port:8080,
     proxy:{