639 lines
22 KiB
Vue
639 lines
22 KiB
Vue
<template>
|
||
<div class="divBox">
|
||
<el-card class="box-card">
|
||
<!--顶部搜索栏-->
|
||
<div slot="header" class="clearfix">
|
||
<div class="container">
|
||
<el-form inline size="small" label-width="80px">
|
||
<el-form-item label="搜索：">
|
||
<el-input v-model="tableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable />
|
||
<el-input v-model="tableFrom.address" placeholder="请输入地址" class="selWidth" clearable>
|
||
<el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item class="width100">
|
||
<el-button size="small" type="primary" @click="addPickupPoint(0)">添加酒道馆</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<!--表格信息-->
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="酒道馆管理" name="list">
|
||
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
|
||
<el-table-column prop="id" label="ID" min-width="100" align="center"/>
|
||
<el-table-column label="名称" prop="title" align="center"/>
|
||
<el-table-column label="地址" prop="address" align="center"/>
|
||
<el-table-column label="状态" align="center">
|
||
<template slot-scope="scope">
|
||
<el-tag type="success" v-if="scope.row.is_show == 1" effect="dark">正常</el-tag>
|
||
<el-tag type="danger" v-else effect="dark">暂停使用</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="负责人数" align="center" min-width="200" >
|
||
<template slot-scope="scope">
|
||
<div class="staff">
|
||
<div class="block" v-for="(item,index) in Object.values(scope.row.user_list)" :key="index">
|
||
<img class="avatar" :src="item.avatar || moren" />
|
||
<div class="info">
|
||
<div class="name">{{ item.nickname || item.real_name }}</div>
|
||
<div class="uid">UID：{{ item.uid }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="添加时间" prop="create_time" min-width="150" align="center"/>
|
||
<el-table-column label="操作" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="primary" @click="addPickupPoint(scope.row.id)">编辑</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="提货记录" name="record">
|
||
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
|
||
<el-table-column prop="id" label="ID" min-width="100" align="center"/>
|
||
<el-table-column label="提货用户" min-width="150" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="user-content">
|
||
<div class="user-avatar" v-if="scope.row.avatar && scope.row.avatar != 1">
|
||
<img :src="scope.row.avatar" />
|
||
</div>
|
||
<div class="user-info">
|
||
<div class="nickname">{{ scope.row.nickname }}</div>
|
||
<div class="user-id">ID：{{ scope.row.uid }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作员" min-width="150" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="user-content">
|
||
<div class="user-avatar" v-if="scope.row.staff_avatar && scope.row.staff_avatar != 1">
|
||
<img :src="scope.row.staff_avatar" />
|
||
</div>
|
||
<div class="user-info">
|
||
<div class="nickname">{{ scope.row.staff_nickname }}</div>
|
||
<div class="user-id">ID：{{ scope.row.staff_uid }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="酒道馆" min-width="150" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.point_title }}<br />
|
||
{{ scope.row.point_address }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="总价值" prop="total_money" min-width="80" align="center"/>
|
||
<el-table-column label="使用积分" prop="use_integral" min-width="80" align="center"/>
|
||
<el-table-column label="差价" prop="diff_money" min-width="80" align="center"/>
|
||
<el-table-column label="实付差价" prop="diff_money_pay" min-width="80" align="center"/>
|
||
<el-table-column label="兑换时间" prop="create_time" min-width="80" align="center"/>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<!--分页-->
|
||
<div class="block">
|
||
<el-pagination
|
||
:page-sizes="[20, 40, 60, 80]"
|
||
:page-size="tableFrom.limit"
|
||
:current-page="tableFrom.page"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="tableData.total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="pageChange"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
<!--编辑弹框-->
|
||
<el-drawer :with-header="false" :size="1000" :visible.sync="drawer_show" direction="rtl" :before-close="handleClose">
|
||
<el-form ref="editInfoField" size="small" :rules="ruleValidate" :model="editInfo" label-width="130px" @submit.native.prevent>
|
||
<el-tabs type="border-card">
|
||
<div class="section">
|
||
<div class="title">酒道馆信息</div>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="名称：" prop="title">
|
||
<el-input v-model="editInfo.title" placeholder="请填写酒道馆名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="状态：" prop="is_show">
|
||
<el-switch v-model="editInfo.is_show" :active-value="1" :inactive-value="0" :width="55" active-text="开启" inactive-text="关闭" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="经纬度：" prop="lat">
|
||
<el-input :value="(editInfo.lat || '') + ',' + (editInfo.lng || '')" readonly enter-button="查找位置" style="width: 100%;" placeholder="请点击查找位置选择位置">
|
||
<el-button slot="append" style="background: #46a6ff; color: #fff; border-radius: 0 4px 4px 0;" @click="onSearchs" >查找位置</el-button>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="详细地址：" prop="address">
|
||
<el-input v-model="editInfo.address" placeholder="请填写酒道馆详细地址" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="title">
|
||
负责人
|
||
<el-button size="small" type="primary" @click="addStaff">添加负责人</el-button>
|
||
</div>
|
||
<div class="staff-list">
|
||
<div class="staff-box" v-for="(item,index) in Object.values(editInfo.user_list)" :key="index">
|
||
<img class="staff-avatar" :src="item.avatar || moren" />
|
||
<div class="staff-info">
|
||
<div class="staff-name">{{ item.nickname || item.real_name }}</div>
|
||
<div class="staff-uid">UID：{{ item.uid }}</div>
|
||
</div>
|
||
<el-button type="danger" icon="el-icon-delete" circle @click="closeStaffConfirm(item.uid)"></el-button>
|
||
</div>
|
||
</div>
|
||
<el-button size="small" type="success" @click="submitEditInfo">提交</el-button>
|
||
</div>
|
||
</el-tabs>
|
||
</el-form>
|
||
</el-drawer>
|
||
<!--用户选择-->
|
||
<el-dialog title="负责人选择" :visible.sync="userSelectVisible" width="80%" :before-close="closeStaff">
|
||
<el-card class="box-card">
|
||
<!--顶部搜索栏-->
|
||
<div slot="header" class="clearfix">
|
||
<div class="container">
|
||
<el-form inline size="small" label-width="80px">
|
||
<el-form-item label="">
|
||
<el-input v-model="userTableFrom.nickname" placeholder="请输入用户昵称" class="selWidth" clearable />
|
||
<el-input v-model="userTableFrom.phone" placeholder="请输入用户手机号" class="selWidth" clearable />
|
||
<el-input v-model="userTableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable>
|
||
<el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getUserList(1)" />
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<!--表格信息-->
|
||
<el-table v-loading="userListLoading" :data="userTableData.data" :key="Object.values(editInfo.uid_list).toString()" style="width: 100%" size="mini">
|
||
<el-table-column label="用户信息" prop="nickname" min-width="300" align="center">
|
||
<template slot-scope="scope">
|
||
<div class="user-content">
|
||
<div class="user-avatar">
|
||
<img :src="scope.row.avatar || moren" />
|
||
</div>
|
||
<div class="user-info">
|
||
<div class="nickname">{{ scope.row.nickname }}</div>
|
||
<div class="user-id">ID：{{ scope.row.uid }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="联系电话" prop="phone" min-width="150" align="center"/>
|
||
<el-table-column label="是否为当前酒道馆负责人" min-width="200" align="center">
|
||
<template slot-scope="scope">
|
||
<el-tag type="success" v-if="Object.values(editInfo.uid_list).includes(String(scope.row.uid))" effect="dark">是</el-tag>
|
||
<el-tag type="info" v-else effect="dark">不是</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" min-width="150" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button type="danger" v-if="Object.values(editInfo.uid_list).includes(String(scope.row.uid))" effect="dark" @click="closeStaffConfirm(scope.row.uid)">取消</el-button>
|
||
<el-button type="success" v-else effect="dark" @click="addStaffConfirm(scope.row)">添加</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--分页-->
|
||
<div class="block">
|
||
<el-pagination
|
||
:page-sizes="[20, 40, 60, 80]"
|
||
:page-size="userTableFrom.limit"
|
||
:current-page="userTableFrom.page"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="userTableData.total"
|
||
@size-change="handleUserSizeChange"
|
||
@current-change="pageUserChange"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="userSelectVisible = false">关 闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!--地图定位-->
|
||
<el-dialog
|
||
v-if="modalMap"
|
||
v-model="modalMap"
|
||
:visible.sync="modalMap"
|
||
title="选择位置"
|
||
close-on-click-modal
|
||
class="mapBox"
|
||
custom-class="dialog-scustom"
|
||
:append-to-body='true'
|
||
width="80%"
|
||
top="20px"
|
||
>
|
||
<iframe id="mapPage" width="100%" height="700px" frameborder="0" :src="keyUrl" />
|
||
</el-dialog>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {pickupPointList, pickupPointEdit, pickupPointInfo} from '@/api/marketing'
|
||
import {userLstApi} from "@/api/user";
|
||
import {configApi} from "@/api/system";
|
||
export default {
|
||
name: "preSaleProductList",
|
||
components: { },
|
||
data() {
|
||
return {
|
||
moren: require("@/assets/images/f.png"),
|
||
// 编辑弹框
|
||
drawer_show: false,
|
||
editInfo: {
|
||
title: '',
|
||
address: '',
|
||
is_show: 1,
|
||
uid_list: [],
|
||
user_list: {},
|
||
},
|
||
activeName: 'list',
|
||
ruleValidate: {
|
||
title: [{ required: true, message: '请填写酒道馆名称', trigger: 'blur' }],
|
||
lat: [{ required: true, message: '请选择酒道馆经纬度', trigger: 'blur' }],
|
||
address: [{ required: true, message: '请填写酒道馆详细地址', trigger: 'blur' }],
|
||
},
|
||
// 用户选择弹框
|
||
userSelectVisible: false,
|
||
userListLoading: true,
|
||
userTableFrom: {
|
||
page: 1,
|
||
limit: 20,
|
||
nickname: '',
|
||
phone: '',
|
||
uid: ''
|
||
},
|
||
userTableData: {
|
||
data: [],
|
||
total: 0,
|
||
},
|
||
// 列表相关
|
||
listLoading: true,
|
||
tableData: {
|
||
data: [],
|
||
total: 0,
|
||
},
|
||
tableFrom: {
|
||
page: 1,
|
||
limit: 20,
|
||
uid: '',
|
||
address: '',
|
||
title:'',
|
||
},
|
||
loading: false,
|
||
cardLists: [],
|
||
// 定位相关
|
||
modalMap: false,
|
||
mapKey: '',
|
||
keyUrl: '',
|
||
delivery_type: '',
|
||
};
|
||
},
|
||
watch: {},
|
||
mounted() {
|
||
window.addEventListener(
|
||
'message',
|
||
function(event) {
|
||
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
|
||
var loc = event.data
|
||
console.log(loc)
|
||
if (loc && loc.module === 'locationPicker') {
|
||
// 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
|
||
window.parent.selectAddress(loc)
|
||
}
|
||
},
|
||
false
|
||
)
|
||
window.selectAddress = this.selectAddress
|
||
|
||
this.getList('');
|
||
this.getMapKey();
|
||
},
|
||
methods: {
|
||
// 编辑取货点 - 弹出表单
|
||
addPickupPoint(id){
|
||
if (Number(id) > 0) {
|
||
// 编辑
|
||
let _this = this;
|
||
pickupPointInfo(id)
|
||
.then((res) => {
|
||
_this.editInfo = res.data;
|
||
_this.drawer_show = true;
|
||
})
|
||
.catch((res) => {
|
||
this.$message.error(res.message);
|
||
});
|
||
} else {
|
||
// 添加
|
||
this.editInfo = this.$options.data().editInfo;
|
||
this.drawer_show = true;
|
||
}
|
||
},
|
||
// 编辑取货点 - 关闭表单
|
||
handleClose() {
|
||
this.drawer_show = false;
|
||
},
|
||
// 编辑取货点 - 添加负责人弹框显示
|
||
addStaff(){
|
||
this.getUserList(1);
|
||
this.userSelectVisible = true;
|
||
},
|
||
// 编辑取货点 - 添加负责人弹框关闭
|
||
closeStaff() {
|
||
this.userSelectVisible = false;
|
||
},
|
||
// 编辑取货点 - 获取用户列表及分页相关
|
||
getUserList(num) {
|
||
let _this = this;
|
||
this.userListLoading = true;
|
||
this.userTableFrom.page = num ? num : this.userTableFrom.page;
|
||
userLstApi(this.userTableFrom)
|
||
.then((res) => {
|
||
this.userTableData.data = res.data.list;
|
||
this.userTableData.total = res.data.count;
|
||
this.userListLoading = false;
|
||
})
|
||
.catch((res) => {
|
||
this.userListLoading = false;
|
||
this.$message.error(res.message);
|
||
});
|
||
},
|
||
pageUserChange(page) {
|
||
this.userTableFrom.page = page;
|
||
this.getUserList('');
|
||
},
|
||
handleUserSizeChange(val) {
|
||
this.userTableFrom.limit = val;
|
||
this.getUserList('');
|
||
},
|
||
// 编辑取货点 - 添加负责人
|
||
addStaffConfirm(item){
|
||
this.editInfo.uid_list[String(item.uid)] = String(item.uid);
|
||
this.editInfo.user_list[String(item.uid)] = item;
|
||
this.$forceUpdate();
|
||
},
|
||
// 编辑取货点 - 删除负责人
|
||
closeStaffConfirm(uid){
|
||
delete this.editInfo.uid_list[String(uid)];
|
||
delete this.editInfo.user_list[String(uid)];
|
||
this.$forceUpdate();
|
||
},
|
||
// 编辑取货点 - 提交信息
|
||
submitEditInfo(){
|
||
let _this = this;
|
||
let editInfo = Object.assign({},_this.editInfo);
|
||
editInfo.uid_list = Object.values(editInfo.uid_list);
|
||
delete editInfo.user_list
|
||
this.$refs['editInfoField'].validate(valid => {
|
||
if (valid) {
|
||
pickupPointEdit(editInfo).then((res) => {
|
||
if(res.status == 200){
|
||
_this.$message.success('操作成功');
|
||
_this.handleClose();
|
||
_this.getList(1);
|
||
_this.$forceUpdate();
|
||
}
|
||
}).catch((res) => {
|
||
_this.$message.error(res.message)
|
||
})
|
||
}
|
||
});
|
||
},
|
||
// 获取列表
|
||
getList(num) {
|
||
let _this = this;
|
||
_this.listLoading = true;
|
||
_this.tableFrom.page = num ? num : _this.tableFrom.page;
|
||
pickupPointList(_this.activeName, _this.tableFrom)
|
||
.then((res) => {
|
||
_this.tableData.data = res.data.list;
|
||
_this.tableData.total = res.data.count;
|
||
_this.listLoading = false;
|
||
})
|
||
.catch((res) => {
|
||
_this.listLoading = false;
|
||
_this.$message.error(res.message);
|
||
});
|
||
},
|
||
pageChange(page) {
|
||
this.tableFrom.page = page;
|
||
this.getList('');
|
||
},
|
||
handleSizeChange(val) {
|
||
this.tableFrom.limit = val;
|
||
this.getList('');
|
||
},
|
||
// 切换选项卡
|
||
handleClick(tab, event){
|
||
this.tableData = this.$options.data().tableData;
|
||
this.tableFrom = this.$options.data().tableFrom;
|
||
|
||
this.getList(1);
|
||
},
|
||
// 定位处理 - 获取地图key
|
||
getMapKey() {
|
||
configApi().then(res => {
|
||
console.log(res);
|
||
this.mapKey = res.data.tx_map_key
|
||
const keys = res.data.tx_map_key
|
||
this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`
|
||
this.delivery_type = res.data.delivery_type
|
||
})
|
||
.catch(res => {
|
||
this.$message.error(res.message)
|
||
})
|
||
},
|
||
// 定位处理
|
||
onSearchs() {
|
||
if (!this.mapKey || this.mapKey == '') this.$message.error('平台未配置腾讯地图KEY')
|
||
else this.modalMap = true
|
||
},
|
||
// 选择经纬度
|
||
selectAddress(data) {
|
||
this.editInfo.lat = data.latlng.lat
|
||
this.editInfo.lng = data.latlng.lng
|
||
this.editInfo.address = data.poiaddress || ''
|
||
this.modalMap = false
|
||
this.$forceUpdate();
|
||
},
|
||
|
||
|
||
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.selWidth {
|
||
width: 350px !important;
|
||
}
|
||
.seachTiele {
|
||
line-height: 35px;
|
||
}
|
||
.title{
|
||
margin-bottom: 16px;
|
||
color: #17233d;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
.scollhide::-webkit-scrollbar {
|
||
display: none; /* Chrome Safari */
|
||
}
|
||
.user-content{
|
||
--user-content-height-: 80px;
|
||
|
||
height: var(--user-content-height-);
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.user-avatar{
|
||
height: var(--user-content-height-);
|
||
width: var(--user-content-height-);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
img{
|
||
height: 80%!important;
|
||
width: 80%!important;
|
||
border-radius: 50% !important;
|
||
}
|
||
}
|
||
.user-info{
|
||
width: calc(100% - var(--user-content-height-));
|
||
height: var(--user-content-height-);
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
.nickname{
|
||
width: 100%;
|
||
text-align: left;
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
line-height: calc(var(--user-content-height- * 65%));
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.user-id{
|
||
width: 100%;
|
||
text-align: left;
|
||
font-size: 13px;
|
||
line-height: calc(var(--user-content-height- * 35%));
|
||
}
|
||
}
|
||
}
|
||
.marginTop10{
|
||
margin-top: 10px!important;
|
||
}
|
||
.staff{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
.block{
|
||
margin-bottom: 10px;
|
||
margin-right: 10px;
|
||
padding-bottom: 5px;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
border-bottom: 1px solid #CCCCCC;
|
||
width: calc((100% - 15px) / 2);
|
||
align-items: center;
|
||
.avatar{
|
||
width: 35px;
|
||
height: 35px;
|
||
border-radius: 50%;
|
||
}
|
||
.info{
|
||
width: calc(100% - 35px);
|
||
padding-left: 10px;
|
||
.name{
|
||
text-align: left;
|
||
width: 100%;
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.uid{
|
||
text-align: left;
|
||
width: 100%;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
.block:nth-child(2n){
|
||
margin-right: 0!important;
|
||
}
|
||
}
|
||
.staff-list{
|
||
width: 100%;
|
||
margin-bottom: 30px;
|
||
.staff-box{
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
width: calc((100% - 20px)/ 3);
|
||
border: 1px solid #CCCCCC;
|
||
box-shadow: 0 0 5px 0px #F6F6F6;
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
margin-bottom: 10px;
|
||
margin-right: 10px;
|
||
.staff-avatar{
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
}
|
||
.staff-info{
|
||
width: calc(100% - (60px + 36px));
|
||
padding-left: 10px;
|
||
.staff-name{
|
||
text-align: left;
|
||
width: 100%;
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.staff-uid{
|
||
text-align: left;
|
||
width: 100%;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
.staff-box:nth-child(3n){
|
||
margin-right: 0px!important;
|
||
}
|
||
}
|
||
#mapPage{
|
||
height: calc(100vh - 100px) !important;
|
||
}
|
||
</style>
|