fea(成品车存放区): 静态开发

src/views/Monitor/components/FinishedCar.vue

 <template>
-    <div class="page-pack">成品车存放区</div>
+    <!-- 成品车存放区 -->
+    <div class="page-pack">
+        <div class="container-pack">
+            <!-- 第一行 -->
+            <div class="finished-row-1-1">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-1-2">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-1-3">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-1-4">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-1-5">
+                <p>CDA213</p>
+            </div>
+            <!-- 第二行 -->
+            <div class="finished-row-2-1">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-2-2">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-2-3">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-2-4">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-2-5">
+                <p>CDA213</p>
+            </div>
+            <!-- 第三行 -->
+            <div class="finished-row-3-1">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-3-2">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-3-3">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-3-4">
+                <p>CDA213</p>
+            </div>
+            <div class="finished-row-3-5">
+                <p>CDA213</p>
+            </div>
+            <!-- 涂装车出 -->
+            <div class="paint-car-out">
+                <p>CDA213</p>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -11,5 +67,108 @@
 </script>
 
 <style lang="scss" scoped>
+    .page-pack {
+        min-height: 100%;
+        background: rgba(0, 7, 12, 1);
 
+        .container-pack {
+            position: relative;
+            margin: 0 auto;
+            width: 1600px;
+            height: 900px;
+            background: url("../../../assets/images/Monitor/monitor_finished_car.png");
+
+            div {
+                position: absolute;
+                width: 140px;
+                height: 50px;
+                cursor: pointer;
+                background: url('../../../assets/images/Monitor/monitor_car.png') no-repeat;
+                background-size: 35px 18px;
+                background-position: 0 16px;
+
+                p {
+                    font-size: 14px;
+                    margin: 0;
+                    color: #ffffff;
+                    font-weight: bold;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+
+            // 第一行
+            .finished-row-1-1 {
+                top: 395px;
+                left: 200px;
+            }
+            .finished-row-1-2 {
+                top: 395px;
+                left: 365px;
+            }
+            .finished-row-1-3 {
+                top: 395px;
+                left: 680px;
+            }
+            .finished-row-1-4 {
+                top: 395px;
+                left: 830px;
+            }
+            .finished-row-1-5 {
+                top: 395px;
+                left: 1010px;
+            }
+
+            // 第二行
+            .finished-row-2-1 {
+                top: 442px;
+                left: 200px;
+            }
+            .finished-row-2-2 {
+                top: 442px;
+                left: 365px;
+            }
+            .finished-row-2-3 {
+                top: 442px;
+                left: 680px;
+            }
+            .finished-row-2-4 {
+                top: 442px;
+                left: 830px;
+            }
+            .finished-row-2-5 {
+                top: 442px;
+                left: 1010px;
+            }
+
+            // 第三行
+            .finished-row-3-1 {
+                top: 495px;
+                left: 200px;
+            }
+            .finished-row-3-2 {
+                top: 495px;
+                left: 365px;
+            }
+            .finished-row-3-3 {
+                top: 495px;
+                left: 680px;
+            }
+            .finished-row-3-4 {
+                top: 495px;
+                left: 830px;
+            }
+            .finished-row-3-5 {
+                top: 495px;
+                left: 1010px;
+            }
+
+            // 涂装车出
+            .paint-car-out {
+                top: 435px;
+                left: 1325px;
+            }
+        }
+    }
 </style>

src/views/Monitor/index.vue

@@ -2213,7 +2213,7 @@
                     }
 
                     // 第三行车位点4
-                    .line-3-station-3 {
+                    .line-3-station-4 {
                         top: 38px;
                         left: 402px;
                     }