湖里大屏(数字工地)：完成升降机弹框动画

src/views/projectAdmin/jlw/digitalSite/components/ElevatorDialog_.vue

@@ -1,6 +1,7 @@
 <template>
   <el-dialog title="升降机监测" :visible="true" :modal-append-to-body="false" width="95%" top="0vh" class="elevatorDialog" @close="close">
     <div class="dllm">
+      <div class="env-animate">
         <div class="card">
           <div class="card-title">实时数据</div>
           <div class="environment">
@@ -42,6 +43,10 @@
             </div>
           </div>
         </div>
+        <div class="animate">
+          <div class="car"></div>
+        </div>
+      </div>
 
       <div class="infos">
         <!-- 设备信息 -->
@@ -169,6 +174,48 @@ export default {
     color: #fff;
     background-size: 100% 100%;
     z-index: 3;
+    display: flex;
+    flex-direction: column;
+    .env-animate {
+      flex: 1;
+      display: flex;
+      > :nth-child(1) {
+        width: 1000px;
+      }
+      .animate {
+        position: relative;
+        margin: 60px auto 0;
+        width: 130px;
+        height: 420px;
+        background: url(~@/assets/images/dataBoard/lifter-1.png) no-repeat;
+        background-position-x: -30px;
+        .car {
+          position: absolute;
+          left: 76px;
+          bottom: 10px;
+          width: 38px;
+          height: 50px;
+          background: url(~@/assets/images/dataBoard/lifter-2.png);
+          background-size: 100%;
+          animation: car 1s forwards;
+        }
+        @keyframes car {
+          0% {
+            bottom: 10px;
+          }
+          100% {
+            bottom: 200px;
+          }
+        }
+      }
+    }
+    .infos {
+      height: 260px;
+      display: flex;
+      > div {
+        flex: 1;
+      }
+    }
     .card {
       .card-title {
         margin-bottom: 20px;
@@ -239,14 +286,6 @@ export default {
         }
       }
     }
-
-    .infos {
-      height: 260px;
-      display: flex;
-      > div {
-        flex: 1;
-      }
-    }
   }
   .green {
     color: #35d17e;