upp

pc场景/src/views/gui/compomemt/mapSvg.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="mapSvg">
-    <div class="svgImg">
-
+    <div class="svgImg"></div>
+    <div class="listBox">
+      <div class="row" v-for="item in data" :key="item.name">
+        {{ item.name }}
+      </div>
     </div>
   </div>
 </template>
@@ -18,7 +21,24 @@ export default {
   data() {
     return {
       activeInd: null,
-      data: [],
+      data: [
+        { name: "速霸CX 104-8+LYYL", x: 0, y: 0 },
+        { name: "速霸XL 75-7+L", x: 0, y: 0 },
+        { name: "速霸SX 102-4-P", x: 0, y: 0 },
+        { name: "数字工厂", x: 0, y: 0 },
+        { name: "印通工作流程中心", x: 0, y: 0 },
+        { name: "波拉自动裁切系统300", x: 0, y: 0 },
+        { name: "斯塔尔折页机KH 82-P", x: 0, y: 0 },
+        { name: "Versafire EP", x: 0, y: 0 },
+        { name: "Versafire EV", x: 0, y: 0 },
+        { name: "超霸106计算机直接制版机", x: 0, y: 0 },
+        { name: "海德堡效能管家", x: 0, y: 0 },
+        { name: "培训", x: 0, y: 0 },
+        { name: "咨询", x: 0, y: 0 },
+        { name: "捷拉斯", x: 0, y: 0 },
+        { name: "海德堡金融服务", x: 0, y: 0 },
+        { name: "直播间", x: 0, y: 0 },
+      ],
     };
   },
   computed: {},
@@ -43,10 +63,33 @@ export default {
 .mapSvg {
   width: 100%;
   height: 100%;
+  padding-left: 40px;
   .svgImg {
     width: 510px;
     height: 511px;
     margin: 50px auto;
   }
+  .listBox {
+    width: 100%;
+    height: calc(100% - 620px);
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    .row {
+      width: 30%;
+      margin-right: 3%;
+      margin-bottom: 10px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      font-size: 16px;
+      color: #fff;
+      border-radius: 20px;
+      border: 1px solid #fff;
+      &:nth-of-type(3n) {
+        margin-right: 0;
+      }
+    }
+  }
 }
 </style>

pc场景/src/views/gui/compomemt/mapSvgEn.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="mapSvgEn">
-    <div class="svgImg">
- 
+    <div class="svgImg"></div>
+    <div class="listBox">
+      <div class="row" v-for="item in data" :key="item.name">
+        {{ item.name }}
+      </div>
     </div>
   </div>
 </template>
@@ -18,7 +21,24 @@ export default {
   data() {
     return {
       activeInd: null,
-      data: [],
+      data: [
+        { name: "Speedmaster CX 104-8+LYYL", x: 0, y: 0 },
+        { name: "Speedmaster XL 75-7+L", x: 0, y: 0 },
+        { name: "Speedmaster SX 102-4-P", x: 0, y: 0 },
+        { name: "Digital Factory", x: 0, y: 0 },
+        { name: "Prinect Center", x: 0, y: 0 },
+        { name: "Polar Cutting System 300", x: 0, y: 0 },
+        { name: "Stahlfolder KH 82-P", x: 0, y: 0 },
+        { name: "Versafire EP", x: 0, y: 0 },
+        { name: "Versafire EV", x: 0, y: 0 },
+        { name: "Suprasetter 106", x: 0, y: 0 },
+        { name: "Lifecycle", x: 0, y: 0 },
+        { name: "Training", x: 0, y: 0 },
+        { name: "Consultancy", x: 0, y: 0 },
+        { name: "Gallus", x: 0, y: 0 },
+        { name: "Financial Service", x: 0, y: 0 },
+        { name: "Livestreaming Room", x: 0, y: 0 },
+      ],
     };
   },
   computed: {},
@@ -43,10 +63,33 @@ export default {
 .mapSvgEn {
   width: 100%;
   height: 100%;
+  padding-left: 40px;
   .svgImg {
     width: 510px;
     height: 511px;
     margin: 50px auto;
   }
+  .listBox {
+    width: 100%;
+    height: calc(100% - 620px);
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    .row {
+      width: 30%;
+      margin-right: 3%;
+      margin-bottom: 10px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      font-size: 16px;
+      color: #fff;
+      border-radius: 20px;
+      border: 1px solid #fff;
+      &:nth-of-type(3n) {
+        margin-right: 0;
+      }
+    }
+  }
 }
 </style>