开关控制

src/views/overview.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="overview">
     <!-- <div class="innerContainer leftPane">驾驶舱</div> -->
-    <div class="innerContainer leftPane" :class="{ 'leftPaneAnimationDown': isleftPaneAnimationDown,'leftPaneAnimationUp':isleftPaneAnimationUp }">
+    <div class="innerContainer leftPane"
+      :class="{ 'leftPaneAnimationDown': isleftPaneAnimationDown, 'leftPaneAnimationUp': isleftPaneAnimationUp }">
       <QYGH />
       <ZRZY />
       <KCZY />
-      <div class="leftPanePackUp" @click="switchPack_down">
+      <div class="leftPanePackUp" @click="switchPack_down" v-if="downOrUp">
+      </div>
+      <div class="leftPanePackDown" @click="switchPack_up" v-else>
       </div>
     </div>
 
@@ -14,8 +17,11 @@
       <DXGL />
       <GDBH />
       <JCJG />
-      <div class="rightPanePackUp" @click="switchPack_up">
+      <div class="rightPanePackUp" @click="switchPack_down" v-if="downOrUp">
+      </div>
+      <div class="rightPanePackDown" @click="switchPack_up" v-else>
       </div>
+
     </div>
 
   </div>
@@ -44,12 +50,17 @@ export default {
       iSRightPaneAnimationUp: false,
       isRightPaneAnimationDown: false,
       isleftPaneAnimationDown: false,
-      isleftPaneAnimationUp:false
+      isleftPaneAnimationUp: false,
+      downOrUp: true
     };
   },
   created() { },
   methods: {
     switchPack_down() {
+      // 按钮控制
+      setTimeout(() => {
+        this.downOrUp = false;
+      }, 700);
       // 右侧动画控制
       this.iSRightPaneAnimationUp = !this.iSRightPaneAnimationUp;
       this.isRightPaneAnimationDown = false;
@@ -69,6 +80,10 @@ export default {
       }, 600);
     },
     switchPack_up() {
+      setTimeout(() => {
+        this.downOrUp = true;
+      }, 700);
+
       // 右侧动画控制
       this.isRightPaneAnimationDown = !this.isRightPaneAnimationDown;
       this.iSRightPaneAnimationUp = false;
@@ -220,12 +235,23 @@ export default {
   top: 50%;
 }
 
+.leftPanePackDown {
+  width: 25px;
+  height: 25PX;
+  min-height: 50px;
+  background-image: url("/static/images/homepage/packUp.png");
+  background-size: 100% 100%;
+  position: absolute;
+  left: 103%;
+  z-index: 11111;
+  top: 50%;
+}
+
 .rightPanePackUp {
   width: 25px;
   height: 25PX;
   min-height: 50px;
-  // background-image: url("/static/images/homepage/packUp.png");
-  background-image: url("/static/images/homepage/packDown.png");
+  background-image: url("/static/images/homepage/packUp.png");
 
   background-size: 100% 100%;
   position: absolute;
@@ -233,4 +259,16 @@ export default {
   z-index: 11111;
   top: 50%;
 }
-</style>
+
+.rightPanePackDown {
+  width: 25px;
+  height: 25PX;
+  min-height: 50px;
+  background-image: url("/static/images/homepage/packDown.png");
+
+  background-size: 100% 100%;
+  position: absolute;
+  left: -10%;
+  z-index: 11111;
+  top: 50%;
+}</style>