dvcp_v2_wxcp_app/src/project/wuxi/AppMeeting/AppCheckInfo.vue

<template>
  <div class="AppCheckInfo">
    <div class="home-content">
      <div class="check-info">
        <div class="item">
          <div class="title">
            <img src="./img/time-icon.png" alt="">入住时间
          </div>
          <p>2024年4月23日至2024年4月24日</p>
        </div>
        <div class="item">
          <div class="title">
            <img src="./img/hotel-icon.png" alt="">入住酒店
          </div>
          <p>水韵酒店</p>
        </div>
        <div class="item">
          <div class="title">
            <img src="./img/address-icon.png" alt="">酒店地址
          </div>
          <p>春申大道421号</p>
        </div>
      </div>
      <div class="map-info">
        <!-- <ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" /> -->
        <!-- <ai-map class="eventMap" :map.sync="map" :lib.sync="AMap"/> -->
        <div id="map" style="width: 100%; height: 280px;"></div>
        <!-- <ai-map :map.sync="map" :lib.sync="AMap"/> -->
      </div>
      <div class="bottom-bg"></div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'CheckInfo',
  appName: '入住信息',

  data() {
    return {
      map: null,
      AMap: null,
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },

  methods: {
    initMap() {
      AMapLoader.load({
        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
        version: '2.0',
        plugins: ['AMap.Geocoder'],
      }).then(AMap => {
        let map = new AMap.Map('map', {
          resizeEnable: true,
          center: [109.559364, 31.39439],
          zoom: 18,
        })
        var icon = new AMap.Icon({
          image: "https://cdn.cunwuyun.cn/dvcp/h5/Location2.png",
          size: new AMap.Size(24, 24)
        });
        var marker = new AMap.Marker({
          position: map.getCenter(),
          icon: icon,
          offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
        marker.setTitle('水韵酒店');
        marker.setLabel({
          offset: new AMap.Pixel(-5, 0),  //设置文本标注偏移量
          content: "<div class='info'>水韵酒店</div>", //设置文本标注内容
          direction: 'top' //设置文本标注方位
        });
      })
    },
  }
}
</script>

<style lang="scss" scoped>
uni-page-body{
  height: 100%;
}
.AppCheckInfo {
  height: 100%;
  width: 100%;
  background-image: url("./img/detail-bg.png");
  background-size: 100% 100%;
  padding: 32px 0 128px 0;
  overflow: auto;
  box-sizing: border-box;
  .home-content {
    height: 100%;
    width: calc(100% - 64px);
    margin: 0 32px;
    background: #FFF;
    border-radius: 24px;
    .check-info {
      padding: 92px 36px 40px 36px;
      .item {
        margin-bottom: 40px;
        .title {
          line-height: 44px;
          font-family: PingFangSC-SNaNpxibold;
          font-weight: 600;
          font-size: 32px;
          color: #222;
          margin-bottom: 12px;
          img {
            display: inline-block;
            width: 36px;
            height: 36px;
            vertical-align: middle;
            margin-right: 12px;
          }
        }
        p {
          line-height: 50px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 36px;
          color: #999;
          padding-left: 48px;
        }
      }
    }
    .map-info {
      padding: 0 32px;
      width: calc(100% - 64px);
      height: 510px;
    }
    .bottom-bg {
      height: calc(100% - 700px);
      width: 100%;
      background-image: url("./img/bottom-bg.png");
      background-size: 100% 100%;
      position: fixed;
      bottom: 0;
      left: 0;
    }
  }

  ::v-deep .amap-icon {
    img {
      width: 100%;
      height: 100%;
    }
  }

  ::v-deep .amap-marker-label {
    border: 1px solid #fff;
    font-size: 28px;
    line-height: 48px;
    padding: 0 16px;
    border-radius: 4px;
  }
 
}
</style>