151 lines
3.6 KiB
Vue
151 lines
3.6 KiB
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',
|
|
label: '入住信息',
|
|
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
menuName: {default: "入住信息"}
|
|
},
|
|
|
|
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 marker = new AMap.Marker({
|
|
position: map.getCenter(),
|
|
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
|
offset: new AMap.Pixel(-13, -30)
|
|
});
|
|
marker.setMap(map);
|
|
marker.setTitle('水韵酒店');
|
|
marker.setLabel({
|
|
offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
|
|
content: "<div class='info'>水韵酒店</div>", //设置文本标注内容
|
|
direction: 'right' //设置文本标注方位
|
|
});
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.AppCheckInfo {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-image: url("./img/detail-bg.png");
|
|
background-size: 100% 100%;
|
|
padding: 16px 0 64px 0;
|
|
overflow: auto;
|
|
.home-content {
|
|
height: 100%;
|
|
width: calc(100% - 32px);
|
|
margin: 0 16px;
|
|
background: #FFF;
|
|
border-radius: 12px;
|
|
.check-info {
|
|
padding: 46px 18px 20px 18px;
|
|
.item {
|
|
margin-bottom: 20px;
|
|
.title {
|
|
line-height: 22px;
|
|
font-family: PingFangSC-SNaNpxibold;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: #222;
|
|
margin-bottom: 6px;
|
|
img {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
vertical-align: middle;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
p {
|
|
line-height: 25px;
|
|
font-family: PingFangSC-Regular;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
color: #999;
|
|
padding-left: 24px;
|
|
}
|
|
}
|
|
}
|
|
.map-info {
|
|
padding: 0 16px;
|
|
width: 100%;
|
|
height: 205px;
|
|
}
|
|
.bottom-bg {
|
|
height: calc(100% - 350px);
|
|
width: 100%;
|
|
background-image: url("./img/bottom-bg.png");
|
|
background-size: 100% 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|