组织列表弹出收起

src/assets/scss/modules/visual/basicInfoMain.scss

@@ -112,6 +112,9 @@
       background-size: 100% 100%;
       // padding: 45px 21px 35px 24px;
 
+      .info_loading {
+        margin-top: 50px;
+      }
       .info_tip {
         padding: 31px 0 0 19px;
         display: flex;
@@ -190,6 +193,12 @@
         }
       }
     }
+
+    .div_info {
+      /deep/ .el-scrollbar__wrap {
+        overflow-x: hidden !important;
+      }
+    }
   }
 }
 
@@ -391,11 +400,27 @@
   box-sizing: border-box;
   width: 320px;
   height: 470px;
-
   color: #fff;
   background: url('../../../img/modules/visual/box-2.png') no-repeat center;
   background-size: 100% 100%;
   padding: 45px 20px 35px 20px;
+
+  .agency_main {
+    height: 100%;
+    position: relative;
+    .arrow_tip {
+      position: absolute;
+      top: 180px;
+      left: -20px;
+    }
+  }
+
+  .agency_main {
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
+    }
+  }
+
   .no-data-img {
     text-align: center;
     margin-top: 50px;

src/views/modules/visual/basicinfo/basicInfoMain.vue

@@ -15,30 +15,55 @@
     </div>
 
     <!-- 组织列表 -->
+    <transition name="slideFade">
+      <div v-show="isshow&&(orgLevel!=='people' && orgLevel!=='search' && orgLevel!=='neighborHood')"
+           transiton="slideFade"
+           class="div_agency_list">
+        <div class="agency_main">
+          <el-scrollbar style="height:98%"
+                        wrap-style="overflow-x:hidden">
+
+            <div v-if="subAgencyArray.length>0"
+                 class="agency_list">
+              <div v-for="(item,index) in subAgencyArray"
+                   :key="index"
+                   @click="clickAgencyItem(item,index)"
+                   :class="['agency_item',{'agency_item_on':index%2 ==0}]">
+                <div class="agency_item_name">{{item.name}}</div>
 
-    <div v-show="orgLevel!=='people' && orgLevel!=='search' && orgLevel!=='neighborHood'"
+              </div>
-         class="div_agency_list">
+            </div>
-      <el-scrollbar style="height:98%"
+            <div v-else>
-                    wrap-style="overflow-x:hidden">
+              <img src="@/assets/img/modules/visual/noData.png"
-
+                   alt=""
-        <div v-if="subAgencyArray.length>0"
+                   srcset=""
-             class="agency_list">
+                   class="no-data-img" />
-          <div v-for="(item,index) in subAgencyArray"
+            </div>
-               :key="index"
+          </el-scrollbar>
-               @click="clickAgencyItem(item,index)"
-               :class="['agency_item',{'agency_item_on':index%2 ==0}]">
-            <div class="agency_item_name">{{item.name}}</div>
 
+          <div @click="isshow=!isshow"
+               class="arrow_tip">
+            <img src="../../../../assets/img/modules/visual/sousuo.png"
+                 alt />
           </div>
         </div>
-        <div v-else>
+      </div>
-          <img src="@/assets/img/modules/visual/noData.png"
+    </transition>
-               alt=""
+
-               srcset=""
+    <!-- <transition name="slideFade">
-               class="no-data-img" />
+
+      <div v-if="isshow"
+           class="aaa"
+           transiton="slideFade">
+        <div>1111111</div>
+
+        <div class="arrow_tip"
+             @click="isshow=!isshow">
+          <img src="../../../../assets/img/modules/visual/sousuo.png"
+               alt />
         </div>
-      </el-scrollbar>
+      </div>
-    </div>
+    </transition> -->
 
     <people-search v-show="orgLevel==='search'"
                    @toSubAgency="toSubAgency"
@@ -244,6 +269,7 @@ const vueGis = {
   name: 'HomeMap',
   data () {
     return {
+      isshow: true,
       centerPoint: [],//中心点位置
       zoom: 14,//缩放范围：区14
       minZoom: 1,//最小缩放
@@ -971,17 +997,38 @@ export default vueGis;
 </style>  
 
 <style lang="scss" scoped>
-.info_loading {
+.aaa {
-  margin-top: 50px;
+  height: 100px;
+  width: 100px;
+  background-color: aquamarine;
+}
+.slideFade-enter {
+  animation: slideFade-dialog-fade-in 0.5s ease;
+}
+.slideFade-leave {
+  animation: slideFade-dialog-fade-out 0.5s ease forwards;
+}
+.slideFade-enter-active {
+  animation: slideFade-dialog-fade-in 0.5s ease;
 }
-.div_info {
+.slideFade-leave-active {
-  /deep/ .el-scrollbar__wrap {
+  animation: slideFade-dialog-fade-out 0.5s ease forwards;
-    overflow-x: hidden !important;
+}
+
+@keyframes slideFade-dialog-fade-in {
+  from {
+    left: 110px;
+  }
+  to {
+    left: 0px;
   }
 }
-.div_agency_list {
+@keyframes slideFade-dialog-fade-out {
-  /deep/ .el-scrollbar__wrap {
+  from {
-    overflow-x: hidden !important;
+    left: 0px;
+  }
+  to {
+    left: 100px;
   }
 }
 </style>