1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021 |
- <template>
- <view class="main-container">
- <map id="map" ref="mapRef" :show-location="true" :latitude="latitude" :longitude="longitude" :scale="scale"
- :key="mapKey" :markers="markersData" :circles="circles"
- :style="{'width':windowWidth+'px','height':windowHeight+'px'}" @tap="clickMap" @markertap="markertap"></map>
- <!-- 遮罩层 -->
- <!-- <view class="search-bg" v-if="showMask"
- :style="{'width':windowWidth+'px','height':windowHeight+'px','z-index': 2}"
- @click.stop="e => {return false}" @touchend.prevent="aaaaa()">
- </view> -->
- <!-- 更多地图 statusBarHeight top: 200rpx;-->
- <view class="top-btn-box" :style="{'top': setTop(statusBarHeight)}">
- <view
- :class="['top-btn' , pageListMap01 && pageListMap01.themeModuleVoList && pageListMap01.themeModuleVoList.length > 0 ? '' : 'hide-element' ]">
- <template
- v-if="pageListMap01 && pageListMap01.themeModuleVoList && pageListMap01.themeModuleVoList.length > 0">
- <view class="top-btn-item top-btn-item-l" v-for="(item,index) in pageListMap01.themeModuleVoList"
- :key="`MapType_${index}`" @click="toApp(item)">
- <image class="top-img" :src="item.moduleImage" mode="aspectFill"></image>
- <text class="top-txt">{{item.moduleName}}</text>
- </view>
- </template>
- <view class="top-btn-item more-map" @click="onMoerMap()">
- <image class="top-img" src="@/static/map/more.png" mode=""></image>
- <!-- <text class="iconfont_nvue"></text> -->
- <text class="top-txt">更多地图</text>
- </view>
- </view>
- <view
- :class="['top-btn-item data-type' , [1,2].includes(DataType) && addressList.length > 0 ? '' : 'hide-element' ]"
- @click="DataType === 1 ? DataType = 2 : DataType = 1">
- <text class="data-type-icon iconfont_nvue"></text>
- <!-- <image class="top-img" src="@/static/map/list.png" mode=""></image> -->
- <text class="top-txt">{{DataType === 1 ? '列表' : '轮播'}}</text>
- </view>
- <!-- 定位我的当前位置 -->
- <view class="data-type my-location" @click.stop="backMyLocation()">
- <image class="my-img" src="@/static/map/my.png" mode="aspectFill"></image>
- </view>
- </view>
- <!-- 搜索框 -->
- <search ref="searchRefs" :statusBarHeight="statusBarHeight" :keyWord="keyWord" :showMask="showMask"
- :searchType="searchType" :hotClassify="hotClassify" :classifyList="classifyList"
- :classifyTree="classifyTree" :activeClassify="activeClassify" :oneClassifyIndex="oneClassifyIndex"
- @clearSearch="clearSearch" :activeDistance="activeDistance" :twoClassifyIndex="twoClassifyIndex"
- @onSearchFocus="onSearchFocus" @onSelectClassify="onSelectClassify" @selectLabel="e => searchType = e"
- @selectHotClassify="selectHotClassify" @onSearch="onSearch" />
- <!-- 点位信息卡片 -->
- <swiperList :DataType="DataType" :addressList="addressList" :classifyList="classifyList"
- :key="`swiperList_${addressList.length}`" @onCurrent="onCurrent" :keyWord="keyWord"
- :activeClassify="activeClassify" />
- <dataList :DataType="DataType" :addressList="addressList" :classifyList="classifyList" :loading="loading"
- :keyWord="keyWord" :activeClassify="activeClassify" />
- <view v-if="DataType === 3">
- <babTouchbox :minHeight="0.35" :maxHeight="0.8" :touchHeight="64" @currentHeight="setTouchHeight"
- @maxtHeight="setScrollMaxHeight">
- <view class="map-headline">
- <text class="headline-lr"></text>
- <text class="headline-text">更多地图</text>
- <text class="headline-lr iconfont_nvue"
- @click.stop="DataType = oldDataType ? oldDataType : 1"></text>
- </view>
- <scroll-view :style="{'height':TouchHeight - 40 +'px' }" scroll-y="true" :show-scrollbar="false">
- <template>
- <view class="map-type"
- v-if="pageListMap01 && pageListMap01.themeModuleVoList && pageListMap01.themeModuleVoList.length > 0">
- <view class="map-type-lable">
- <text class="label-line"></text>
- <text class="lable-name">{{pageListMap01.themeVo.themeName }}</text>
- </view>
- <view class="map-type-list">
- <view class="map-type-item" v-for="(item , index) in pageListMap01.themeModuleVoList"
- :key="`themeModule_${index}`" @click.stop="toApp(item)">
- <image class="map-type-icon" :src="item.moduleImage" mode=""></image>
- <text class="map-type-name">{{item.moduleName}}</text>
- </view>
- </view>
- </view>
- <view class="map-type"
- v-if="pageListMap02 && pageListMap02.themeModuleVoList && pageListMap02.themeModuleVoList.length > 0">
- <view class="map-type-lable">
- <text class="label-line"></text>
- <text class="lable-name">{{pageListMap02.themeVo.themeName }}</text>
- </view>
- <view class="map-type-list">
- <view class="map-type-item" v-for="(item , index) in pageListMap02.themeModuleVoList"
- :key="`themeModule_two_${index}`">
- <image class="map-type-icon" :src="item.moduleImage" mode=""></image>
- <text class="map-type-name">{{item.moduleName}}</text>
- </view>
- </view>
- </view>
- </template>
- </scroll-view>
- </babTouchbox>
- </view>
- </view>
- </template>
- <script src="https://webapi.amap.com/maps?v=1.4.15&key=bde3903093d0eff03b0052192a67e1c0"></script>
- <script>
- let app = getApp();
- import babTouchbox from '@/components/bab-Touchbox/bab-Touchbox';
- import EmptyDate from '@/components/EmptyDate/EmptyDate';
- import swiperList from "./mapModule/swiperList"
- import dataList from "./mapModule/dataList"
- import search from "./mapModule/search"
- import {
- getThemeModule,
- getLocationClassify,
- getLocationNearbyList,
- getCircumList,
- getLocationIinfo
- } from "@/api/government.js"
- export default {
- components: {
- babTouchbox,
- EmptyDate,
- swiperList,
- dataList,
- search
- },
- data() {
- return {
- statusBarHeight: 0,
- mapKey: 1,
- map: null,
- latitude: 30.635607,
- longitude: 111.389431,
- myLatitude: 30.635607,
- myLongitude: 111.389431,
- showMask: false,
- keyWord: '',
- scale: 13,
- // 搜索
- searchType: 2, // 1: 默认收索框; 2:选择热门搜索类型; 3:选择筛选条件, 4: 选择地址 , 5:选择分类
- // 分类
- classifyList: [],
- hotClassify: [],
- classifyTree: [],
- oneClassifyIndex: 1,
- twoClassifyIndex: null,
- activeClassify: null,
- TouchHeight: 0,
- scrollMaxHeight: 0,
- windowHeight: 0,
- windowWidth: 0,
- activeDistance: null,
- // 列表
- loading: false,
- oldDataType: null,
- DataType: 0, // 1 轮播 2:列表 , 3 更多地图
- addressList: [], // 地址点位列表
- markersData: [],
- circles: [],
- // 更多地图类型
- pageListMap01: null,
- pageListMap02: null,
- };
- },
- onUnload() {
- // uni.$off('initPop')
- // uni.$off('mapJump')
- // uni.$off('onMapNextPage')
- // console.log('卸载')
- },
- created() {
- // console.log('创建')
- uni.$on('NextMap', (data) => {
- if (data) {
- this.selectHotClassify(data);
- }
- });
- uni.$on('NextMapKwd', (data) => {
- if (data) {
- this.onSearch(data);
- }
- });
- uni.$on('initMap', res => {
- if (res.init) this.clearSearch(true);
- });
- const {
- statusBarHeight,
- screenHeight,
- screenWidth
- } = app.globalData;
- this.statusBarHeight = statusBarHeight;
- this.windowHeight = screenHeight
- this.windowWidth = screenWidth
- // #ifdef APP-NVUE
- try {
- var domModule = weex.requireModule('dom');
- domModule.addRule('fontFace', {
- fontFamily: 'iconfont_nvue',
- src: "url('../../../static/font/yige/iconfont.ttf')",
- });
- } catch (e) {
- //TODO handle the exception
- }
- // #endif
- uni.getLocation({
- type: 'gcj02',
- isHighAccuracy: true, //高精度
- geocode: true, //将位置解析成地址
- success: res => {
- this.latitude = res.latitude;
- this.longitude = res.longitude;
- this.myLatitude = res.latitude;
- this.myLongitude = res.longitude;
- // _this.getTypeOptions();
- },
- fail: function(res) {
- console.log('res = ', res)
- },
- });
- this.clearSearch(true);
- },
- // beforeDestroy() {
- // uni.$off('initPop');
- // },
- computed: {
- },
- onReady() {
- // this.map = plus.maps.create('map', {});
- this.map = uni.createMapContext('map', this);
- plus.key.addEventListener('backbutton', function() {
- // console.log('backbutton');
- });
- plus.webview.currentWebview().setStyle({
- popGesture: 'none',
- });
- },
- watch: {
- loading: {
- handler: function(newLoad, oldLoad) {
- if (newLoad) {
- uni.showLoading()
- } else {
- uni.hideLoading()
- }
- },
- immediate: true
- },
- searchType: {
- handler: function(newType, oldType) {
- // this.showMask = newType > 1 && newType !== 3;
- this.showMask = [1, 2].includes(newType);
- console.log('newType === ', newType, this.showMask)
- },
- immediate: true
- },
- classifyList: {
- handler: function(newArr, oldArr) {
- if (newArr && newArr.length) {
- const hot = [];
- const parentC = [];
- newArr.forEach(el => {
- if (hot.length < 5) {
- // 获取前五个二级分类为热门分类
- if (el.parentId) {
- hot.push(el)
- }
- }
- if (!el.parentId) {
- parentC.push(el)
- }
- })
- this.hotClassify = hot
- parentC.forEach(el => {
- el.children = newArr.filter(vl => el.id === vl.parentId)
- });
- this.classifyTree = parentC;
- // console.log('this.classifyTree = ', this.classifyTree)
- } else {
- }
- },
- immediate: true
- },
- DataType: {
- handler: function(newT, oldT) {
- this.hideJianpan()
- // if ([1, 2].includes(newT)) {
- // this.oldDataType = newT
- // } else {
- // this.oldDataType = 1
- // }
- },
- immediate: true
- },
- },
- methods: {
- setTop: function(statusBarH) {
- const searchH = uni.upx2px(160) + uni.upx2px(80)
- return searchH + statusBarH + 'px'
- },
- backMyLocation() {
- // console.log('scale = ', this.scale)
- this.hideJianpan()
- this.scale = 18;
- this.$refs.mapRef.moveToLocation();
- },
- setTouchHeight(val) {
- // console.log('setScrollHeight = ', val)
- // 实时返回的滑动组件高度
- this.TouchHeight = val;
- },
- setScrollMaxHeight(val) {
- //最大高度
- this.scrollMaxHeight = val;
- },
- toHere(item) {
- uni.openLocation({
- latitude: parseFloat(item.latitude), // 要去的地址经度,浮点数
- longitude: parseFloat(item.longitude), // 要去的地址纬度,浮点数
- name: item.name, // 位置名
- address: item.detailedAddress, // 要去的地址详情说明
- scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
- });
- },
- initialize() {
- this.getMapType();
- this.getClassify();
- },
- toApp(PageInfo) {
- uni.$emit('mapJump', PageInfo);
- },
- clearSearch(initial = false) {
- this.searchType = 2;
- this.showMask = false;
- this.keyWord = '';
- this.DataType = 0;
- this.addressList = [];
- this.markersData = [];
- this.circles = [];
- this.oneClassifyIndex = 1;
- this.twoClassifyIndex = null;
- this.activeClassify = null;
- // if (initial) {
- // this.pageListMap01 = null;
- // this.pageListMap02 = null;
- // this.classifyList = [];
- // this.hotClassify = [];
- // this.classifyTree = [];
- // };
- this.initialize();
- },
- // 选中热门分类
- selectHotClassify(item) {
- this.activeClassify = item
- console.log('activeClassify = ', item)
- // oneClassifyIndex activeClassify
- const f = this.classifyList.find(el => el.id === item.parentId || el.id === item.id);
- try {
- this.classifyTree.forEach((el, index) => {
- if (el.id === f.id) {
- this.oneClassifyIndex = index;
- throw new Error('')
- }
- })
- } catch (e) {
- //TODO handle the exception
- }
- setTimeout(() => {
- this.searchType = 3;
- this.keyWord = '';
- this.getMapList();
- }, 10);
- },
- onSelectClassify(data) {
- const {
- level,
- val,
- index
- } = data
- // console.log('valvalvalvalval level= ', level , val.name)
- switch (level) {
- case 1:
- // 选择一级分类
- this.oneClassifyIndex = index;
- if (!val.children || val.children.length === 0) {
- console.log('valvalvalvalval = ', val.children.length, val.children)
- // 直接选中分类
- this.activeClassify = val;
- this.onClassifySearch();
- }
- break;
- case 2:
- // 选择二级分类
- this.twoClassifyIndex = index;
- this.activeClassify = val
- this.onClassifySearch();
- break;
- case 3:
- // 选择范围
- this.activeDistance = val
- this.onClassifySearch();
- break;
- }
- // classifyList
- },
- onClassifySearch() {
- this.searchType = 3;
- this.getMapList()
- },
- onCurrent(index) {
- this.markersData = this.markersData.map((el, idx) => {
- // if (index === idx) {
- // el.width = '45rpx';
- // el.height = '60rpx';
- // } else {
- // el.width = '30rpx';
- // el.height = '40rpx';
- // delete el.iconPath
- // };
- return el
- })
- if (this.markersData && this.markersData.length > 0) {
- this.latitude = this.markersData[index].latitude;
- this.longitude = this.markersData[index].longitude;
- }
- },
- setCovers(list) {
- this.markersData = list.map(el => {
- // el.width = '30rpx';
- // el.height = '40rpx';
- el.locationType = 'zx';
- return el
- });
- // console.log('this.markersData = ', this.markersData)
- },
- // 聚合组题
- getMapType() {
- const type = ['map001', 'map002']
- type.forEach((el, index) => {
- getThemeModule(el).then(res => {
- const data = res.data || null;
- if (el === type[0]) {
- this.pageListMap01 = data || null
- }
- if (el === type[1]) {
- this.pageListMap02 = data || null
- };
- })
- })
- },
- aaaaa() {
- console.log('aaaaa ======= ')
- },
- // 获取分类
- getClassify() {
- getLocationClassify().then(res => {
- try {
- const data = res.data || []
- this.classifyList = data;
- } catch (e) {
- //TODO handle the exception
- }
- }).finally(() => {
- // setTimeout(() => {
- // this.getMapList();
- // }, 10);
- })
- },
- // 获取地图列表
- getMapList() {
- this.loading = true;
- setTimeout(() => {
- const radius = this.activeDistance?.value || 3000;
- this.circles = [{
- latitude: this.myLatitude,
- longitude: this.myLongitude,
- fillColor: 'rgba(156,207,209,0.5)',
- radius: radius,
- color: 'transparent',
- strokeWidth: 2
- }];
- const classifyId = this.activeClassify?.id || '';
- const params = {
- latitude: this.myLatitude,
- longitude: this.myLongitude,
- classifyId: classifyId,
- name: this.keyWord,
- radius: radius,
- }
- getLocationNearbyList(params).then(res => {
- console.log('getLocationNearbyList = ', res.data)
- this.addressList = res.data || [];
- this.scale = 13;
- this.setCovers(this.addressList)
- this.getCircum(radius)
- }).catch(err => {
- this.getCircum(radius)
- })
- }, 300);
- },
- onMoerMap() {
- this.hideJianpan()
- this.oldDataType = this.DataType;
- this.searchType = 2;
- this.DataType = 3
- },
- hideJianpan() {
- try {
- this.$refs.searchRefs.blur();
- } catch (e) {
- //TODO handle the exception
- };
- uni.hideKeyboard()
- },
- clickMap(e) {
- this.hideJianpan();
- // switch (this.searchType){
- // case 2:
- // break;
- // default:
- // break;
- // }
- // searchType: 1, // 1: 默认收索框; 2:选择热门搜索类型; 3:选择筛选条件, 4: 选择地址 , 5:选择分类
- },
- markertap(e) {
- console.log('e = ' , e)
- this.hideJianpan();
- const markerId = e.detail.markerId;
- const markerVal = this.addressList.find(el => el.id === markerId);
- if (markerVal) {
- uni.navigateTo({
- url: '/pages/government/subNVue/mapLocationInfo',
- success: res => {
- uni.$emit('onMapNextPage')
- res.eventChannel.emit('MapInfo', {
- data: {
- val: markerVal,
- classifyList: this.classifyList,
- keyWord: this.keyWord,
- activeClassify: this.activeClassify
- }
- })
- },
- fail: err => {
- console.log('跳转', err)
- },
- })
- }
- },
- // 搜索周边
- getCircum(radius = 0) {
- console.log('getCircum = ', 1)
- try {
- this.$refs.searchRefs.blur();
- } catch (e) {
- //TODO handle the exception
- }
- const name = this.keyWord || this.activeClassify?.name;
- try {
- if (!name) {
- this.showMask = false;
- this.loading = false;
- throw new Error(' ')
- }
- const radius = radius || this.activeDistance?.value || 3000;
-
- const params = {
- keywords: name,
- location: this.myLongitude + ',' + this.myLatitude,
- pageNum: 1,
- pageSize: 20,
- radius: radius,
- }
- const t_n = new Date().getTime();
- getCircumList(params).then(res => {
- const data = res.data || [];
- // console.log('daya=====' , data)
- const covers = JSON.parse(JSON.stringify(this.markersData));
- data.forEach((e , index) => {
- // e.width = '30rpx';
- // e.height = '40rpx';
- e.classifyId = this.acticeId;
- e.longitude = e.location.split(',')[0];
- e.latitude = e.location.split(',')[1];
- e.locationType = 'gd';
- e.detailedAddress = e.address;
- e.intro = e.type;
- e.id = t_n + index;
- covers.push(e);
- this.addressList.push(e);
- // e.iconPath = that.$getImgPath(that.getTypeIcon(e.classifyId));
- // e.iconPath = '';
- });
- this.showMask = false;
- this.markersData = covers
- }).finally(() => {
- this.loading = false;
- })
- } catch (e) {
- //TODO handle the exception
- }
- this.DataType = 2
- console.log('this.DataType = ', this.DataType)
- },
- // 搜索 - 获取焦点
- onSearchFocus() {
- if (this.searchType === 1) {
- this.searchType = 2;
- }
- this.showMask = true;
- // this.DataType = 5;
- // setTimeout(() => {
- // this.showMask = true;
- // this.searchType = 2;
- // }, 10);
- },
- onSearchBlur() {
- // console.log('shiqijiaodian')
- // this.showMask = false;
- // setTimeout(() => {
- // this.DataType = this.oldDataType
- // }, 10);
- // console.log('shiqijiaodian', this.DataType)
- },
- // 收索
- onSearch(e) {
- this.keyWord = e;
- this.activeClassify = null;
- this.getMapList(e)
- }
- // getLabel(list, id) {
- // let name = '';
- // try {
- // list.forEach(el => {
- // if (el.id === id) {
- // name = el.name;
- // throw new Error()
- // }
- // })
- // } catch (e) {
- // //TODO handle the exception
- // }
- // },
- },
- };
- </script>
- <style lang="scss" scoped>
- @import url("./mapModule/style.scss");
- $ZIndex: 1;
- .iconfont_nvue {
- font-family: iconfont_nvue;
- }
- .main-container {
- // position: relative;
- }
- .my-location {
- // position: absolute;
- // align-items: center;
- justify-content: center;
- // right: 20rpx;
- // top: 800rpx;
- width: 100rpx;
- height: 100rpx;
- border-radius: 22rpx;
- background-color: #fff;
- .my-img {
- width: 54rpx;
- height: 54rpx;
- }
- }
- .search-bg {
- position: absolute;
- z-index: 1;
- background-color: rgba(0, 0, 0, 0.4);
- }
- // .address-list {
- // .address-item {
- // height: 176rpx;
- // border-bottom-width: 1rpx;
- // border-bottom-style: solid;
- // border-bottom-color: #EDEDED;
- // padding: 30rpx 0 20rpx;
- // flex-direction: column;
- // justify-content: space-between;
- // .address-headline {
- // flex-direction: row;
- // justify-content: space-between;
- // align-items: center;
- // .headline-name {
- // flex: 1;
- // font-size: 28rpx;
- // font-weight: 500;
- // color: #1a1a1a;
- // }
- // .headline-distance {
- // width: 200rpx;
- // flex-direction: row;
- // justify-content: flex-end;
- // align-items: center;
- // .distance-text {
- // font-size: 24rpx;
- // font-weight: 300;
- // text-align: left;
- // color: #666666;
- // }
- // .distance-icon {
- // width: 28rpx;
- // height: 28rpx;
- // }
- // }
- // }
- // .location-info {
- // flex-direction: row;
- // align-items: center;
- // .location-icon {
- // width: 21.54rpx;
- // height: 25.96rpx;
- // }
- // .location-text {
- // flex: 1;
- // padding-left: 5rpx;
- // font-size: 24rpx;
- // font-weight: 300;
- // color: #808080;
- // }
- // }
- // .times {
- // .time-info {
- // font-size: 24rpx;
- // font-weight: 300;
- // color: #808080;
- // }
- // }
- // }
- // }
- .top-btn-box {
- position: absolute;
- right: 20rpx;
- z-index: 1;
- .top-btn {
- width: 100rpx;
- background-color: #fff;
- border-radius: 20rpx;
- box-shadow: 0 0 20rpx #ccc;
- // padding: 0 15rpx;
- .top-btn-item-l {
- border-bottom-width: 1rpx;
- border-bottom-style: solid;
- border-bottom-color: #efefef;
- }
- .top-btn-item {
- // width: 64rpx;
- padding: 20rpx 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- .top-img {
- width: 60rpx !important;
- height: 60rpx !important;
- }
- .top-txt {
- font-size: 20rpx;
- margin-top: 3rpx;
- }
- }
- .more-map {
- .iconfont_nvue {
- color: #48AAB2;
- }
- // .top-img{
- // }
- .top-txt {
- color: #48AAB2;
- }
- // <text class="iconfont_nvue"></text>
- // <text class="top-txt" style="color: #48AAB2;">更多地图</text>
- }
- }
- .data-type {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #fff;
- width: 100rpx;
- padding: 10rpx 0;
- border-radius: 20rpx;
- margin-top: 30rpx;
- .data-type-icon {
- color: #1a1a1a;
- font-size: 50rpx;
- }
- .top-txt {
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: center;
- color: #1a1a1a;
- }
- }
- // .top-btn {
- // flex-direction: column;
- // padding: 20rpx 10rpx;
- // border-radius: 20rpx;
- // background-color: #fff;
- // box-shadow: 0 0 20rpx #ccc;
- // .top-btn-item {
- // flex-direction: column;
- // align-items: center;
- // margin-bottom: 15rpx;
- // }
- // .top-btn-item-l {
- // margin-bottom: 0;
- // }
- // .top-img {
- // width: 60rpx;
- // height: 60rpx;
- // }
- // .top-txt {
- // font-size: 20rpx;
- // margin-top: 3rpx;
- // }
- // .btn-more {
- // margin-top: 30rpx;
- // }
- // }
- }
- .map-headline {
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- padding: 0 20rpx;
- height: 60rpx;
- .headline-lr {
- width: 100rpx;
- }
- .iconfont_nvue {
- text-align: right;
- font-size: 40rpx;
- color: #999999;
- }
- .headline-text {
- font-size: 36rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- text-align: center;
- color: #1a1a1a;
- }
- }
- .map-type {
- padding: 30rpx 0 10rpx;
- .map-type-lable {
- flex-direction: row;
- align-items: center;
- .label-line {
- width: 8rpx;
- height: 35rpx;
- border-radius: 4rpx;
- background-color: #44c6d4;
- }
- .lable-name {
- font-size: 32rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: left;
- color: #1a1a1a;
- line-height: 30px;
- padding-left: 22rpx;
- }
- }
- .map-type-list {
- flex-direction: row;
- align-items: stretch;
- flex-wrap: wrap;
- .map-type-item {
- width: 175rpx;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top: 30rpx;
- .map-type-icon {
- width: 86rpx;
- height: 86rpx;
- }
- .map-type-name {
- padding: 13rpx 4rpx 0;
- font-size: 26rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- text-align: center;
- color: #666666;
- }
- }
- }
- }
- .auto-width-item {
- overflow: hidden;
- flex-direction: row;
- }
- .nvue-one-row {
- text-overflow: ellipsis; //文字超出省略号
- lines: 1; //文字行数
- }
- .nvue-two-row {
- text-overflow: ellipsis; //文字超出省略号
- lines: 2; //文字行数
- }
- </style>
|