公司端首页地图-提交

src/views/vent/home/clique/components/icon-light.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="icon-light">
+        <div class="icon-point" v-for="(item, index) in pointList" :key="index"
+            :style="{ left: item.leftV, top: item.topV }">
+            <img :src="item.imgSrc" alt="">
+            <span :style="{ color: item.textColor }">{{ item.label }}</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { getAssetURL } from '/@/utils/ui';
+
+let pointList = reactive<any[]>([
+    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '柳塔矿', leftV: '327px', topV: '40px', textColor: '#fff' },
+    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '寸草塔二矿', leftV: '291px', topV: '69px', textColor: '#fff' },
+    { imgSrc: getAssetURL('company/select-bg.png'), label: '布尔台矿', leftV: '286px', topV: '97px', textColor: 'rgba(255, 231, 83,.9)' },
+    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '乌兰木伦矿', leftV: '327px', topV: '115px', textColor: '#fff' },
+    { imgSrc: getAssetURL('company/select-bg.png'), label: '寸草塔矿', leftV: '346px', topV: '132px', textColor: 'rgba(255, 231, 83,.9)' },
+    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '石坎台矿', leftV: '373px', topV: '149px', textColor: '#fff' },
+    { imgSrc: getAssetURL('company/select-bg.png'), label: '补连塔矿', leftV: '408px', topV: '184px', textColor: 'rgba(255, 231, 83,.9)' },
+    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '哈拉沟矿', leftV: '445px', topV: '214px', textColor: '#fff' },
+    { imgSrc: getAssetURL('company/select-bg.png'), label: '上湾矿', leftV: '439px', topV: '244px', textColor: 'rgba(255, 231, 83,.9)' },
+    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '活鸡兔井', leftV: '398px', topV: '265px', textColor: '#fff' },
+    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '大柳塔矿', leftV: '492px', topV: '260px', textColor: '#fff' },
+    { imgSrc: getAssetURL('company/select-bg.png'), label: '锦界矿', leftV: '565px', topV: '413px', textColor: 'rgba(255, 231, 83,.9)' },
+    { imgSrc: getAssetURL('company/unselect-bg.png'), label: '榆家梁矿', leftV: '669px', topV: '308px', textColor: '#fff' },
+    { imgSrc: getAssetURL('company/select-bg.png'), label: '宝德矿', leftV: '862px', topV: '340px', textColor: 'rgba(255, 231, 83,.9)' },
+])
+
+</script>
+
+<style lang="less" scoped>
+.icon-light {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .icon-point {
+        display: flex;
+        align-items: center;
+        position: absolute;
+
+        img {
+            width: 35px;
+            height: 35px;
+            cursor: pointer;
+        }
+
+        span {
+            font-size: 12px;
+            padding: 0px 5px;
+            background-color: rgba(12, 13, 13);
+        }
+    }
+}
+</style>

src/views/vent/home/clique/index.vue

@@ -17,6 +17,12 @@
           </div>
         </div>
         <div class="center-area">
+          <!-- 地图底图 -->
+          <div class="center-bg">
+            <div class="bg-map">
+              <iconLight></iconLight>
+            </div>
+          </div>
           <!-- 榆家梁矿 -->
           <!-- <div class="area-card2">
             
@@ -47,6 +53,7 @@
   import fileShare from './components/file-share.vue';
   import windRoad from './components/wind-road.vue';
   import sceneKey from './components/scene-key.vue';
+  import iconLight from './components/icon-light.vue'
   // import mapComponent from './components/3Dmap/index.vue';
 
   let mainTitle = ref('国家能源神东煤炭集团');
@@ -70,6 +77,8 @@
     width: 100%;
     height: 100%;
     position: relative;
+    background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
+    background-size: 100% 100%;
 
     .top-bg {
       width: 100%;
@@ -138,6 +147,22 @@
           width: calc(54% - 30px);
           height: 100%;
           position: relative;
+          .center-bg{
+            position: absolute;
+            bottom: 269px;
+            left: 50%;
+            transform: translate(-50%,0);
+            height: calc(100% - 325px);
+            width: 100%;
+            background: url('../../../../assets/images/company/home-dz.png') no-repeat center;
+            background-position: 50% 90%;
+            .bg-map{
+              width: 100%;
+              height: 100%;
+              background: url('../../../../assets/images/company/home-map.png') no-repeat center;
+              background-size: 100% 100%;
+            }
+          }
           .area-card2 {
             position: absolute;
             right: 0;