动画和元素居中

src/views/homepage/dxgl.vue

@@ -3,7 +3,7 @@
 <template>
     <div class="ztgh">
         <div class="shang"></div>
-        <div class="xia">
+        <div class="xia center">
             <table>
                 <tr>
                     <td>
@@ -121,4 +121,8 @@ export default {
 .xia {
     color:aliceblue;
 }
+.center{
+    margin-left: 4%;
+    
+}
 </style>

src/views/homepage/gdbh.vue

@@ -3,7 +3,7 @@
 <template>
     <div class="gdbh">
         <div class="shang"></div>
-        <div class="xia">
+        <div class="xia center" >
             <div style=" background-size: 100% 100% ; width: 310px; height: 50px;">
                 <div style="float: left; width: 45%; height: 48px;margin-left: 10px; 
                     background-image: url('/static/images/homepage/05-1 耕地保护指标.png'); background-size: 100% 100%; ">
@@ -174,4 +174,8 @@ export default {
 .xia {
     color:aliceblue;
 }
+.center{
+    margin-left: 3%;
+    
+}
 </style>

src/views/homepage/kczy.vue

@@ -3,7 +3,7 @@
 <template>
     <div class="ztgh">
         <div class="shang"></div>
-        <div class="xia">
+        <div class="xia center">
             <div style="background-image: url('/static/images/homepage/03-1 指标底框 矿产资源.png'); background-size: 100% 100% ; width: 310px; height: 80px;">
                 <div style="float: left; width: 30%; height: 80px; "><img style="margin-left: 8px;" src="/static/images/homepage/03-2 矿产资源图标.png"/></div>
                 <div style="float: left; width: 70%; height: 80px; font-size: 15px;">
@@ -105,4 +105,8 @@ export default {
 .xia {
     color:aliceblue;
 }
+.center{
+    margin-left: 3%;
+    
+}
 </style>

src/views/homepage/qygh.vue

@@ -3,7 +3,7 @@
 <template>
     <div class="ztgh">
         <div class="shang"></div>
-        <div class="xia">
+        <div class="xia center">
             <table>
                 <tr>
                     <td>
@@ -121,4 +121,8 @@ export default {
 .xia {
     color:aliceblue;
 }
+.center{
+    margin-left: 4%;
+    
+}
 </style>

src/views/homepage/zrzy.vue

@@ -3,7 +3,7 @@
 <template>
     <div class="ztgh">
         <div class="shang"></div>
-        <div id="ztgh_xia" style="width: 280px; height: 230px;"></div>
+        <div class="center" id="ztgh_xia" style="width: 280px; height: 230px;"></div>
     </div>
 </template>
 <script>
@@ -99,4 +99,8 @@ export default {
 .xia {
     color:#1cf2fb;
 }
+.center{
+    margin-left: 4%;
+    
+}
 </style>

src/views/overview.vue

@@ -2,14 +2,19 @@
   <div class="overview">
     <!-- <div class="innerContainer leftPane">驾驶舱</div> -->
     <div class="innerContainer leftPane">
-      <QYGH/>
-      <ZRZY/>
-      <KCZY/>
+      <QYGH />
+      <ZRZY />
+      <KCZY />
     </div>
-    <div class="innerContainer rightPane">
-      <DXGL/>
-      <GDBH/>
-      <JCJG/>
+    <div class="leftPanePackUp" @click="switchPack">
+
+    </div>
+    <div class="innerContainer rightPane" :class="{ 'rightPaneAnimation': iSRightPaneAnimation }">
+      <DXGL />
+      <GDBH />
+      <JCJG />
+    </div>
+    <div class="rightPanePackUp"  @click="switchPack">
     </div>
   </div>
 </template>
@@ -33,10 +38,17 @@ export default {
     JCJG
   },
   data() {
-    return {};
+    return {
+      iSRightPaneAnimation: false
+    };
+  },
+  created() { },
+  methods: {
+
+    switchPack() {
+      this.iSRightPaneAnimation = true;
+    }
   },
-  created() {},
-  methods: {},
 };
 </script>
 
@@ -64,9 +76,53 @@ export default {
 
 .leftPane {
   left: 10px;
+
+
+}
+
+@keyframes rightPaneAnimation-packUp {
+
+  from {
+    right: 10px;
+
+  }
+
+  to {
+    right: -360px;
+  }
 }
 
+
 .rightPane {
   right: 10px;
 }
+
+.rightPaneAnimation {
+  animation: rightPaneAnimation-packUp 1s linear 0.5s forwards;
+  animation-iteration-count: 1;
+}
+
+.leftPanePackUp {
+  width: 25px;
+  height: 25PX;
+  min-height: 50px;
+  background-image: url("/static/images/homepage/packDown.png");
+  background-size: 100% 100%;
+  position: absolute;
+  left: 19%;
+  z-index: 11111;
+  top: 50%;
+}
+
+.rightPanePackUp {
+  width: 25px;
+  height: 25PX;
+  min-height: 50px;
+  background-image: url("/static/images/homepage/packUp.png");
+  background-size: 100% 100%;
+  position: absolute;
+  right: 19%;
+  z-index: 11111;
+  top: 50%;
+}
 </style>