fix:修改字体、图标、背景、阴影问题

ZhangXianQiang

2024-03-05 5300255dd40ac2ed67676da5568f0e4fd25a7078

 src/views/daoAnOffice/center/map.vue

@@ -2,7 +2,7 @@
  <div class="map-container">
    <div class="map-content" id="map" ref="map"></div>


    <div class="shadow"></div>
    <!-- 图标菜单 -->
    <div class="info-box">
      <!--      right菜单-->
@@ -35,6 +35,16 @@

import { require } from '@/utils/require.js';

import icon1 from '@/assets/img/icon/icon1.png';
import icon2 from '@/assets/img/icon/icon2.png';
import icon3 from '@/assets/img/icon/icon3.png';
import icon4 from '@/assets/img/icon/icon4.png';
import icon5 from '@/assets/img/icon/icon5.png';
import icon6 from '@/assets/img/icon/icon6.png';
import icon7 from '@/assets/img/icon/icon7.png';
import icon8 from '@/assets/img/icon/icon8.png';
import icon9 from '@/assets/img/icon/icon9.png';


const map = ref(null);
let mapInstance = null;
@@ -53,7 +63,7 @@
    name: '事故易发多发路段',
    num: 78,
    type: 1,
    icon: require('@/assets/img/sgyfd.png'),
    icon: icon1,
    positions: [[103.647593, 30.981856], [103.646627, 30.988235], [103.650077, 30.988074]],
    isActive: false
  },
@@ -63,7 +73,7 @@
    type: 2,
    num: 178,
    positions: [[103.647888, 30.985006], [103.650983, 30.986252], [103.641461, 30.984588]],
    icon: require('@/assets/img/zdlytd.png'),
    icon: icon2,
    isActive: false
  },
  {
@@ -72,7 +82,7 @@
    num: 278,
    positions: [[103.637916, 30.986298], [103.636751, 30.989508], [103.64093, 30.99344]],
    type: 3,
    icon: require('@/assets/img/djyjq.png'),
    icon: icon3,
    isActive: false
  },
  {
@@ -81,7 +91,7 @@
    num: 348,
    positions: [[103.646413, 30.996714], [103.634337, 31.0026], [103.620841, 31.001253]],
    type: 4,
    icon: require('@/assets/img/jlpb.png'),
    icon: icon4,
    isActive: false
  },
  {
@@ -90,7 +100,7 @@
    num: 578,
    positions: [[103.62134, 30.996972], [103.622005, 30.991923], [103.63062, 30.986588]],
    type: 5,
    icon: require('@/assets/img/dwsg.png'),
    icon: icon5,
    isActive: false
  },
  {
@@ -99,7 +109,7 @@
    num: 788,
    positions: [[103.640319, 30.984486], [103.644916, 30.986956], [103.646853, 30.992143]],
    type: 1,
    icon: require('@/assets/img/jtysqy.png'),
    icon: icon6,
    isActive: false
  },
  {
@@ -108,7 +118,7 @@
    num: 758,
    positions: [[103.651482, 30.995956], [103.639654, 30.995206], [103.631119, 30.987425]],
    type: 7,
    icon: require('@/assets/img/zdlytd.png'),
    icon: icon7,
    isActive: false
  },
  {
@@ -117,7 +127,7 @@
    num: 758,
    positions: [[103.652716, 30.974745], [103.668166, 30.976447], [103.672511, 30.979961]],
    type: 8,
    icon: require('@/assets/img/gjxl.png'),
    icon: icon8,
    isActive: false
  },
  {
@@ -126,7 +136,7 @@
    num: 718,
    positions: [[103.674056, 30.988625], [103.668155, 30.996379], [103.660333, 30.998098]],
    type: 9,
    icon: require('@/assets/img/aqyh.png'),
    icon: icon9,
    isActive: false
  },

@@ -167,9 +177,9 @@
// 创建图标
const createIcon = (img) => {
  return new AMap.Icon({
    size: new AMap.Size(34, 41),    // 图标尺寸
    // size: new AMap.Size(43.8, 49.2),    // 图标尺寸
    image: img,  // Icon的图像
    imageSize: new AMap.Size(34, 41)   // 根据所设置的大小拉伸或压缩图片
    imageSize: new AMap.Size(43.8, 49.2)   // 根据所设置的大小拉伸或压缩图片
  });
}

@@ -249,6 +259,7 @@
  height: 100%;
  position: absolute;
  z-index: 0;
  box-shadow: inset 0px 0px 100px 18px #081729;

  .map-content {
    width: 100%;
@@ -272,7 +283,8 @@

  .item-tb-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 5px;
  }

  .info-div-p {
@@ -317,11 +329,30 @@
  cursor: pointer;

  .item-tb-p {
    font-family: PingFang SC;
    font-family: 'PingFang SC';

    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 42px;
  }
}

.shadow {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  box-shadow: inset 0px 0px 100px 120px #081729;
  pointer-events: none;
}

:deep(.amap-logo) {
  display: none !important;
}

:deep(.amap-copyright) {
  visibility: hidden !important;
}
</style>