parent
67e8b1bf33
commit
b6b881de22
@ -1,603 +1,177 @@ |
||||
<template> |
||||
<view> |
||||
<!-- 状态栏 --> |
||||
<view class="status" :style="{position:headerPosition}"></view> |
||||
<view class="header" :style="{position:headerPosition}"> |
||||
<view class="addr" @click="goPostion"> |
||||
<!-- <view class="icon location"></view> --> |
||||
{{city}} |
||||
<image mode="widthFix" style="width: 15px;" :src="imagewxUrl+imgadres"></image> |
||||
</view> |
||||
<view class="input-box"> |
||||
<input placeholder="搜索门店" placeholder-style="color:#c0c0c0;" @tap="toSearch()" /> |
||||
<view class="icon search"></view> |
||||
</view> |
||||
</view> |
||||
<!-- 占位 --> |
||||
<view class="place"></view> |
||||
<!-- <view class="category-list"> --> |
||||
<view class="width100 height45l backcorfff" v-if="MerchantList != ''"> |
||||
<view class="width90"> |
||||
<!-- <view class="stuMenu flleft fotct" @click="showPopup() ">{{showCategoryIndex}} |
||||
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image> |
||||
</view> --> |
||||
<picker mode="selector" :range="MerchantList" range-key="merchantName" @change="showCategory"> |
||||
<view class="font14">{{showCategoryIndex}} |
||||
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image> |
||||
</view> |
||||
</picker> |
||||
</view> |
||||
</view> |
||||
|
||||
<view v-if="categoryList == '' " class="mart60 fotct font14 fcor666 fotct width100"> |
||||
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image> |
||||
</view> |
||||
|
||||
<view class="width96 height100p backcorfff border-r mart10" v-for="(box,i) in categoryList" :key="i"> |
||||
<image mode="widthFix" :src="imageUrl+box.ext1" class="recontleft flleft mart10 border-r" |
||||
style="max-height: 80px;" @click="toCategory(box)"> |
||||
</image> |
||||
<view class="recontright"> |
||||
<view class="text2 width100 font18 fontwig6 paddtop15" @click="toCategory(box)"> |
||||
{{box.storeName}} |
||||
</view> |
||||
<view class="width100 mart10 height22"> |
||||
<view class="width70 flleft text1 font13 fcor999" @click="toCategory(box)"> |
||||
{{box.address}} |
||||
</view> |
||||
<view class="width30 flright font13 fcor666 fotct" @click="seeloaction(item)"> |
||||
<image mode="widthFix" :src="imagewxUrl+imgadres4" style="width: 10px;"></image> |
||||
{{box.distance}}km |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- <wybPopup ref="popup" type="top" height="800" width="500" radius="6" :showCloseIcon="false"> |
||||
<view class="fotct font18 fontwig6 fcor333 mart10 height30">筛选门店</view> |
||||
<view class="mart15"> |
||||
<view :class="item.merchantName == showCategoryIndex?'activeRefuel':'refuel'" |
||||
v-for="(item,index) in MerchantList" :key="index" @click="showCategory(item.merchantName,item.id)"> |
||||
{{item.merchantName}} |
||||
</view> |
||||
</view> |
||||
</wybPopup> --> |
||||
<!-- #ifdef MP--> |
||||
<button open-type="contact"> |
||||
<image :src="imagewxUrl+imgadres5" mode="widthFix" class="xfimg"></image> |
||||
</button> |
||||
<!-- #endif --> |
||||
<!-- #ifdef H5--> |
||||
<image :src="imagewxUrl+imgadres5" mode="widthFix" class="h5xfimg" @click="playPhone"></image> |
||||
<!-- #endif --> |
||||
<view class="content"> |
||||
<map style="width: 100%; height: 90vh;" :style="{height:mapheight}" :show-location='true' :latitude="latitude" |
||||
:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'> |
||||
</map> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getCouponList, |
||||
getStoreListByMerchant, |
||||
getMerchantList, |
||||
findByLatAndLng |
||||
} from "../../../Utils/Api.js"; |
||||
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'; |
||||
let app = getApp(); |
||||
export default { |
||||
components: { |
||||
wybPopup |
||||
}, |
||||
data() { |
||||
return { |
||||
showCategoryIndex: '', |
||||
showCategoryIndexId: '', |
||||
headerPosition: "fixed", |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'jt.png', |
||||
imgadres2: 'xiala.png', |
||||
imgadres1: 'noorder.png', |
||||
imgadres4: 'dh.png', |
||||
imgadres3: 'noorder.png', |
||||
imgadres5: 'cusservice.png', |
||||
city: "", |
||||
imageUrl: app.globalData.imgUrl, |
||||
//分类列表 |
||||
categoryList: [], |
||||
MerchantList: [], |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
isNoMoreData: false |
||||
// loadingText: '点击加载更多' |
||||
latitude: 23.106574, //纬度 |
||||
longitude: 113.324587, //经度 |
||||
scale: 13, //缩放级别 |
||||
bottomData: false, |
||||
marker: [{ |
||||
id: 0, |
||||
latitude: 23.13065, //纬度 |
||||
longitude: 113.3274, //经度 |
||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||
rotate: 0, // 旋转度数 |
||||
width: 20, //宽 |
||||
height: 20, //高 |
||||
// title:'我在这里',//标注点名 |
||||
alpha: 0.9, //透明度 |
||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||
content: '天宝大厦', //文本 |
||||
color: '#ffffff', //文字颜色 |
||||
fontSize: 14, //文本大小 |
||||
borderRadius: 22, //边框圆角 |
||||
borderWidth: '10', |
||||
bgColor: '#e51860', //背景颜色 |
||||
display: 'ALWAYS', //常显 |
||||
}, |
||||
}, |
||||
{ |
||||
id: 1234597, |
||||
latitude: 23.106574, //纬度 |
||||
longitude: 113.324587, //经度 |
||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||
rotate: 0, // 旋转度数 |
||||
width: 20, //宽 |
||||
height: 20, //高 |
||||
// title:'我在这里',//标注点名 |
||||
alpha: 0.9, //透明度 |
||||
// label:{//为标记点旁边增加标签 //因背景颜色H5不支持 |
||||
// color:'red',//文本颜色 |
||||
// }, |
||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||
content: '广州塔', //文本 |
||||
color: '#ffffff', //文字颜色 |
||||
fontSize: 14, //文本大小 |
||||
borderRadius: 22, //边框圆角 |
||||
borderWidth: '10', |
||||
bgColor: '#e51860', //背景颜色 |
||||
display: 'ALWAYS', //常显 |
||||
}, |
||||
}, |
||||
{ |
||||
id: 2, |
||||
latitude: 23.1338, //纬度 |
||||
longitude: 113.33052, //经度 |
||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||
rotate: 0, // 旋转度数 |
||||
width: 20, //宽 |
||||
height: 20, //高 |
||||
alpha: 0.9, //透明度 |
||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||
content: '德隆大厦', //文本 |
||||
color: '#ffffff', //文字颜色 |
||||
fontSize: 14, //文本大小 |
||||
borderRadius: 22, //边框圆角 |
||||
borderWidth: '10', |
||||
bgColor: '#e51860', //背景颜色 |
||||
display: 'ALWAYS', //常显 |
||||
}, |
||||
}, |
||||
{ |
||||
id: 3, |
||||
latitude: 23.136455, //纬度 |
||||
longitude: 113.329002, //经度 |
||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||
rotate: 0, // 旋转度数 |
||||
width: 20, //宽 |
||||
height: 20, //高 |
||||
alpha: 0.9, //透明度 |
||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||
content: '羊城国际商贸中心', //文本 |
||||
color: '#ffffff', //文字颜色 |
||||
fontSize: 14, //文本大小 |
||||
borderRadius: 22, //边框圆角 |
||||
borderWidth: '10', |
||||
bgColor: '#e51860', //背景颜色 |
||||
display: 'ALWAYS', //常显 |
||||
}, |
||||
}, |
||||
{ |
||||
id: 4, |
||||
latitude: 23.224781, //纬度 |
||||
longitude: 113.293911, //经度 |
||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||
rotate: 0, // 旋转度数 |
||||
width: 20, //宽 |
||||
height: 20, //高 |
||||
alpha: 0.9, //透明度 |
||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||
content: '天瑞广场A座', //文本 |
||||
color: '#ffffff', //文字颜色 |
||||
fontSize: 16, //文本大小 |
||||
borderRadius: 22, //边框圆角 |
||||
borderWidth: '12', |
||||
bgColor: '#e51860', //背景颜色 |
||||
display: 'ALWAYS', //常显 |
||||
}, |
||||
}, |
||||
{ |
||||
id: 5, |
||||
latitude: 23.072726, //纬度 |
||||
longitude: 113.277921, //经度 |
||||
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||
rotate: 0, // 旋转度数 |
||||
width: 20, //宽 |
||||
height: 20, //高 |
||||
alpha: 0.9, //透明度 |
||||
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||
content: '大米和小米儿童康复(广州盈丰)中心', //文本 |
||||
color: '#ffffff', //文字颜色 |
||||
fontSize: 14, //文本大小 |
||||
borderRadius: 22, //边框圆角 |
||||
borderWidth: '8', |
||||
bgColor: '#e51860', //背景颜色 |
||||
display: 'ALWAYS', //常显 |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
}, |
||||
onPageScroll(e) { |
||||
//兼容iOS端下拉时顶部漂移 |
||||
if (e.scrollTop >= 0) { |
||||
this.headerPosition = "fixed"; |
||||
} else { |
||||
this.headerPosition = "absolute"; |
||||
} |
||||
}, |
||||
onLoad() {}, |
||||
onShow() { |
||||
this.pageNum = 1; |
||||
this.categoryList = []; |
||||
this.MerchantList = []; |
||||
if (app.globalData.cityName != '') { |
||||
this.city = app.globalData.qianzhuCityName; |
||||
this.getMerchantList(); |
||||
} else { |
||||
this.postionIng(); |
||||
} |
||||
onLoad() { |
||||
|
||||
}, |
||||
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance" |
||||
onReachBottom() { |
||||
this.getStoreListByMerchant(); |
||||
}, |
||||
methods: { |
||||
//显示弹出 |
||||
showPopup() { |
||||
this.$refs.popup.show(); |
||||
}, |
||||
postionIng() { |
||||
let that = this; |
||||
uni.getLocation({ |
||||
type: 'wgs84', |
||||
success: function(res) { |
||||
app.globalData.latitude = res.latitude; |
||||
app.globalData.longitude = res.longitude; |
||||
that.findByLatAndLng(res.longitude, res.latitude); |
||||
// uni.request({ |
||||
// url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + |
||||
// ',' + res.longitude + '&key=7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB', |
||||
// data: {}, |
||||
// success: function(res) { |
||||
// that.city = res.data.result.address_component.city.replace(/市/g, |
||||
// ''); |
||||
// app.globalData.cityId = res.data.result.ad_info.adcode; |
||||
// // app.globalData.cityId = '500100'; |
||||
// that.getMerchantList(); |
||||
// } |
||||
// }) |
||||
} |
||||
}) |
||||
}, |
||||
//金纬度转 |
||||
findByLatAndLng(item, item1) { |
||||
let datas = { |
||||
lng: item, |
||||
lat: item1 |
||||
} |
||||
findByLatAndLng(datas).then(res => { |
||||
if (res.return_code == '000000') { |
||||
this.city = res.return_data.provinceName; |
||||
app.globalData.cityName = res.return_data.provinceName; |
||||
app.globalData.qianzhuCityName = res.return_data.cityName; |
||||
app.globalData.cityId = res.return_data.regionId; |
||||
// app.globalData.cityId = '500100'; |
||||
if (res.return_data.result.addressComponent.adcode) { |
||||
this.getMerchantList(); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
// 商户列表 |
||||
getMerchantList() { |
||||
let params = { |
||||
regionId: app.globalData.cityId |
||||
} |
||||
getMerchantList(params).then(res => { |
||||
if (res.return_code == '000000' && res.return_data != '') { |
||||
this.MerchantList = res.return_data; |
||||
this.showCategoryIndex = res.return_data[0].merchantName; |
||||
this.showCategoryIndexId = res.return_data[0].id; |
||||
this.pageNum = 1; |
||||
this.pageSize = 10; |
||||
this.isNoMoreData = false; |
||||
this.categoryList = []; |
||||
this.getStoreListByMerchant(); |
||||
|
||||
computed: { |
||||
mapheight() { |
||||
let data = '' |
||||
if (this.bottomData) { |
||||
if (this.upTop) { |
||||
data = '50px' |
||||
} else { |
||||
this.MerchantList = []; |
||||
uni.showToast({ |
||||
title: '暂无数据', |
||||
icon: 'none', |
||||
duration: 2000 |
||||
}) |
||||
data = '200px' |
||||
} |
||||
}) |
||||
}, |
||||
//跳转位置 |
||||
goPostion() { |
||||
uni.navigateTo({ |
||||
url: '/pages/user/positioning/positioning' |
||||
}) |
||||
}, |
||||
//门店列表 |
||||
getStoreListByMerchant() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
if (this.isNoMoreData) { |
||||
uni.hideLoading() |
||||
return false; |
||||
} |
||||
let pagenum = this.pageNum; |
||||
let params = { |
||||
merchantId: this.showCategoryIndexId, |
||||
longitude: app.globalData.longitude, |
||||
latitude: app.globalData.latitude, |
||||
pageNum: pagenum, |
||||
pageSize: this.pageSize |
||||
|
||||
} else { |
||||
data = '90vh' |
||||
} |
||||
getStoreListByMerchant(params).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000') { |
||||
uni.hideLoading(); |
||||
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; |
||||
this.categoryList = this.categoryList.concat(res.return_data.list); |
||||
if (res.return_data.total == (this.pageNum * this.pageSize)) { |
||||
this.isNoMoreData = true; |
||||
} |
||||
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; |
||||
} else { |
||||
this.categoryList = []; |
||||
} |
||||
}) |
||||
|
||||
}, |
||||
//分类切换显示 |
||||
showCategory(e) { |
||||
this.showCategoryIndex = this.MerchantList[e.target.value].merchantName; |
||||
this.showCategoryIndexId = this.MerchantList[e.target.value].id; |
||||
this.pageNum = 1; |
||||
this.pageSize = 10; |
||||
this.isNoMoreData = false; |
||||
this.categoryList = []; |
||||
this.getStoreListByMerchant(); |
||||
}, |
||||
toCategory(e) { |
||||
uni.navigateTo({ |
||||
url: '../../goods/store-list/store-details?id=' + e.id + '&juli=' + e.distance |
||||
}) |
||||
// uni.navigateTo({ |
||||
// url: '../../goods/goods?id=' + e |
||||
// }); |
||||
uni.setStorage({ |
||||
key: "store_id", |
||||
data: e.id |
||||
}) |
||||
uni.setStorage({ |
||||
key: "store_juli", |
||||
data: e.distance |
||||
}) |
||||
}, |
||||
//搜索跳转 |
||||
toSearch() { |
||||
uni.navigateTo({ |
||||
url: '../../goods/HM-search/HM-search' |
||||
}) |
||||
// uni.showToast({title: "建议跳转到新页面做搜索功能"}); |
||||
return data |
||||
}, |
||||
//拨打客服电话 |
||||
playPhone() { |
||||
let cont = "本服务由惠兑礼品提供\n400-678-0738"; |
||||
let content = cont.replace(/<br>/g,"\n"); |
||||
uni.showModal({ |
||||
title: '客服', |
||||
content: content, |
||||
success: function(res) { |
||||
if (res.confirm) { |
||||
uni.makePhoneCall({ |
||||
phoneNumber: '4006780738', //电话号码 |
||||
success: function(e) { |
||||
console.log(e); |
||||
}, |
||||
fail: function(e) { |
||||
console.log(e); |
||||
|
||||
} |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss"> |
||||
page { |
||||
background-color: #f1f3f5; |
||||
} |
||||
|
||||
.h5xfimg { |
||||
width: 80rpx; |
||||
bottom: 140rpx; |
||||
position: fixed; |
||||
right: 40rpx; |
||||
} |
||||
|
||||
.xfimg { |
||||
width: 80rpx; |
||||
bottom: 60rpx; |
||||
position: fixed; |
||||
right: 40rpx; |
||||
} |
||||
|
||||
.status { |
||||
width: 100%; |
||||
height: 0; |
||||
position: fixed; |
||||
z-index: 10; |
||||
background-color: #fff; |
||||
top: 0; |
||||
/* #ifdef APP-PLUS */ |
||||
height: var(--status-bar-height); //覆盖样式 |
||||
/* #endif */ |
||||
} |
||||
|
||||
button::after { |
||||
border: none |
||||
} |
||||
|
||||
.recontleft { |
||||
width: 80px; |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.recontright { |
||||
margin-left: 100px; |
||||
} |
||||
|
||||
.refuel { |
||||
padding: 6px 5px; |
||||
border-radius: 5px; |
||||
background-color: #f6f6f6; |
||||
color: #666666; |
||||
margin-left: 10px; |
||||
margin-top: 15px; |
||||
display: inline-block; |
||||
font-size: 13px; |
||||
width: 18%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.activeRefuel { |
||||
padding: 6px 5px; |
||||
border-radius: 5px; |
||||
border: 1px solid #089bf5; |
||||
color: #089bf5; |
||||
margin-left: 10px; |
||||
margin-top: 15px; |
||||
display: inline-block; |
||||
font-size: 13px; |
||||
width: 18%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.stuMenu { |
||||
width: 33.3%; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
font-size: 14px; |
||||
margin-top: 10px; |
||||
color: #333333; |
||||
} |
||||
|
||||
.stuimg { |
||||
width: 10px; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.loading-text { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 60upx; |
||||
color: #979797; |
||||
font-size: 24upx; |
||||
} |
||||
|
||||
.header { |
||||
width: 92%; |
||||
padding: 0 4%; |
||||
height: 100upx; |
||||
display: flex; |
||||
align-items: center; |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 10; |
||||
background-color: #0083f5; |
||||
/* #ifdef APP-PLUS */ |
||||
top: var(--status-bar-height); |
||||
/* #endif */ |
||||
|
||||
.addr { |
||||
width: 120upx; |
||||
height: 60upx; |
||||
flex-shrink: 0; |
||||
color: #FFFFFF; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28upx; |
||||
|
||||
.icon { |
||||
height: 60upx; |
||||
margin-right: 5upx; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 42upx; |
||||
color: #ffc50a; |
||||
} |
||||
} |
||||
|
||||
.input-box { |
||||
width: 100%; |
||||
height: 70rpx; |
||||
background-color: #f5f5f5; |
||||
border-radius: 10rpx; |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.icon { |
||||
display: flex; |
||||
align-items: center; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 60upx; |
||||
height: 60upx; |
||||
font-size: 34upx; |
||||
color: #c0c0c0; |
||||
} |
||||
|
||||
input { |
||||
padding-left: 28upx; |
||||
height: 28upx; |
||||
font-size: 28upx; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.icon-btn { |
||||
width: 60upx; |
||||
height: 60upx; |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
|
||||
.icon { |
||||
width: 60upx; |
||||
height: 60upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 42upx; |
||||
background-color: transparent; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.place { |
||||
|
||||
background-color: #ffffff; |
||||
height: 100upx; |
||||
/* #ifdef APP-PLUS */ |
||||
margin-top: var(--status-bar-height); |
||||
/* #endif */ |
||||
} |
||||
|
||||
.category-list { |
||||
width: 100%; |
||||
display: flex; |
||||
|
||||
.left, |
||||
.right { |
||||
position: absolute; |
||||
|
||||
top: 100upx; |
||||
/* #ifdef APP-PLUS */ |
||||
top: calc(100upx + var(--status-bar-height)); |
||||
/* #endif */ |
||||
bottom: 0upx; |
||||
} |
||||
|
||||
.left { |
||||
width: 24%; |
||||
left: 0upx; |
||||
background-color: #f2f2f2; |
||||
|
||||
.row { |
||||
width: 100%; |
||||
height: 90upx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.text { |
||||
width: 100%; |
||||
position: relative; |
||||
font-size: 28upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
color: #3c3c3c; |
||||
|
||||
.block { |
||||
position: absolute; |
||||
width: 0upx; |
||||
left: 0; |
||||
} |
||||
} |
||||
|
||||
&.on { |
||||
height: 100upx; |
||||
background-color: #fff; |
||||
|
||||
.text { |
||||
font-size: 30upx; |
||||
font-weight: 600; |
||||
color: #2d2d2d; |
||||
|
||||
.block { |
||||
width: 10upx; |
||||
height: 80%; |
||||
top: 10%; |
||||
background-color: #0083f5; |
||||
} |
||||
} |
||||
coverbottom() { |
||||
let data = '' |
||||
if (this.bottomData) { |
||||
data = '20rpx' |
||||
} else { |
||||
data = '100rpx' |
||||
} |
||||
return data |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
width: 76%; |
||||
left: 24%; |
||||
|
||||
.category { |
||||
width: 94%; |
||||
padding: 20upx 3%; |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 24.262vw; |
||||
border-radius: 10upx; |
||||
overflow: hidden; |
||||
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3); |
||||
|
||||
image { |
||||
width: 100%; |
||||
height: 24.262vw; |
||||
} |
||||
} |
||||
|
||||
.list { |
||||
margin-top: 40upx; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
.box { |
||||
width: calc(70vw / 2); |
||||
margin-bottom: 30upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
|
||||
image { |
||||
width: 60%; |
||||
height: calc(70vw / 2 * 0.6); |
||||
} |
||||
|
||||
.text { |
||||
margin-top: 5upx; |
||||
width: 80%; |
||||
display: flex; |
||||
justify-content: center; |
||||
font-size: 26upx; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
//地图点击事件 |
||||
markertap(e) { |
||||
console.log("===你点击了标记点===", e) |
||||
}, |
||||
//地图点击事件 |
||||
callouttap(e) { |
||||
console.log('地图点击事件', e) |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
</script> |
||||
|
||||
Loading…
Reference in new issue