|
@@ -0,0 +1,587 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="scoped-deal-box">
|
|
|
+ <div class="sdb-info">
|
|
|
+ <div class="p1">当前缩放级别:{{mapDiyObj.zoom}}<span class="more" @click="setShowChange">{{isMapSetShow ? '收起设置' : '展开设置'}}></span></div>
|
|
|
+ <div class="p2" v-show="isMapSetShow">
|
|
|
+ <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="80px">
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button class="xl-form-btn bgc2" @click="setHandle">保存设置</el-button>
|
|
|
+ <div class="scoped-select-center" @click="setCenterHandle">中心坐标<div class="s">{{centerStr}}</div></div>
|
|
|
+ </div>
|
|
|
+ </base-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sdb-add">
|
|
|
+ <div class="b t2" @click="openMte('polygonAdd')">添加多边形</div>
|
|
|
+ <div class="b t2" @click="openMte('textAdd')">添加文字</div>
|
|
|
+ </div>
|
|
|
+ <div class="sdb-add">
|
|
|
+ <div class="b t3" @click="saveHandle()">保 存</div>
|
|
|
+ </div>
|
|
|
+ <div class="sdb-list" v-if="polygons.length > 0">
|
|
|
+ <div class="label t2">多边形列表</div>
|
|
|
+ <div class="ul">
|
|
|
+ <div class="op" v-for="(polygon, index) in polygons" :key="index">
|
|
|
+ <p class="p1" @click="openMte('polygonAdd', {obj: polygon, index})">{{polygon.text}}</p>
|
|
|
+ <p class="more">
|
|
|
+ <span v-if="polygon.editable" class="d d2" @click="textAdd(polygon)">标点</span>
|
|
|
+ <span v-if="polygon.editable" class="d d1" @click="mapIsEdit(index, 'polygons')">编辑</span>
|
|
|
+ <span v-else class="d d3" @click="mapIsEdit(index, 'polygons')">只读</span>
|
|
|
+ <span class="d d4" @click="mapDel(index, 'polygons')">删除</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sdb-list" v-if="markerData.length > 0">
|
|
|
+ <div class="label t2">文字列表</div>
|
|
|
+ <div class="ul">
|
|
|
+ <div class="op" v-for="(t, index) in markerData" :key="index">
|
|
|
+ <p class="p1" @click="openMte('textAdd', {obj: t, index})">{{t.content}}</p>
|
|
|
+ <p class="more">
|
|
|
+ <span v-if="t.draggable" class="d d1" @click="mapIsEdit(index, 'markerData')">编辑</span>
|
|
|
+ <span v-else class="d d3" @click="mapIsEdit(index, 'markerData')">只读</span>
|
|
|
+ <span class="d d4" @click="mapDel(index, 'markerData')">删除</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-amap
|
|
|
+ class="amap-box"
|
|
|
+ :vid="'amap-vue'"
|
|
|
+ :amap-manager="amapManager"
|
|
|
+ :zoom="mapDiyObj.zoom"
|
|
|
+ :zooms="mapDiyObj.zooms"
|
|
|
+ :mapStyle="mapDiyObj.mapStyle"
|
|
|
+ :center="mapDiyObj.center"
|
|
|
+ :events="events"
|
|
|
+ :plugin="plugin"
|
|
|
+ >
|
|
|
+ <template v-if="mapDiyObj.zoom > 3">
|
|
|
+ <el-amap-marker v-for="(marker, index) in markerData" :key="1000 + index"
|
|
|
+ :position="marker.position"
|
|
|
+ :draggable="marker.draggable"
|
|
|
+ :animation="marker.animation"
|
|
|
+ :offset="marker.offset"
|
|
|
+ :events="markersEvents">
|
|
|
+ <div class="scoped-marker-text" :style="`color: ${marker.color}`">{{marker.content}}</div>
|
|
|
+ </el-amap-marker>
|
|
|
+ </template>
|
|
|
+ <el-amap-polygon
|
|
|
+ v-for="(polygon, index) in polygons"
|
|
|
+ :key="index"
|
|
|
+ :path="polygon.path"
|
|
|
+ :editable="polygon.editable"
|
|
|
+ :fillColor="polygon.fillColor"
|
|
|
+ :fillOpacity="polygon.fillOpacity"
|
|
|
+ :strokeColor="polygon.strokeColor"
|
|
|
+ :strokeWeight="polygon.strokeWeight"
|
|
|
+ :strokeOpacity="polygon.strokeOpacity">
|
|
|
+ </el-amap-polygon>
|
|
|
+ </el-amap>
|
|
|
+ <MapTextEdit
|
|
|
+ :isShow="isMteShow"
|
|
|
+ :mteStr="mteStr"
|
|
|
+ :curObj="mteObj"
|
|
|
+ @close="closeMte"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
|
|
|
+const amapManager = new AMapManager()
|
|
|
+import MapTextEdit from './components/popup/MapTextEdit'
|
|
|
+import { arrToObj } from '@/utils'
|
|
|
+export default {
|
|
|
+ name: 'map',
|
|
|
+ components: {
|
|
|
+ MapTextEdit
|
|
|
+ },
|
|
|
+ mixins,
|
|
|
+ data() {
|
|
|
+ const that = this
|
|
|
+ return {
|
|
|
+ isMapSetShow: false,
|
|
|
+ formData: [],
|
|
|
+ isMteShow: false,
|
|
|
+ mapDiyObj: {
|
|
|
+ center: [115.852386, 28.684076],
|
|
|
+ zoom: 17,
|
|
|
+ zooms: [15, 19],
|
|
|
+ },
|
|
|
+ amapManager,
|
|
|
+ polygons: [
|
|
|
+ // {
|
|
|
+ // path: [[115.823481,28.702359],[115.861933,28.672241],[115.812838,28.629609],[115.793784,28.657179]],
|
|
|
+ // strokeWeight: 2,
|
|
|
+ // fillColor: '#f00',
|
|
|
+ // strokeStyle: 'solid',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // path: [[115.859015,28.654919],[115.93386,28.630212],[115.841849,28.606101]],
|
|
|
+ // editable: true,
|
|
|
+ // strokeWeight: 1,
|
|
|
+ // fillColor: '#ffffff',
|
|
|
+ // strokeStyle: 'dashed',
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ markerData: [],
|
|
|
+ events: {
|
|
|
+ init(map) {
|
|
|
+ // map.setFeatures(['road', 'point', 'bg', 'building']); // 多个种类要素显示
|
|
|
+ // map.setFeatures(['road']); // 多个种类要素显示
|
|
|
+ // map.setMapStyle('amap://styles/647a4a7f773b3c7143b46e7c3e499f1f');
|
|
|
+ AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
|
|
|
+ //图层切换控件
|
|
|
+ var layerControl = new BasicControl.LayerSwitcher({
|
|
|
+ baseLayers: [
|
|
|
+ {
|
|
|
+ id: 'basic',//图层id,需唯一
|
|
|
+ enable: true, //是否启用
|
|
|
+ name: '基础地图',//显示名称,html
|
|
|
+ layer: new AMap.TileLayer()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'Satellite',//图层id,需唯一
|
|
|
+ enable: false, //是否启用
|
|
|
+ name: '卫星图',//显示名称,html
|
|
|
+ layer: new AMap.TileLayer.Satellite()
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ overlayLayers:[
|
|
|
+ ],
|
|
|
+ position: {
|
|
|
+ bottom:'50px',
|
|
|
+ right:'30px',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ map.addControl(layerControl);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ zoomchange (e) {
|
|
|
+ const curMap = amapManager.getMap()
|
|
|
+ that.mapDiyObj.zoom = curMap.getZoom() || 17
|
|
|
+ },
|
|
|
+ // click(e) {
|
|
|
+ // const { lng, lat } = e.lnglat
|
|
|
+ // console.log(lng, lat)
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ markersEvents: {
|
|
|
+ // dragend(e) {
|
|
|
+ // const { lng, lat } = e.lnglat
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ plugin: [{
|
|
|
+ pName: 'MouseTool',
|
|
|
+ }],
|
|
|
+ mteStr: 'polygonAdd',
|
|
|
+ mteObj: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ centerStr () {
|
|
|
+ const center = this.mapDiyObj.center
|
|
|
+ if (center && center.length > 0) {
|
|
|
+ return `${center[0]}, ${center[1]}`
|
|
|
+ } else {
|
|
|
+ return '待选取'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ setShowChange () {
|
|
|
+ this.isMapSetShow = !this.isMapSetShow
|
|
|
+ },
|
|
|
+ getDef () {
|
|
|
+ let params = {}
|
|
|
+ params = { ...this.mapDiyObj }
|
|
|
+ params.zoom1 = params.zooms[0]
|
|
|
+ params.zoom2 = params.zooms[1]
|
|
|
+ this.formData = [
|
|
|
+ { label: '地图标题', key: 'title', rules: 1},
|
|
|
+ { label: '主题样式', key: 'mapStyle', type: 'select', rules: 1,
|
|
|
+ options: [
|
|
|
+ {key: '默认样式', val: 'normal'},
|
|
|
+ {key: '深色样式', val: 'dark'},
|
|
|
+ {key: '浅色样式', val: 'light'},
|
|
|
+ {key: '清新风格osm', val: 'fresh'},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ { label: '显示内容', key: 'features', type: 'select', multiple: true, rules: 1,
|
|
|
+ options: [
|
|
|
+ {key: '区域面', val: 'bg'},
|
|
|
+ {key: '兴趣点', val: 'point'},
|
|
|
+ {key: '道路和标注', val: 'road'},
|
|
|
+ {key: '建筑物', val: 'building'},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ { label: '默认级别', key: 'zoom', rules: 1},
|
|
|
+ { label: '最小3+', key: 'zoom1', rules: 1},
|
|
|
+ { label: '最大19-', key: 'zoom2', rules: 1},
|
|
|
+ ]
|
|
|
+ this.setDefaultValue(params)
|
|
|
+ this.setCurFeatures(params.features)
|
|
|
+ },
|
|
|
+ setCurFeatures (data) {
|
|
|
+ window.setTimeout(() => {
|
|
|
+ const curMap = this.amapManager.getMap()
|
|
|
+ curMap.setFeatures(data)
|
|
|
+ }, 100)
|
|
|
+ },
|
|
|
+ getData () {
|
|
|
+ const query = this.$route.query
|
|
|
+ this.$api.other.admmapcoordindetail({
|
|
|
+ uuid: query.id
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ const data = JSON.parse(res.data)
|
|
|
+ this.polygons = [...data.polygons]
|
|
|
+ this.markerData = [...data.markerData]
|
|
|
+ this.mapDiyObj = {
|
|
|
+ ...data.mapDiyObj,
|
|
|
+ title: res.title,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.mapDiyObj = {
|
|
|
+ mapStyle: 'light',
|
|
|
+ zoom: 17,
|
|
|
+ zooms: [15, 19],
|
|
|
+ center: [115.852386, 28.684076],
|
|
|
+ title: res.title,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.getDef()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setHandle () {
|
|
|
+ this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const oldform = this.$refs.ruleForm.baseForm
|
|
|
+ let newForm = { ...oldform }
|
|
|
+ let mapDiyObj = { ...this.mapDiyObj }
|
|
|
+ mapDiyObj.zoom = Number(newForm.zoom)
|
|
|
+ mapDiyObj.zooms = [Number(newForm.zoom1), Number(newForm.zoom2)]
|
|
|
+ mapDiyObj.title = newForm.title
|
|
|
+ mapDiyObj.mapStyle = newForm.mapStyle
|
|
|
+ mapDiyObj.features = newForm.features
|
|
|
+ this.mapDiyObj = {...mapDiyObj}
|
|
|
+ this.setCurFeatures(newForm.features)
|
|
|
+ this.isMapSetShow = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setCenterHandle () {
|
|
|
+ const that = this
|
|
|
+ const curMap = this.amapManager.getMap()
|
|
|
+ let mouseTool = new AMap.MouseTool(curMap)
|
|
|
+ mouseTool.marker({
|
|
|
+ content: ' ',
|
|
|
+ })
|
|
|
+ window.setTimeout(() => {
|
|
|
+ mouseTool.close(true)
|
|
|
+ }, 1000)
|
|
|
+ AMap.event.addListener(mouseTool,'draw',function(e){
|
|
|
+ let cPath = e.obj.getPosition()
|
|
|
+ let mapDiyObj = {...that.mapDiyObj}
|
|
|
+ mapDiyObj.center = [cPath.lng, cPath.lat]
|
|
|
+ that.mapDiyObj = {...mapDiyObj}
|
|
|
+ that.$msg('中心坐标选取成功~')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ saveHandle () {
|
|
|
+ this.$msg(`您确定要保存该数据(覆盖原来数据)吗?`, 'confirm', () => {
|
|
|
+ let polygons = JSON.parse(JSON.stringify(this.polygons))
|
|
|
+ polygons.map(one=> {
|
|
|
+ let tPath = []
|
|
|
+ one.editable = false
|
|
|
+ one.path.forEach(sub => {
|
|
|
+ tPath.push([sub.lng, sub.lat])
|
|
|
+ })
|
|
|
+ one.path = tPath
|
|
|
+ })
|
|
|
+ let markerData = JSON.parse(JSON.stringify(this.markerData))
|
|
|
+ markerData.map(one => {
|
|
|
+ one.draggable = false
|
|
|
+ })
|
|
|
+ const data = {
|
|
|
+ polygons,
|
|
|
+ markerData,
|
|
|
+ mapDiyObj: this.mapDiyObj,
|
|
|
+ }
|
|
|
+ const query = this.$route.query
|
|
|
+ this.$api.other.admmapcoordinedit({
|
|
|
+ uuid: query.id,
|
|
|
+ title: this.mapDiyObj.title,
|
|
|
+ data: JSON.stringify(data)
|
|
|
+ }).then(res => {
|
|
|
+ this.$router.go(0)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ polygonAdd (obj) {
|
|
|
+ const that = this
|
|
|
+ const curMap = this.amapManager.getMap()
|
|
|
+ let mouseTool = new AMap.MouseTool(curMap)
|
|
|
+ mouseTool.polygon({
|
|
|
+ fillColor:'#00b0ff',
|
|
|
+ strokeColor:'#80d8ff',
|
|
|
+ editable: true,
|
|
|
+ strokeStyle: 'dashed',
|
|
|
+ })
|
|
|
+ AMap.event.addListener(mouseTool,'draw',function(e) {
|
|
|
+ let cPath = [...e.obj.getPath()]
|
|
|
+ let tempPath = []
|
|
|
+ cPath.forEach(item => {
|
|
|
+ tempPath.push([item.lng, item.lat])
|
|
|
+ })
|
|
|
+ let polygons = [...that.polygons]
|
|
|
+ polygons.push({
|
|
|
+ path: tempPath,
|
|
|
+ editable: true,
|
|
|
+ fillColor: obj.fillColor || '#DC3021', // 填充色
|
|
|
+ fillOpacity: obj.fillOpacity || 0.3, // 填充透明度
|
|
|
+ strokeColor: obj.strokeColor || '#DC3021', // 轮廓颜色
|
|
|
+ strokeWeight: 1, // 轮廓宽度
|
|
|
+ strokeOpacity: 0.6, // 轮廓透明度
|
|
|
+ text: obj.text,
|
|
|
+ })
|
|
|
+ that.polygons = [...polygons]
|
|
|
+ mouseTool.close(true)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mapIsEdit (index, str) {
|
|
|
+ let tempData = [...this[str]]
|
|
|
+ if (str === 'polygons') {
|
|
|
+ if (tempData[index].editable) {
|
|
|
+ tempData[index].editable = false
|
|
|
+ tempData[index].strokeStyle = 'solid'
|
|
|
+ } else {
|
|
|
+ tempData[index].editable = true
|
|
|
+ tempData[index].strokeStyle = 'dashed'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ tempData[index].draggable = !tempData[index].draggable
|
|
|
+ // tempData[index].animation = tempData[index].draggable ? 'AMAP_ANIMATION_BOUNCE' : 'AMAP_ANIMATION_DROP'
|
|
|
+ }
|
|
|
+ this[str] = [...tempData]
|
|
|
+ this.$storage(`map_${str}`, JSON.stringify(tempData))
|
|
|
+ },
|
|
|
+ mapDel (index, str) {
|
|
|
+ this.$msg(`您确定要删除该数据吗?`, 'confirm', () => {
|
|
|
+ let tempData = [...this[str]]
|
|
|
+ tempData.splice(index, 1)
|
|
|
+ this[str] = [...tempData]
|
|
|
+ this.$storage(`map_${str}`, JSON.stringify(tempData))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openMte (str, obj) {
|
|
|
+ this.mteStr = str
|
|
|
+ this.isMteShow = true
|
|
|
+ if (obj) {
|
|
|
+ this.mteObj = {...obj}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeMte (obj, bcStr) {
|
|
|
+ this.isMteShow = false
|
|
|
+ this.mteObj = {}
|
|
|
+ if (obj) {
|
|
|
+ if (bcStr && bcStr === 'edit') {
|
|
|
+ const index = this.mteObj.index || 0
|
|
|
+ const str = this.mteStr === 'textAdd' ? 'markerData' : 'polygons'
|
|
|
+ let tempData = [...this[str]]
|
|
|
+ if (this.mteStr === 'textAdd') {
|
|
|
+ tempData[index].content = obj.text
|
|
|
+ tempData[index].text = obj.text
|
|
|
+ tempData[index].color = obj.color
|
|
|
+ } else {
|
|
|
+ tempData[index].text = obj.text
|
|
|
+ tempData[index].fillColor = obj.fillColor
|
|
|
+ tempData[index].fillOpacity = obj.fillOpacity
|
|
|
+ tempData[index].strokeColor = obj.strokeColor
|
|
|
+ }
|
|
|
+ this[str] = [...tempData]
|
|
|
+ this.$storage(`map_${str}`, JSON.stringify(tempData))
|
|
|
+ } else {
|
|
|
+ this[this.mteStr](obj)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ textAdd (obj) {
|
|
|
+ const that = this
|
|
|
+ const curMap = this.amapManager.getMap()
|
|
|
+ let mouseTool = new AMap.MouseTool(curMap)
|
|
|
+ mouseTool.marker({
|
|
|
+ content: ' ',
|
|
|
+ })
|
|
|
+ window.setTimeout(() => {
|
|
|
+ mouseTool.close(true)
|
|
|
+ }, 1000)
|
|
|
+ AMap.event.addListener(mouseTool,'draw',function(e){
|
|
|
+ let cPath = e.obj.getPosition()
|
|
|
+ let markerData = [...that.markerData]
|
|
|
+ markerData.push({
|
|
|
+ position: [cPath.lng, cPath.lat],
|
|
|
+ draggable: true,
|
|
|
+ animation: 'AMAP_ANIMATION_DROP',
|
|
|
+ content: obj.text,
|
|
|
+ offset: [0, -10],
|
|
|
+ text: obj.text,
|
|
|
+ color: obj.color,
|
|
|
+ })
|
|
|
+ that.markerData = [...markerData]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ position: relative;
|
|
|
+ .amap-box {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.scoped-deal-box {
|
|
|
+ background: #f2f2f2;
|
|
|
+ box-shadow: 0 0 5px #ccc;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 220px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ .sdb-info {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px 10px 0;
|
|
|
+ .p1 {
|
|
|
+ font-size: 14px;
|
|
|
+ user-select: none;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .more {
|
|
|
+ color: #409eff;
|
|
|
+ text-decoration: underline;
|
|
|
+ padding-left: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .p2 {
|
|
|
+ padding-bottom: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sdb-add {
|
|
|
+ padding: 0 10px 10px;
|
|
|
+ .b {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 0;
|
|
|
+ background: #0c78b1;
|
|
|
+ color: #fff;
|
|
|
+ min-width: 60px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ cursor: pointer;
|
|
|
+ outline: none;
|
|
|
+ padding: 0 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ &.t2 {
|
|
|
+ background: #409eff;
|
|
|
+ }
|
|
|
+ &.t3 {
|
|
|
+ width: 177px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sdb-list {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding-top: 10px;
|
|
|
+ .label {
|
|
|
+ margin-left: 10px;
|
|
|
+ border-left: 4px solid #409eff;
|
|
|
+ padding-left: 6px;
|
|
|
+ &.t2 {
|
|
|
+ border-left-color: #0c78b1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ul {
|
|
|
+ height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .op {
|
|
|
+ border-bottom: 1px solid #dcdcdc;
|
|
|
+ padding: 10px;
|
|
|
+ .p1 {
|
|
|
+ color: #313131;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ }
|
|
|
+ .more {
|
|
|
+ .d {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 0 6px;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border: 1px solid #0c78b1;
|
|
|
+ color: #0c78b1;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ &.d2 {
|
|
|
+ color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+ }
|
|
|
+ &.d3 {
|
|
|
+ color: #313131;
|
|
|
+ border-color: #313131;
|
|
|
+ }
|
|
|
+ &.d4 {
|
|
|
+ color: #f00;
|
|
|
+ border-color: #f00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.scoped-marker-text {
|
|
|
+ color: #fff;
|
|
|
+ min-width: 100px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.scoped-select-center {
|
|
|
+ position: absolute;
|
|
|
+ left: -75px;
|
|
|
+ top: 0px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 60px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #313131;
|
|
|
+ .s {
|
|
|
+ color: #f00;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|