lishanzheng1 4 年之前
父节点
当前提交
a606e5f518
共有 2 个文件被更改,包括 32 次插入3 次删除
  1. 二进制
      src/assets/hamburger.png
  2. 32 3
      src/pages/layout/component/main-content/top-aside.vue

二进制
src/assets/hamburger.png


+ 32 - 3
src/pages/layout/component/main-content/top-aside.vue

@@ -2,7 +2,14 @@
   <div>
     <el-row :gutter="20">
       <el-col :span="17">
-        <el-button @click="changeIsCollapse">点击</el-button>
+        <!-- <el-button @click="changeIsCollapse">点击</el-button> -->
+        <el-image
+          class="image"
+          :class="[rotate ? 'go' : 'aa']"
+          :src="require('@/assets/hamburger.png')"
+          @click="changeIsCollapse"
+        >
+        </el-image>
         <my-bread></my-bread>
       </el-col>
       <el-col :span="7">
@@ -61,7 +68,9 @@ import { mapState, mapMutations } from "vuex";
 export default {
   name: "top-aside",
   data() {
-    return {};
+    return {
+      rotate: false,
+    };
   },
   computed: {
     ...mapState("permission", ["isSidebarNavCollapse"]),
@@ -73,6 +82,7 @@ export default {
         "permission/TOGGLENACCOLLAPSE",
         !this.isSidebarNavCollapse
       );
+      this.rotate = !this.rotate;
     },
     loginOut() {
       this.LOGIN_OUT();
@@ -94,7 +104,6 @@ export default {
   margin: 0 5%;
   border-left: 1px solid black;
   height: 20px;
-  
 }
 
 .aside__top {
@@ -212,4 +221,24 @@ export default {
 .breadcrumb-leave-active {
   position: absolute;
 }
+
+.image {
+  height: 25px;
+  width: 25px;
+  vertical-align: text-bottom;
+  margin-right: 1%;
+  cursor: pointer;
+}
+.aa {
+  transition: 0.6s;
+  transform: rotate(90deg);
+}
+.go {
+  transform: rotate(0deg);
+  transition: 0.6s;
+}
+.el-col-17 {
+  display: flex;
+  align-items: center;
+}
 </style>