<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>编辑折线</title>
|
<style>
|
.text{
|
float:left;
|
color:white;
|
font-size:16px;
|
margin-left: 30px;
|
margin-top: 5px;
|
}
|
.text2{
|
float:left;
|
color:white;
|
font-size:16px;
|
margin-left: 30px;
|
margin-top: 20px;
|
}
|
.labelInput {
|
width: 150px;
|
height: 30px;
|
margin-left: 25px;
|
margin-right: 50px;
|
line-height: 40px;
|
font-size: 16px;
|
text-indent: 8px;
|
outline: 0;
|
float: left;
|
border: none;
|
border-color: #3b403f;
|
/* box-shadow: 0 2px 6px #3a3c42; */
|
border-top-left-radius: 2px;
|
border-bottom-left-radius: 2px;
|
background-color: rgba(63, 72, 84, 0.7);
|
color: white;
|
}
|
.textarea{
|
width: 240px;
|
height: 140px;
|
margin-left: 25px;
|
margin-right: 50px;
|
margin-top: 5px;
|
line-height: 40px;
|
font-size: 16px;
|
text-indent: 8px;
|
outline: 0;
|
border: none;
|
border-color: #3b403f;
|
/* box-shadow: 0 2px 6px #3a3c42; */
|
border-top-left-radius: 2px;
|
border-bottom-left-radius: 2px;
|
background-color: rgba(63, 72, 84, 0.7);
|
color: white;
|
resize:none;
|
}
|
.my-save-btn{
|
margin-top: 80px;
|
margin-left: 100px;
|
width: 70px;
|
height: 30px;
|
color: white;
|
background-color: #303247;
|
border:1px;
|
cursor: pointer;
|
border-radius: 2px;
|
}
|
.my-save-btn:hover{
|
background-color:rgb(107, 169, 220);
|
}
|
.layui-form-select .layui-input {
|
padding-right: 30px;
|
height: 30px;
|
cursor: pointer;
|
background: #20212b;
|
color: grey;
|
border-color: #3b403f;
|
}
|
|
.layui-form-select dl dd.layui-this {
|
background-color: grey;
|
top: 35px;
|
color: #fff;
|
}
|
|
/*下拉框高度*/
|
.layui-form-select dl {
|
top: 33px;
|
background: #3b403f !important;
|
color: white;
|
height: 100px;
|
}
|
|
</style>
|
<link href="../../libs/layui/css/layui.css" rel="stylesheet">
|
<script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../../libs/layui/layui.js"></script>
|
</head>
|
|
<body>
|
<div style="margin-top: 20px;">
|
<form class="layui-form" action="">
|
<div>
|
<span class="text">名称</span>
|
<input id="input" class="labelInput" type="text" placeholder="输入文字" autocomplete="off" oninput="labelChange(event)" onporpertychange="labelChange(event)"/>
|
</div>
|
<div>
|
<div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
|
线颜色
|
</div>
|
<div id="colorSelect" style="display:inline-block;margin-top: 5px;">
|
</div>
|
</div>
|
<div>
|
<div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
|
线宽度
|
</div>
|
<div style="display:inline-block;margin-top: 5px; width: 150px;">
|
<select id="lineSize" lay-verify="required" class="my-select" lay-filter="lineSize">
|
<option value="1">1</option>
|
<option value="2">2</option>
|
<option value="3">3</option>
|
<option value="4">4</option>
|
<option value="5">5</option>
|
<option value="6">6</option>
|
<option value="7">7</option>
|
<option value="8">8</option>
|
</select>
|
</div>
|
</div>
|
</form>
|
</div>
|
<script>
|
var currentLineId
|
function child(id,text,lineColor,lineSize,pick) {
|
currentLineId=id
|
layui.use(['element', 'layer', 'form','colorpicker'], function () {
|
var element = layui.element;
|
var form = layui.form;
|
var colorpicker = layui.colorpicker;
|
$("#input").val(text)
|
colorpicker.render({
|
elem: '#colorSelect',
|
color: lineColor,
|
size:'20px',
|
done: function (color) {
|
parent.updateLine(2,currentLineId,color,pick);
|
},
|
});
|
lineSize=parseInt(lineSize);
|
$("#lineSize").val(lineSize);
|
form.on("select(lineSize)", function (data) {
|
parent.updateLine(3,currentLineId,data.value,pick);
|
})
|
form.render();
|
});
|
}
|
function labelChange(e) {
|
parent.updateLine(1,currentLineId,$("#input").val(),pick);
|
}
|
</script>
|
|
|
</body>
|
|
</html>
|
