同城配送地图划分区域代码/地图多边形划分区域

bianmaren 发布于 2020-03-25 01:07:59    访问

标签 : polygon Js 地图

效果图

WX20200325-010053@2x (1) (1).png


代码下载

demo.zip


交互JSON数据

[{
	"regionName": "区域A",
	"startPrice": "10",
	"deliveryPrice": "5",
	"lngLatArr": [{
		"Q": 29.720593117608324,
		"R": 115.99613693917843,
		"lng": 115.996137,
		"lat": 29.720593
	}, {
		"Q": 29.716306978874666,
		"R": 115.99213983307527,
		"lng": 115.99214,
		"lat": 29.716307
	}, {
		"Q": 29.707537391970405,
		"R": 115.98763372193031,
		"lng": 115.987634,
		"lat": 29.707537
	}, {
		"Q": 29.707537391970405,
		"R": 115.99798827806967,
		"lng": 115.997988,
		"lat": 29.707537
	}, {
		"Q": 29.716530608029593,
		"R": 115.99798827806967,
		"lng": 115.997988,
		"lat": 29.716531
	}]
}, {
	"regionName": "区域B",
	"startPrice": "20",
	"deliveryPrice": "5",
	"lngLatArr": [{
		"Q": 29.71123791774174,
		"R": 115.9827628303592,
		"lng": 115.982763,
		"lat": 29.711238
	}, {
		"Q": 29.706661429810197,
		"R": 115.98126079331087,
		"lng": 115.981261,
		"lat": 29.706661
	}, {
		"Q": 29.705170412817086,
		"R": 115.98786025682944,
		"lng": 115.98786,
		"lat": 29.70517
	}, {
		"Q": 29.711014276797005,
		"R": 115.98565011660116,
		"lng": 115.98565,
		"lat": 29.711014
	}]
}]


HTML 代码

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>Document</title>
    <!-- 引入自定义样式表 -->
    <link rel="stylesheet" href="./style.css"></link>
    <!-- 引入 高德JsApi -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key={{高德KEY}}&plugin=AMap.PolyEditor"></script>
    <!-- 引入 高德工具  -->
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <!-- 地图容器 -->
    <div id="container"></div>
    <!-- 左侧 - 操作区域 -->
    <div class="operationPanel">
        <!-- 存放列表数据 -->
        <ul class="listDynamic"></ul>
        <!-- 新增配送区域 - 按钮 -->
        <button class="btn" id="addLayer">新增配送区域</button>
    </div>
    <!-- 底部按钮 -->
    <div class="bottomBtnBox">
        <!-- 开始编辑 - 按钮 -->
        <button class="btns" id="startEdit">开始编辑</button>
        <!-- 结束编辑 - 按钮 -->
        <button class="btns" id="endEdit">结束保存</button>
    </div>
    <script>
        /** 从后台来过来的数据 */
        var data = [
            {
                /** 区域名称 */
                regionName: '1',
                /** 起送价 */
                startPrice: '100.00',
                /** 配送费 */
                deliveryPrice: '200.00',
                /** 经纬度数组存放 */
                lngLatArr: [
                    {
                        Q: 28.680989608029595,
                        R: 115.88702574402947,
                        lng: 115.887026,
                        lat: 28.68099,
                    },
                    {
                        Q: 28.671996391970406,
                        R: 115.88702574402947,
                        lng: 115.887026,
                        lat: 28.671996,
                    },
                    {
                        Q: 28.671996391970406,
                        R: 115.89727625597055,
                        lng: 115.897276,
                        lat: 28.671996,
                    },
                    {
                        Q: 28.680989608029595,
                        R: 115.89727625597055,
                        lng: 115.897276,
                        lat: 28.68099,
                    }
                ],
            }
        ];

        /** 发送 http 请求到后端 */
        var httpMethod = function (data) {
            console.log(data)
        }
    </script>
    <!-- 编写 JavaScript 脚本代码 -->
    <script src="./script.js"></script>
</body>
</html>


JS 代码

/** 定义存储整个数组的区域划分的数据 */
var list = [];

/** 储存状态 - 是否为编辑模式 */
var editStatus = false;

/** 存储地图 */
var map;

/** 根据状态显示按钮 */
var btnStatusMethod = function () {
    /** 获取开始编辑按钮 */
    var startEdit = document.getElementById('startEdit'),
        /** 获取结束保存按钮 */
        endEdit = document.getElementById('endEdit');
    /** 根据状态选显示不同按钮 */
    if (editStatus) {
        endEdit.style.display = 'block';
        startEdit.style.display = 'none';
        return;
    }
    startEdit.style.display = 'block';
    endEdit.style.display = 'none';
    return;
}

/** 生成 (范围性) 随机数 [PS: 用于生成随机颜色码]*/
var randomNum = function (minNum, maxNum) {
    switch (arguments.length) {
        case 1:
            return parseInt(Math.random() * minNum + 1, 10);
        case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
        default:
            return 0;
    }
}

/** 验证是否为数字类型字符串 - 非数字类型直接替换成空 */
var NumberCheck = function (str) {
    var len1 = str.substr(0, 1);
    var len2 = str.substr(1, 1);
    //如果第一位是0,第二位不是点,就用数字把点替换掉
    if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1);
    }
    //第一位不能是.
    if (len1 == ".") {
        str = "";
    }
    //限制只能输入一个小数点
    if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1);
        if (str_.indexOf(".") != -1) {
            str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
        }
    }
    //正则替换,保留数字和小数点
    str = str.replace(/[^\d^\.]+/g, '');
    return str;
}

/**
 * 根据经纬度计算四个坐标的经纬度
 * @param {Float} lng 经度
 * @param {Float} lat 纬度
 * @returns {Array} 返回四个角经纬度
 */
var computeLngLat = function (lng, lat) {
    /** 地球半径千米 */
    var r = 6371;
    /** 0.5千米距离 */
    var dis = 0.5;
    /** 角度转为弧度 */
    var dlng = 2 * Math.asin(Math.sin(dis / (2 * r)) / Math.cos(lat * Math.PI / 180));
    dlng = dlng * 180 / Math.PI;
    var dlat = dis / r;
    dlat = dlat * 180 / Math.PI;
    return [
        /** 左上角 */
        [lng - dlng, lat + dlat],
        /** 左下角 */
        [lng - dlng, lat - dlat],
        /** 右下角 */
        [lng + dlng, lat - dlat],
        /** 右上角 */
        [lng + dlng, lat + dlat],
    ];
};

/** 创建并且插入每个单独的dom */
var createDomListItem = function () {
    /** 通过动态参数存储 color 值 */
    var color = arguments[arguments.length - 1];
    /** 初始化data - 以免没有传递参数报错 */
    var data = {
        /** 区域名称 */
        regionName: '',
        /** 起送价 */
        startPrice: '',
        /** 配送费 */
        deliveryPrice: '',
    };
    /** 判断参数的长度是否大于 1,如果大于则代表第一个参数 data存在 */
    if (arguments.length > 1) {
        /** 覆盖默认的参数 */
        data = arguments[0]
    }
    /** 获取 ul 列表dom */
    var listDynamic = document.getElementsByClassName('listDynamic')[0];
    /** 创建 item 容器 */
    var itemDom = document.createElement('li');
    /** 写入html内容进 item */
    itemDom.innerHTML = '<div class="top clear">' +
        '<i class="iconColor" style="background-color:rgba(' + color + ',.5);border:1px solid rgb(' + color + ')"></i>' +
        '<input type="text" placeholder="请输入区域名称" name="regionName" value="' + data.regionName + '">' +
        '<i class="iconDelete"></i>' +
        '</div>' +
        '<div class="price clear">' +
        '<strong>起送价:</strong>' +
        '<div class="priceContainer clear">' +
        '<input type="text" name="startPrice" placeholder="请输入" value="' + data.startPrice + '">' +
        '</div>' +
        '</div>' +
        '<div class="price clear">' +
        '<strong>配送费:</strong>' +
        '<div class="priceContainer clear">' +
        '<input type="text" name="deliveryPrice" placeholder="请输入" value="' + data.deliveryPrice + '">' +
        '</div>' +
        '</div>';
    /** 插入dom */
    listDynamic.appendChild(itemDom);
    /** 让列表始终滚到最底部 */
    listDynamic.scrollTop = listDynamic.scrollHeight + 20;
    /** 获取所有 item */
    var item = listDynamic.getElementsByTagName('li');
    /** 清楚所有 item 的 class */
    var clearItemClass = function () {
        /** 循环所有item - 清楚所有 item 的 class */
        for (var i = 0; i < item.length; i++) {
            /** 闭包写法 */
            (function (x) {
                /** 判断 item 是否有 class 存在 */
                if (item[x].getAttribute('class')) {
                    /** 清楚 class */
                    item[x].removeAttribute('class');
                }
            })(i);
        }
    }
    /** 循环所有item并添加点击事件 */
    for (var i = 0; i < item.length; i++) {
        /** 作用域 - 防止闭包自执行函数 */
        (function (x) {
            /** item 点击事件 */
            item[x].onclick = function () {
                /** 清楚所有item的 class */
                clearItemClass();
                /** 给当前class 添加选中 active 状态 */
                this.setAttribute('class', 'active');
            };
            /** 每个 item 的删除按钮点击事件 */
            item[x].getElementsByClassName('iconDelete')[0].onclick = function () {
                /** 删除地图上已有的多边形区域 */
                list[x].polygon.setMap(null);
                /** 关闭当前编辑的图层 */
                list[x].polyEditor.close();
                /** 删除当前列表中的 item */
                listDynamic.removeChild(item[x]);
                /** 将 list 数组中已绑定的数据 */
                list.splice(x, 1);
                /** 判断是否为最后一个区域 */
                if (list.length === 0) {
                    /** 如果只剩下最后一个区域,那就关闭编辑状态 */
                    editStatus = false;
                    /** 根据状态显示按钮 */
                    btnStatusMethod();
                }
            };
            /** 获取所有 input */
            var input = item[x].getElementsByTagName('input');
            /** 循环所有 input 并且添加相应事件 */
            for (var j = 0; j < input.length; j++) {
                /** 闭包写法 - 防止出现 bug */
                (function (y) {
                    /** input 输出触发事件 */
                    input[y].oninput = function () {
                        /** input 的 name */
                        var name = this.getAttribute('name');
                        /** input 的 value */
                        var value = this.value;
                        /** 区域名称 */
                        if (name === 'regionName') {
                            /** 将输入的区域名称赋值进 list 数组的 data.regionName 中 */
                            list[x].data.regionName = value;
                        }
                        /** 统一判断金额验证 */
                        else {
                            /** 验证金额正则 */
                            var regularMoney = /^\d+\.?\d{0,2}$/;
                            /** 判断是否为金额类型的数字或者为输入 */
                            if (regularMoney.test(value) || value === '') {
                                /** 起送价 */
                                if (name === 'startPrice') {
                                    /** 将输入的起送价赋值进 list 数组的 data.startPrice 中 */
                                    list[x].data.startPrice = value;
                                }
                                /** 配送费 */
                                else if (name === 'deliveryPrice') {
                                    /** 将输入的配送费赋值进 list 数组的 data.deliveryPrice 中 */
                                    list[x].data.deliveryPrice = value;
                                }
                            }
                            /** 类型错误 */
                            else {
                                this.value = Number(NumberCheck(value)).toFixed(2);
                                /** 起送价 */
                                if (name === 'startPrice') {
                                    /** 将输入的起送价赋值进 list 数组的 data.startPrice 中 */
                                    list[x].data.startPrice = this.value;
                                }
                                /** 配送费 */
                                else if (name === 'deliveryPrice') {
                                    /** 将输入的配送费赋值进 list 数组的 data.deliveryPrice 中 */
                                    list[x].data.deliveryPrice = this.value;
                                }
                            }
                        }
                    }
                })(j);
            }
        })(i);
    };
};

/** 向地图添加拖拽矩形 */
var addMapDragRectangle = function () {
    /** 获取最后一个参数,并且赋值 [该参数为经纬度数组] */
    var path = arguments[arguments.length - 1];
    var defaultData = {
        /** 区域名称 */
        regionName: '',
        /** 起送价 */
        startPrice: '',
        /** 配送费 */
        deliveryPrice: '',
    };
     /** 判断参数的长度是否大于 1,如果大于则代表第一个参数 data 存在 */
     if (arguments.length > 1) {
        /** 覆盖默认的参数 */
        defaultData = arguments[0]
    }
    /** 随机生成颜色 */
    var color = [randomNum(0, 255), randomNum(0, 255), randomNum(0, 255)];
    /** 创建地图的矩形对象 */
    var polygon = new AMap.Polygon({
        // 多边形路径点(根据经纬度设置多个点)
        path: path,
        // 多边形描边透明度
        strokeOpacity: 0,
        // 多边形透明度
        fillOpacity: 1,
        // 多边形颜色
        fillColor: 'rgba(' + color.toString() + ',.5)',
        // 多边形层级
        zIndex: 50,
    });
    /** 创建工具类 - 编辑矩形类 */
    var polyEditor = new AMap.PolyEditor(map, polygon);
    /** 判断是否已经开启类编辑模式 */
    if (editStatus) {
        polyEditor.open()
    }
    /** 向数组添加数据集合 */
    list.push({
        /** 存放数据的对象 */
        data: Object.assign(defaultData,{
            /** 经纬度数组存放 */
            lngLatArr: path,
        }),
        /** 地图的矩形对象 */
        polygon: polygon,
        /** 工具类 - 编辑矩形类 */
        polyEditor: polyEditor,
        /** 随机生成的颜色值 */
        color: color.toString(),
    });
    // 将多边形添加到地图中
    map.add(list[list.length - 1].polygon);
    // 缩放地图到合适的视野级别
    map.setFitView(list[list.length - 1].polygon);
    /** 生成并且插入 dom */
    createDomListItem(defaultData, color.toString());
    /** 编辑按钮点击事件 */
    document.getElementById('startEdit').onclick = function () {
        if (list.length !== 0) {
            /** 循环 list 列表,并且处理事件 */
            for (var i = 0; i < list.length; i++) {
                /** 作用域闭包写法 */
                (function (x) {
                    /** 让所有模块开始编辑 */
                    list[x].polyEditor.open();
                })(i);
            }
        }
        /** 将状态改编成修改模式 */
        editStatus = true;
        /** 根据状态显示按钮 */
        btnStatusMethod();
    };
    /** 结束编辑事件 */
    document.getElementById('endEdit').onclick = function () {
        /** 循环 list 列表,并且处理事件 */
        for (var i = 0; i < list.length; i++) {
            /** 作用域闭包写法 */
            (function (x) {
                /** 让所有模块开始编辑 */
                list[x].polyEditor.close();
            })(i);
        }
        /** 存放后端需要的数据 */
        var data = [];
        /** 循环 list */
        list.forEach(function (item) {
            /** 将后端有用的数据提取出来放到 data 数组中 */
            data.push(item.data);
        });
        console.log(JSON.stringify(data))
        /** 将状态调整为 编辑完成 */
        editStatus = false;
        /** 根据状态显示按钮 */
        btnStatusMethod();
        /** 调用 http 方法 */
        httpMethod(data);
    };
};

/** 新增配送区域按钮 - 点击事件 */
document.getElementById('addLayer').onclick = function () {
    /** 获取地图中心经度 */
    var lng = map.Qe.center.lng,
        /** 获取地图中心纬度 */
        lat = map.Qe.center.lat,
        /** 求出四个角经纬度 */
        arrLngLat = computeLngLat(lng, lat);
        console.log(arrLngLat);
    /** 向地图插入一个矩形 */
    addMapDragRectangle(arrLngLat);
};

/** 初始化执行函数 */
var initialize = function () {
    /** 初始化地图 */
    map = new AMap.Map("container", {
        /** 自动定位当前城市 */
        resizeEnable: true,
        /** 地图缩放层级 */
        zoom: 12,
    });
    /** 根据状态显示按钮 */
    btnStatusMethod();
    /** 循环初始数据 */
    for(var i = 0; i < data.length; i++) {
        /** 闭包写法 */
        (function(x){
            /** 组合左侧显示数据 */
            var obj = {
                regionName: data[x].regionName,
                startPrice: data[x].startPrice,
                deliveryPrice: data[x].deliveryPrice,
            };
            /** 存储经纬度 */
            var lngLatArr = [];
            /** 循环经纬度 */
            data[x].lngLatArr.forEach(function(item) {
                /** 数据转换类型并添加进 lngLatArr 数组 */
                lngLatArr.push([item.lng, item.lat])
            })
            /** 添加矩形 */
            addMapDragRectangle(obj,lngLatArr);
        })(i);
    };
};

/** 立即执行初始化函数 */
initialize();


CSS样式

/* 清楚默认样式 */
*{
    margin: 0;
    padding: 0;
}
input,
button{
    outline:none;
}
li{
    list-style: none;
}
/* 设置视图大小 */
html,
body,
#container {
    width: 100%;
    height: 100%;
}
/** 清楚浮动 */
.clear::after{
    display: block;
    content: '';
    clear: both;
}
/** 设置操作面板 */
.operationPanel{
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: #fff;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2);
}
/* 操作面板 - 底部按钮 */
.operationPanel .btn{
    width: 207px;
    height: 36px;
    border-radius: 4px;
    margin: 13px 13px 21px;
    border: 1px solid #dcdee0;
    background-color: #fff;
    cursor: pointer;
    transition: background-color .3s, border .3s, color .3s;
    color: #6b6c6d;
}
/* 操作面板 - 底部按钮 - hover样式 */
.operationPanel .btn:hover{
    background-color: #275ecc;
    border: 1px solid #275ecc;
    color: #fff;
}
.operationPanel .listDynamic{
    max-height: 474px;
    overflow-x: auto;
}
.operationPanel .listDynamic::after,
.operationPanel .listDynamic::before{
    display: block;
    content: '';
    padding-bottom: 5px;
}
/* 列表每一项item容器 */
.operationPanel .listDynamic li{
    padding: 13px;
    border: 1px solid #fff;
    border-bottom: 1px solid #eceff2;
    position: relative;
    
}
.operationPanel .listDynamic li:hover{
    box-shadow: 0 0px 10px 5px rgba(0, 0, 0, .1);
    z-index: 1;
}
/* 列表每一项item容器 - 选中三角形 - 打勾背景 */
.operationPanel .listDynamic li::after{
    display: none;
    content: '';
    width: 10px;
    height: 7px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIoAAABeCAYAAAD8KIxdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDMtMThUMTU6MzQ6MTArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAzLTE4VDE1OjM0OjI3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTAzLTE4VDE1OjM0OjI3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQyZWZmMDI0LWU3ZTgtNGUzOS04NzRjLWRlNTg1ODhjNGI5MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MmVmZjAyNC1lN2U4LTRlMzktODc0Yy1kZTU4NTg4YzRiOTEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MmVmZjAyNC1lN2U4LTRlMzktODc0Yy1kZTU4NTg4YzRiOTEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQyZWZmMDI0LWU3ZTgtNGUzOS04NzRjLWRlNTg1ODhjNGI5MSIgc3RFdnQ6d2hlbj0iMjAyMC0wMy0xOFQxNTozNDoxMCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+2thhTQAAApFJREFUeJzt3L+OD2EUh/GzKsIVEInCBWg0GomolYRGKbptuAS9q1iyF6CRIHENGrKVfjs6j2YnYtk9M7/588687/Opp/ie5MkUU0yEFBHAVeAOcLH0Fq0Q8AT4zN8OgNult2klgLecb7/0RhUGfE0i6VyPiLhQerCWBxxGxM2ejz+fc4tWCjjs+SbpfC+9WQvbIZLOXuntWsiISI5Kb9dCRkQC8LL0fi1gZCTHwKXSN2hmIyMBeFj6Bs1sgkgelb5BMzMSpYxEKSNRykiUMhKljEQpI1HKSJQyEqWMRCkjUcpIlDISpYxEKSNRykiUMhKljEQpI1HKSJQyEqWMRCkjUcpIlDISpaqIBLgBvAKOgF/Ae+BZ6V21qCWSF+cM/AbcK71xy2qJ5H7PscaygyoiiYgA3g0YbSwD1BTJtYHDfxpLP9VEEhEBPNjhAGNJVBVJRARwa8dDjOUM1UXSGXGQsZxSbSQREcC+sYxXdSQd4IOx7K6JSCIigMvAR2MZrplIOsYyXHORdIylv2Yj6RhLrvlIOsZyNiM5xVj+ZSRnMJY/jCRhLEbSW8uxGMlALcZiJDtqKRYjGamFWIxkIjXHYiQTqzEWI5lJTbEYycxqiMVIFrLlWIxkYVuMxUgK2VIsRlLYFmIxkpVYcyxGsjJrjMVIVmpNsRjJyq0hFiPZiJKxGMnGlIjFSDZqyViMZOOWiMVIKjFnLEZSmTliMZJKTRmLkVRuolg+GUkDJojFSFpRKBYj2aKFYzGSLVsoFiOpwcyxGElNZorFSGo0cSxGUrOJYjGSFoyMxUhachLL0C+wRtKik1h+9Izkcem9Kgi4AhwnkbwuvVMrAbz5TyBfWMnfEbQywF3gKbBXekutfgPhFJV0vWlENAAAAABJRU5ErkJggg==');
    background-size: 100% 100%;
    position: absolute;
    right: 5px;
    bottom: 5px;
}
/* 列表每一项item容器 - 选中三角形 */
.operationPanel .listDynamic li::before{
    display: none;
    content: '';
    width: 0;
    height: 0;
    border-width:0 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #145bd3;
    position: absolute;
    right: 0;
    bottom: 0;
}
/* 列表每一项item容器 - hover 描边效果 */
.operationPanel .listDynamic .active{
    border: 1px solid #145bd3;
    border-bottom: 1px solid #145bd3 !important;
}
/* 列表每一项item容器 - hover 效果 - 显示关闭按钮 */
.operationPanel .listDynamic .active .top .iconDelete,
.operationPanel .listDynamic .active::after,
.operationPanel .listDynamic .active::before{
    display: block;
}
/* 顶部区域区域名称容器 */
.operationPanel .listDynamic li .top{
    margin-bottom: 11px;
    position: relative;
}
/* 顶部区域区域名称容器 - 颜色块 */
.operationPanel .listDynamic li .top .iconColor{
    display: block;
    width: 16px;
    height: 16px;
    float: left;
    margin:9px 8px 9px 0;
}
/* 顶部区域区域名称容器 - input */
.operationPanel .listDynamic li .top input{
    width: 140px;
    height: 34px;
    border:1px solid #dee1e3;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 14px;
}
/* 顶部区域区域名称容器 - 删除按钮 */
.operationPanel .listDynamic li .top .iconDelete{
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #c6c7cb;
    position: absolute;
    right: -3px;
    top: 1px;
    cursor: pointer;
    transform:rotate(-45deg);
    display: none;
}
/* 顶部区域区域名称容器 - 删除按钮 - 绘制叉叉1 */
.operationPanel .listDynamic li .top .iconDelete::before{
    display: block;
    content: '';
    width: 6px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* 顶部区域区域名称容器 - 删除按钮 - 绘制叉叉2 */
.operationPanel .listDynamic li .top .iconDelete::after{
    display: block;
    content: '';
    width: 1px;
    height: 6px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* 计价容器 */
.operationPanel .listDynamic li .price{
    margin-bottom: 11px;
}
/* 计价容器 - 清楚最后一个下边距 */
.operationPanel .listDynamic li .price:last-child{
    margin-bottom: 0;
}
/* 计价容器 - title */
.operationPanel .listDynamic li .price strong{
    font-weight: normal;
    font-size: 14px;
    line-height: 36px;
    float: left;
    margin-right: 4px;
    color: #6b6c6d;
}
/* 计价容器 - 输入区域  */
.operationPanel .listDynamic li .price .priceContainer{
    width: 126px;
    height: 34px;
    border-radius: 4px;
    border: 1px solid #dee1e3;
    float: left;
    overflow: hidden;
}
/* 计价容器 - 输入区域 - input */
.operationPanel .listDynamic li .price .priceContainer input{
    width: 71px;
    float: left;
    border: none;
    padding: 0 10px;
    height: 34px;
    font-size: 14px;
}
/* 价格容器金额标记 - 输入区域 - 伪元素 */
.operationPanel .listDynamic li .price .priceContainer::before{
    display: block;
    float: left;
    width: 34px;
    height: 34px;
    content: '¥';
    background-color: #f6f8fa;
    border-right: 1px solid #dee1e3;
    text-align: center;
    line-height: 34px;
    font-size: 14px;
    color: #6b6c6d;
}

/** 底部按钮容器 */
.bottomBtnBox{
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.bottomBtnBox button{
    width: 150px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .3s, border .3s, color .3s;
    color: #fff;
    background-color: #538cff;
    border:1px solid #538cff;
}