效果图
代码下载
交互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;
}- 热门文章
- Mysql 8.0+开启远程访问
- Vue3+Ts 组合API调用子组件方法
- JAVA生成微信小程序分享海报
- 基于 Vue 实现魔方矩阵排列效果
- JAVA开发微信特约商户进件/提交申请单
- 检查Office(Word/Excel)文档是否需要密码-通...
- Nginx 跨域配置支持
- 微信/v3/merchant/media/upload 网络图片上...
- 简述分布式CAP理论
- Iterator迭代器设计模式
- 我的标签
- JAVA<7>
- Js<4>
- 设计模式<4>
- TS<2>
- nginx<2>
- 微信服务商<2>
- 微信小程序<1>
- Vue<1>
- Vue3<1>
- IPv6<1>
- Apache POI<1>
- Mysql<1>
- rocketmq<1>
- 分布式数据库<1>
- polygon<1>
- 地图<1>
- CAP<1>
- jQuery<1>
- Git<1>
- curl<1>
- 分布式系统<1>
- 设计<0>
- Redis<0>
- HikariCP<0>
- 数据库连接池<0>
- 多线程<0>
- 友情链接
- 江西云戈信息技术