center图片定位

src/views/bigScreen/drivingCabin/center.vue

@@ -1,7 +1,47 @@
 <template>
   <div>
     <container3>
-      <img src="./snap.png" style="width: 100%;height:100%">
+      <img src="./conter.png" style="width: 100%;height:100%">
+      <div class="con_right">
+        <div class="con_title">
+          <img src="./conter1-1.png" alt="">
+          <span style="margin-left:2px">正在工作</span>
+        </div>
+        <div class="con_height"></div>
+        <div class="com_img"><img src="./conter1-2.png" alt=""></div>
+      </div>
+      <div class="con_right con_two">
+        <div class="con_title">
+          <img src="./conter1-1.png" alt="">
+          <span>正在工作</span>
+        </div>
+        <div class="con_height"></div>
+        <div class="com_img"><img src="./conter1-2.png" alt=""></div>
+      </div>
+      <div class="con_left">
+        <div class="con_left_title">
+          <img src="./conter2-1.png" alt="">
+          <div class="con_card">
+            <div>
+              <span>当日生产任务</span>
+              <span>2890</span>
+            </div>
+            <div style="margin:7px 0">
+              <span>正在执行中任务</span>
+              <span>542</span>
+            </div>
+            <div>
+              <span>已完成</span>
+              <span>2348</span>
+            </div>
+          </div>
+        </div>
+        <div class="con_h_two">
+          <div class="con_bottom">
+            <img src="./conter2-2.png" alt="">
+          </div>
+        </div>
+      </div>
     </container3>
   </div>
 
@@ -35,5 +75,96 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.container3{
+  position: relative;
+  .con_right{
+    width: 88px;
+    position: absolute;
+    top: 20%;
+    right: 20%;
+    color: #00FFFF;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    img{
+      width: 100%;
+    }
+    .con_title{
+      width: 100%;
+      display: flex;
+      align-items: center;
+      img{
+        width: 25%;
+      }
+    }
+    .con_height{
+      width:2px;
+      height:20px;
+      background-color:#00FFFF;
+    }
+  }
+  .con_two{
+    top: 43%;
+    right: 12%;
+  }
+  .con_left{
+    width: 186px;
+    position: absolute;
+    top: 60%;
+    left: 24%;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    img{
+      width: 100%;
+      display: block;
+      margin: 0 auto;
+    }
+    .con_left_title{
+      position: relative;
+      .con_card{
+        width: 100%;
+        padding: 0 10px;
+        position: absolute;
+        top: 22%;
+        div{
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          span:nth-child(1){
+            opacity: .9;
+          }
+          span:nth-child(2){
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    .con_h_two{
+      position: relative;
+      width: 50%;
+      height: 47px;
+      border: 1px solid #FA8C16;
+      border-top-width: 0;
+      border-right-width: 0;
+      .con_bottom{
+        height: 24px;
+        line-height: 26px;
+        position: absolute;
+        right: -50%;
+        bottom: -50%;
+        text-align: right;
+        transform: translate(-50%,-50%);
+      img{
+        width: 38%;
+        margin: 0;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+    }
+  }
+}
 </style>