update 3d position

src/MainPage.vue

@@ -29,7 +29,7 @@ const handlePageChange = (page) => {
     />
     <div v-else class="pages-wrapper">
       <NavMenu @change="handlePageChange" />
-      <TriplePage v-if="currentPage === '3d'" line="10" />
+      <TriplePage v-if="currentPage === '3d'" line="8" />
       <DataPage v-if="currentPage === 'data'" />
       <AlertListPage v-if="currentPage === 'alert'" />
       <RealtimePage v-if="currentPage === 'realtime'" />

src/pages/3D.vue

@@ -9,7 +9,111 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="triple-page" :class="['line-' + line]"></div>
+  <div class="triple-page" :class="['line-' + line]">
+    <div class="info-1" v-if="line == '1'">
+      <div class="info"><h1>M7上片</h1></div>
+      <div class="info"><h1>M6上片</h1></div>
+      <div class="info"><h1>M7磨边机</h1></div>
+      <div class="info"><h1>M6磨边机</h1></div>
+      <div class="info"><h1>M7清洗机</h1></div>
+      <div class="info"><h1>M6清洗机</h1></div>
+    </div>
+    <div class="info-2" v-if="line == '2'">
+      <div class="info"><h1>Z7钻孔机</h1></div>
+      <div class="info"><h1>Z6钻孔机</h1></div>
+      <div class="info"><h1>S7清洗机</h1></div>
+      <div class="info"><h1>S6清洗机</h1></div>
+      <div class="info"><h1>S7前储片台</h1></div>
+      <div class="info"><h1>S6前储片台</h1></div>
+      <div class="info"><h1>S7丝印机</h1></div>
+      <div class="info"><h1>S6丝印机</h1></div>
+      <div class="info"><h1>S7固化炉</h1></div>
+      <div class="info"><h1>S6固化炉</h1></div>
+      <div class="info"><h1>S7后储片台</h1></div>
+      <div class="info"><h1>S6后储片台</h1></div>
+    </div>
+    <div class="info-3" v-if="line == '3'">
+      <div class="info"><h1>B1前储片台</h1></div>
+    </div>
+    <div class="info-4" v-if="line == '4'">
+      <div class="info"><h1>B2清洗机</h1></div>
+      <div class="info"><h1>B2下片</h1></div>
+      <div class="info"><h1>B2后储片台</h1></div>
+    </div>
+    <div class="info-5" v-if="line == '5'">
+      <div class="info"><h1>M5上片</h1></div>
+      <div class="info"><h1>M4上片</h1></div>
+      <div class="info"><h1>M3上片</h1></div>
+      <div class="info"><h1>M5磨边机</h1></div>
+      <div class="info"><h1>M4磨边机</h1></div>
+      <div class="info"><h1>M3磨边机</h1></div>
+      <div class="info"><h1>M5清洗机</h1></div>
+      <div class="info"><h1>M4清洗机</h1></div>
+      <div class="info"><h1>M3清洗机</h1></div>
+    </div>
+    <div class="info-6" v-if="line == '6'">
+      <div class="info"><h1>Z5钻孔机</h1></div>
+      <div class="info"><h1>Z4钻孔机</h1></div>
+      <div class="info"><h1>Z3钻孔机</h1></div>
+      <div class="info"><h1>S5清洗机</h1></div>
+      <div class="info"><h1>S4清洗机</h1></div>
+      <div class="info"><h1>S3清洗机</h1></div>
+      <div class="info"><h1>S5前储片台</h1></div>
+      <div class="info"><h1>S4前储片台</h1></div>
+      <div class="info"><h1>S3前储片台</h1></div>
+      <div class="info"><h1>S5丝印机</h1></div>
+      <div class="info"><h1>S4丝印机</h1></div>
+      <div class="info"><h1>S3丝印机</h1></div>
+    </div>
+    <div class="info-7" v-if="line == '7'">
+      <div class="info"><h1>S5后储片台</h1></div>
+      <div class="info"><h1>S4后储片台</h1></div>
+      <div class="info"><h1>S3后储片台</h1></div>
+      <div class="info"><h1>S5固化炉</h1></div>
+      <div class="info"><h1>S4固化炉</h1></div>
+      <div class="info"><h1>S3固化炉</h1></div>
+      <div class="info"><h1>B2前储片台</h1></div>
+    </div>
+    <div class="info-8" v-if="line == '8'">
+      <div class="info"><h1>B1前储片台</h1></div>
+      <div class="info"><h1>B1清洗机</h1></div>
+      <div class="info"><h1>B1下片</h1></div>
+      <div class="info"><h1>B1后储片台</h1></div>
+    </div>
+    <div class="info-9" v-if="line == '9'">
+      <div class="info"><h1>M2上片</h1></div>
+      <div class="info"><h1>M1上片</h1></div>
+      <div class="info"><h1>M2磨边机</h1></div>
+      <div class="info"><h1>M1磨边机</h1></div>
+      <div class="info"><h1>M2清洗机</h1></div>
+      <div class="info"><h1>M1清洗机</h1></div>
+    </div>
+    <div class="info-10" v-if="line == '10'">
+      <!-- <div class="info"><h1>M2清洗机</h1></div>
+    <div class="info"><h1>M1清洗机</h1></div> -->
+      <div class="info"><h1>Z2钻孔机</h1></div>
+      <div class="info"><h1>Z1钻孔机</h1></div>
+      <div class="info"><h1>S2清洗机</h1></div>
+      <div class="info"><h1>S1清洗机</h1></div>
+      <div class="info"><h1>S2前储片台</h1></div>
+      <div class="info"><h1>S1前储片台</h1></div>
+      <div class="info"><h1>S2丝印机</h1></div>
+      <div class="info"><h1>S1丝印机</h1></div>
+    </div>
+    <div class="info-11" v-if="line == '11'">
+      <div class="info"><h1>S7后储片台</h1></div>
+      <div class="info"><h1>S6后储片台</h1></div>
+      <div class="info"><h1>S7固化炉</h1></div>
+      <div class="info"><h1>S6固化炉</h1></div>
+      <div class="info"><h1>B3前储片台</h1></div>
+    </div>
+    <div class="info-12" v-if="line == '12'">
+      <div class="info"><h1>B3前储片台</h1></div>
+      <div class="info"><h1>B3清洗机</h1></div>
+      <div class="info"><h1>B3下片</h1></div>
+      <div class="info"><h1>B3后储片台</h1></div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -23,8 +127,260 @@ const props = defineProps({
   z-index: -1;
   width: 100%;
   height: 100%;
+  color: #fff;
 }
 
+.info {
+  width: 180px;
+  height: auto;
+  padding: 12px;
+  background: url(../assets/info-rect.png) 100% 100% / cover no-repeat;
+  display: inline-block;
+  position: absolute;
+}
+
+.info h1 {
+  font-size: 24px;
+  line-height: 1;
+  text-align: center;
+  letter-spacing: 1.5px;
+  font-weight: 500;
+}
+
+.info-1 .info:nth-child(1) {
+  left: 490px;
+  bottom: 250px;
+}
+.info-1 .info:nth-child(2) {
+  left: 790px;
+  bottom: 210px;
+}
+.info-1 .info:nth-child(3) {
+  left: 660px;
+  top: 480px;
+}
+.info-1 .info:nth-child(4) {
+  left: 910px;
+  top: 510px;
+}
+.info-1 .info:nth-child(5) {
+  left: 880px;
+  top: 220px;
+}
+.info-1 .info:nth-child(6) {
+  left: 1100px;
+  top: 260px;
+}
+
+/* info-2  */
+.info-2 .info:nth-child(1) {
+  left: 580px;
+  bottom: 200px;
+}
+.info-2 .info:nth-child(2) {
+  left: 940px;
+  bottom: 200px;
+}
+.info-2 .info:nth-child(3) {
+  left: 640px;
+  bottom: 360px;
+}
+.info-2 .info:nth-child(4) {
+  left: 940px;
+  bottom: 360px;
+}
+.info-2 .info:nth-child(5) {
+  left: 660px;
+  bottom: 580px;
+}
+.info-2 .info:nth-child(6) {
+  left: 1060px;
+  bottom: 520px;
+}
+.info-2 .info:nth-child(7) {
+  left: 720px;
+  top: 190px;
+}
+.info-2 .info:nth-child(8) {
+  left: 1100px;
+  top: 260px;
+}
+.info-2 .info:nth-child(9) {
+  left: 800px;
+  top: 120px;
+}
+.info-2 .info:nth-child(10) {
+  left: 1100px;
+  top: 144px;
+}
+.info-2 .info:nth-child(11) {
+  left: 800px;
+  top: 10px;
+}
+.info-2 .info:nth-child(12) {
+  left: 1100px;
+  top: 20px;
+}
+
+/* info 3  */
+.info-3 .info:nth-child(1) {
+  left: 500px;
+  bottom: 420px;
+}
+
+/* info 4  */
+.info-4 .info:nth-child(1) {
+  left: 580px;
+  bottom: 200px;
+}
+.info-4 .info:nth-child(2) {
+  left: 800px;
+  top: 100px;
+}
+.info-4 .info:nth-child(3) {
+  left: 1240px;
+  top: 40px;
+}
+
+/* info 5  */
+.info-5 .info:nth-child(1) {
+  left: 490px;
+  bottom: 300px;
+}
+.info-5 .info:nth-child(2) {
+  left: 740px;
+  bottom: 280px;
+}
+.info-5 .info:nth-child(3) {
+  left: 960px;
+  bottom: 240px;
+}
+.info-5 .info:nth-child(4) {
+  left: 460px;
+  bottom: 490px;
+}
+.info-5 .info:nth-child(5) {
+  left: 760px;
+  bottom: 490px;
+}
+.info-5 .info:nth-child(6) {
+  left: 1060px;
+  bottom: 450px;
+}
+.info-5 .info:nth-child(7) {
+  left: 570px;
+  top: 190px;
+}
+.info-5 .info:nth-child(8) {
+  left: 890px;
+  top: 200px;
+}
+.info-5 .info:nth-child(9) {
+  left: 1190px;
+  top: 200px;
+}
+
+/* info 6  */
+
+.info-6 .info:nth-child(1) {
+  left: 480px;
+  bottom: 530px;
+}
+.info-6 .info:nth-child(2) {
+  left: 720px;
+  bottom: 470px;
+}
+.info-6 .info:nth-child(3) {
+  left: 990px;
+  bottom: 460px;
+}
+.info-6 .info:nth-child(4) {
+  left: 510px;
+  top: 260px;
+}
+.info-6 .info:nth-child(5) {
+  left: 810px;
+  top: 260px;
+}
+.info-6 .info:nth-child(6) {
+  left: 1110px;
+  top: 280px;
+}
+.info-6 .info:nth-child(7) {
+  left: 600px;
+  top: 110px;
+}
+.info-6 .info:nth-child(8) {
+  left: 900px;
+  top: 110px;
+}
+.info-6 .info:nth-child(9) {
+  left: 1200px;
+  top: 110px;
+}
+.info-6 .info:nth-child(10) {
+  left: 650px;
+  top: 20px;
+}
+.info-6 .info:nth-child(11) {
+  left: 950px;
+  top: 30px;
+}
+.info-6 .info:nth-child(12) {
+  left: 1230px;
+  top: 20px;
+}
+
+/* info 7  */
+
+.info-7 .info:nth-child(1) {
+  left: 400px;
+  bottom: 440px;
+}
+.info-7 .info:nth-child(2) {
+  left: 670px;
+  bottom: 440px;
+}
+.info-7 .info:nth-child(3) {
+  left: 960px;
+  bottom: 450px;
+}
+.info-7 .info:nth-child(4) {
+  left: 310px;
+  bottom: 260px;
+}
+.info-7 .info:nth-child(5) {
+  left: 620px;
+  bottom: 260px;
+}
+.info-7 .info:nth-child(6) {
+  left: 1110px;
+  bottom: 240px;
+}
+.info-7 .info:nth-child(7) {
+  left: 800px;
+  top: 50px;
+}
+
+/* info 8  */
+.info-8 .info:nth-child(1) {
+  left: 660px;
+  bottom: 550px;
+}
+.info-8 .info:nth-child(2) {
+  left: 990px;
+  bottom: 690px;
+}
+.info-8 .info:nth-child(3) {
+  left: 700px;
+  top: 80px;
+}
+.info-8 .info:nth-child(4) {
+  left: 1100px;
+  top: 80px;
+}
+
+/* other  */
 .line-1 {
   background: url(../assets/model/F1.png) no-repeat;
   background-size: 1920px 1080px;