main
liudan
7 days ago
parent
55cd4652d0
commit
522ace97dd
@ -0,0 +1,331 @@ |
||||
body,html{ |
||||
margin:0; |
||||
padding:0; |
||||
} |
||||
.monitor{ |
||||
|
||||
height: calc(100vh); |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
background-color: #F2F2F2; |
||||
position: relative; |
||||
} |
||||
.monitor .top{ |
||||
height:20%; |
||||
width: calc(100% - 2px); |
||||
border:1px solid red; |
||||
background-color: #fff; |
||||
/* padding:20px; */ |
||||
} |
||||
#top1 { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
height: calc(100% - 40px); |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
padding: 20px 0px; |
||||
} |
||||
#top1 .carInfo{ |
||||
width:10%; |
||||
height:calc(50% - 20px); |
||||
/* height: 50px; */ |
||||
background: #ECF3F7; |
||||
border-radius: 10px; |
||||
border: 1px dashed #6271FE; |
||||
/* margin-top:20px; */ |
||||
margin-left:1.25%; |
||||
margin-right:1.25%; |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
#top1 .carInfo span{ |
||||
position: absolute; |
||||
left:50%; |
||||
top:50%; |
||||
transform: translate(-50%,-50%); |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
font-size: 18px; |
||||
color: #FFFFFF; |
||||
text-shadow: 0px 2px 2px rgba(6,13,23,0.5); |
||||
z-index:3; |
||||
} |
||||
#top1 .empty{ |
||||
|
||||
/* margin-top:20px; */ |
||||
margin-left:1.25%; |
||||
margin-right:1.25%; |
||||
width:10%; |
||||
height:calc(50% - 20px); |
||||
/* height: 50px; */ |
||||
background: #ECF3F7; |
||||
border-radius: 10px; |
||||
border: 1px dashed #6271FE; |
||||
} |
||||
.bottom{ |
||||
flex:1; |
||||
margin-top:20px; |
||||
|
||||
display: flex; |
||||
} |
||||
.bottom .left{ |
||||
width:220px; |
||||
height:100%; |
||||
overflow: auto; |
||||
background: #FFFFFF; |
||||
box-shadow: 3px 0px 10px 0px rgba(6,13,23,0.06); |
||||
border-radius: 0px 10px 0px 0px; |
||||
flex-shrink: 0; |
||||
} |
||||
.left .title{ |
||||
position: relative; |
||||
margin-top:20px; |
||||
} |
||||
.left .title span{ |
||||
font-family: PingFang SC; |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
color: #222222; |
||||
margin-left:20px; |
||||
} |
||||
.left .title .flag{ |
||||
width: 8px; |
||||
height: 24px; |
||||
background: #6271FE; |
||||
border-radius: 4px; |
||||
position: absolute; |
||||
left:0; |
||||
top:5px; |
||||
} |
||||
.left .item{ |
||||
margin-top:29px; |
||||
margin-left:20px; |
||||
} |
||||
.left .item .itemTitle{ |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 22px; |
||||
color: #222222; |
||||
} |
||||
.left .item .itemDesc{ |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 22px; |
||||
color: #6271FE; |
||||
margin-top:15px; |
||||
} |
||||
.left .carInfo{ |
||||
margin-top:29px; |
||||
|
||||
} |
||||
.left .carInfo p{ |
||||
margin:22px 20px; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 20px; |
||||
color: #666666; |
||||
} |
||||
/* 右边 */ |
||||
.bottom .right{ |
||||
width:220px; |
||||
height:100%; |
||||
overflow: auto; |
||||
background: #FFFFFF; |
||||
box-shadow: -3px 0px 10px 0px rgba(6,13,23,0.06); |
||||
border-radius: 10px 0px 0px 0px; |
||||
flex-shrink: 0; |
||||
} |
||||
.bottom .right .itemBtn{ |
||||
padding: 17px 0; |
||||
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2); |
||||
border-radius: 10px; |
||||
text-align: center; |
||||
margin: 20px; |
||||
font-family: PingFang SC; |
||||
font-weight: bold; |
||||
font-size: 22px; |
||||
color: #FFFFFF; |
||||
|
||||
} |
||||
.blue{ |
||||
background: #6271FE; |
||||
} |
||||
.red{ |
||||
background: #E81A1A; |
||||
} |
||||
.green{ |
||||
background: #4BC5D3; |
||||
} |
||||
/* 中间 */ |
||||
.bottom .center{ |
||||
flex:1; |
||||
|
||||
background-color: #fff; |
||||
margin: 0 20px 20px 20px; |
||||
} |
||||
.center .progressContainer{ |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
margin:15% 60px 15% 24px; |
||||
} |
||||
.center .progressContainer>span{ |
||||
display: inline-block; |
||||
width: 100px; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 22px; |
||||
color: #222222; |
||||
} |
||||
.center .progressContainer .num{ |
||||
min-width: 137px; |
||||
font-family: PingFang SC; |
||||
font-weight: bold; |
||||
font-size: 22px; |
||||
|
||||
} |
||||
.center .progressContainer .num :first-child{ |
||||
color: #6271FE; |
||||
} |
||||
#progress-bar-container { |
||||
/* width: 100%; */ |
||||
flex:1; |
||||
background-color: #EBECF2; |
||||
border: 1px solid #EBECF2; |
||||
height: 20px; |
||||
overflow: hidden; |
||||
border-radius: 3px; |
||||
} |
||||
#progress-bar { |
||||
width: 0; |
||||
height: 100%; |
||||
background-color: #6271FE; |
||||
transition: width 1s ease-in-out; |
||||
border-radius: 3px; |
||||
} |
||||
.center .content{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin:0 8px; |
||||
} |
||||
.center .content .carItem{ |
||||
|
||||
/* flex:1; */ |
||||
/* margin:0 8px; */ |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 13%; |
||||
} |
||||
.center .content .carItem .numContent{ |
||||
height: 70px; |
||||
} |
||||
.center .content .carItem .numContent p{ |
||||
margin:0; |
||||
padding:0; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 18px; |
||||
color: #222222; |
||||
line-height: 26px; |
||||
} |
||||
.center .content .carItem .numContent>:nth-child(2){ |
||||
|
||||
margin-top:15px; |
||||
} |
||||
.center .content .carItem .pic{ |
||||
margin:20px 0; |
||||
background: #ECF3F7; |
||||
border-radius: 10px; |
||||
border: 1px dashed #6271FE; |
||||
width: 100%; |
||||
position: relative; |
||||
flex:1; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.center .content .carItem .pic img{ |
||||
width:100%; |
||||
height:auto; |
||||
} |
||||
.center .content .carItem .pic>span{ |
||||
position: absolute; |
||||
z-index:9; |
||||
left:50%; |
||||
top:50%; |
||||
transform: translate(-50%,-50%); |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
font-size: 18px; |
||||
color: #FFFFFF; |
||||
text-shadow: 0px 2px 2px rgba(6,13,23,0.5); |
||||
} |
||||
.center .content .carItem .temp{ |
||||
width: 100%; |
||||
height: auto; |
||||
} |
||||
.tempNum{ |
||||
margin-top:12px; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 22px; |
||||
color: #222222; |
||||
} |
||||
|
||||
/* 下发弹窗 */ |
||||
|
||||
/* 编辑弹窗 */ |
||||
.editMask{ |
||||
position: absolute; |
||||
top:0; |
||||
left:0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: rgba(0,0,0,0.4); |
||||
display: none; |
||||
z-index:99; |
||||
} |
||||
.editDialog{ |
||||
position: relative; |
||||
top:50%; |
||||
left:50%; |
||||
transform: translate(-50%,-50%); |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2); |
||||
border-radius: 10px; |
||||
width: 30%; |
||||
text-align: center; |
||||
|
||||
} |
||||
.editMask .header{ |
||||
padding:20px 0; |
||||
font-family: PingFang SC; |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
color: #222222; |
||||
position: relative; |
||||
border-bottom: 1px solid #999; |
||||
} |
||||
.editMask .header>img{ |
||||
right:5px; |
||||
top:5px; |
||||
position: absolute; |
||||
} |
||||
.editBtn{ |
||||
padding:30px; |
||||
} |
||||
.editBtn .getAddr{ |
||||
background: #6271FE; |
||||
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2); |
||||
border-radius: 10px; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 22px; |
||||
color: #FFFFFF; |
||||
padding:20px 0; |
||||
} |
||||
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 607 B |
|
Before Width: | Height: | Size: 496 B After Width: | Height: | Size: 496 B |
|
After Width: | Height: | Size: 335 B |
|
After Width: | Height: | Size: 334 B |
|
After Width: | Height: | Size: 336 B |
|
After Width: | Height: | Size: 335 B |
|
After Width: | Height: | Size: 330 B |
|
After Width: | Height: | Size: 331 B |
|
After Width: | Height: | Size: 331 B |
@ -0,0 +1,112 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
|
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>sortable.js拖动例子</title> |
||||
<meta name="viewport" |
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> |
||||
<!-- 引入插件 --> |
||||
<script src="./js/Sortable.min.js"></script> |
||||
<style> |
||||
#wrapBox { |
||||
width: 360px; |
||||
/* 拖动容器的高度，由拖动项的高度撑开 */ |
||||
height: auto; |
||||
} |
||||
|
||||
#wrapBox div { |
||||
padding: 8px; |
||||
background-color: #fdfdfd; |
||||
border: solid 1px #eee; |
||||
margin-bottom: 10px; |
||||
/* 添加鼠标悬浮样式为移动的样式，要不然不好看 */ |
||||
cursor: move; |
||||
font-size: 13px; |
||||
} |
||||
|
||||
/* 设置鼠标按下时候的样式，加了好看些 */ |
||||
#wrapBox div:active { |
||||
background-color: #eee; |
||||
} |
||||
</style> |
||||
</head> |
||||
|
||||
<body> |
||||
<h2>优先扣款顺序：</h2> |
||||
<!-- 一般来说，拖动的结构就是：外边一个拖动容器，里面是一个又一个的拖动项 --> |
||||
<div id="wrapBox"> |
||||
<div data-id="1工商银行">工商银行</div> |
||||
<div data-id="2建设银行">建设银行</div> |
||||
<div data-id="3中国银行">中国银行</div> |
||||
<div data-id="4农业银行">农业银行</div> |
||||
<div data-id="5交通银行">交通银行</div> |
||||
</div> |
||||
<div id="wrapBox1"> |
||||
<div data-id="6工商银行">工商银行</div> |
||||
<div>123</div> |
||||
<div data-id="7建设银行">建设银行</div> |
||||
<div>456</div> |
||||
|
||||
<div data-id="8中国银行">中国银行</div> |
||||
<div data-id="9农业银行">农业银行</div> |
||||
<div data-id="10交通银行">交通银行</div> |
||||
</div> |
||||
<script> |
||||
//第一步，获取拖动容器 |
||||
var wrap = document.getElementById('wrapBox'); |
||||
//第二步，设置拖动项的拖动规则 |
||||
var rules = { |
||||
group: 'shared', |
||||
animation: 500, // 拖动时的元素的位置变化的动画时长， |
||||
//拖动结束后的回调函数 |
||||
onEnd: function (event) { |
||||
console.log('参数是拖动事件对象', event); |
||||
//获取拖动后容器中的每一项的位置排序 |
||||
// var arr = sortable.toArray(); |
||||
// console.log('位置排序', arr); |
||||
// if (evt.to === columnB) { |
||||
// // 执行替换逻辑，例如将元素从第一列移动到第二列 |
||||
// columnB.appendChild(evt.item); // 将拖动的元素添加到第二列 |
||||
// } |
||||
}, |
||||
}; |
||||
//第三步，初始化 --> 给拖动容器添加拖动规则 |
||||
var sortable = Sortable.create(wrap, rules); |
||||
|
||||
//第一步，获取拖动容器 |
||||
var wrap1 = document.getElementById('wrapBox1'); |
||||
//第二步，设置拖动项的拖动规则 |
||||
var rules1 = { |
||||
group: 'shared', |
||||
filter: ".ignore-elements", // 过滤器，不需要进行拖动的元素 |
||||
animation: 500, // 拖动时的元素的位置变化的动画时长， |
||||
//拖动结束后的回调函数 |
||||
onEnd: function (event) { |
||||
console.log('参数是拖动事件对象', event); |
||||
//获取拖动后容器中的每一项的位置排序 |
||||
var arr = sortable.toArray(); |
||||
console.log('位置排序', arr); |
||||
}, |
||||
}; |
||||
//第三步，初始化 --> 给拖动容器添加拖动规则 |
||||
var sortable1 = Sortable.create(wrap1, rules1); |
||||
/** |
||||
* 插件自带的方法： |
||||
* 1. sortable.toArray() 获取序列化后的每个item元素的id属性的数组 |
||||
* 2. Sortable.create(wrap, rules) 给拖动容器添加拖动规则 |
||||
* */ |
||||
// 摸索 |
||||
// new Sortable(example2Left, { |
||||
// group: 'shared', // set both lists to same group |
||||
// animation: 150 |
||||
// }); |
||||
|
||||
// new Sortable(example2Right, { |
||||
// group: 'shared', |
||||
// animation: 150 |
||||
// }); |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,38 @@ |
||||
$(function(){ |
||||
let width = 0; |
||||
let id = setInterval(frame, 10); |
||||
function frame() { |
||||
if (width >= 60) { |
||||
clearInterval(id); |
||||
} else { |
||||
width++; |
||||
$('#progress-bar').css('width', width + '%'); |
||||
} |
||||
} |
||||
// 编辑弹窗
|
||||
$("#setTask").click(()=>{ |
||||
|
||||
// 淡入元素
|
||||
$("#editDialog").fadeIn(); |
||||
}) |
||||
$("#closeEdit").click(()=>{ |
||||
$("#editDialog").fadeOut(); |
||||
}) |
||||
// 拖拽排序逻辑
|
||||
//第一步，获取拖动容器
|
||||
let wrap = document.getElementById('top1'); |
||||
//第二步，设置拖动项的拖动规则
|
||||
let rules = { |
||||
animation: 500, |
||||
//拖动结束后的回调函数
|
||||
onEnd: function (event) { |
||||
console.log('参数是拖动事件对象', event); |
||||
//获取拖动后容器中的每一项的位置排序
|
||||
var arr = sortable.toArray(); |
||||
console.log('位置排序', arr); |
||||
}, |
||||
}; |
||||
//第三步，初始化 --> 给拖动容器添加拖动规则
|
||||
let sortable = Sortable.create(wrap, rules); |
||||
|
||||
}) |
||||
@ -1,9 +1,37 @@ |
||||
$(function(){ |
||||
console.log("111") |
||||
for(let i = 0 ; i < 6 ; i++){ |
||||
$('.left').append(`<div class="taskItem">
|
||||
<span>任务${i+1}</span> |
||||
<img src="./images/shanchu.png" alt=""> |
||||
</div>`) |
||||
} |
||||
for(let i = 0 ; i < 6 ; i++){ |
||||
$('.right').append(`<div class="pointItem">
|
||||
<div class="point"> |
||||
<div class="pointName"> |
||||
<img src="./images/point.png" alt=""> |
||||
<span>点${i+1}</span> |
||||
</div> |
||||
<div class="edit">修改</div> |
||||
</div> |
||||
<div class="lat">经度：116.3913447°</div> |
||||
<div class="lat">纬度度：116.3913447°</div> |
||||
</div>`) |
||||
} |
||||
// 添加任务弹窗
|
||||
$("#addTaskBtn").click(()=>{ |
||||
// 淡入元素
|
||||
$("#addTaskDialog").fadeIn(); |
||||
}) |
||||
$("#closeAddTask").click(()=>{ |
||||
$("#addTaskDialog").fadeOut(); |
||||
}) |
||||
// 编辑弹窗
|
||||
$(".edit").click(()=>{ |
||||
// 淡入元素
|
||||
$("#editDialog").fadeIn(); |
||||
}) |
||||
$("#closeEdit").click(()=>{ |
||||
$("#editDialog").fadeOut(); |
||||
}) |
||||
}) |
||||
@ -0,0 +1,200 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>监控</title> |
||||
<link rel="stylesheet" href="./css/monitor.css"> |
||||
<script src="./js/jquery-3.7.1.min.js"></script> |
||||
<script src="./js/Sortable.min.js"></script> |
||||
<script src="./js/monitor.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="monitor"> |
||||
<section class="top"> |
||||
<div id="top1"> |
||||
<div data-id="car1" class="carInfo"> |
||||
<img src="./images/car1.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<div data-id="car2" class="carInfo"> |
||||
<img src="./images/car2.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<div data-id="car3" class="carInfo"> |
||||
<img src="./images/car3.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<div data-id="car4" class="carInfo"> |
||||
<img src="./images/car4.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<div data-id="car5" class="carInfo"> |
||||
<img src="./images/car5.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<div data-id="car6" class="carInfo"> |
||||
<img src="./images/car6.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<div data-id="car7" class="carInfo"> |
||||
<img src="./images/car6.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<div data-id="empty1" class="empty"></div> |
||||
<div data-id="empty2" class="empty"></div> |
||||
<div data-id="empty3" class="empty"></div> |
||||
<div data-id="empty4" class="empty"></div> |
||||
<div data-id="empty5" class="empty"></div> |
||||
<div data-id="empty6" class="empty"></div> |
||||
<div data-id="empty7" class="empty"></div> |
||||
</div> |
||||
</section> |
||||
<section class="bottom"> |
||||
<div class="left"> |
||||
<div class="title"> |
||||
<span>车辆信息</span> |
||||
<div class="flag"></div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="itemTitle">车辆ID：</div> |
||||
<div class="itemDesc">586205</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="itemTitle">车辆名称：</div> |
||||
<div class="itemDesc">XG6788976</div> |
||||
</div> |
||||
<div class="item"> |
||||
<div class="itemTitle">车辆机型：</div> |
||||
<div class="itemDesc">XG6788976</div> |
||||
</div> |
||||
<div class="carInfo"> |
||||
<p>精度：某某某某</p> |
||||
<p>维度：某某某某</p> |
||||
<p>车辆状态：无人驾驶</p> |
||||
<p>卫星解状态：某某</p> |
||||
</div> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="progressContainer"> |
||||
<span>施工进度</span> |
||||
<div id="progress-bar-container"> |
||||
<div id="progress-bar"></div> |
||||
</div> |
||||
<div class="num"> |
||||
<span>1800</span> |
||||
<span>/3000米</span> |
||||
</div> |
||||
</div> |
||||
<div class="content"> |
||||
<div class="carItem"> |
||||
<div class="numContent"> |
||||
<!-- <p>0.8L/min</p> |
||||
<p>0.16L/㎡</p> --> |
||||
</div> |
||||
<div class="pic"> |
||||
<img src="./images/car1.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<img src="./images/t1.png" alt="" class="temp"> |
||||
<div class="tempNum">90℃</div> |
||||
</div> |
||||
<div class="carItem"> |
||||
<div class="numContent"> |
||||
<!-- <p>0.8L/min</p> |
||||
<p>0.16L/㎡</p> --> |
||||
</div> |
||||
<div class="pic"> |
||||
<img src="./images/car2.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<img src="./images/t2.png" alt="" class="temp"> |
||||
<div class="tempNum">130℃</div> |
||||
</div> |
||||
<div class="carItem"> |
||||
<div class="numContent"> |
||||
<p>0.8L/min</p> |
||||
<p>0.16L/㎡</p> |
||||
</div> |
||||
<div class="pic"> |
||||
<img src="./images/car3.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<img src="./images/t3.png" alt="" class="temp"> |
||||
<div class="tempNum">180℃</div> |
||||
</div> |
||||
<div class="carItem"> |
||||
<div class="numContent"> |
||||
<p>0.8L/min</p> |
||||
<p>0.16L/㎡</p> |
||||
</div> |
||||
<div class="pic"> |
||||
<img src="./images/car4.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<img src="./images/t4.png" alt="" class="temp"> |
||||
<div class="tempNum">210℃</div> |
||||
</div> |
||||
<div class="carItem"> |
||||
<div class="numContent"> |
||||
<p>0.8L/min</p> |
||||
<p>0.16L/㎡</p> |
||||
</div> |
||||
<div class="pic"> |
||||
<img src="./images/car5.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<img src="./images/t5.png" alt="" class="temp"> |
||||
<div class="tempNum">220℃</div> |
||||
</div> |
||||
<div class="carItem"> |
||||
<div class="numContent"> |
||||
<p>0.8L/min</p> |
||||
<p>0.16L/㎡</p> |
||||
</div> |
||||
<div class="pic"> |
||||
<img src="./images/car6.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<img src="./images/t6.png" alt="" class="temp"> |
||||
<div class="tempNum">260℃</div> |
||||
</div> |
||||
<div class="carItem"> |
||||
<div class="numContent"> |
||||
<p>0.8L/min</p> |
||||
<p>0.16L/㎡</p> |
||||
</div> |
||||
<div class="pic"> |
||||
<img src="./images/car6.png" alt=""> |
||||
<span>XG031</span> |
||||
</div> |
||||
<img src="./images/t7.png" alt="" class="temp"> |
||||
<div class="tempNum">500℃</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="right"> |
||||
<div class="itemBtn blue">施工总览</div> |
||||
<div class="itemBtn red">一键解绑</div> |
||||
<div class="itemBtn blue" id="setTask">下发任务</div> |
||||
<div class="itemBtn green">启动</div> |
||||
<div class="itemBtn red">停止</div> |
||||
<div class="itemBtn blue">退出无人模式</div> |
||||
</div> |
||||
</section> |
||||
<!-- 下发--> |
||||
<div class="editMask" id="editDialog"> |
||||
<div class="editDialog"> |
||||
<div class="header"> |
||||
<span>下发任务</span> |
||||
<img src="./images/cha.png" alt="" id="closeEdit"> |
||||
</div> |
||||
<div class="editBtn"> |
||||
<div class="getAddr">任务拼接</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue