侧边栏展开/收起

src/components/home/HomeAside.vue

@@ -1,5 +1,6 @@
 <script>
 import menuList from '@/data/json/menuList.json'
+import {requireImg} from "@/utils/requireImg";
 
 export default {
   props: {
@@ -19,9 +20,27 @@ export default {
   mounted() {
     this.suitHeight(this.collapse)
   },
+  emits: ['update:collapse'],
+  setup(props, context) {
+    const methods = {
+      toggleCollapse() {
+        const val = !props.collapse
+        context.emit('update:collapse', val)
+      },
+    }
+    return methods
+  },
   methods: {
+    requireImg,
     suitHeight(val) {
       this.$nextTick(() => {
+        if (this.collapse) {
+          document.getElementsByClassName("aside-collapse")[0].style.textAlign = 'center'
+          document.getElementsByClassName("aside-collapse")[0].style.marginLeft = '0'
+        } else {
+          document.getElementsByClassName("aside-collapse")[0].style.textAlign = ''
+          document.getElementsByClassName("aside-collapse")[0].style.marginLeft = '5%'
+        }
         let height = document.getElementsByClassName('home')[0].clientHeight
         this.asideStyle = { height: `${height - 60}px` }
         if (val)
@@ -55,9 +74,21 @@ export default {
       mode="inline"
       @select="handleSelected"
     >
+      <a-menu-item-group key="g1">
+        <template slot="title">
+          <div class="aside-collapse" style="color: white; cursor: pointer;margin-left: 5%" @click="toggleCollapse">
+            <a-icon style="font-size: 18px;vertical-align: text-top" type="menu-fold" v-if="!collapse" />
+            <a-icon style="font-size: 18px;vertical-align: text-top;" type="menu-unfold" v-if="collapse" />
+            <span style="margin-left: 15px;vertical-align: top" v-if="!collapse">展开/收起</span>
+          </div>
+        </template>
+      </a-menu-item-group>
+      <!--<a-menu-item :disabled="false">123</a-menu-item>-->
       <a-menu-item v-for="(item,index) in menuList" :key="index" :route="item.key">
-        <span class="anticon"><i-icon-park-outline-more-app /></span>
-        <span>
+        <span class="anticon" style="vertical-align: middle">
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
+        </span>
+        <span style="vertical-align: sub">
             {{ item.name }}
           </span>
       </a-menu-item>
@@ -66,9 +97,26 @@ export default {
 </template>
 
 <style lang="less" scoped>
+@menu-dark-bg: #266a99;
+@menu-dark-submenu-bg: #266a99;
+@menu-dark-color: #fff;
+@menu-dark-arrow-color: #fff;
+@menu-dark-highlight-color: #fff;
+.aside-collapse {
+  width: 100%;
+}
+.aside-collapse:hover {
+  span {
+    color: #2ba8e4;
+  }
+  i {
+    color: #2ba8e4;
+  }
+}
 .aside {
   //width: 100%;
   height: 100%;
+
   /deep/ .ant-menu-sub {
     box-shadow: none !important;
   }

src/components/home/HomeHeader.vue

@@ -70,18 +70,20 @@ export default {
 
     <div v-show="isLogin" class="userInfo">
       <a-avatar class="user-avatar" icon="user" />
-      <div class="userDetail">
-        <div class="username">
-          <a-button type="link" style="color: white">
-            Admin
-          </a-button>
-        </div>
-        <div class="role">
-          <a-tag color="orange">
-            系统管理员
-          </a-tag>
-        </div>
-      </div>
+      <a-button class="usernameBtn" type="link" style="color: white;font-size: 18px">
+        <a-icon type="user"></a-icon>
+        <span style="display: inline-block;margin-left: 8px">admin</span>
+      </a-button>
+      <!--<div class="userDetail">-->
+        <!--<div class="username">-->
+        <!--  <a-button class="usernameBtn" type="link" style="color: white;font-size: 18px">-->
+        <!--    <div style="padding: 0 5px 0 0">-->
+        <!--      <a-icon type="user"></a-icon>-->
+        <!--      <span style="display: inline-block;margin-left: 8px">admin</span>-->
+        <!--    </div>-->
+        <!--  </a-button>-->
+        <!--</div>-->
+      <!--</div>-->
     </div>
   </div>
 </template>
@@ -130,32 +132,29 @@ export default {
   }
 
   .userInfo {
-    margin: 0 15px;
+    height: 60px;
+    padding: 0 15px;
     .user-avatar {
+      margin-top: 15px;
+      margin-right: 3px;
       color: #f56a00;
       background-color: #fde3cf;
-      margin: 5px;
-      width: 50px;
-      height: 50px;
-      font-size: 25px;
-      line-height: 50px;
     }
-    .userDetail {
-      margin-left: 10px;
-      .username {
-        position: relative;
-        height: 25px;
-        line-height: 25px;
-      }
-      .role{
-        margin-top: 5px;
-        height: 25px;
-        line-height: 25px;
-      }
-
+    .usernameBtn {
+      margin-top: 15px !important;
+      border-radius: 15px;
+    }
+    .usernameBtn:hover {
+      background-color: #3c9cd3;
     }
   }
   .header-btn {
+    .icon {
+      font-size: 20px;
+      line-height: 18px;
+      text-align: center;
+      padding-top: 13px;
+    }
     margin-left: auto;
   }
 

src/data/json/menuList.json

@@ -2,7 +2,7 @@
   {
     "name": "智能看板",
     "router": "/dashboard",
-    "icon": "",
+    "icon": "aside/dashboard.png",
     "children": [
       {
         "name": "人员画像",
@@ -24,7 +24,7 @@
   {
     "name": "智享生活",
     "router": "/life",
-    "icon": "",
+    "icon": "aside/life.png",
     "children": [
       {
         "name": "智慧餐厅",
@@ -51,7 +51,7 @@
   {
     "name": "智慧办公",
     "router": "/work",
-    "icon": "",
+    "icon": "aside/work.png",
     "children": [
       {
         "name": "楼层概览",
@@ -78,7 +78,7 @@
   {
     "name": "数智双碳",
     "router": "/doubleCarbon",
-    "icon": "",
+    "icon": "aside/carbon.png",
     "children": [
       {
         "name": "双碳概览",
@@ -105,7 +105,7 @@
   {
     "name": "智慧运营",
     "router": "",
-    "icon": "",
+    "icon": "aside/operation.png",
     "children": [
       {
         "name": "空间管理",
@@ -122,7 +122,7 @@
   {
     "name": "智慧安防",
     "router": "",
-    "icon": "",
+    "icon": "aside/security.png",
     "children": [
       {
         "name": "安防人员",
@@ -144,7 +144,7 @@
   {
     "name": "智慧场景",
     "router": "",
-    "icon": "",
+    "icon": "aside/scene.png",
     "children": [
       {
         "name": "智•会议",
@@ -166,7 +166,7 @@
   {
     "name": "数据报表",
     "router": "",
-    "icon": "",
+    "icon": "aside/report.png",
     "children": [
       {
         "name": "报表",
@@ -183,7 +183,7 @@
   {
     "name": "权限下达",
     "router": "",
-    "icon": "",
+    "icon": "aside/auth.png",
     "children": [
       {
         "name": "角色权限",

src/views/HomeView.vue

@@ -14,7 +14,7 @@
           :collapsible="true"
           :collapsed-width="60"
         >
-          <HomeAside :collapse="collapse" />
+          <HomeAside :collapse.sync="collapse" />
         </a-layout-sider>
         <!-- 内容 -->
         <a-layout-content class="home-page">
@@ -36,7 +36,7 @@ export default {
   },
   data() {
     return {
-      collapse: true, // 侧边栏是否收起
+      collapse: false, // 侧边栏是否收起
       asideWidth: "16%",
       contentWidth: "84%",
       contentHeight: 450,