kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

地图问题修复

Browse Source
This commit is contained in:
aixianling
2021-12-21 16:40:02 +08:00
parent 2d81852c6f
commit 633d85de91
3 changed files with 295 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/apps/AppBuilding/components/list.vue
View File

@@ -10,7 +10,7 @@
<p class="address">{{item.createAddress}}</p>
<span class="status" :class="'color'+item.locationStatus">{{$dict.getLabel('BuildLocationStatus', item.locationStatus)}}</span>
</div>
<div class="item-btn" v-if="item.locationStatus != 1" @click="toMap(item.communityId, item.areaId)">
<div class="item-btn" v-if="item.locationStatus != 1" @click="toMap(item.id, item.areaId)">
<span>去定位</span>
</div>
</div>
@@ -68,7 +68,7 @@ export default {
params: {id, areaId}
})
}
},
onReachBottom() {
this.current++;
@@ -85,7 +85,7 @@ export default {
.item{
width: 100%;
background: #FFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
border-radius: 8px;
box-sizing: border-box;
position: relative;
@@ -159,4 +159,4 @@ export default {
}
}
}
</style>
</style>

91
src/apps/AppBuilding/components/map.vue
View File

@@ -4,7 +4,7 @@
<img src="./img/model-icon.png" alt="" @click="toDetail"> 楼栋<br/>模型
</div>
<div class="map-content">
<AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
<AiTMap :areaId="user.areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
</div>
<div class="footer">
<div class="click" @click="isFlag=true">点击定位</div>
@@ -48,54 +48,62 @@
</template>
<script>
import { mapState } from 'vuex'
import {mapState} from 'vuex'
export default {
props: ['params'],
data() {
return {
areaId: '',
ops: {},
lib: '',
lib: null,
map: null,
markerLayer: '',
isFlag: false,
latLng: {lat: '', lng: ''},
retryTimes: 0
}
},
computed: { ...mapState(['user']) },
computed: {...mapState(['user'])},
mounted() {
this.areaId = this.params.areaId
this.initMap()
},
methods: {
initMap() { //初始化地图
this.$nextTick(() =>{
let {lib: TMap, map} = this
map.on("click", (evt) => {
if( this.markerLayer) {
this.markerLayer.setMap(null);
}
this.markerLayer = new TMap.MultiMarker({
id: 'marker-layer',
map: map
});
if(this.isFlag) {
this.markerLayer.add({
position: evt.latLng
});
this.latLng = {
lat: evt.latLng.lat,
lng: evt.latLng.lng
this.$nextTick(() => {
let {lib: TMap, map, retryTimes} = this
if (map) {
map.on("click", (evt) => {
if (this.markerLayer) {
this.markerLayer.setMap(null);
}
}
});
this.markerLayer = new TMap.MultiMarker({
id: 'marker-layer',
map: map
});
if (this.isFlag) {
this.markerLayer.add({
position: evt.latLng
});
this.latLng = {
lat: evt.latLng.lat,
lng: evt.latLng.lng
}
}
});
} else {
if (retryTimes < 5)
setTimeout(() => {
this.retryTimes++
this.initMap()
}, 1000)
}
})
},
confirm() {
if(!this.latLng.lat) {
if (!this.latLng.lat) {
return this.$u.toast(`未获取到定位信息，无法定位`)
}
@@ -122,22 +130,24 @@ export default {
params: this.params
})
}
}
}
</script>
<style lang="scss" scoped>
uni-page-body{
uni-page-body {
height: 100%;
}
.map {
height: 100%;
.build-btn{
.build-btn {
width: 80px;
height: 160px;
background: #FFF;
box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.5);
box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
border-radius: 8px;
position: fixed;
bottom: 136px;
@@ -150,17 +160,20 @@ uni-page-body{
font-weight: 500;
color: #666;
line-height: 30px;
img{
img {
width: 48px;
height: 48px;
margin-bottom: 8px;
}
}
.map-content{
.map-content {
width: 100%;
height: 100%;
}
.footer{
.footer {
width: 100%;
position: fixed;
bottom: 0;
@@ -173,16 +186,18 @@ uni-page-body{
height: 112px;
line-height: 112px;
text-align: center;
.click{
.click {
flex: 1;
color: #333;
background-color: #fff;
}
.btn{
.btn {
flex: 2;
background: #1365DD;
color: #FFF;
}
}
}
</style>
</style>

560
src/apps/AppBuilding/components/searchMap.vue
View File

@@ -7,18 +7,18 @@
<div class="clear-btn">
<img src="./img/del-icon.png" alt="" class="del-icon" v-if="name" @click="clear">
</div>
<span class="search-btn" @click="search">搜索</span>
</div>
<div class="search-list" v-if="show" @click="show=false">
<div class="title border">
<img src="./img/search-icon.png" alt="" class="search-icon">{{name}}
<img src="./img/search-icon.png" alt="" class="search-icon">{{ name }}
</div>
<div class="item border" v-for="(item, index) in buildList" :key="index" @click.stop="getBuidInfo(item)">
<img src="./img/user-icon.png" alt="" class="search-icon user-icon">
<div class="item-content">
<h3>{{item.residentName}}</h3>
<p>{{item.areaName || ''}}{{item.createAddress}}</p>
<h3>{{ item.residentName }}</h3>
<p>{{ item.areaName || '' }}{{ item.createAddress }}</p>
</div>
</div>
</div>
@@ -26,24 +26,24 @@
<img src="./img/build-icon.png" alt=""> 楼栋<br/>列表
</div>
<div class="map-content">
<AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
<AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"/>
</div>
<u-popup v-model="showPop" mode="bottom" border-radius="14">
<div class="popup" >
<div class="popup">
<div class="bg"></div>
<div class="title">{{detailInfo.house.createAddress || ''}}</div>
<p class="address">{{detailInfo.build.createAddress || ''}}</p>
<div class="title">{{ detailInfo.house.createAddress || '' }}</div>
<p class="address">{{ detailInfo.build.createAddress || '' }}</p>
<div class="info-flex">
<span class="label">所属社区</span>
<span class="value">{{detailInfo.build.areaName}}</span>
<span class="value">{{ detailInfo.build.areaName }}</span>
</div>
<div class="info-flex">
<span class="label">所属小区</span>
<span class="value">{{detailInfo.build.communityName}}</span>
<span class="value">{{ detailInfo.build.communityName }}</span>
</div>
<div class="info-flex">
<span class="label">房屋类型</span>
<span class="value">{{$dict.getLabel('communityBuildingType', detailInfo.house.buildingType)}}</span>
<span class="value">{{ $dict.getLabel('communityBuildingType', detailInfo.house.buildingType) }}</span>
</div>
<div class="info-flex">
<span class="label">所属网格</span>
@@ -55,8 +55,12 @@
</div>
<div class="info-flex">
<span class="label">楼栋长</span>
<span class="value">{{detailInfo.build.managerName || ''}}&nbsp;&nbsp;{{detailInfo.build.managerPhone || ''}}
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)" class="phone-icon" v-if="detailInfo.build.managerPhone">
<span
class="value">{{ detailInfo.build.managerName || '' }}&nbsp;&nbsp;{{
detailInfo.build.managerPhone || ''
}}
<img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)"
class="phone-icon" v-if="detailInfo.build.managerPhone">
</span>
</div>
</div>
@@ -66,15 +70,16 @@
</template>
<script>
import { mapState } from 'vuex'
export default {
import {mapState} from 'vuex'
export default {
data() {
return {
latLngCenter: {},
areaId: '',
ops: {},
lib: '',
lib: null,
map: null,
markerArr: [],
show: false,
@@ -86,298 +91,162 @@ export default {
house: {},
build: {}
},
showPop: false
showPop: false,
retryMapCount: 0
}
},
computed: { ...mapState(['user']) },
computed: {...mapState(['user'])},
mounted() {
this.areaId = this.user.areaId
this.getCenterLatLng()
// Promise.all([this.getCenterLatLng(),this.getCommunityList()])
this.getCenterLatLng().then(points => {
this.getMarkerCluster(points)
})
},
created() {
this.$dict.load("communityBuildingType")
},
methods: {
initMap() {
this.$nextTick(() =>{
let {lib: TMap, map} = this
var ClusterBubbleClick;
this.ClusterBubble = function (options) {
TMap.DOMOverlay.call(this, options)
}
// this.ClusterBubble.prototype = new TMap.DOMOverlay();
// this.ClusterBubble.prototype.onInit = function (options) {
// this.content = options.content;
// this.position = options.position;
// }
// 创建点聚合
var markerCluster = new TMap.MarkerCluster({
id: 'cluster',
map: map,
enableDefaultStyle: false, // 关闭默认样式
minimumClusterSize: 3,
geometries: [{ // 点数组
position: new TMap.LatLng(39.953416, 116.480945)
},
{
position: new TMap.LatLng(39.984104, 116.407503)
},
{
position: new TMap.LatLng(39.908802, 116.497502)
},
{
position: new TMap.LatLng(40.040417, 116.373514)
},
{
position: new TMap.LatLng(39.953416, 116.380945)
},
{
position: new TMap.LatLng(39.984104, 116.307503)
},
{
position: new TMap.LatLng(39.908802, 116.397502)
},
{
position: new TMap.LatLng(40.040417, 116.273514)
},
],
zoomOnClick: true,
gridSize: 60,
averageCenter: false
});
var clusterBubbleList = [];
var markerGeometries = [];
var marker = null;
// 监听聚合簇变化
markerCluster.on('cluster_changed', function (e) {
// 销毁旧聚合簇生成的覆盖物
if (clusterBubbleList.length) {
clusterBubbleList.forEach(function (item) {
item.destroy();
})
clusterBubbleList = [];
}
markerGeometries = [];
// 根据新的聚合簇数组生成新的覆盖物和点标记图层
var clusters = markerCluster.getClusters();
clusters.forEach(function (item) {
if (item.geometries.length > 1) {
let clusterBubble = new this.ClusterBubble({
map,
position: item.center,
content: item.geometries.length,
});
clusterBubble.on('click', () => {
map.fitBounds(item.bounds);
});
clusterBubbleList.push(clusterBubble);
} else {
markerGeometries.push({
position: item.center
});
}
});
if (marker) {
// 已创建过点标记图层，直接更新数据
marker.setGeometries(markerGeometries);
} else {
// 创建点标记图层
console.log(markerGeometries)
marker = new TMap.MultiMarker({
id: 'marker-layer', // 图层id
map: map,
styles: {
// 点标注的相关样式
marker: new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 16, y: 32 },
src:'',
}),
},
geometries: [
{
// 点标注数据数组
id: 'demo',
styleId: 'marker',
position: new TMap.LatLng(40.040422, 116.273521),
},
],
});
markerGeometries.map((item, index) => {
var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
+`腾讯大厦${index}<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
new TMap.InfoWindow(
{
map: map,
enableCustom: true,
position: new TMap.LatLng(item.position.lat, item.position.lng),
offset: { y: -70, x: -5 },
content: html
},
);
})
}
});
})
},
// // 以下代码为基于DOMOverlay实现聚合点气泡
// function ClusterBubble(options) {
// TMap.DOMOverlay.call(this, options);
// }
// ClusterBubble.prototype = new TMap.DOMOverlay();
// ClusterBubble.prototype.onInit = function (options) {
// this.content = options.content;
// this.position = options.position;
// };
// // 销毁时需要删除监听器
// ClusterBubble.prototype.onDestroy = function() {
// this.dom.removeEventListener('click', this.onClick);
// this.removeAllListeners();
// };
// ClusterBubble.prototype.onClick = function() {
// this.emit('click');
// };
// // 创建气泡DOM元素
// ClusterBubble.prototype.createDOM = function () {
// var dom = document.createElement('div');
// dom.classList.add('clusterBubble');
// dom.innerText = this.content;
// dom.style.cssText = [
// 'width: ' + (40 + parseInt(this.content) * 2) + 'px;',
// 'height: ' + (40 + parseInt(this.content) * 2) + 'px;',
// 'line-height: ' + (40 + parseInt(this.content) * 2) + 'px;',
// ].join(' ');
// // 监听点击事件，实现zoomOnClick
// this.onClick = this.onClick.bind(this);
// // pc端注册click事件，移动端注册touchend事件
// dom.addEventListener('click', this.onClick);
// return dom;
// };
// ClusterBubble.prototype.updateDOM = function () {
// if (!this.map) {
// return;
// }
// // 经纬度坐标转容器像素坐标
// let pixel = this.map.projectToContainer(this.position);
// // 使文本框中心点对齐经纬度坐标点
// let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
// let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
// this.dom.style.transform = `translate(${left}, ${top})`;
// this.emit('dom_updated');
// };
// window.ClusterBubble = ClusterBubble;
getCenterLatLng() {
this.$http.post(`/app/appdvcpconfig/getCorpLocation`, ).then(res => {
if (res.code == 0) {
return this.$http.post(`/app/appdvcpconfig/getCorpLocation`).then(res => {
if (res?.data) {
this.latLngCenter = res.data
this.getCommunityList()
return this.getCommunityList()
}
})
},
getCommunityList() {
this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
return this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
params: {
current: 1,
size: 1000000,
areaId: this.user.areaId
}
}).then(res => {
if (res.code === 0) {
if (res?.data) {
this.buildList = res.data
const points = res.data.map(item => {
return res.data.map(item => {
return {
...item,
lnglat: [item.lng, item.lat],
id: item.id,
corpId: item.corpId,
areaName:item.areaName,
buildingNumber: item.name || item.buildingNumber,
communityName:item.name || item.communityName,
communityName: item.name || item.communityName,
}
})
this.addMakert(points)
}
})
},
addMakert(points) {
this.$nextTick(() =>{
let {lib: TMap, map} = this
var center = new TMap.LatLng(this.latLngCenter.lat, this.latLngCenter.lng)
map.setCenter(center)
var marker = null;
map.setZoom(18)
var geometriesList = []
points.map((item) => {
item.position = new TMap.LatLng(item.lnglat[1], item.lnglat[0])
var info = {
id: item.id,
styleId: 'marker',
position: new TMap.LatLng(item.lnglat[1], item.lnglat[0])
getMarkerCluster(points) {
let {lib: TMap, map, retryMapCount} = this
if (map) {
map.setCenter(this.latLngCenter)
let MarkerCluster = new TMap.MarkerCluster({
map, gridSize: 60,
enableDefaultStyle: false, // 关闭默认样式
geometries: points?.map(e => ({
position: new TMap.LatLng(e.lat, e.lng),
content: `${e.createAddress} | ${e.houseNum}`
})) || [],
zoomOnClick: true
})
let geometries = [], marker, markers = []
MarkerCluster.on('cluster_changed', () => {
if (markers.length) {
markers.forEach(function (item) {
item.destroy();
})
markers = [];
}
geometries = []
let clusters = MarkerCluster.getClusters()
clusters.forEach((item) => {
if (item.geometries.length > 1) {
//聚合样式
geometries.push({
styleId: 'cluster',
position: item.center,
content: item.geometries.length.toString() || "0"
})
} else {
//点标记样式
// 以下代码为基于DOMOverlay实现聚合点气泡
function ClusterBubble(options) {
TMap.DOMOverlay.call(this, options);
}
ClusterBubble.prototype = new TMap.DOMOverlay();
ClusterBubble.prototype.onInit = function (options) {
this.content = options.content;
this.position = options.position;
};
// 销毁时需要删除监听器
ClusterBubble.prototype.onDestroy = function () {
this.dom.removeEventListener('click', this.onClick);
this.removeAllListeners();
};
ClusterBubble.prototype.onClick = function () {
this.emit('click');
};
// 创建气泡DOM元素
ClusterBubble.prototype.createDOM = function () {
var dom = document.createElement('div');
dom.classList.add('marker');
dom.innerText = this.content;
// 监听点击事件，实现zoomOnClick
this.onClick = this.onClick.bind(this);
// pc端注册click事件，移动端注册touchend事件
dom.addEventListener('click', this.onClick);
return dom;
};
ClusterBubble.prototype.updateDOM = function () {
if (!this.map) {
return;
}
// 经纬度坐标转容器像素坐标
let pixel = this.map.projectToContainer(this.position);
// 使文本框中心点对齐经纬度坐标点
let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
this.dom.style.transform = `translate(${left}, ${top})`;
this.emit('dom_updated');
};
let {content} = item.geometries?.[0] || {},
overlay = new ClusterBubble({map, position: item.center, content})
overlay.on('click', () => {
map.fitBounds(item.bounds);
})
markers.push(overlay)
}
});
if (marker) {
marker.setGeometries(geometries)
} else {
marker = new TMap.MultiMarker({
map, enableCollision: true, geometries,
styles: {
cluster: new TMap.MarkerStyle({
width: 48,
height: 48,
anchor: {x: 24, y: 24},
src: this.$cdn + "/map/cluster.png",
color: '#fff',
// direction: 'center',
size: 18
})
},
})
}
geometriesList.push(info)
})
marker = new TMap.MultiMarker({
id: 'marker-layer', // 图层id
map: map,
styles: {
// 点标注的相关样式
marker: new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 16, y: 32 },
src:'',
}),
},
geometries: geometriesList,
});
points.map((item) => {
var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
+`${item.communityName}${item.buildingNumber}栋<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
new TMap.InfoWindow(
{
map: map,
enableCustom: true,
position: item.position,
offset: { y: -70, x: -5 },
content: html
},
);
})
})
return Promise.resolve()
} else {
if (retryMapCount < 5) {
setTimeout(() => {
this.retryMapCount++
return this.getMarkerCluster(points)
}, 1000)
} else Promise.reject("加载失败")
}
},
clear() {
this.name = ''
@@ -400,36 +269,34 @@ export default {
lnglat: [item.lng, item.lat],
id: item.id,
corpId: item.corpId,
areaName:item.areaName,
areaName: item.areaName,
buildingNumber: item.name || item.buildingNumber,
communityName:item.name || item.communityName,
communityName: item.name || item.communityName,
}
})
this.addMakert(points)
}else {
this.getMarkerCluster(points)
} else {
this.show = false
this.$u.toast('未搜索到结果，请换个关键字重试！')
}
})
},
getBuidInfo(item) {
this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
if (res.code == 0) {
this.show = false
this.show = false
this.showPop = true
this.detailInfo = res.data
}
})
},
toList() {
console.log(122)
this.$emit('change', {
type: 'List',
})
},
callPhone(phone) {
uni.makePhoneCall({ phoneNumber: phone })
uni.makePhoneCall({phoneNumber: phone})
},
toDetail(id) {
this.$emit('change', {
@@ -442,16 +309,14 @@ export default {
</script>
<style lang="scss" scoped>
uni-page-body{
height: 100%;
}
.searchMap {
height: 100%;
.grid-input{
height: 100vh;
.grid-input {
width: 720px;
height: 88px;
background: #FFF;
box-shadow: 0px 4px 8px 0px rgba(192, 185, 185, 0.5);
box-shadow: 0 4px 8px 0 rgba(192, 185, 185, 0.5);
border-radius: 16px;
position: fixed;
top: 24px;
@@ -459,12 +324,14 @@ uni-page-body{
z-index: 99999;
padding: 16px 20px;
box-sizing: border-box;
.search-icon{
.search-icon {
width: 48px;
height: 48px;
margin-right: 16px;
}
.input{
.input {
display: inline-block;
padding: 8px 0;
height: 32px;
@@ -474,24 +341,28 @@ uni-page-body{
font-family: MicrosoftYaHei;
color: #666;
}
.back-icon{
.back-icon {
width: 16px;
height: 32px;
margin-right: 24px;
vertical-align: super;
}
.clear-btn{
.clear-btn {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 30px;
}
.del-icon{
.del-icon {
width: 32px;
height: 32px;
vertical-align: super;
}
.search-btn{
.search-btn {
display: inline-block;
width: 80px;
height: 32px;
@@ -505,7 +376,8 @@ uni-page-body{
margin-top: 12px;
}
}
.search-list{
.search-list {
position: fixed;
width: 100%;
height: 700px;
@@ -516,33 +388,39 @@ uni-page-body{
box-sizing: border-box;
background-color: #fff;
z-index: 99999;
.search-icon{
.search-icon {
width: 36px;
height: 36px;
margin-right: 16px;
vertical-align: sub;
}
.title{
.title {
height: 82px;
line-height: 82px;
font-size: 26px;
font-family: MicrosoftYaHeiSemibold;
color: #1365DD;
}
.item{
.item {
padding: 22px 0 24px 0;
}
.item-content{
.item-content {
display: inline-block;
width: 610px;
color: #333;
h3{
h3 {
font-size: 28px;
font-family: MicrosoftYaHeiSemibold;
line-height: 32px;
margin-bottom: 8px;
}
p{
p {
width: 100%;
font-size: 24px;
font-family: MicrosoftYaHei;
@@ -552,18 +430,21 @@ uni-page-body{
text-overflow: ellipsis;
}
}
.user-icon{
.user-icon {
vertical-align: top;
}
.border{
.border {
border-bottom: 1px solid #DEDFE1;
}
}
.build-btn{
.build-btn {
width: 80px;
height: 160px;
background: #FFF;
box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.5);
box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
border-radius: 8px;
position: fixed;
bottom: 136px;
@@ -576,26 +457,31 @@ uni-page-body{
font-weight: 500;
color: #666;
line-height: 30px;
img{
img {
width: 48px;
height: 48px;
margin-bottom: 8px;
}
}
.map-content{
.map-content {
width: 100%;
height: 100%;
}
.popup{
.popup {
padding: 0 32px 16px;
.bg{
.bg {
width: 64px;
height: 10px;
background: #CCC;
border-radius: 6px;
margin: 32px 0 32px 344px;
}
.title{
.title {
font-size: 36px;
font-family: PingFang-SC-Heavy, PingFang-SC;
font-weight: 800;
@@ -603,22 +489,26 @@ uni-page-body{
line-height: 50px;
margin-bottom: 24px;
}
.info-flex{
.info-flex {
padding: 26px 0 30px 0;
width: 100%;
border-bottom: 1px solid #D8DDE6;
line-height: 40px;
font-size: 28px;
.label{
.label {
display: inline-block;
width: 160px;
font-weight: 800;
color: #333;
}
.value{
.value {
color: #666;
font-size: 26px;
.phone-icon{
.phone-icon {
width: 40px;
height: 40px;
vertical-align: sub;
@@ -627,7 +517,8 @@ uni-page-body{
}
}
}
.popup-btn{
.popup-btn {
width: 100%;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
@@ -638,5 +529,30 @@ uni-page-body{
background: #1365DD;
color: #FFF;
}
::v-deep.marker {
color: #fff;
background: #5088FF;
padding: 0 32px;
width: fit-content;
height: 56px;
border-radius: 52px;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
&:before {
content: " ";
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%, 100%);
border: 12px solid transparent;
border-top-color: #5088FF;
}
}
}
</style>
</style>