Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
eb9362e8 1 parent aaaf152f

弹出框详情样式调整

Inline Side-by-side
Showing 2 changed files with 198 additions and 93 deletions
<template>
<div style="position: relative;">
<div class="info-window-wrapper">
<div class="t-popup-content">
<div class="popup-content" style="height: 13.5rem;">
<div style="position: relative;">
<h3 class="view-name">三宝楼</h3>
<van-icon @click="close" name="cross" size="1.25rem"
style="position: absolute; right: 0.75rem; top: 0.75rem;" />
</div>
<img class="view-photo"
src="https://img0.baidu.com/it/u=3974116483,397969091&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=496">
<p class="introduction" style="padding: 0.5rem; padding-bottom: 0;">尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......</p>
<div v-if="!is_play" @click="play()" class="control-play" style="text-align: center;">
<van-icon name="play-circle-o" size="2rem" color="#FFF" style="margin-top: 0.5rem;" />
</div>
<div v-else @click="pause()" class="control-play" style="text-align: center;">
<van-icon name="pause-circle-o" size="2rem" color="#FFF" style="margin-top: 0.5rem;" />
<div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
<div style="color: #AB8F57; font-size: 1.5rem; margin-bottom: 0.5rem;">三宝楼</div>
<div>
<div class="info-text van-multi-ellipsis--l3">
大雄宝殿是寺院的中心建筑，兴建于清末民初时期。重檐歇山，面阔七楹，飞檐翘角，气势雄伟，风格挺秀。梁枋均施苏式彩绘，典雅富丽，绚丽夺目。
大殿二重檐下，悬“大雄宝殿”四个遒劲有力的金字，气势雄浑，据说这四个字是陆润庠所提。陆润庠是苏州历史上第五十五位，也是最后一位状元，官至一品、大学士(即宰相级别)。大雄宝殿是佛教寺院中供奉佛像的正殿，是整座寺院的核心建筑，也是僧众朝暮集中修持的地方。因释迦牟尼佛德号“大雄”，所以称大雄宝殿。为什么叫大雄？大者，是包含万有的意思；雄者，是摄伏群魔的意思。释迦牟尼佛具足圆觉智慧，能雄镇大千世界，降伏四魔（烦恼魔、阴魔、死魔、自在天魔），因此尊称佛陀为大雄。
檐枋悬有三块匾额，中门之上为“西乾应迹”匾额。西者西方，乾者天也，西乾即是指佛教的发源地古印度，因当时地处中国的西方而得名，相应地，中国则被称为东土。应迹谓应化垂迹，即佛、菩萨应众生之机缘而将其本体示现种种身以济度众生。
</div>
<div @click="showDetail" class="show-details" style="color: white; text-align: center; line-height: 3rem;">详情
<div class="info-control">
<div v-if="!is_play" @click="play()" class="control-play">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
color="#FFF" style="margin-top: 0.5rem;" />
</div>
<div v-else @click="pause()" class="control-play" style="text-align: center;">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE@2x.png" size="3rem" color="#FFF"
style="margin-top: 0.5rem;" />
</div>
<div>{{ play_time }}</div>
</div>
</div>
</div>
<div class="van-hairline--top" style="margin: 1rem 0;">
<div style="width: 50%; float: left; text-align: center; margin-top: 1rem;" class="van-hairline--right">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<span style="color: #AB8F57; font-size: 1.1rem;">详情</span>
</div>
<div style="width: 50%; float: left; text-align: center; margin-top: 1rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<span style="color: #AB8F57; font-size: 1.1rem;">前往</span>
</div>
</div>
</div>
<div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
<div class="leaflet-popup-tip"></div>
......@@ -54,6 +69,35 @@ export default {
title: {
type: String,
default: ''
},
rect: {
type: Object,
default: () => { }
},
},
mounted() {
},
watch: {
rect(val) {
this.widow_info = val;
},
infoWindow(val) {
if (val) {
// 加载录音
this.audio.src = 'https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8';
let play_status = this.audio.play() // 播放
if (play_status) {
play_status.then(() => {
// 音频的播放需要耗时
this.audio.pause();
this.play_time = this.getAudioTime(this.audio.duration)
}).catch((e) => {
// 失败
console.log('Operation is too fast, audio play fails')
})
}
}
}
},
data() {
......@@ -64,10 +108,36 @@ export default {
video_src: '',
ind: '',
is_play: false,
audio: new Audio()
audio: new Audio(),
widow_info: {},
play_time: '00:00'
}
},
methods: {
getAudioTime (audio) {
let time = Math.floor(audio);
var minute = time / 60;
var minutes = parseInt(minute);
if (minutes < 10) {
minutes = "0" + minutes;
}
//秒
var second = time % 60;
var seconds = Math.round(second);
if (seconds < 10) {
seconds = "0" + seconds;
}
return `${minutes}:${second}`;
},
calculateCurrentValue(currentTime) {
var current_hour = parseInt(currentTime / 3600) % 24,
current_minute = parseInt(currentTime / 60) % 60,
current_seconds_long = currentTime % 60,
current_seconds = current_seconds_long.toFixed(),
current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
return current_time;
},
// 关闭
close() {
// 高德地图信息窗关闭的api
......@@ -82,17 +152,16 @@ export default {
this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
},
play () {
play() {
this.voice_play('https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8', 0)
},
pause () {
pause() {
this.voice_pause()
},
// 声音播放
voice_play(src, index) {
this.audio.src = src
if (this.ind) {
// audio.pause(); //暂停
this.audio.currentTime = 0
this.ind = 0
return
......@@ -103,18 +172,21 @@ export default {
this.is_play = true;
play_status.then(() => {
// 音频加载成功
// 音频的播放需要耗时
console.log(this.audio.duration)
setTimeout(() => { // 后续操作(同为播放完成)
this.ind = 0
}, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒
setInterval(() => {
this.play_time = this.calculateCurrentValue(this.audio.duration - this.audio.currentTime)
}, 1000);
}).catch((e) => {
// 失败
console.log('Operation is too fast, audio play fails')
})
}
},
voice_pause () {
voice_pause() {
this.audio.pause();
this.is_play = false;
}
......@@ -129,79 +201,103 @@ export default {
-webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
text-align: left;
border-radius: 12px;
padding: 0;
.t-popup-content {
position: relative;
width: 25rem;
padding: 0;
margin: 0;
border-radius: 0.1rem;
background: rgba(255, 255, 255, 0.9);
-webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
line-height: 1.4;
.view-name {
margin: 0;
padding: 0.5rem;
width: 25rem;
height: 2.5rem;
font-size: 1.2rem;
text-indent: 0.2rem;
white-space: nowrap;
text-overflow: ellipsis;
color: #5b5b5b;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: solid 1px #e8e8e8;
border-radius: 0.1rem 0.1rem 0 0;
background: #f7f7f7;
overflow: hidden;
}
border-radius: 5px;
padding: 1rem 1.25rem;
overflow: auto;
.view-photo {
display: block;
float: left;
margin: 0.5rem;
height: 100%;
width: 9rem;
height: 9rem;
border-radius: 3px;
}
.info-text {
width: 80%;
line-height: 1.5;
float: left;
color: #7A6C6C;
}
.introduction {
float: left;
margin: 0.2rem 0;
width: 13.5rem;
height: 6.75rem;
font-size: 0.9rem;
color: #202020;
overflow: hidden;
}
.info-control {
width: 20%;
float: left;
text-align: center;
color: #AB8F57;
.control-play {
display: block;
float: left;
margin-right: 0.5rem;
width: 7rem;
height: 3rem;
border-radius: 2px;
background: #ffdd02 center no-repeat;
background-size: 6.5rem 3rem;
}
text-align: center;
margin-bottom: 0.5rem;
.show-details {
display: block;
float: left;
width: 7rem;
height: 3rem;
border-radius: 2px;
background: #9196a9 center no-repeat;
background-size: 6.5rem 3rem;
i {
margin-top: 0 !important;
}
}
}
// .t-popup-content {
// position: relative;
// width: 25rem;
// padding: 0;
// margin: 0;
// border-radius: 0.1rem;
// background: rgba(255, 255, 255, 0.9);
// -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
// box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
// line-height: 1.4;
// .view-name {
// margin: 0;
// padding: 0.5rem;
// width: 25rem;
// height: 2.5rem;
// font-size: 1.2rem;
// text-indent: 0.2rem;
// white-space: nowrap;
// text-overflow: ellipsis;
// color: #5b5b5b;
// -webkit-box-sizing: border-box;
// box-sizing: border-box;
// border-bottom: solid 1px #e8e8e8;
// border-radius: 0.1rem 0.1rem 0 0;
// background: #f7f7f7;
// overflow: hidden;
// }
// .view-photo {
// display: block;
// float: left;
// margin: 0.5rem;
// height: 100%;
// width: 9rem;
// height: 9rem;
// border-radius: 3px;
// }
// .introduction {
// float: left;
// margin: 0.2rem 0;
// width: 13.5rem;
// height: 6.75rem;
// font-size: 0.9rem;
// color: #202020;
// overflow: hidden;
// }
// // .control-play {
// // display: block;
// // float: left;
// // margin-right: 0.5rem;
// // width: 7rem;
// // height: 3rem;
// // border-radius: 2px;
// // background: #ffdd02 center no-repeat;
// // background-size: 6.5rem 3rem;
// // }
// .show-details {
// display: block;
// float: left;
// width: 7rem;
// height: 3rem;
// border-radius: 2px;
// background: #9196a9 center no-repeat;
// background-size: 6.5rem 3rem;
// }
// }
}
.leaflet-popup-tip-container {
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-02 17:37:17
* @LastEditTime: 2023-06-05 11:38:09
* @FilePath: /map-demo/src/views/index.vue
* @Description: 文件描述
-->
<template>
<div style="height: 100vh; position: relative; overflow: hidden;">
<div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
<div id="container"></div>
<div class="nav-bar-wrapper">
<div class="hideScrollBar"
......@@ -92,7 +92,7 @@
<!-- 自定义组件InfoWindow，初始时需要隐藏 -->
<!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
<InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle"></InfoWindow>
<InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle" :rect="rect"></InfoWindow>
</div>
</template>
......@@ -105,6 +105,7 @@ import _ from 'lodash';
import $ from 'jquery';
//引入定义的信息窗组件
import InfoWindow from '@/components/InfoWindow'
import { useRect } from '@vant/use';
const GPS = {
PI: 3.14159265358979324,
......@@ -215,7 +216,8 @@ export default {
showInfoWindow: false,
infoWindow: {},
infoWindowTitle: '',
navBarList: []
navBarList: [],
rect: {}
}
},
mounted() {
......@@ -252,6 +254,13 @@ export default {
$('.vjs-tech')[0].currentTime = 0;
})
}
},
showInfoWindow (val) {
if (val) {
// 元素的大小及其相对于视口的位置
const rect = useRect(this.$refs.root);
this.rect = rect;
}
}
},
methods: {
......