6 changed files with 548 additions and 72 deletions
@ -1,66 +1,328 @@ |
|||||
// pages/life/life.js
|
/* |
||||
Page({ |
* @Author: mk 2403457699@qq.com |
||||
|
* @Date: 2024-08-19 14:08:31 |
||||
/** |
* @LastEditors: mk 2403457699@qq.com |
||||
* 页面的初始数据 |
* @LastEditTime: 2024-10-21 11:08:03 |
||||
|
* @FilePath: \epmet-voluntary-mp\pages\livingCircle\livingCircle.js |
||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/ |
*/ |
||||
|
// import {sphereLifeSearchList} from "../../api/livingCircle"
|
||||
|
const app = getApp() |
||||
|
Page({ |
||||
data: { |
data: { |
||||
|
longitude:'', //经度
|
||||
|
latitude: '', //维度
|
||||
|
scale: 13, //地图默认缩放等级
|
||||
|
markers: [], //点位数据
|
||||
|
showModal: true, //弹框显隐
|
||||
|
modalData: {}, //详情信息
|
||||
|
circles:[{ |
||||
|
latitude: '', |
||||
|
longitude: '', |
||||
|
color: "#ef4f52", |
||||
|
fillColor: '#f2d5d466', |
||||
|
radius: 1800, |
||||
|
strokeWidth: 2, |
||||
|
}], |
||||
|
active:0, |
||||
|
pageNo:1, |
||||
|
tabList:[{name:'全部',value:0},{name:'教育培训',value:1},{name:'医疗卫生',value:2},{name:'商业服务',value:3},{name:'文化体育',value:4},{name:'金融电邮',value:5},{name:'其他',value:6},], |
||||
|
list:[], |
||||
|
showModalDetail:false, |
||||
|
detailList:[], |
||||
|
tableList:[], |
||||
|
community:{} |
||||
}, |
}, |
||||
|
|
||||
/** |
onLoad: function (options) { |
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
|
|
||||
}, |
}, |
||||
|
onHide(){ |
||||
/** |
if(wx.getStorageSync('livingCircleType')){ |
||||
* 生命周期函数--监听页面初次渲染完成 |
wx.removeStorage({ |
||||
*/ |
key: 'livingCircleType', |
||||
onReady() { |
}) |
||||
|
} |
||||
}, |
}, |
||||
|
async onShow() { |
||||
/** |
this.mapCtx = wx.createMapContext('map'); |
||||
* 生命周期函数--监听页面显示 |
let than = this; |
||||
*/ |
try { |
||||
onShow() { |
const location = await new Promise((resolve, reject) => { |
||||
|
wx.getLocation({ |
||||
|
type: 'gcj02', |
||||
|
success(res) { |
||||
|
resolve(res); |
||||
}, |
}, |
||||
|
fail(err) { |
||||
/** |
reject(err); |
||||
* 生命周期函数--监听页面隐藏 |
} |
||||
*/ |
}); |
||||
onHide() { |
}); |
||||
|
than.setData({ |
||||
|
longitude: location.longitude, |
||||
|
latitude: location.latitude, |
||||
|
'circles[0].longitude': location.longitude, |
||||
|
'circles[0].latitude': location.latitude, |
||||
|
}); |
||||
|
// 重置列表
|
||||
|
than.restList(); |
||||
|
// await than.sphereLifeSearchList();
|
||||
|
if( wx.getStorageSync('livingCircleType')){ |
||||
|
this.setData({ |
||||
|
active: wx.getStorageSync('livingCircleType') |
||||
|
}) |
||||
|
} |
||||
|
if(than.data.active == '1'){ |
||||
|
this.loadMarkers([{ |
||||
|
type: 'community', |
||||
|
longitude: this.data.community.longitude,//'120.372537'
|
||||
|
latitude: this.data.community.latitude,//'36.098056'
|
||||
|
width: 28, |
||||
|
height: 38, |
||||
|
zindex:10, |
||||
|
}]) |
||||
|
}else if(than.data.active != '1'){ |
||||
|
this.filterList(than.data.active) |
||||
|
} |
||||
|
} catch (err) { |
||||
|
console.error('获取位置失败', err); |
||||
|
} |
||||
|
}, |
||||
|
handelSearch(e){ |
||||
|
this.sphereLifeSearchList(e.detail) |
||||
|
if(this.data.active == '3'){ |
||||
|
this.filterList('3') |
||||
|
}else if(this.data.active == '2'){ |
||||
|
this.filterList('2') |
||||
|
}else if(this.data.active == '0'){ |
||||
|
this.filterList('0') |
||||
|
}else if(this.data.active != '1'){ |
||||
|
this.filterList(this.data.active) |
||||
|
} |
||||
|
this.loadMarkers(this.data.list) |
||||
}, |
}, |
||||
|
async sphereLifeSearchList(searchKey) { |
||||
|
try { |
||||
|
let parm = { |
||||
|
lon: this.data.longitude,//'120.372537'
|
||||
|
lat: this.data.latitude,//'36.098056'
|
||||
|
name: searchKey || '' |
||||
|
}; |
||||
|
|
||||
/** |
const res = await sphereLifeSearchList(parm); // 使用 await 等待异步请求完成
|
||||
* 生命周期函数--监听页面卸载 |
|
||||
*/ |
|
||||
onUnload() { |
|
||||
|
|
||||
}, |
if (res.code === 0 && res.data) { |
||||
|
// 处理返回的数据
|
||||
|
res.data = res.data.map(item => { |
||||
|
if (item.latitude) { |
||||
|
item.distance = this.getDistance(this.data.latitude, this.data.longitude, item.latitude, item.longitude).toFixed(2); |
||||
|
} |
||||
|
return item; // 返回修改后的 item
|
||||
|
}); |
||||
|
|
||||
/** |
this.setData({ |
||||
* 页面相关事件处理函数--监听用户下拉动作 |
tableList: res.data |
||||
*/ |
}); |
||||
onPullDownRefresh() { |
this.loadMarkers(res.data); |
||||
|
|
||||
|
} else { |
||||
|
this.restList(); |
||||
|
this.loadMarkers([]); |
||||
|
} |
||||
|
} catch (err) { |
||||
|
console.log(err); |
||||
|
this.restList(); |
||||
|
this.loadMarkers([]); |
||||
|
} |
||||
|
}, |
||||
|
loadMarkers(markers){ |
||||
|
let markersData = markers.map((marker,index) => { |
||||
|
console.log(marker.type,); |
||||
|
return { |
||||
|
id:index, |
||||
|
longitude: marker.longitude, |
||||
|
latitude: marker.latitude, |
||||
|
title: marker.name, |
||||
|
iconPath: marker.type === 'user'?'../../images/map/map-poi.png': marker.type === 'relaxation'?'../../images/map/relaxation.png':marker.type === '阵地'?'../../images/map/position.png':marker.type==='志愿组织'?'../../images/map/organization.png': marker.type === 'community'?'../../images/map/community.png':'../../images/map/relaxation.png', |
||||
|
width: 28, |
||||
|
height: 28, |
||||
|
zindex:12, |
||||
|
data:marker |
||||
|
}; |
||||
|
}); |
||||
|
markersData.push({ |
||||
|
type: 'user', |
||||
|
longitude: this.data.longitude,//'120.372537'
|
||||
|
latitude: this.data.latitude,//'36.098056'
|
||||
|
width: 28, |
||||
|
height: 38, |
||||
|
zindex:10, |
||||
|
}); |
||||
|
console.log(markersData,'渲染前点位'); |
||||
|
console.log(this.data.active); |
||||
|
this.setData({ |
||||
|
markers: markersData, |
||||
|
// showModal:this.data.active !== 1?true:false,//默认打开列表，禅道-1801
|
||||
|
}); |
||||
}, |
}, |
||||
|
|
||||
/** |
|
||||
* 页面上拉触底事件的处理函数 |
|
||||
*/ |
|
||||
onReachBottom() { |
|
||||
|
|
||||
|
onClickTab(e){ |
||||
|
this.setData({ |
||||
|
markers:[], |
||||
|
active:e.currentTarget.dataset.value |
||||
|
}) |
||||
|
this.restList() |
||||
|
if(e.currentTarget.dataset.value == '1'){ |
||||
|
this.loadMarkers([{ |
||||
|
type: 'community', |
||||
|
longitude: this.data.community.longitude,//'120.372537'
|
||||
|
latitude: this.data.community.latitude,//'36.098056'
|
||||
|
width: 28, |
||||
|
height: 38, |
||||
|
zindex:10, |
||||
|
}]) |
||||
|
}else if(e.currentTarget.dataset.value != '1'){ |
||||
|
this.filterList(e.currentTarget.dataset.value) |
||||
|
} |
||||
}, |
}, |
||||
|
|
||||
/** |
markertap(e) { |
||||
* 用户点击右上角分享 |
let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId); |
||||
*/ |
if(this.data.active !== 1){ |
||||
onShareAppMessage() { |
this.setData({ |
||||
|
showModalDetail: true, |
||||
|
detailList:[markerData.data] |
||||
|
}); |
||||
|
}else{ |
||||
|
let key = 'T5YBZ-OHPW4-77SUI-KZVFO-LYQL5-4OBTA'; |
||||
|
let referer = '北邻家'; |
||||
|
let endPoint = JSON.stringify({ //终点
|
||||
|
'name': app.globalData.userInfo.agencyName + '服务点', |
||||
|
'latitude':this.data.community.latitude, |
||||
|
'longitude':this.data.community.longitude |
||||
|
}); |
||||
|
wx.navigateTo({ |
||||
|
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
onClikTab(){ |
||||
|
this.restList() |
||||
|
if(this.data.active =='3'){ |
||||
|
this.filterList('3') |
||||
|
}else if(this.data.active =='2'){ |
||||
|
this.filterList('2') |
||||
|
}else if(this.data.active =='0'){ |
||||
|
this.filterList('0') |
||||
|
}else if(this.data.active !='1'){ |
||||
|
this.filterList(this.data.active) |
||||
|
} |
||||
|
this.setData({ |
||||
|
showModal: !this.data.showModal, |
||||
|
}); |
||||
|
}, |
||||
|
filterList(type){ |
||||
|
if(type == '0'){ |
||||
|
this.setData({ |
||||
|
list:this.data.tableList.filter(item=>item.type !== '场所') |
||||
|
}) |
||||
|
}else if (type == '2'){ |
||||
|
this.setData({ |
||||
|
list:this.data.tableList.filter(item=>item.type === '志愿组织') |
||||
|
}) |
||||
|
}else if (type == '3'){ |
||||
|
this.setData({ |
||||
|
list:this.data.tableList.filter(item=>item.type === '阵地') |
||||
|
}) |
||||
|
}else if (type != '1'){ |
||||
|
if(type == '4'){ |
||||
|
this.setData({ |
||||
|
list:this.data.tableList.filter(item=>item.type === '教育培训') |
||||
|
}) |
||||
|
}else if(type == '5'){ |
||||
|
this.setData({ |
||||
|
list:this.data.tableList.filter(item=>item.type === '医疗卫生') |
||||
|
}) |
||||
|
}else if(type == '6'){ |
||||
|
this.setData({ |
||||
|
list:this.data.tableList.filter(item=>item.type === '商业服务') |
||||
|
}) |
||||
|
}else if(type == '7'){ |
||||
|
this.setData({ |
||||
|
list:this.data.tableList.filter(item=>item.type === '文化体育') |
||||
|
}) |
||||
|
}else if(type == '8'){ |
||||
|
this.setData({ |
||||
|
list:this.data.tableList.filter(item=>item.type === '金融电邮') |
||||
|
}) |
||||
|
}else if(type == '9'){ |
||||
|
this.setData({ |
||||
|
list:this.data.tableList.filter(item=>item.type === '其他') |
||||
|
}) |
||||
|
} |
||||
} |
} |
||||
|
this.loadMarkers(this.data.list) |
||||
|
}, |
||||
|
onClose() { |
||||
|
this.setData({ |
||||
|
showModal: false, |
||||
|
showModalDetail:false |
||||
|
}); |
||||
|
}, |
||||
|
restList(){ |
||||
|
this.setData({ |
||||
|
list:[], |
||||
|
pageNo:1, |
||||
|
markers:[], |
||||
|
}) |
||||
|
}, |
||||
|
toMyCommunity(){ |
||||
|
wx.navigateTo({ |
||||
|
url: '/pages/myCommunity/myCommunity', |
||||
|
}) |
||||
|
}, |
||||
|
routePlanning(e){ |
||||
|
let key = 'T5YBZ-OHPW4-77SUI-KZVFO-LYQL5-4OBTA'; |
||||
|
let referer = '北邻家'; |
||||
|
let endPoint = JSON.stringify({ //终点
|
||||
|
'name': e.currentTarget.dataset.item.name, |
||||
|
'latitude': e.currentTarget.dataset.item.latitude, |
||||
|
'longitude': e.currentTarget.dataset.item.longitude |
||||
|
}); |
||||
|
wx.navigateTo({ |
||||
|
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint |
||||
|
}); |
||||
|
}, |
||||
|
toDetail(e){ |
||||
|
let obj = e.currentTarget.dataset.obj |
||||
|
if(e.currentTarget.dataset.type ==="阵地"){ |
||||
|
wx.navigateTo({ |
||||
|
url: `/subpages/placeDetails/pages/index/index?id=${e.currentTarget.dataset.id}`, |
||||
|
}) |
||||
|
}else if(e.currentTarget.dataset.type ==="志愿组织"){ |
||||
|
wx.navigateTo({ |
||||
|
url: `/subpages/Myorganization/pages/organizationdetails/organizationdetails?id=${e.currentTarget.dataset.id}&type=map`, |
||||
|
}) |
||||
|
}else { |
||||
|
wx.navigateTo({ |
||||
|
url: `/subpages/merchantDetails/pages/index/index?obj=${encodeURIComponent(JSON.stringify(obj))}`, |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 根据两个经纬度获取当前距离
|
||||
|
getDistance(lat1, lon1, lat2, lon2) { |
||||
|
const R = 6371; |
||||
|
const dLat = (lat2 - lat1) * Math.PI / 180; |
||||
|
const dLon = (lon2 - lon1) * Math.PI / 180; |
||||
|
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + |
||||
|
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * |
||||
|
Math.sin(dLon / 2) * Math.sin(dLon / 2); |
||||
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); |
||||
|
const distance = R * c; // 距离，单位为千米
|
||||
|
return distance; |
||||
|
}, |
||||
}) |
}) |
||||
@ -1,3 +1,10 @@ |
|||||
{ |
{ |
||||
"usingComponents": {} |
"usingComponents": { |
||||
|
"van-popup": "@vant/weapp/popup/index", |
||||
|
"van-tab": "@vant/weapp/tab/index", |
||||
|
"van-tabs": "@vant/weapp/tabs/index", |
||||
|
"van-search": "@vant/weapp/search/index", |
||||
|
"van-empty": "@vant/weapp/empty/index" |
||||
|
}, |
||||
|
"navigationBarTitleText": "生活圈" |
||||
} |
} |
||||
@ -1,2 +1,58 @@ |
|||||
<!--pages/life/life.wxml--> |
<view style="height: 100vh;overflow: hidden;"> |
||||
<text>pages/life/life.wxml</text> |
<van-search model:value="{{ searckKey }}" bind:search="handelSearch" placeholder="输入关键字" background="rgba(0,0,0,0)" shape="round"/> |
||||
|
<view class="tab flex "> |
||||
|
<view wx:for="{{tabList}}" wx:key="index" class="{{active === index?'active':''}} item" data-value="{{item.value}}" bind:tap="onClickTab"> |
||||
|
<text>{{item.name}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="all"> |
||||
|
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}" bindmarkertap="markertap" circles="{{circles}}"> |
||||
|
</map> |
||||
|
<movable-area class="movable-area"> |
||||
|
<movable-view class="movable-view" direction="all" x="280" y="500" bind:tap="onClikTab" wx:if="{{active!==1}}"> |
||||
|
<view class="content flex flex-center-i"> |
||||
|
<image src="{{!showModal?'../../images/map/list.png':'../../images/map/address.png'}}" class="icon-30" style="margin-right: 10rpx;" mode=""/> |
||||
|
<text style="color: #666666;">{{!showModal?'查看列表':'查看地图'}}</text> |
||||
|
</view> |
||||
|
</movable-view> |
||||
|
<movable-view class="movable-view flex flex-center-i" direction="all" x="280" y="500" wx:if="{{active===1}}"> |
||||
|
<image src="../../images/map/toCommunity.png" class="toCommunity" bind:tap="toMyCommunity" mode=""/> |
||||
|
</movable-view> |
||||
|
</movable-area> |
||||
|
</view> |
||||
|
<view> |
||||
|
<van-popup round custom-style="height: 60%;border-radius:0;padding:0 20rpx 20rpx;box-sizing: border-box;background-color: #f3f3f5;" position="bottom" show="{{ showModal }}" bind:close="onClose" overlay="false"> |
||||
|
<scroll-view bind:scrolltolower="scrolltolower" scroll-y class="tab_content" wx:if="{{list}}" style="overflow: hidden;"> |
||||
|
<view class="map_item flex flex-center-i" bind:tap="toDetail" data-obj="{{item}}" data-type="{{item.type}}" data-id="{{item.id}}" wx:for="{{list}}" wx:key="index"> |
||||
|
<image src="{{(item.attrs && item.attrs.length > 0) ? item.attrs[0].url : 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240927/087bb3a330a6494b9b09b5341c309ced.png'}}" mode="" class="left_image" /> |
||||
|
<view class="flex flex-1 flex-y flex-sb"> |
||||
|
<view class="font-size-30 font-bold ellipsis">{{item.name}}</view> |
||||
|
<view class="{{item.type === 'relaxation'?'tag-g':item.type === '志愿阵地'?'tag-b':item.type === '志愿组织'?'tag-r':'tag-g'}} tag font-size-20 ">{{item.type}}</view> |
||||
|
<view class="font-size-26">距我{{item.distance}}km</view> |
||||
|
</view> |
||||
|
<view class="flex flex-y flex-center-j" bind:tap="routePlanning" data-item="{{item}}"> |
||||
|
<image src="../../images/map/navigation.png" mode="" class="navigation"/> |
||||
|
<text class="color-gray font-size-20">导航</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 120rpx;width: 100%;"></view> |
||||
|
</scroll-view> |
||||
|
<van-empty description="暂无数据" wx:else/> |
||||
|
</van-popup> |
||||
|
<van-popup round custom-style="height: 500rpx;border-radius:0;padding:0 20rpx 20rpx;box-sizing: border-box;background-color: #f3f3f5;" position="bottom" show="{{ showModalDetail }}" bind:close="onClose" overlay="false"> |
||||
|
<view class="map_item flex flex-center-i" data-type="{{item.type}}" bind:tap="toDetail" data-id="{{item.id}}" data-obj="{{item}}" wx:for="{{detailList}}" wx:key="index"> |
||||
|
<image src="{{(item.attrs&&item.attrs.length()>0)?attrs[0].url:'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240927/087bb3a330a6494b9b09b5341c309ced.png'}}" mode="" class="left_image" /> |
||||
|
<view class="flex flex-1 flex-y flex-sb"> |
||||
|
<view class="font-size-30 font-bold ellipsis">{{item.name}}</view> |
||||
|
<view class="tag font-size-20 ">{{item.type === "relaxation"?'休闲娱乐':item.type === "position"?'志愿阵地':item.type === "org"?'志愿组织':''}}</view> |
||||
|
<view class="font-size-26">距我{{item.distance}}km</view> |
||||
|
</view> |
||||
|
<view class="flex flex-y flex-center-j" bind:tap="routePlanning" data-item="{{item}}"> |
||||
|
<image src="../../images/map/navigation.png" mode="" class="navigation"/> |
||||
|
<text class="color-gray font-size-20">导航</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="height: 120rpx;width: 100%;"></view> |
||||
|
</van-popup> |
||||
|
</view> |
||||
|
</view> |
||||
|
|||||
@ -1 +1,149 @@ |
|||||
/* pages/life/life.wxss */ |
/* pages/livingCircle/livingCircle.wxss */ |
||||
|
.map-view-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
background: #F8F8F7; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.map-view-content { |
||||
|
width: 100%; |
||||
|
background: #FFF; |
||||
|
padding: 20px 0 20px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
#map { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.zoom-in, .zoom-out { |
||||
|
position: absolute; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
color: #3fc971; |
||||
|
background-color: white; |
||||
|
border: 1px solid #3fc971; |
||||
|
text-align: center; |
||||
|
line-height: 40px; |
||||
|
font-size: 30px; |
||||
|
box-sizing: border-box; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.zoom-in { |
||||
|
right: 10px; |
||||
|
bottom: 88px; |
||||
|
} |
||||
|
|
||||
|
.zoom-out { |
||||
|
right: 10px; |
||||
|
bottom: 50px; |
||||
|
} |
||||
|
|
||||
|
.van-search__content { |
||||
|
border: solid #44c9c7 2rpx; |
||||
|
} |
||||
|
|
||||
|
.movable-area { |
||||
|
pointer-events: none; |
||||
|
z-index: 100; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.movable-area .toCommunity { |
||||
|
width: 150rpx; |
||||
|
height: 150rpx; |
||||
|
} |
||||
|
|
||||
|
.movable-view { |
||||
|
pointer-events: auto; |
||||
|
height: 60rpx; |
||||
|
width: 180rpx; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.movable-view .content { |
||||
|
background-color: #FFF; |
||||
|
border-radius: 30rpx 0 0 30rpx; |
||||
|
padding: 16rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.tab { |
||||
|
background-color: #FFF; |
||||
|
width: 100%; |
||||
|
overflow-x: scroll; |
||||
|
} |
||||
|
|
||||
|
.tab .item { |
||||
|
padding: 10rpx 0; |
||||
|
box-sizing: border-box; |
||||
|
color: #666666; |
||||
|
min-width: 150rpx; |
||||
|
text-align: center; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.tab .active { |
||||
|
color: #08b3b3; |
||||
|
border-bottom: 6rpx solid #08b3b3; |
||||
|
} |
||||
|
|
||||
|
.map_item { |
||||
|
background-color: #ffffff; |
||||
|
border-radius: 10rpx; |
||||
|
padding: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.map_item .tag { |
||||
|
width: fit-content; |
||||
|
padding: 6rpx 10rpx; |
||||
|
box-sizing: border-box; |
||||
|
border-radius: 15rpx 15rpx 15rpx 0; |
||||
|
margin: 10rpx 0 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.map_item .tag-g { |
||||
|
color: #009e8d; |
||||
|
background-color: #dcf4f0; |
||||
|
} |
||||
|
|
||||
|
.map_item .tag-r { |
||||
|
color: #ff6363; |
||||
|
background-color: #ffefef; |
||||
|
} |
||||
|
|
||||
|
.map_item .tag-b { |
||||
|
color: #5a77ec; |
||||
|
background-color: #e4e9fc; |
||||
|
} |
||||
|
|
||||
|
.map_item .left_image { |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
margin-right: 24rpx; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.map_item .navigation { |
||||
|
width: 46rpx; |
||||
|
height: 46rpx; |
||||
|
} |
||||
|
|
||||
|
.ellipsis { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
Loading…
Reference in new issue