<template> <div> <title-bar title="网点查询" @clickLeft="onClick"> <van-icon slot="left" name="cross" size="24" /> </title-bar> <!-- 百度地图--> <baidu-map class="bm-view" ak="FP7zWR4e8lhxZ6v0IicoG1R5" :center="{ lng: this.upoint.lng, lat: this.upoint.lat }" :zoom="12" @ready="mapReady"> <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale> </baidu-map> <div class="list"> <div class="list-top"> <van-tabs v-model="active"> <van-tab title="我的附近"> <nearby></nearby> </van-tab> <van-tab title="区域查询"> <Area></Area> </van-tab> <van-tab title="全部"> <all-outlets></all-outlets> </van-tab> </van-tabs> </div> </div> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import TitleBar from "@/components/general/TitleBar.vue"; import { BaiduMap, BmScale } from "vue-baidu-map"; import AllOutlets from "@/components/workbench/company-common-functions/online-enquiry/AllOutlets.vue"; import Nearby from "@/components/workbench/company-common-functions/online-enquiry/Nearby.vue"; import Area from "@/components/workbench/company-common-functions/online-enquiry/Area.vue"; import { Tab, Tabs } from "vant"; Vue.use(Tab); Vue.use(Tabs); /** * @Description 网点查询 * @Author JiangTao * @Date 2021-11-10 下午 03:30 */ @Component({ name: "OnlineEnquiry", components: { TitleBar, BaiduMap, BmScale, AllOutlets, Area, Nearby, }, }) export default class OnlineEnquiry extends Vue { pageTitle = ""; // 页面标题 onClick() { console.log(111111); } mounted() { this.pageTitle = this.$route.meta?.name; } BMapGL: any = {}; map: any = {}; show = false; upoint: any = { lng: 104.080998, lat: 30.595452 }; mapReady(bmap: any) { this.BMapGL = bmap.BMap; this.map = bmap.map; } } </script> <style scoped> .bm-view { position: absolute; right: 0; width: 71.8%; height: calc(100vh - 60px); } .list { height: calc(100vh - 60px); width: 28.2%; background-color: rgba(242, 242, 242, 1); border-right: 1px solid rgb(217, 207, 207); } .list-top { width: 100%; /*padding: 0 5%;*/ padding-top: 2.5%; margin-bottom: 3%; background-color: white; display: flex; justify-content: space-around; } .list-top > * { font-size: 115%; color: #999999; padding: 3%; } ::v-deep .van-tabs--line { width: 100%; background-color: #f2f2f2; padding: 0; } ::v-deep .van-tab__text--ellipsis { font-size: 16px; } ::v-deep .van-tab--active { color: #fd5065; } ::v-deep .van-tabs__line { width: 25%; } ::v-deep .van-tabs__wrap { margin-bottom: 3%; } </style>