sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2.08

Browse Source
This commit is contained in:
Smile-Xin 2025-02-08 17:34:25 +08:00
parent 34ef7c42a6
commit 64896b4fcf
5 changed files with 187 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -55,5 +55,6 @@
"name": "bmw", "name": "bmw",
"version": "1.0.0", "version": "1.0.0",
"main": "index.js", "main": "index.js",
"license": "MIT" "license": "MIT",
"repository": "http://123.249.22.213:3000/sx/map.git"
} }

35
src/index.less
View File

@ -168,10 +168,11 @@ body {
} }
.hiddenBtn{ .hiddenBtn{
overflow: hidden; overflow: hidden;
position: absolute; float: right;
// position: absolute;
height: 40px; height: 40px;
width: 40px; width: 40px;
margin: 20% 21.4%; // margin: 20% 21.4%;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
border-radius: 10px; border-radius: 10px;
@ -180,6 +181,8 @@ body {
text-align: center; text-align: center;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
pointer-events: auto;
// 动画 // 动画
animation-name: moveBtn; animation-name: moveBtn;
@ -198,21 +201,33 @@ body {
// margin-left: 0; // margin-left: 0;
} }
to { to {
margin: 20% 5%; margin: 0% 0%;
} }
} }
.layer{
position:absolute;
margin: 20% 5%;
width: 1;
height: 10;
z-index: 99;
// background-color: #040727;
pointer-events: none;
}
.layer-data-wrap { .layer-data-wrap {
// overflow: hidden; // overflow: hidden;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
position: absolute; float: left;
// position: absolute;
// top: 190px; // top: 190px;
width: 16.4%; // width: 16.4%;
// width: 270px; width: 270px;
max-height: 450px; max-height: 450px;
// min-height: 100px; // min-height: 100px;
margin: 20% 5%; margin: 0% 0%;
background: rgba(239,240,248,1); background: rgba(239,240,248,1);
// background: rgba(239,240,248,0); // background: rgba(239,240,248,0);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
@ -220,6 +235,7 @@ body {
opacity: 1; opacity: 1;
// 禁止换行 // 禁止换行
white-space:nowrap; white-space:nowrap;
pointer-events: auto;
z-index: 99; z-index: 99;
// 动画 // 动画
@ -796,6 +812,9 @@ body {
.cursor-crosshair{ .cursor-crosshair{
cursor: crosshair !important; cursor: crosshair !important;
} }
.cursor-grab{
cursor: grab !important;
}
.pointer-events-none{ .pointer-events-none{
pointer-events: none; pointer-events: none;
} }
@ -967,4 +986,4 @@ body {
margin: auto; margin: auto;
width: 90%; width: 90%;
background-color: #b2bec3 ; background-color: #b2bec3 ;
} }

145
src/pages/BaseMap/LayerData/index.js
View File

@ -74,25 +74,25 @@ class LayerData extends React.Component {
for (var m in basicLayeData) { for (var m in basicLayeData) {
let lab = null; let lab = null;
// if (basicLayeData[m].esIndex == "personal_point_layer") // if (basicLayeData[m].esIndex == "personal_point_layer")
if (m == 0){ if (m == 0) {
lab = <> lab = <>
<div> <div>
<span className='layer-name'> <span className='layer-name'>
{basicLayeData[m].name} {basicLayeData[m].name}
</span> </span>
<span className={basicLayeData[m].layerList.length >= 5 ? 'hideItem' : 'add-layer-btn' }> <span className={basicLayeData[m].layerList.length >= 5 ? 'hideItem' : 'add-layer-btn'}>
<Tooltip title='点击可创建新图层'> <Tooltip title='点击可创建新图层'>
<span onClick={this.addLayerHandle}><PlusOutlined /></span> <span onClick={this.addLayerHandle}><PlusOutlined /></span>
</Tooltip> </Tooltip>
</span> </span>
<span className={basicLayeData[m].layerList.length < 5 ? 'hideItem' : 'add-layer-btn-disable' }> <span className={basicLayeData[m].layerList.length < 5 ? 'hideItem' : 'add-layer-btn-disable'}>
<Tooltip title='个人图层创建数量已达上限'> <Tooltip title='个人图层创建数量已达上限'>
<span onClick={this.disableBtn}><PlusOutlined /></span> <span onClick={this.disableBtn}><PlusOutlined /></span>
</Tooltip> </Tooltip>
</span> </span>
</div> </div>
</>; </>;
}else{ } else {
lab = basicLayeData[m].name; lab = basicLayeData[m].name;
} }
@ -160,6 +160,7 @@ class LayerData extends React.Component {
// 选中图层 // 选中图层
selectLayer = (e) => { selectLayer = (e) => {
// 修改选中状态 // 修改选中状态
console.log('selectLayer✈····· ',e);
let menuData = this.state.menuData; let menuData = this.state.menuData;
this.setState({ menuData: [] }) // 将图层列表的数据清空（不清空组件不更新数据） this.setState({ menuData: [] }) // 将图层列表的数据清空（不清空组件不更新数据）
for (let i in menuData) { // 将选中图层的小眼睛改为打开状态（重新写入数据） for (let i in menuData) { // 将选中图层的小眼睛改为打开状态（重新写入数据）
@ -411,80 +412,82 @@ class LayerData extends React.Component {
render() { render() {
return ( return (
<> <>
<div className='layer-data-wrap'> <div className='layer'>
<div className='menu-list'> <div className='layer-data-wrap'>
<div className={this.state.menuData.length > 0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}> <div className='menu-list'>
<span>图层数据</span> <div className={this.state.menuData.length > 0 ? 'showItem layer-data-title' : 'hideItem layer-data-title'}>
<span className='reload'> <span>图层数据</span>
<Tooltip title='点击可刷新图层信息数据'> <span className='reload'>
<span onClick={this.reload}><SyncOutlined /></span> <Tooltip title='点击可刷新图层信息数据'>
</Tooltip> <span onClick={this.reload}><SyncOutlined /></span>
</span> </Tooltip>
</div> </span>
<Menu </div>
multiple <Menu
id='layer-data-menu' multiple
onDeselect={this.deselectlayer} id='layer-data-menu'
onSelect={this.selectLayer} onDeselect={this.deselectlayer}
items={this.state.menuData} onSelect={this.selectLayer}
mode='inline' items={this.state.menuData}
selectedKeys={this.state.selectLayerIdList} mode='inline'
/> selectedKeys={this.state.selectLayerIdList}
{/* <div id='add-layer'> />
{/* <div id='add-layer'>
<Button type='primary' id='add-layer-button' className={this.state.menuData.length > 0 ? 'showItem' : 'hideItem'} <Button type='primary' id='add-layer-button' className={this.state.menuData.length > 0 ? 'showItem' : 'hideItem'}
onClick={this.showModal}>新建图层</Button> onClick={this.showModal}>新建图层</Button>
</div> */} </div> */}
</div> </div>
<Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'> <Modal title="新建图层" open={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel} className='edit-layer-modal'>
<Form name='base' id='edit-layer-form' onFinish={this.handleOk}> <Form name='base' id='edit-layer-form' onFinish={this.handleOk}>
<Form.Item label="图层名称" <Form.Item label="图层名称"
rules={[ rules={[
{
required: true,
message: '请输入图层名称!',
}
]}>
<Input name='id' type='hidden' value={this.state.addLayer.id} />
<Input name='name' value={this.state.addLayer.name} onChange={this.onLayerNameChange} />
</Form.Item>
<Form.Item label="图层图标" rules={[
{ {
required: true, required: true,
message: '请输入图层名称!', message: '请选择图层图标!',
} }
]}> ]}>
<Input name='id' type='hidden' value={this.state.addLayer.id} /> <Radio.Group id='redio-btn-color-group' onChange={this.onLayerIconColorChange}>
<Input name='name' value={this.state.addLayer.name} onChange={this.onLayerNameChange} /> <Radio.Button name='logoColor' value='red' className='radio-btn-color color-01'></Radio.Button>
</Form.Item> <Radio.Button name='logoColor' value='yellow' className='radio-btn-color color-02'></Radio.Button>
<Form.Item label="图层图标" rules={[ <Radio.Button name='logoColor' value='green' className='radio-btn-color color-03'></Radio.Button>
{ <Radio.Button name='logoColor' value='blue' className='radio-btn-color color-04'></Radio.Button>
required: true, <Radio.Button name='logoColor' value='cyan' className='radio-btn-color color-05'></Radio.Button>
message: '请选择图层图标!', <Radio.Button name='logoColor' value='pink' className='radio-btn-color color-06'></Radio.Button>
} <Radio.Button name='logoColor' value='white' className='radio-btn-color color-07'></Radio.Button>
]}> <Radio.Button name='logoColor' value='gray' className='radio-btn-color color-08'></Radio.Button>
<Radio.Group id='redio-btn-color-group' onChange={this.onLayerIconColorChange}> <Radio.Button name='logoColor' value='black' className='radio-btn-color color-09'></Radio.Button>
<Radio.Button name='logoColor' value='red' className='radio-btn-color color-01'></Radio.Button> </Radio.Group>
<Radio.Button name='logoColor' value='yellow' className='radio-btn-color color-02'></Radio.Button> <Radio.Group id='redio-btn-group' onChange={this.onLayerIogoImagePathChange}>
<Radio.Button name='logoColor' value='green' className='radio-btn-color color-03'></Radio.Button> <Radio.Button name='logoImagePath' value={`iconPoint01_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint01_${this.state.addLayer.logoImageColor}`}></Radio.Button>
<Radio.Button name='logoColor' value='blue' className='radio-btn-color color-04'></Radio.Button> <Radio.Button name='logoImagePath' value={`iconPoint02_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint02_${this.state.addLayer.logoImageColor}`}></Radio.Button>
<Radio.Button name='logoColor' value='cyan' className='radio-btn-color color-05'></Radio.Button> <Radio.Button name='logoImagePath' value={`iconPoint03_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint03_${this.state.addLayer.logoImageColor}`}></Radio.Button>
<Radio.Button name='logoColor' value='pink' className='radio-btn-color color-06'></Radio.Button> <Radio.Button name='logoImagePath' value={`iconPoint04_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint04_${this.state.addLayer.logoImageColor}`}></Radio.Button>
<Radio.Button name='logoColor' value='white' className='radio-btn-color color-07'></Radio.Button> <Radio.Button name='logoImagePath' value={`iconPoint05_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint05_${this.state.addLayer.logoImageColor}`}></Radio.Button>
<Radio.Button name='logoColor' value='gray' className='radio-btn-color color-08'></Radio.Button> <Radio.Button name='logoImagePath' value={`iconPoint06_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint06_${this.state.addLayer.logoImageColor}`}></Radio.Button>
<Radio.Button name='logoColor' value='black' className='radio-btn-color color-09'></Radio.Button> <Radio.Button name='logoImagePath' value={`iconPoint07_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint07_${this.state.addLayer.logoImageColor}`}></Radio.Button>
</Radio.Group> <Radio.Button name='logoImagePath' value={`iconPoint08_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint08_${this.state.addLayer.logoImageColor}`}></Radio.Button>
<Radio.Group id='redio-btn-group' onChange={this.onLayerIogoImagePathChange}> <Radio.Button name='logoImagePath' value={`iconPoint09_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint09_${this.state.addLayer.logoImageColor}`}></Radio.Button>
<Radio.Button name='logoImagePath' value={`iconPoint01_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint01_${this.state.addLayer.logoImageColor}`}></Radio.Button> </Radio.Group>
<Radio.Button name='logoImagePath' value={`iconPoint02_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint02_${this.state.addLayer.logoImageColor}`}></Radio.Button> </Form.Item>
<Radio.Button name='logoImagePath' value={`iconPoint03_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint03_${this.state.addLayer.logoImageColor}`}></Radio.Button> <Form.Item label="图层备注">
<Radio.Button name='logoImagePath' value={`iconPoint04_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint04_${this.state.addLayer.logoImageColor}`}></Radio.Button> <Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange}
<Radio.Button name='logoImagePath' value={`iconPoint05_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint05_${this.state.addLayer.logoImageColor}`}></Radio.Button> style={{ height: '120px' }} />
<Radio.Button name='logoImagePath' value={`iconPoint06_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint06_${this.state.addLayer.logoImageColor}`}></Radio.Button> </Form.Item>
<Radio.Button name='logoImagePath' value={`iconPoint07_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint07_${this.state.addLayer.logoImageColor}`}></Radio.Button> </Form>
<Radio.Button name='logoImagePath' value={`iconPoint08_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint08_${this.state.addLayer.logoImageColor}`}></Radio.Button> </Modal>
<Radio.Button name='logoImagePath' value={`iconPoint09_${this.state.addLayer.logoImageColor}`} className={`radio-btn iconPoint09_${this.state.addLayer.logoImageColor}`}></Radio.Button> </div >
</Radio.Group> <Button onClick={this.hiddenLayer} className={this.state.menuData.length > 0 ? 'hiddenBtn showItem' : 'hiddenBtn hideItem'}><DoubleLeftOutlined /></Button>
</Form.Item> {/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */}
<Form.Item label="图层备注"> </div>
<Input.TextArea name='note' value={this.state.addLayer.note} onChange={this.onLayerNoteChange}
style={{ height: '120px' }} />
</Form.Item>
</Form>
</Modal>
</div >
<Button onClick={this.hiddenLayer} className={this.state.menuData.length > 0 ? 'hiddenBtn showItem' : 'hiddenBtn hideItem'}><DoubleLeftOutlined /></Button>
{/* <Button onClick={this.hiddenLayer} className='hiddenBtn'><DoubleLeftOutlined/></Button> */}
</> </>
); );
} }

69
src/pages/BaseMap/index.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form, Alert, Space } from 'antd'; import { Select, Input, Card, Col, Row, Button, message, Modal, Spin, Form, Alert, Space } from 'antd';
import { DoubleLeftOutlined, ExclamationCircleFilled } from '@ant-design/icons'; import { DoubleLeftOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import LayerData from './LayerData'; import LayerData from './LayerData';
@ -14,6 +14,7 @@ const { confirm } = Modal;
import icon04 from '../../assets/icon/icon04.svg' import icon04 from '../../assets/icon/icon04.svg'
import styles from './index.less'; import styles from './index.less';
import './index.less';
import pop from './pop'; import pop from './pop';
import { remove } from 'react-cookies'; import { remove } from 'react-cookies';
@ -34,6 +35,15 @@ const successSearchAddress = () => {
message.success('已成功进行地图定位'); message.success('已成功进行地图定位');
}; };
// 省编码（全局）
let ProvinceAdcode = null;
let ProvinceData = null;
// 市编码（全局）
let CityAdcode = null;
let CityData = null;
// 区编码（全局）
let DistrictAdcode = null;
let DistrictData = null;
class BaseMap extends React.Component { class BaseMap extends React.Component {
constructor() { constructor() {
@ -102,8 +112,30 @@ class BaseMap extends React.Component {
zoom: 3, zoom: 3,
}) })
}); });
this.setState({ this.setState({
map: scene, map: scene,
}, () => {
// 根据省市区码加载地图
if (ProvinceAdcode) {
this.onProvinceChange(ProvinceAdcode, ProvinceData);
}
if (CityAdcode) {
this.onCityChange(CityAdcode, CityData);
}
if (DistrictAdcode) {
this.onDistrictChange(DistrictAdcode, DistrictData);
}
let can = document.getElementsByClassName('amap-layer')[0];
can.addEventListener('mousedown', (e) => {
console.log('mousedown',can);
// can.className = 'amap-layer cursor-grab';
can.className = can.className.replace("amap-layer","amap-layer cursor-grab");
can.addEventListener('mouseup', (e) => {
can.className = can.className.replace("cursor-grab"," ");
// console.log('mouseup',can.className.replace("cursor-grab"," "));
});
})
}); });
// 地图搜索提示功能 // 地图搜索提示功能
// scene.on('loaded', () => { // scene.on('loaded', () => {
@ -474,7 +506,7 @@ class BaseMap extends React.Component {
return getAllProvinceApi().then((e) => { return getAllProvinceApi().then((e) => {
let provinceData = e.data; let provinceData = e.data;
let provinceList = []; let provinceList = [];
for (var i in provinceData) { for (let i in provinceData) {
provinceList.push({ provinceList.push({
'value': provinceData[i].provinceAdcode, 'value': provinceData[i].provinceAdcode,
'label': provinceData[i].provinceName, 'label': provinceData[i].provinceName,
@ -490,7 +522,8 @@ class BaseMap extends React.Component {
} }
// 选择省 provinceAdcode:省编码 data:省数据 // 选择省 provinceAdcode:省编码 data:省数据
onProvinceChange = (provinceAdcode, data) => { onProvinceChange = (provinceAdcode, data) => {
var self = this; console.log("data", data)
let self = this;
// 清除点位图层 // 清除点位图层
let getLayers = self.state.markerLayerList; let getLayers = self.state.markerLayerList;
for (let i = 0; i < getLayers.length; i++) { for (let i = 0; i < getLayers.length; i++) {
@ -516,6 +549,8 @@ class BaseMap extends React.Component {
districtList: [],//区 districtList: [],//区
districtAdcode: '', districtAdcode: '',
}) })
ProvinceAdcode = provinceAdcode;
ProvinceData = data;
} }
// 获取市 // 获取市
getCityByProvince = (provinceAdcode) => { getCityByProvince = (provinceAdcode) => {
@ -545,6 +580,7 @@ class BaseMap extends React.Component {
} }
//选择市 cityAdcode:市编码 data:市数据 //选择市 cityAdcode:市编码 data:市数据
onCityChange = (cityAdcode, data) => { onCityChange = (cityAdcode, data) => {
console.log("document.getElementsByClassName('createTips___PYONM')", document.getElementsByClassName('createTips___PYONM'))
var self = this; var self = this;
console.log("cityAdcode", cityAdcode) console.log("cityAdcode", cityAdcode)
if (cityAdcode === undefined || cityAdcode === null || cityAdcode === "" || cityAdcode === 'undefined') { if (cityAdcode === undefined || cityAdcode === null || cityAdcode === "" || cityAdcode === 'undefined') {
@ -576,6 +612,8 @@ class BaseMap extends React.Component {
zoom: 10, zoom: 10,
districtAdcode: '' districtAdcode: ''
}) })
CityAdcode = cityAdcode;
CityData = data;
} }
// 获取区 // 获取区
getDistrictByCity = (cityAdcode) => { getDistrictByCity = (cityAdcode) => {
@ -629,6 +667,8 @@ class BaseMap extends React.Component {
center: data && [parseFloat(data.lat), parseFloat(data.len)], center: data && [parseFloat(data.lat), parseFloat(data.len)],
zoom: 13, zoom: 13,
}) })
DistrictAdcode = provinceAdcode;
DistrictData = data;
} }
onSearchSwitch = (data) => { onSearchSwitch = (data) => {
if (data === "1") { if (data === "1") {
@ -695,7 +735,7 @@ class BaseMap extends React.Component {
} }
} }
// 点位创建 // 开启点位创建
enableDrawPoint = () => { enableDrawPoint = () => {
if (this.state.cityAdcode == '' && this.state.districtAdcode == '') { if (this.state.cityAdcode == '' && this.state.districtAdcode == '') {
message.error('请至少选择行政区域至城市再进行点位创建'); message.error('请至少选择行政区域至城市再进行点位创建');
@ -711,6 +751,9 @@ class BaseMap extends React.Component {
message.error('请至少选中一个个人图层'); message.error('请至少选中一个个人图层');
return false; return false;
} }
// 提示文字
document.getElementsByClassName('createTips')[0].className = 'createTips show';
// 鼠标变十字 // 鼠标变十字
// this.state.map.map.setDefaultCursor('crosshair'); 将默认鼠标样式改为十字，地图内有元素会变为手指 // this.state.map.map.setDefaultCursor('crosshair'); 将默认鼠标样式改为十字，地图内有元素会变为手指
@ -749,10 +792,13 @@ class BaseMap extends React.Component {
} }
// 地图鼠标双击事件 // 点位创建地图鼠标双击事件
dblclickEvent = (e) => { dblclickEvent = (e) => {
// 开启双击地图放大 不能放在这，会导致弹框的同时放大地图，将开启放大放在弹框关闭事件中 // 开启双击地图放大 不能放在这，会导致弹框的同时放大地图，将开启放大放在弹框关闭事件中
// 取消提示文字
document.getElementsByClassName('createTips')[0].className = 'createTips hidden';
// 添加点位 // 添加点位
this.showModal(this.state.mouseLocation.location.toString()); this.showModal(this.state.mouseLocation.location.toString());
// 鼠标取消十字 // 鼠标取消十字
@ -770,7 +816,7 @@ class BaseMap extends React.Component {
} }
// 地图右键事件 // 点位创建地图右键事件
contextmenuEvent = (e) => { contextmenuEvent = (e) => {
this.disableDrawPoint(); this.disableDrawPoint();
} }
@ -781,6 +827,9 @@ class BaseMap extends React.Component {
this.state.map.setMapStatus({ this.state.map.setMapStatus({
doubleClickZoom: true doubleClickZoom: true
}) })
// 取消提示文字
document.getElementsByClassName('createTips')[0].className = 'createTips hidden';
// 鼠标取消十字 // 鼠标取消十字
// this.state.map.map.setDefaultCursor('auto'); // this.state.map.map.setDefaultCursor('auto');
document.getElementsByClassName('amap-layer')[0].className = 'amap-layer'; document.getElementsByClassName('amap-layer')[0].className = 'amap-layer';
@ -1054,6 +1103,14 @@ class BaseMap extends React.Component {
</Col> </Col>
</Row> </Row>
</Card> </Card>
<div className={'createTips hidden'}>
<span>您已处于点位创建状态，
可操作鼠标进行点位创建，
左键单击为地图拖动效果，
右键单击为取消点位创建，
滚轮可控制地图放大缩小，
<strong>左键双击</strong>为选择点位并<strong>创建</strong></span>
</div>
{/* 图层数据显示 */} {/* 图层数据显示 */}
<LayerData <LayerData
ref="getLayerDataFun" ref="getLayerDataFun"

21
src/pages/BaseMap/index.less
View File

@ -26,3 +26,24 @@
.btnRight { .btnRight {
margin-bottom: 26px; margin-bottom: 26px;
} }
.createTips{
position: absolute;
// top: 50%;
margin: 15% 0%;
left: 25%;
z-index: 99;
pointer-events: none;
text-align: center;
font-style: italic;
font-size: 14px;
color: #666;
width: 50%;
}
.hidden{
display: none;
}
.show{
display: block;
}