835 lines
21 KiB
Vue
835 lines
21 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar :is-back="false" title="地图" :border-bottom="false" :background="bgc" title-color='#3D3D3D '
|
||
title-size='36' height='45' id="navbar">
|
||
</u-navbar>
|
||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||
:show-location='true' :markers="covers" @markertap="handleMarkerTap"></map>
|
||
|
||
<view class="fxtongji">
|
||
<view class="one">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uB2k1NNeN2QUuSZIAf5r" mode=""></image>
|
||
<text class="wz">蜂场</text>
|
||
<text class="shu">{{listmap.length}}</text>
|
||
</view>
|
||
<view class="two">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image>
|
||
<text class="wz">蜂箱</text>
|
||
<text class="shu">{{listmaps.length}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 -->
|
||
<view class="fctan" v-if="fxslag">
|
||
<view class="fctop">
|
||
<view class="fclt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image>
|
||
<view class="fctit">{{fxobj.name == undefined ? '--' : fxobj.name}}</view>
|
||
<view class="fcry">已认养</view>
|
||
</view>
|
||
<view class="fcrt" @click="fxslag = false">
|
||
x
|
||
</view>
|
||
</view>
|
||
<view class="fcbh">
|
||
设备编号：{{fxobj.sn == undefined ? '--' : fxobj.sn}}
|
||
</view>
|
||
<view class="fcdz">
|
||
<u-icon name="map-fill" color="#808080" size="32"></u-icon> {{fxobj.apiaryAddress == undefined ? '--' : fxobj.apiaryAddress}}
|
||
</view>
|
||
<view class="fctq">
|
||
<view class="">{{daily[0].textDay == undefined ? '--' : daily[0].textDay}} {{daily[0].tempMin == undefined ? '--' : daily[0].tempMin}}℃ ~ {{daily[0].tempMax == undefined ? '--' : daily[0].tempMax}}℃</view>
|
||
<view class="">{{daily[0].windDirDay == undefined ? '--' : daily[0].windDirDay}} {{nowtqobj.windScale == undefined ? '--' : nowtqobj.windScale}}级</view>
|
||
</view>
|
||
<view class="fcfm">
|
||
<view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uwO70CUV98b3maj6bfCF" mode=""></image> {{listfz}}
|
||
</view>
|
||
<view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uQQym033Pvs3rirm9kP5" mode=""></image> {{listmy}}
|
||
</view>
|
||
</view>
|
||
<view class="fclist">
|
||
<view class="fcli">
|
||
<view class="">箱内温度：{{fxobj.innerTemperature == undefined ? '--' : fxobj.innerTemperature}}℃</view>
|
||
</view>
|
||
<view class="fcli">
|
||
<view class="">箱内湿度：{{fxobj.innerHumidity == undefined ? '--' : fxobj.innerHumidity}}%</view>
|
||
</view>
|
||
<view class="fcli">
|
||
<view class="">蜂箱重量：{{fxobj.totalYield == undefined ? '--' : fxobj.totalYield}}g</view>
|
||
</view>
|
||
<view class="fcli">
|
||
<view class="">二氧化碳浓度：{{fxobj.innerCo2 == undefined ? '--' : fxobj.innerCo2}}ppm</view>
|
||
</view>
|
||
<view class="fcli">
|
||
<view class="">进出量(日)：{{fxobj.ioCountDay == undefined ? '--' : fxobj.ioCountDay}}只</view>
|
||
</view>
|
||
<view class="fcli">
|
||
<view class="">频率：{{fxobj.volume == undefined ? '--' : fxobj.volume}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="btncha" @click="btnpage(1)">
|
||
立即查看
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 -->
|
||
<view class="fxtan" v-if="fcflag">
|
||
<view class="fctop">
|
||
<view class="fclt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uB2k1NNeN2QUuSZIAf5r" mode=""></image>
|
||
<view class="fctit">{{fcobj.name == undefined ? '--' : fcobj.name}}</view>
|
||
<view class="fcry">已认养</view>
|
||
</view>
|
||
<view class="fcrt" @click="fcflag = false">
|
||
x
|
||
</view>
|
||
</view>
|
||
<view class="fcdz">
|
||
<u-icon name="map-fill" color="#808080" size="32"></u-icon> {{fcobj.address == undefined ? '--' : fcobj.address}}
|
||
</view>
|
||
<view class="fctq">
|
||
<view class="">{{daily[0].textDay == undefined ? '--' : daily[0].textDay}} {{daily[0].tempMin == undefined ? '--' : daily[0].tempMin}}℃ ~ {{daily[0].tempMax == undefined ? '--' : daily[0].tempMax}}℃</view>
|
||
<view class="">{{daily[0].windDirDay == undefined ? '--' : daily[0].windDirDay}} {{nowtqobj.windScale == undefined ? '--' : nowtqobj.windScale}}级</view>
|
||
</view>
|
||
<view class="fcfm">
|
||
<view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uwO70CUV98b3maj6bfCF" mode=""></image> {{listfz}}
|
||
</view>
|
||
<view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uQQym033Pvs3rirm9kP5" mode=""></image> {{listmy}}
|
||
</view>
|
||
<view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image> {{fcobj.beehiveCount == undefined ? '--' : fcobj.beehiveCount}}箱
|
||
</view>
|
||
</view>
|
||
<view class="fclist">
|
||
<view class="fcli">
|
||
<view class="">当前温度：{{nowtqobj.temp == undefined ? '--' : nowtqobj.temp}}℃</view>
|
||
</view>
|
||
<view class="fcli">
|
||
<view class="">当前湿度：{{nowtqobj.humidity == undefined ? '--' : nowtqobj.humidity}}%</view>
|
||
</view>
|
||
<view class="fcli">
|
||
<view class="">在线数：{{fcobj.beehiveCount == undefined ? '--' : fcobj.beehiveCount}}箱</view>
|
||
</view>
|
||
</view>
|
||
<view class="btncha" @click="btnpage(2)">
|
||
立即查看
|
||
</view>
|
||
</view>
|
||
|
||
<tab-bar :indexs='3' style=""></tab-bar>
|
||
<!-- <span style="">福鼎蜂场</span> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: " #F4FAF8",
|
||
},
|
||
title: "地图",
|
||
latitude: '',
|
||
longitude: '',
|
||
isMap: false,
|
||
zoomSize: 12,
|
||
markers: [],
|
||
jinweidu: '',
|
||
covers: [],
|
||
mapContext: null,
|
||
mapScaleInterval: null,
|
||
listmap: [],
|
||
listmaps: [],
|
||
id:'',
|
||
fxslag:false,
|
||
fcflag:false,
|
||
fxobj:{},
|
||
fcobj:{},
|
||
longitudetq:'',
|
||
latitudetq:'',
|
||
daily:[],
|
||
listfz:'',
|
||
listmy:'',
|
||
nowtqobj:{}
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
this.getMyLocation()
|
||
this.getMyLocations()
|
||
|
||
|
||
},
|
||
onReady() {
|
||
this.mapContext = uni.createMapContext('map', this)
|
||
this.mapScaleInterval = setInterval(this.updateMarkers, 1000)
|
||
},
|
||
beforeDestroy() {
|
||
if (this.mapScaleInterval) {
|
||
clearInterval(this.mapScaleInterval)
|
||
this.mapScaleInterval = null
|
||
}
|
||
},
|
||
methods: {
|
||
btnpage(num){
|
||
if(num == 1){
|
||
uni.navigateTo({
|
||
url:'/page_Beehive/Beehive_detail?beehiveId=' + this.fxobj.beehiveId
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url: '/pages/Apiary/Apiary_detail?id=' + this.fcobj.apiaryId
|
||
})
|
||
}
|
||
},
|
||
// 请求蜂种
|
||
getfz() {
|
||
this.$u.get(`/common/getDictByType?dictType=apiary_bee_type`).then(res => {
|
||
if (res.code == 200) {
|
||
for (let i = 0; i < res.data.length; i++) {
|
||
if (res.data[i].dictValue == this.fcobj.beeType) {
|
||
this.listfz = res.data[i].dictLabel
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 请求蜜源
|
||
getmy() {
|
||
this.$u.get(`/common/getDictByType?dictType=apiary_honey_type`).then(res => {
|
||
if (res.code == 200) {
|
||
for (let i = 0; i < res.data.length; i++) {
|
||
if (res.data[i].dictValue == this.fcobj.honeyType) {
|
||
this.listmy = res.data[i].dictLabel
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 请求天气预告
|
||
gettq(){
|
||
this.$u.get(`weather/7d?location=${this.longitudetq},${this.latitudetq}`).then(res => {
|
||
if(res.code == 200){
|
||
this.daily = res.data.daily
|
||
}
|
||
})
|
||
},
|
||
// 请求当前天气
|
||
gettqs(){
|
||
this.$u.get(`weather/now?location=${this.longitudetq},${this.latitudetq}`).then(res => {
|
||
if(res.code == 200){
|
||
this.nowtqobj = res.data.now
|
||
}
|
||
})
|
||
},
|
||
// 点击地图图标
|
||
handleMarkerTap(e) {
|
||
let markerId = e.markerId.toString()
|
||
let firstDigit = markerId.charAt(0)
|
||
if (firstDigit === '1') {
|
||
// 蜂场
|
||
this.fxslag = false
|
||
this.fcflag = true
|
||
markerId = markerId.substring(1)
|
||
this.id = markerId
|
||
this.$u.get(`/farm/apiary/${this.id}`).then(res => {
|
||
if(res.code == 200){
|
||
this.fcobj = res.data
|
||
this.latitudetq = res.data.lat
|
||
this.longitudetq = res.data.lng
|
||
this.gettq()
|
||
this.getfz()
|
||
this.getmy()
|
||
this.gettqs()
|
||
}
|
||
})
|
||
|
||
} else if (firstDigit === '2') {
|
||
// 蜂箱
|
||
this.fcflag = false
|
||
this.fxslag = true
|
||
markerId = markerId.substring(1)
|
||
this.id = markerId
|
||
this.$u.get(`/farm/beehive/${this.id}`).then(res => {
|
||
if(res.code == 200){
|
||
this.fxobj = res.data
|
||
// 请求蜂箱之后请求蜂箱所属蜂场 计算蜂种和蜜源
|
||
this.$u.get(`/farm/apiary/${this.fxobj.apiaryId}`).then(res => {
|
||
if(res.code == 200){
|
||
this.fcobj = res.data
|
||
this.getfz()
|
||
this.getmy()
|
||
}
|
||
})
|
||
this.latitudetq = res.data.lat
|
||
this.longitudetq = res.data.lng
|
||
this.gettq()
|
||
this.gettqs()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 地图回正
|
||
async setMapScale(e, val) {
|
||
let mapContext = uni.createMapContext('map', this);
|
||
let setScale = () => {
|
||
return new Promise((resolve, reject) => {
|
||
mapContext.getScale({
|
||
success: r => {
|
||
this.mapScale = 15
|
||
resolve()
|
||
}
|
||
})
|
||
})
|
||
};
|
||
await setScale();
|
||
mapContext.moveToLocation({
|
||
success: (res) => {
|
||
const timer = setTimeout(() => {
|
||
this.mapScale = 15
|
||
clearTimeout(timer);
|
||
}, 500);
|
||
},
|
||
})
|
||
},
|
||
getMyLocations() {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
this.jinweidu = res.longitude + ',' + res.latitude
|
||
this.latitude = Number(res.latitude.toFixed(5)) - 0.004
|
||
this.longitude = Number(res.longitude.toFixed(5)) + 0.004
|
||
this.setMapScale()
|
||
this.$u.get("/farm/beehive/listNearBy?center=" + this.jinweidu + '&radius=' + 1000)
|
||
.then(
|
||
res => {
|
||
if (res.code == 200) {
|
||
// 蜂箱
|
||
this.listmaps = res.data
|
||
res.data.forEach(item => {
|
||
let id = "2" + item.beehiveId //蜂箱id前加2 以此进行判断
|
||
this.covers.push({
|
||
id: parseFloat(id),
|
||
latitude: item.lat,
|
||
longitude: item.lng,
|
||
width: 25,
|
||
height: 30,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
|
||
label: {
|
||
type: 2,
|
||
content: item.name,
|
||
anchorX: this.calculateAnchorX(item.name),
|
||
fontWeight: 700,
|
||
color: '#FFCC25',
|
||
textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
|
||
borderColor: '#fff',
|
||
borderRadius: 5,
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
}
|
||
});
|
||
},
|
||
|
||
getMyLocation() {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
this.jinweidu = res.longitude + ',' + res.latitude
|
||
this.latitude = Number(res.latitude.toFixed(5)) - 0.004
|
||
this.longitude = Number(res.longitude.toFixed(5)) + 0.004
|
||
this.$u.get("/farm/apiary/listNearBy?center=" + this.jinweidu + '&radius=' + 1000)
|
||
.then(
|
||
res => {
|
||
if (res.code == 200) {
|
||
// 蜂场
|
||
this.listmap = res.data
|
||
res.data.forEach(item => {
|
||
let id = '1' + item.apiaryId //蜂箱id前加1 以此进行判断
|
||
this.covers.push({
|
||
id: parseFloat(id),
|
||
latitude: item.lat,
|
||
longitude: item.lng,
|
||
width: 25,
|
||
height: 30,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
||
label: {
|
||
type: 1,
|
||
content: item.name,
|
||
anchorX: this.calculateAnchorX(item.name),
|
||
fontWeight: 700,
|
||
color: '#FFCC25',
|
||
textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
|
||
borderColor: '#fff',
|
||
borderRadius: 5,
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
}
|
||
})
|
||
},
|
||
// 缩放显示隐藏
|
||
updateMarkers() {
|
||
this.mapContext.getScale({
|
||
success: (res) => {
|
||
this.covers = []
|
||
if (res.scale <= 14) {
|
||
this.addMarkersWithoutLabels()
|
||
} else {
|
||
this.addMarkersWithLabels()
|
||
}
|
||
},
|
||
fail: (error) => {
|
||
// console.error('获取地图缩放级别失败：', error);
|
||
},
|
||
});
|
||
},
|
||
addMarkersWithoutLabels() {
|
||
this.listmap.forEach((item) => {
|
||
let id = '1' + item.apiaryId
|
||
this.covers.push({
|
||
id: parseFloat(id),
|
||
latitude: item.lat,
|
||
longitude: item.lng,
|
||
width: 25,
|
||
height: 30,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
||
borderColor: '#fff',
|
||
borderRadius: 5,
|
||
label: {
|
||
type: 1,
|
||
}
|
||
})
|
||
});
|
||
this.listmaps.forEach((item) => {
|
||
let id = "2" + item.beehiveId
|
||
this.covers.push({
|
||
id: parseFloat(id),
|
||
latitude: item.lat,
|
||
longitude: item.lng,
|
||
width: 25,
|
||
height: 30,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
|
||
borderColor: '#fff',
|
||
borderRadius: 5,
|
||
label: {
|
||
type: 2,
|
||
}
|
||
})
|
||
});
|
||
},
|
||
addMarkersWithLabels() {
|
||
this.listmap.forEach((item) => {
|
||
let id = '1' + item.apiaryId
|
||
this.covers.push({
|
||
id: parseFloat(id),
|
||
latitude: item.lat,
|
||
longitude: item.lng,
|
||
width: 25,
|
||
height: 30,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
||
label: {
|
||
type: 1,
|
||
content: item.name,
|
||
anchorX: this.calculateAnchorX(item.name),
|
||
fontWeight: 700,
|
||
color: '#FFCC25',
|
||
textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
|
||
rotate: 20,
|
||
borderColor: '#fff',
|
||
borderRadius: 5,
|
||
}
|
||
})
|
||
});
|
||
this.listmaps.forEach((item) => {
|
||
let id = "2" + item.beehiveId
|
||
this.covers.push({
|
||
id: parseFloat(id),
|
||
latitude: item.lat,
|
||
longitude: item.lng,
|
||
width: 25,
|
||
height: 30,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
|
||
label: {
|
||
type: 2,
|
||
content: item.name,
|
||
anchorX: this.calculateAnchorX(item.name),
|
||
fontWeight: 700,
|
||
color: '#FFCC25',
|
||
textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
|
||
rotate: 20,
|
||
borderColor: '#fff',
|
||
borderRadius: 5,
|
||
}
|
||
})
|
||
});
|
||
},
|
||
calculateAnchorX(name) {
|
||
let chineseLength = 0;
|
||
let englishLength = 0;
|
||
for (let i = 0; i < name.length; i++) {
|
||
const charCode = name.charCodeAt(i);
|
||
if (charCode >= 0x4e00 && charCode <= 0x9fa5) {
|
||
chineseLength++;
|
||
} else if (/[a-zA-Z]/.test(name[i])) {
|
||
englishLength = englishLength + 0.3
|
||
}
|
||
}
|
||
const totalLength = chineseLength + englishLength * 2
|
||
return -totalLength * 7
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #FAFDFD;
|
||
}
|
||
|
||
.page {
|
||
// position: relative;
|
||
width: 750rpx;
|
||
// 蜂场弹窗
|
||
.fxtan {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 670rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 50rpx 50rpx 0 0;
|
||
z-index: 99;
|
||
padding: 30rpx 52rpx;
|
||
box-sizing: border-box;
|
||
.btncha{
|
||
width: 658rpx;
|
||
height: 88rpx;
|
||
background: #FFCC25;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin-top: 46rpx;
|
||
text-align: center;
|
||
line-height: 88rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.fclist{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 28rpx;
|
||
.fcli{
|
||
margin: 10rpx;
|
||
flex: 1 0 calc(50% - 20rpx);
|
||
}
|
||
}
|
||
.fcfm {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 28rpx;
|
||
justify-content: space-between;
|
||
view {
|
||
width: 182rpx;
|
||
height: 60rpx;
|
||
background: rgba(61,61,61,0.3);
|
||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
line-height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #FAFDFD;
|
||
image {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fctq {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
color: #3D3D3D;
|
||
|
||
view {
|
||
margin-right: 40rpx;
|
||
}
|
||
}
|
||
|
||
.fcdz {
|
||
font-size: 32rpx;
|
||
color: #808080;
|
||
margin-top: 20rpx;
|
||
|
||
text {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.fcbh {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.fctop {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.fclt {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.fctit {
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.fcry {
|
||
width: 90rpx;
|
||
height: 42rpx;
|
||
background: #FFC107;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
line-height: 42rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
|
||
image {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
margin-right: 28rpx;
|
||
}
|
||
}
|
||
|
||
.fcrt {
|
||
// font-weight: 600;
|
||
font-size: 64rpx;
|
||
padding-bottom: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 蜂箱弹窗
|
||
.fctan {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 730rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 50rpx 50rpx 0 0;
|
||
z-index: 99;
|
||
padding: 30rpx 52rpx;
|
||
box-sizing: border-box;
|
||
.btncha{
|
||
width: 658rpx;
|
||
height: 88rpx;
|
||
background: #FFCC25;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin-top: 46rpx;
|
||
text-align: center;
|
||
line-height: 88rpx;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.fclist{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 28rpx;
|
||
.fcli{
|
||
margin: 10rpx;
|
||
flex: 1 0 calc(50% - 20rpx);
|
||
}
|
||
}
|
||
.fcfm {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 28rpx;
|
||
view {
|
||
width: 182rpx;
|
||
height: 60rpx;
|
||
margin-right: 50rpx;
|
||
background: rgba(61,61,61,0.3);
|
||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
line-height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
color: #FAFDFD;
|
||
image {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fctq {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
color: #3D3D3D;
|
||
|
||
view {
|
||
margin-right: 40rpx;
|
||
}
|
||
}
|
||
|
||
.fcdz {
|
||
font-size: 32rpx;
|
||
color: #808080;
|
||
margin-top: 20rpx;
|
||
|
||
text {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.fcbh {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.fctop {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.fclt {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.fctit {
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.fcry {
|
||
width: 90rpx;
|
||
height: 42rpx;
|
||
background: #FFC107;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
line-height: 42rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
}
|
||
|
||
image {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
margin-right: 28rpx;
|
||
}
|
||
}
|
||
|
||
.fcrt {
|
||
// font-weight: 600;
|
||
font-size: 64rpx;
|
||
padding-bottom: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.fxtongji {
|
||
position: fixed;
|
||
top: 15vh;
|
||
right: 50rpx;
|
||
z-index: 99;
|
||
|
||
.one {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: rgba(191, 191, 191, 0.4);
|
||
padding: 4rpx 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 30rpx;
|
||
|
||
.wz {
|
||
color: #3D3D3D;
|
||
font-size: 32rpx;
|
||
margin: 0 15rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.shu {
|
||
color: #FFC107;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
|
||
.two {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
background-color: rgba(191, 191, 191, 0.4);
|
||
padding: 4rpx 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 30rpx;
|
||
|
||
.wz {
|
||
color: #3D3D3D;
|
||
font-size: 32rpx;
|
||
margin: 0 15rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.shu {
|
||
color: #FFC107;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
image {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.map {
|
||
width: 750rpx;
|
||
height: 100vh;
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
</style> |