湖里大屏(数字工地)：新增建筑总览全部点位按钮

src/views/projectAdmin/jlw/digitalSite/centerTop.vue

@@ -1,7 +1,7 @@
 <template>
   <Card :title="title">
     <div class="pane">
-      <div class="point "></div>
+      <div class="point" :class="`i-${point}`" v-for="(point, index) in points" :key="index"></div>
     </div>
     <div class="tabs">
       <div class="tab" :class="{ checked: index === tabIndex }" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
@@ -32,16 +32,85 @@ export default {
     changeTab(index) {
       this.tabIndex = index
     }
+  },
+  computed: {
+    points() {
+      return ['tower-crane', 'elevator', 'video', 'environment', 'gate'].map(tab => [tab, tab]).flat()
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .pane {
+  position: relative;
   margin: 0 20px;
   height: 80%;
   background: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/bg-all.png') no-repeat;
   background-size: 100%;
+  .point {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    &.i-tower-crane {
+      background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-tower-crane.png');
+    }
+    &.i-elevator {
+      background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-elevator.png');
+    }
+    &.i-video {
+      background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-video.png');
+    }
+    &.i-environment {
+      background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-environment.png');
+    }
+    &.i-gate {
+      background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-gate.png');
+    }
+    &:nth-child(1) {
+      top: 530px;
+      left: 300px;
+    }
+    &:nth-child(2) {
+      top: 150px;
+      left: 600px;
+    }
+    &:nth-child(3) {
+      top: 250px;
+      left: 220px;
+    }
+    &:nth-child(4) {
+      top: 100px;
+      left: 490px;
+    }
+    &:nth-child(5) {
+      top: 370px;
+      left: 170px;
+    }
+    &:nth-child(6) {
+      top: 260px;
+      left: 660px;
+    }
+    &:nth-child(7) {
+      top: 190px;
+      left: 370px;
+    }
+    &:nth-child(8) {
+      top: 530px;
+      left: 460px;
+    }
+    &:nth-child(9) {
+      top: 450px;
+      left: 670px;
+    }
+    &:nth-child(10) {
+      top: 480px;
+      left: 150px;
+    }
+  }
 }
 .tabs {
   height: 20%;