|
|
|
@ -2,32 +2,16 @@ |
|
|
|
<!-- 全域旅游 --> |
|
|
|
<div class="eb-container" ref="appRef"> |
|
|
|
<MainTitle class="title" :title="title"></MainTitle> |
|
|
|
<gis-map |
|
|
|
ref="gisMapRef" |
|
|
|
class="gismap" |
|
|
|
|
|
|
|
pointType="全域旅游" |
|
|
|
:point-list="dataList" |
|
|
|
@currentPoint="currentPointFn" |
|
|
|
:lngLat="lngLat" |
|
|
|
list-item-key="name" |
|
|
|
> |
|
|
|
<gis-map ref="gisMapRef" class="gismap" pointType="全域旅游" :point-list="dataList" @currentPoint="currentPointFn" |
|
|
|
:lngLat="lngLat" list-item-key="name"> |
|
|
|
<template v-slot:content> |
|
|
|
<div class="center-window"> |
|
|
|
<div |
|
|
|
class="top-title" |
|
|
|
v-for="(item, index) in iconList" |
|
|
|
@click="changeType(item, index)" |
|
|
|
> |
|
|
|
<div class="top-title" v-for="(item, index) in iconList" @click="changeType(item, index)"> |
|
|
|
<img :src="item.icon" /> |
|
|
|
<div class="text"> |
|
|
|
<p class="text-name">{{ item.label }}</p> |
|
|
|
<p class="text-type"> |
|
|
|
<CountTo |
|
|
|
:startVal="0" |
|
|
|
:endVal="item.count" |
|
|
|
:duration="2000" |
|
|
|
/> |
|
|
|
<CountTo :startVal="0" :endVal="item.count" :duration="2000" /> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -38,16 +22,9 @@ |
|
|
|
</div> |
|
|
|
<div class="content-info"> |
|
|
|
<div class="content-inof-list"> |
|
|
|
<div |
|
|
|
class="content-info-item" |
|
|
|
v-for="(item, index) in travleList" |
|
|
|
:key="index" |
|
|
|
@click="selectTravelInfoById(item.id, item)" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="content-info-item-title" |
|
|
|
style="font-size: 20px; color: #fff" |
|
|
|
> |
|
|
|
<div class="content-info-item" v-for="(item, index) in travleList" :key="index" |
|
|
|
@click="selectTravelInfoById(item.id, item)"> |
|
|
|
<div class="content-info-item-title" style="font-size: 20px; color: #fff"> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -61,29 +38,20 @@ |
|
|
|
<div class="content-info"> |
|
|
|
<!-- title --> |
|
|
|
<div class="content-info-title"> |
|
|
|
<span |
|
|
|
style=" |
|
|
|
<span style=" |
|
|
|
font-size: 24px; |
|
|
|
color: #fff; |
|
|
|
font-weight: bold; |
|
|
|
" |
|
|
|
>{{ detailInfo.name }}</span |
|
|
|
> |
|
|
|
">{{ detailInfo.name }}</span> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">{{ |
|
|
|
typeList[detailInfo.type] |
|
|
|
}}</span> |
|
|
|
</div> |
|
|
|
<!-- content --> |
|
|
|
<div |
|
|
|
class="content-info-content" |
|
|
|
style="margin-top: 20px" |
|
|
|
> |
|
|
|
<span style="font-size: 24px; color: #fff" |
|
|
|
>基础信息</span |
|
|
|
> |
|
|
|
<div class="content-info-content" style="margin-top: 20px"> |
|
|
|
<span style="font-size: 24px; color: #fff">基础信息</span> |
|
|
|
<div style="margin-top: 10px" v-if="detailInfo.address"> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>地址: |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">地址: |
|
|
|
</span> |
|
|
|
<span style="font-size: 18px; color: #fff">{{ |
|
|
|
detailInfo.address |
|
|
|
@ -91,8 +59,7 @@ |
|
|
|
</div> |
|
|
|
<!-- 工作时间 --> |
|
|
|
<div style="margin-top: 10px" v-if="detailInfo.openHours"> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>工作时间: |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">工作时间: |
|
|
|
</span> |
|
|
|
<span style="font-size: 18px; color: #fff">{{ |
|
|
|
detailInfo.openHours |
|
|
|
@ -100,8 +67,7 @@ |
|
|
|
</div> |
|
|
|
<!-- 简介 --> |
|
|
|
<div style="margin-top: 10px" v-if="detailInfo.remark"> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>简介: |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">简介: |
|
|
|
</span> |
|
|
|
<span style="font-size: 18px; color: #fff">{{ |
|
|
|
detailInfo.remark |
|
|
|
@ -109,29 +75,18 @@ |
|
|
|
</div> |
|
|
|
<!-- 图片 --> |
|
|
|
<div style="margin-top: 10px" v-if="detailInfo.coverImage"> |
|
|
|
<span style="font-size: 18px; color: #c9c9c9" |
|
|
|
>图片: |
|
|
|
<span style="font-size: 18px; color: #c9c9c9">图片: |
|
|
|
</span> |
|
|
|
<img |
|
|
|
:src="detailInfo.coverImage" |
|
|
|
alt="" |
|
|
|
style="width: 100%; height: 200px" |
|
|
|
/> |
|
|
|
<img :src="detailInfo.coverImage" alt="" style="width: 100%; height: 200px" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
<div style=" |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 20px; |
|
|
|
" |
|
|
|
> |
|
|
|
<Button |
|
|
|
type="text" |
|
|
|
class="text-button" |
|
|
|
@click=" |
|
|
|
"> |
|
|
|
<Button type="text" class="text-button" @click=" |
|
|
|
openLineOrPlayAudio(detailInfo.type) |
|
|
|
" |
|
|
|
> |
|
|
|
"> |
|
|
|
{{ |
|
|
|
detailInfo.type == 4 |
|
|
|
? "播放音频" |
|
|
|
@ -141,13 +96,8 @@ |
|
|
|
}} |
|
|
|
</Button> |
|
|
|
<!-- 音频播放 --> |
|
|
|
<audio |
|
|
|
ref="audioRef" |
|
|
|
class="audio-controls" |
|
|
|
v-if="detailInfo.type == 4" |
|
|
|
:src="detailInfo.audioList" |
|
|
|
controls |
|
|
|
></audio> |
|
|
|
<audio ref="audioRef" class="audio-controls" v-if="detailInfo.type == 4" |
|
|
|
:src="detailInfo.audioList" controls></audio> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -160,15 +110,8 @@ |
|
|
|
|
|
|
|
<commonModal v-model="lineVisible" title="相关路线" width="600"> |
|
|
|
<div class="line-box"> |
|
|
|
<div |
|
|
|
class="line-item" |
|
|
|
v-for="(item, index) in lineList" |
|
|
|
@click="openLine(item)" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<span class="line-title" |
|
|
|
>线路名称：{{ item.lineName }}</span |
|
|
|
> |
|
|
|
<div class="line-item" v-for="(item, index) in lineList" @click="openLine(item)" :key="index"> |
|
|
|
<span class="line-title">线路名称：{{ item.lineName }}</span> |
|
|
|
<div class="line-content"> |
|
|
|
<span>线路途经：{{ item.lineText }}</span> |
|
|
|
</div> |
|
|
|
@ -619,6 +562,7 @@ export default { |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
background-image: linear-gradient(90deg, |
|
|
|
#12181f 0%, |
|
|
|
@ -736,9 +680,12 @@ export default { |
|
|
|
width: 80px; |
|
|
|
font-size: 16px; |
|
|
|
display: inline-block; |
|
|
|
overflow: hidden; /*超出部分隐藏*/ |
|
|
|
white-space: nowrap; /*禁止换行*/ |
|
|
|
text-overflow: ellipsis; /*省略号*/ |
|
|
|
overflow: hidden; |
|
|
|
/*超出部分隐藏*/ |
|
|
|
white-space: nowrap; |
|
|
|
/*禁止换行*/ |
|
|
|
text-overflow: ellipsis; |
|
|
|
/*省略号*/ |
|
|
|
} |
|
|
|
|
|
|
|
.text-type { |
|
|
|
|
