大地图外观

src/views/gui/BigMap.vue

@@ -19,33 +19,73 @@
         draggable="false"
       >
       <div
-        id="lasjfjsdfkl"
+        v-for="(item) in areaListForMap"
+        :key="item.id"
         class="area"
-      >
-        lasjfjsdfkl
-      </div>
+        lang="en"
+        :style="{
+          top: item.top + 'vw',
+          left: item.left + 'vw',
+          width: item.width + 'vw',
+          height: item.height + 'vw',
+        }"
+        v-html="item.nameCn"
+      />
     </div>
     <div class="button-wrapper">
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
-      <button>lasjfjsdfkl</button>
+      <button
+        v-for="(item) in areaListForBtn"
+        :key="item.id"
+      >
+        {{ item.nameCn }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      areaListForMap: [
+        { id: '1', nameCn: '速霸CX 104-8+LYYL', nameEn: 'Speedmaster CX 104-8+LYYL', left: 20.3, top: 6.3, width: 49.4, height: 13, },
+        { id: '2', nameCn: '速霸XL 75-7+L ', nameEn: 'Speed&hyphen;<br>master XL 75-7+L ', left: 5.5, top: 22.5, width: 12.4, height: 34.8, },
+        { id: '3', nameCn: '速霸SX102-4-P', nameEn: 'Speed&hyphen;<br>master SX 102-4-P', left: 70.7, top: 6.3, width: 10.5, height: 29.7, },
+        { id: '4', nameCn: '数字工厂', nameEn: 'Digital Factory', left: 38.2, top: 24.1, width: 25.1, height: 6.2, },
+        { id: '4.1', nameCn: '', nameEn: '', left: 58.8, top: 30.3, width: 4.5, height: 4.4, },
+        { id: '5', nameCn: '印通工作流程中心', nameEn: 'Prinect Center', left: 40.9, top: 43.4, width: 9.4, height: 4.9, },
+        { id: '6', nameCn: '波拉自动裁切系统300 ', nameEn: 'Polar <br> Cutting <br> System 300 ', left: 5.5, top: 6.3, width: 12.4, height: 13, },
+        { id: '7', nameCn: '斯塔尔折页机KH 82-P', nameEn: 'Stahlfolder KH 82-P', left: 21.3, top: 40.1, width: 11.6, height: 11.6, },
+        { id: '8', nameCn: 'Versa&hyphen;<br>fire EP', nameEn: 'Versa&hyphen;<br>fire EP', left: 35.6, top: 49.2, width: 6.2, height: 12.3, },
+        { id: '9', nameCn: 'Versa&hyphen;<br>fire EV', nameEn: 'Versa&hyphen;<br>fire EV', left: 42.7, top: 49.2, width: 6.2, height: 12.3, },
+        { id: '10', nameCn: '超霸106计算机直接制版机', nameEn: 'Supra&hyphen;<br>setter<br> 106', left: 51.8, top: 51.2, width: 11.2, height: 11.2, },
+        { id: '11', nameCn: '海德堡效能管家', nameEn: 'Lifecycle', left: 29, top: 31.5, width: 13.3, height: 8, },
+        { id: '12', nameCn: '培训', nameEn: 'Training', left: 52.8, top: 42.5, width: 10.5, height: 3.6, },
+        { id: '13', nameCn: '咨询', nameEn: 'Consultancy', left: 51.6, top: 46.8, width: 13, height: 3.6, },
+        { id: '14', nameCn: '捷拉斯', nameEn: 'Gallus', left: 53, top: 38.8, width: 8.7, height: 2.5, },
+        { id: '15', nameCn: '海德堡金融服务', nameEn: 'Financial Service', left: 49.5, top: 35.6, width: 14.8, height: 2.5, },
+        { id: '16', nameCn: '直播间', nameEn: 'Live&hyphen;<br>streaming Room', left: 61.4, top: 66.8, width: 9.8, height: 14.2, },
+      ],
+      areaListForBtn: [
+        { id: '1', nameCn: '速霸CX 104-8+LYYL', nameEn: 'Speedmaster CX 104-8+LYYL', left: 20.3, top: 6.3, width: 49.4, height: 13, },
+        { id: '2', nameCn: '速霸XL 75-7+L ', nameEn: 'Speedmaster XL 75-7+L ', left: 5.5, top: 22.5, width: 12.4, height: 34.8, },
+        { id: '3', nameCn: '速霸SX 102-4-P', nameEn: 'Speedmaster SX 102-4-P', left: 70.7, top: 6.3, width: 10.5, height: 29.7, },
+        { id: '4', nameCn: '数字工厂', nameEn: 'Digital Factory', left: 38.2, top: 24.1, width: 25.1, height: 6.2, },
+        { id: '5', nameCn: '印通工作流程中心', nameEn: 'Prinect Center', left: 40.9, top: 43.4, width: 9.4, height: 4.9, },
+        { id: '6', nameCn: '波拉自动裁切系统300 ', nameEn: 'Polar Cutting System 300 ', left: 5.5, top: 6.3, width: 12.4, height: 13, },
+        { id: '7', nameCn: '斯塔尔折页机KH 82-P', nameEn: 'Stahlfolder KH 82-P', left: 21.3, top: 40.1, width: 11.6, height: 11.6, },
+        { id: '8', nameCn: 'Versafire EP', nameEn: 'Versafire EP', left: 35.6, top: 49.2, width: 6.2, height: 12.3, },
+        { id: '9', nameCn: 'Versafire EV', nameEn: 'Versafire EV', left: 42.7, top: 49.2, width: 6.2, height: 12.3, },
+        { id: '10', nameCn: '超霸106计算机直接制版机', nameEn: 'Suprasetter 106', left: 51.8, top: 51.2, width: 11.2, height: 11.2, },
+        { id: '11', nameCn: '海德堡效能管家', nameEn: 'Lifecycle', left: 29, top: 31.5, width: 13.3, height: 8, },
+        { id: '12', nameCn: '培训', nameEn: 'Training', left: 52.8, top: 42.5, width: 10.5, height: 3.6, },
+        { id: '13', nameCn: '咨询', nameEn: 'Consultancy', left: 51.6, top: 46.8, width: 13, height: 3.6, },
+        { id: '14', nameCn: '捷拉斯', nameEn: 'Gallus', left: 53, top: 38.8, width: 8.7, height: 2.5, },
+        { id: '15', nameCn: '海德堡金融服务', nameEn: 'Financial Service', left: 49.5, top: 35.6, width: 14.8, height: 2.5, },
+        { id: '16', nameCn: '直播间', nameEn: 'Livestreaming Room', left: 61.4, top: 66.8, width: 9.8, height: 14.2, },
+      ]
+    }
+  },
 }
 </script>
 
@@ -96,12 +136,8 @@ export default {
       justify-content: center;
       align-items: center;
       position: absolute;
-    }
-    > #lasjfjsdfkl {
-      top: 6.3vw;
-      left: 5.6vw;
-      width: 12.5vw;
-      height: 12.9vw;
+      text-align: center;
+      hyphens: auto;
     }
   }
   > .button-wrapper {
@@ -109,12 +145,12 @@ export default {
     top: calc(16vw + 89.2vw + 4vw);
     bottom: 0;
     left: 4.2vw;
-    right: calc(4.2vw - 2.7vw - 0.9vw);
+    right: 1vw;
     overflow: auto;
     > button {
-      margin-right: 2.7vw;
+      margin-right: 2vw;
       margin-bottom: 4.4vw;
-      width: 44.4vw;
+      width: 45vw;
       height: 8vw;
       border-radius: 4vw;
       border: 1px solid #FFFFFF;