parent
1f0030a92b
commit
218b4f1169
@ -0,0 +1,169 @@ |
||||
<template> |
||||
<view class=""> |
||||
<view class="top box"> |
||||
<view class="img-play"> |
||||
<image style="width: 100%; height: 100%; background-color: #eeeeee" :mode="item.mode" :src="baseUrl + datas.imgsl"></image> |
||||
<view class="play-stop" v-if="plays && datas.voiceurl" @click="play(datas.voiceurl)"> |
||||
<image style="width: 50rpx; height: 50rpx; padding: 10rpx" src="../../static/img/icon_play.png"></image> |
||||
</view> |
||||
<view class="play-stop" v-if="!plays" @click="pause()"><image style="width: 50rpx; height: 50rpx; padding: 10rpx" src="../../static/img/icon_stop.png"></image></view> |
||||
</view> |
||||
<view class="top-right"> |
||||
<view class="sencien-name">{{ datas.cname }}</view> |
||||
<view class="sencien-type">{{ datas.typename }}</view> |
||||
<view class="sencien-price">门票:{{ datas.ticketprice }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="content box"> |
||||
<view class="box-title">景区简介</view> |
||||
<mp-html :content="datas.content"></mp-html> |
||||
</view> |
||||
<view class="picture box"> |
||||
<view class="box-title">景点图集</view> |
||||
<view class="img-box" v-for="(item, index) in imgs"> |
||||
<image class="img" :src="baseUrl + item"></image> |
||||
</view> |
||||
</view> |
||||
<view class="bottom box"> |
||||
<view> |
||||
<uni-icons class="icn" type="location" size="20" color="#989898"></uni-icons> |
||||
{{ datas.addr }} |
||||
</view> |
||||
<view> |
||||
<!-- <uni-icons class="icn" type="eye" size="20" color="#989898"></uni-icons> --> |
||||
<span class="iconfont"></span> |
||||
{{ datas.opentime }} |
||||
</view> |
||||
<view @click="callPhone('tel')"> |
||||
<uni-icons class="icn" type="phone" size="20" color="#989898"></uni-icons> |
||||
{{ datas.tel }} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
datas: null, |
||||
imgs: null, |
||||
baseUrl: this.$config.ROOTPATH, |
||||
plays: true |
||||
}; |
||||
}, |
||||
onLoad(options) { |
||||
console.log(options); |
||||
this.getDetail(options.id); |
||||
}, |
||||
methods: { |
||||
getDetail(val) { |
||||
let this_ = this; |
||||
uni.request({ |
||||
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicinfoById?userkey=' + this.$param.userkey + '&id=' + val, |
||||
method: 'get', |
||||
success: function (res) { |
||||
console.log(res); |
||||
this_.datas = res.data.data[0]; |
||||
} |
||||
}), |
||||
uni.request({ |
||||
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicImgBySid?sid=' + val, |
||||
method: 'get', |
||||
success: function (res) { |
||||
console.log(res); |
||||
this_.imgs = res.data.data.urltj.split(','); |
||||
} |
||||
}); |
||||
}, |
||||
play(val) { |
||||
this.showMp3Title = true; |
||||
this.plays = false; |
||||
uni.playBackgroundAudio({ |
||||
dataUrl: this.$config.ROOTPATH + val |
||||
}); |
||||
}, |
||||
pause() { |
||||
let this_ = this; |
||||
uni.stopBackgroundAudio({ |
||||
success: function () { |
||||
this_.showMp3Title = false; |
||||
this_.plays = true; |
||||
} |
||||
}); |
||||
}, |
||||
callPhone() { |
||||
uni.makePhoneCall({ |
||||
phoneNumber: '03193928888' //仅为示例，并非真实的电话号码 |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.box { |
||||
padding: 20rpx 25rpx 60rpx 25rpx; |
||||
border-bottom: solid 10rpx #d8d8d8; |
||||
} |
||||
.box:last-child { |
||||
border: none; |
||||
} |
||||
.top { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.img-play { |
||||
width: 140rpx; |
||||
height: 140rpx; |
||||
border-radius: 50%; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
.play-stop { |
||||
position: absolute; |
||||
z-index: 9999; |
||||
left: 30%; |
||||
top: 27%; |
||||
} |
||||
.top-right { |
||||
margin-left: 40rpx; |
||||
} |
||||
.sencien-name { |
||||
font-size: 40rpx; |
||||
display: inline-flex; |
||||
} |
||||
.sencien-type { |
||||
text-align: center; |
||||
border-radius: 20rpx; |
||||
color: #5d5d5d; |
||||
padding: 5rpx 10rpx; |
||||
box-shadow: 0 0 2px 2px #b9b9b9; |
||||
display: inline-flex; |
||||
margin-left: 25rpx; |
||||
} |
||||
.sencien-price { |
||||
color: #b31414; |
||||
margin-top: 10rpx; |
||||
} |
||||
.content, |
||||
.picture { |
||||
margin-bottom: 40rpx; |
||||
} |
||||
.img-box { |
||||
margin-bottom: 20rpx; |
||||
} |
||||
.img { |
||||
width: 100%; |
||||
} |
||||
.bottom { |
||||
color: #444; |
||||
} |
||||
.icn { |
||||
margin-right: 15rpx; |
||||
} |
||||
.box-title { |
||||
font-size: 38rpx; |
||||
margin-bottom: 25rpx; |
||||
} |
||||
</style> |
||||
@ -1,57 +1,592 @@ |
||||
<template> |
||||
<web-view :src="daolanurl"></web-view> |
||||
<view> |
||||
<view class="uni-common-mt"> |
||||
<view> |
||||
<map |
||||
id="myMap" |
||||
:scale="scale" |
||||
:latitude="latitude" |
||||
:longitude="longitude" |
||||
:polyline="polylines" |
||||
:markers="covers" |
||||
:min-scale="min" |
||||
:max-scale="max" |
||||
:include-points="cloudPoints" |
||||
:show-location="true" |
||||
@markertap.stop="tryDemo" |
||||
@updated="showsd" |
||||
> |
||||
<cover-view v-show="showMp3Title" class="showMp3Title">正在播放:{{ pointData.voicerealname }}</cover-view> |
||||
<cover-view slot="callout" v-if="showCover && pointData.content" class="customCallout" @click="goDetail(pointData.id)"> |
||||
<view class="close-btn" @tap.stop="closeThis"><uni-icons type="closeempty" size="35"></uni-icons></view> |
||||
<cover-image style="width: 150rpx; height: 150rpx" mode="scaleToFill" :src="baseUrl + pointData.imgsl"></cover-image> |
||||
<cover-view class="content-box"> |
||||
<cover-view class="content-top"> |
||||
<cover-view class="content"> |
||||
{{ pointData.cname }} |
||||
</cover-view> |
||||
</cover-view> |
||||
<cover-view v-if="plays && pointData.voiceurl" @click.stop="play(pointData.voiceurl)" class="play-stop"> |
||||
<cover-image style="width: 30rpx; height: 30rpx; padding: 10rpx" src="../../static/img/icon_play.png"></cover-image> |
||||
<cover-view>语音讲解</cover-view> |
||||
</cover-view> |
||||
<cover-view v-else-if="!plays" @click.stop="pause()" class="play-stop"> |
||||
<cover-image style="width: 30rpx; height: 30rpx; padding: 10rpx" src="../../static/img/icon_stop.png"></cover-image> |
||||
<cover-view>语音讲解</cover-view> |
||||
</cover-view> |
||||
<cover-view v-else="!pointData.voiceurl" class="play-stop no-audio"> |
||||
<cover-view>暂无讲解</cover-view> |
||||
</cover-view> |
||||
<!-- <cover-view class="go-detail">查看详情>>></cover-view> --> |
||||
<!-- <cover-view > --> |
||||
<!-- <mp-html :content="pointData.content"/> --> |
||||
<!-- {{pointData.content.substring(0, 30)}} --> |
||||
<!-- </cover-view> --> |
||||
</cover-view> |
||||
</cover-view> |
||||
<cover-view class="shaixuan"> |
||||
<cover-view class="shaixuan-item" @click="showAllpoint"> |
||||
<cover-image v-if="isAllActive" :src="allIcon"></cover-image> |
||||
<cover-image v-else :src="allIcons"></cover-image> |
||||
<cover-view class="small-fnt">全部</cover-view> |
||||
</cover-view> |
||||
<cover-view class="shaixuan-item" @click="showLine"> |
||||
<cover-image v-if="isLineActive" :src="lineIcon"></cover-image> |
||||
<cover-image v-else :src="lineIcons"></cover-image> |
||||
<cover-view class="small-fnt">线路</cover-view> |
||||
</cover-view> |
||||
<cover-view class="shaixuan-item" v-for="(item, index) in screenList" @click="screenData(item, index)"> |
||||
<cover-image v-if="!item.isActive" :src="'/static/img/' + item.dicremark + '.png'"></cover-image> |
||||
<cover-image v-else :src="'/static/img/' + item.dicremark + '-h.png'"></cover-image> |
||||
<cover-view class="small-fnt">{{ item.dicname }}</cover-view> |
||||
</cover-view> |
||||
</cover-view> |
||||
</map> |
||||
<view> |
||||
<!-- 普通弹窗 --> |
||||
<uni-popup class="popup-content" ref="popup" background-color="#fff" @change="change" type="bottom"> |
||||
<view class="popup-content"> |
||||
<view class="text" v-for="item in lineData" @click="showlines(item)"> |
||||
{{ item.name }} |
||||
</view> |
||||
<view class="clearLine" @tap="clearLine">清除线路</view> |
||||
</view> |
||||
</uni-popup> |
||||
</view> |
||||
<view class="my-location" @tap.stop="getMyLocation"> |
||||
<image class="myself-location" src="../../static/img/self-location.png"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
daolanurl:"https://www.zhuchengzhe.com/test/", |
||||
netType:true |
||||
export default { |
||||
data() { |
||||
return { |
||||
mapCtx: '', |
||||
scale: 18, |
||||
min: 10, |
||||
max: 20, |
||||
coverImg: 'https://www.lbgjtoa.com//upload/image/2023/8/17/bde77f4e92ff4133aeb3fd2dc33b578a.jpg', |
||||
title: 'map', |
||||
latitude: 37.830562, |
||||
longitude: 115.710722, |
||||
allPointData: [], |
||||
jingdian: [], |
||||
partLoat: [], |
||||
inAndOut: [], |
||||
tolite: [], |
||||
tourisCenter: [], |
||||
covers: [], |
||||
datas: [], |
||||
screenList: [], |
||||
pointData: null, |
||||
lineData: [], |
||||
polylines: [], |
||||
cloudPoints: [], |
||||
showCover: false, |
||||
showMp3Title: false, |
||||
plays: true, |
||||
baseUrl: this.$config.ROOTPATH, |
||||
isAllActive: false, |
||||
isLineActive: true, |
||||
allIcon: '/static/img/quanbu.png', |
||||
lineIcon: '/static/img/icon-xl.png', |
||||
allIcons: '/static/img/quanbu-h.png', |
||||
lineIcons: '/static/img/icon-xl-h.png' |
||||
}; |
||||
}, |
||||
onLoad() { |
||||
this.mapCtx = uni.createMapContext('myMap'); |
||||
this.addThings(); |
||||
this.getScreeningData(); |
||||
this.getLineData(); |
||||
// uni.showLoading({ |
||||
// title: '手绘图加载中...', |
||||
// mask: true |
||||
// }); |
||||
// setTimeout(function () { |
||||
// uni.hideLoading(); |
||||
// }, 6000); |
||||
}, |
||||
onUnload() { |
||||
this.pause(); |
||||
}, |
||||
methods: { |
||||
showsd(val) { |
||||
console.log(val); |
||||
}, |
||||
// 关闭信息框 |
||||
closeThis() { |
||||
this.showCover = false; |
||||
}, |
||||
// 线路数据 |
||||
getLineData() { |
||||
let this_ = this; |
||||
uni.request({ |
||||
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicLineList?pid=334', |
||||
// url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicLineList?pid=363', |
||||
method: 'GET', |
||||
success(res) { |
||||
if (res.data.data && res.data.data.length > 0) { |
||||
res.data.data.forEach((item) => { |
||||
const lines = []; |
||||
const arr = JSON.parse(item.drawlinedata); |
||||
arr.forEach((items) => { |
||||
const obj = { |
||||
longitude: items[0], |
||||
latitude: items[1] |
||||
}; |
||||
lines.push(obj); |
||||
}); |
||||
const obj = { |
||||
name: item.line_name, |
||||
line: lines |
||||
}; |
||||
this_.lineData.push(obj); |
||||
}); |
||||
} |
||||
}, |
||||
fail(err) { |
||||
console.log(err); |
||||
} |
||||
}); |
||||
}, |
||||
// 手绘图 |
||||
addCoverimg(val) { |
||||
let this_ = this; |
||||
this_.latitude = val.lat; |
||||
this_.longitude = val.lon; |
||||
this_.coverImg = this_.$config.ROOTPATH + val.mapurl; |
||||
this_.mapCtx.addGroundOverlay({ |
||||
id: 1, |
||||
src: this_.coverImg, |
||||
bounds: { |
||||
southwest: { |
||||
longitude: val.leftdown_lng, |
||||
latitude: val.leftdown_lat |
||||
}, |
||||
northeast: { |
||||
longitude: val.rigthup_lng, |
||||
latitude: val.rigthup_lat |
||||
} |
||||
}, |
||||
success(res) { |
||||
console.log(res); |
||||
}, |
||||
fail(err) { |
||||
console.log(err); |
||||
}, |
||||
complete(das) { |
||||
console.log(das); |
||||
} |
||||
}); |
||||
}, |
||||
// 点击点位 |
||||
tryDemo(val) { |
||||
let this_ = this; |
||||
this_.pause(); |
||||
this.datas.forEach((item) => { |
||||
if (item.id == val.detail.markerId) { |
||||
this.pointData = item; |
||||
this.showCover = true; |
||||
} |
||||
}); |
||||
}, |
||||
// 点位数据 |
||||
addThings() { |
||||
let this_ = this; |
||||
uni.request({ |
||||
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyMapScenicAndSpotInfo', |
||||
method: 'get', |
||||
data: { |
||||
userkey: '95034a2bb9a843b79dbc93f74599282b', |
||||
id: '334', |
||||
// id: '363', |
||||
spotType: '' |
||||
}, |
||||
success(res) { |
||||
const arr = res.data.data; |
||||
this_.datas = arr; |
||||
//确定中心点和手绘图 |
||||
arr.forEach((item) => { |
||||
// if (item.id == 363) { |
||||
if (item.id == 334) { |
||||
this_.addCoverimg(item); |
||||
console.log(item); |
||||
this_.longitude = item.lon; |
||||
this_.latitude = item.lat; |
||||
this_.scale = item.start_maplevel; |
||||
this_.min = item.min_maplevel; |
||||
this_.max = item.max_maplevel; |
||||
} |
||||
}); |
||||
//添加标点 |
||||
this_.addMarker(arr); |
||||
}, |
||||
fail(err) { |
||||
console.log(err); |
||||
} |
||||
}); |
||||
}, |
||||
// 获取分类信息 |
||||
getScreeningData() { |
||||
let this_ = this; |
||||
uni.request({ |
||||
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicType', |
||||
method: 'post', |
||||
header: { |
||||
'content-type': 'application/x-www-form-urlencoded' |
||||
}, |
||||
data: { |
||||
userkey: this_.$param.userkey |
||||
}, |
||||
success(res) { |
||||
let arr = []; |
||||
if (res.data.data) { |
||||
res.data.data.forEach((item) => { |
||||
if (item.dicnum != 3605 && item.dicnum != 3606) { |
||||
item.isActive = false; |
||||
arr.push(item); |
||||
} |
||||
}); |
||||
} |
||||
this_.screenList = arr; |
||||
}, |
||||
fail(err) { |
||||
console.log(err); |
||||
} |
||||
}); |
||||
}, |
||||
// 筛选 |
||||
screenData(val) { |
||||
let this_ = this; |
||||
this_.isAllActive = true; |
||||
this_.isLineActive = true; |
||||
this_.screenList.forEach((item) => { |
||||
item.isActive = false; |
||||
}); |
||||
val.isActive = !val.isActive; |
||||
this_.covers = []; |
||||
if (val.dicnum == 3602) { |
||||
this_.covers = this_.partLoat; |
||||
this_.cloudPoints = this_.partLoat; |
||||
} else if (val.dicnum == 3603) { |
||||
this_.covers = this_.inAndOut; |
||||
this_.cloudPoints = this_.inAndOut; |
||||
} else if (val.dicnum == 3604) { |
||||
this_.covers = this_.tolite; |
||||
this_.cloudPoints = this_.tolite; |
||||
} else if (val.dicnum == 3607) { |
||||
this_.covers = this_.tourisCenter; |
||||
this_.cloudPoints = this_.tourisCenter; |
||||
} else { |
||||
this_.covers = this_.jingdian; |
||||
this_.cloudPoints = this_.jingdian; |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
}, |
||||
/* onLoad(option) { |
||||
var that = this; |
||||
this.$util.getNetworkType( |
||||
function(res){ |
||||
if(res.networkType === 'none'){ |
||||
uni.showToast({ |
||||
title:that.$param.netMsg, |
||||
icon:"none", |
||||
duration:2000 |
||||
}) |
||||
that.netType = false; |
||||
// 全部 |
||||
showAllpoint() { |
||||
let this_ = this; |
||||
this_.isAllActive = false; |
||||
this_.showCover = false; |
||||
this_.isLineActive = true; |
||||
this_.screenList.forEach((item) => { |
||||
item.isActive = false; |
||||
}); |
||||
this_.covers = this_.allPointData; |
||||
this_.cloudPoints = this_.covers; |
||||
}, |
||||
// 线路 |
||||
showLine() { |
||||
let this_ = this; |
||||
this_.isLineActive = false; |
||||
this_.showCover = false; |
||||
this_.isAllActive = true; |
||||
this_.screenList.forEach((item) => { |
||||
item.isActive = false; |
||||
}); |
||||
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性 |
||||
this.$refs.popup.open(); |
||||
}, |
||||
change(e) {}, |
||||
showlines(val) { |
||||
let this_ = this; |
||||
(this_.polylines = [ |
||||
{ |
||||
points: val.line, |
||||
color: '#3269B2', |
||||
arrowLine: true, |
||||
width: 10 |
||||
} |
||||
]), |
||||
this_.$forceUpdate(); |
||||
this.$refs.popup.close(); |
||||
}, |
||||
clearLine() { |
||||
let this_ = this; |
||||
this_.polylines = []; |
||||
this.$refs.popup.close(); |
||||
}, |
||||
// 添加点位 |
||||
addMarker(val) { |
||||
let this_ = this; |
||||
this_.covers = []; |
||||
if (val && val.length) { |
||||
let obj = {}; |
||||
let pathurl = ''; |
||||
val.forEach((item) => { |
||||
// if (item.id && item.id != '' && item.id != null && item.id != 363) { |
||||
if (item.id && item.id != '' && item.id != null && item.id != 334) { |
||||
if (item.types == 3604) { |
||||
pathurl = '/static/img/cesuodian.png'; |
||||
} else if (item.types == 3603) { |
||||
pathurl = '/static/img/churudian.png'; |
||||
} else if (item.types == 3602) { |
||||
pathurl = '/static/img/tingchedian.png'; |
||||
} else if (item.types == 3607) { |
||||
pathurl = '/static/img/youkezhongxindian.png'; |
||||
} else { |
||||
pathurl = '/static/img/jingqudian.png'; |
||||
} |
||||
obj = { |
||||
id: Number(item.id), |
||||
latitude: item.lat, |
||||
longitude: item.lon, |
||||
title: item.types, |
||||
label: { |
||||
content: item.cname, |
||||
padding: 5, |
||||
anchorX: 20, |
||||
anchorY: -30, |
||||
color: '#600000', |
||||
borderWidth: 0.5, |
||||
borderColor: '#600000', |
||||
borderRadius: 5, |
||||
bgColor: '#fff' |
||||
}, |
||||
iconPath: pathurl, |
||||
width: 33, |
||||
height: 35, |
||||
customCallout: { |
||||
anchorY: 0, |
||||
anchorX: 0, |
||||
display: 'BYCLICK' |
||||
} |
||||
}; |
||||
this_.allPointData.push(obj); |
||||
if (obj.title == 3604) { |
||||
this_.tolite.push(obj); |
||||
} else if (obj.title == 3603) { |
||||
this_.inAndOut.push(obj); |
||||
} else if (obj.title == 3602) { |
||||
this_.partLoat.push(obj); |
||||
} else if (obj.title == 3607) { |
||||
this_.tourisCenter.push(obj); |
||||
} else { |
||||
this_.jingdian.push(obj); |
||||
} |
||||
} |
||||
},function(){ |
||||
uni.showToast({ |
||||
title:that.$param.netMsg, |
||||
icon:"none", |
||||
duration:2000 |
||||
}) |
||||
that.netType = false; |
||||
} |
||||
) |
||||
if(!that.netType){ |
||||
return; |
||||
}); |
||||
this_.covers = this_.allPointData; |
||||
// this_.cloudPoints = this_.allPointData; |
||||
} |
||||
this.$util.hideLoadingByTime(); |
||||
that.$util.saveOperatorLog(that,"DAOLAN",option.scenicId); |
||||
this.daolanurl = this.$config.REAUEST_ROOTPATH + "/html/back/ybsjMap/ybsjMap.html?userkey="+this.$param.userkey+"&scenicId="+option.scenicId+"&clng="+this.$param.clng+"&clat="+this.$param.clat |
||||
uni.showLoading({ |
||||
title: "加载中", |
||||
mask: true |
||||
}) |
||||
}, */ |
||||
onReady() { |
||||
setTimeout(function() { |
||||
uni.hideLoading(); |
||||
}, 500); |
||||
}, |
||||
// 播音频 |
||||
play(val) { |
||||
this.showMp3Title = true; |
||||
this.plays = false; |
||||
uni.playBackgroundAudio({ |
||||
dataUrl: this.$config.ROOTPATH + val |
||||
}); |
||||
}, |
||||
// 停音频 |
||||
pause() { |
||||
let this_ = this; |
||||
uni.stopBackgroundAudio({ |
||||
success: function () { |
||||
this_.showMp3Title = false; |
||||
this_.plays = true; |
||||
} |
||||
}); |
||||
}, |
||||
// 去详情 |
||||
goDetail(val) { |
||||
let this_ = this; |
||||
this_.pause(); |
||||
uni.navigateTo({ |
||||
url: './pointDetail?id=' + val |
||||
}); |
||||
}, |
||||
// 我的位置 |
||||
getMyLocation() { |
||||
let this_ = this; |
||||
uni.getLocation({ |
||||
type: 'gcj02', |
||||
success(res) { |
||||
this_.longitude = res.longitude; |
||||
this_.latitude = res.latitude; |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style scoped> |
||||
map { |
||||
width: 100%; |
||||
height: 100vh; |
||||
} |
||||
.customCallout { |
||||
box-sizing: border-box; |
||||
background-color: #fff; |
||||
border: 1px solid #ccc; |
||||
border-radius: 30rpx; |
||||
width: 90vw; |
||||
height: 220rpx; |
||||
display: inline-flex; |
||||
padding: 10rpx 40rpx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: fixed; |
||||
bottom: 50rpx; |
||||
left: 5vw; |
||||
z-index: 9999; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
<style> |
||||
.content { |
||||
flex: 0 1 auto; |
||||
margin: 0 10px; |
||||
font-size: 36rpx; |
||||
display: inline-flex; |
||||
max-width: 50vw; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
} |
||||
.showMp3Title { |
||||
position: fixed; |
||||
top: 50rpx; |
||||
left: 22.5vw; |
||||
width: 48vw; |
||||
height: 46rpx; |
||||
line-height: 46rpx; |
||||
padding: 10rpx 40rpx; |
||||
background-color: #333; |
||||
color: #eee; |
||||
text-align: center; |
||||
border-radius: 50rpx; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
z-index: 9999; |
||||
} |
||||
.shaixuan { |
||||
width: 125rpx; |
||||
position: fixed; |
||||
right: 30rpx; |
||||
top: 30rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.shaixuan-item { |
||||
margin: 15rpx; |
||||
background: #fff; |
||||
padding: 10rpx; |
||||
border-radius: 10rpx; |
||||
box-shadow: 0 0 4px 0px #717171; |
||||
} |
||||
.shaixuan-item cover-image { |
||||
width: 50rpx; |
||||
margin: 0 auto; |
||||
} |
||||
.small-fnt { |
||||
font-size: 18rpx; |
||||
margin-top: 10rpx; |
||||
text-align: center; |
||||
} |
||||
.popup-content { |
||||
padding-bottom: 50rpx; |
||||
position: relative; |
||||
} |
||||
.text { |
||||
padding: 10rpx 0; |
||||
border-bottom: 1rpx dashed #999; |
||||
} |
||||
.clearLine { |
||||
width: 18vw; |
||||
background: #eee; |
||||
padding: 10rpx 10rpx; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
margin-top: 25rpx; |
||||
border-radius: 10rpx; |
||||
} |
||||
.content-box { |
||||
flex: 1; |
||||
margin-left: 30rpx; |
||||
} |
||||
.play-stop { |
||||
background-color: #f86458; |
||||
color: #eee; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
padding: 3rpx 20rpx 3rpx 0; |
||||
border-radius: 10rpx; |
||||
font-size: 24rpx; |
||||
margin-top: 25rpx; |
||||
margin-left: 15rpx; |
||||
} |
||||
.no-audio{ |
||||
padding: 13rpx 20rpx; |
||||
} |
||||
.go-detail { |
||||
margin-top: 20rpx; |
||||
margin-left: 24rpx; |
||||
color: #484848; |
||||
font-size: 28rpx; |
||||
} |
||||
.content-top { |
||||
align-items: center; |
||||
display: flex; |
||||
} |
||||
.my-location { |
||||
position: fixed; |
||||
left: 40rpx; |
||||
bottom: 40rpx; |
||||
width: 100rpx; |
||||
height: 100rpx; |
||||
z-index: 9; |
||||
} |
||||
.myself-location { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.close-btn { |
||||
position: absolute; |
||||
right: 10rpx; |
||||
top: 0rpx; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,20 @@ |
||||
@font-face { |
||||
font-family: "iconfont"; /* Project id 4249859 */ |
||||
src: url('/static/css/iconfont.ttf') format('truetype'); |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 20; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
color: #989898; |
||||
margin-right: 15rpx; |
||||
margin-left: 5rpx; |
||||
} |
||||
|
||||
.icon-time:before { |
||||
content: "\e680"; |
||||
} |
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 422 B |
|
After Width: | Height: | Size: 331 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 884 B |
|
After Width: | Height: | Size: 863 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
Loading…
Reference in new issue