<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>穿梭车监控管理</title>
|
<link rel="stylesheet" href="../static/vue/element/element.css">
|
<link rel="stylesheet" href="../static/css/car_vue.css">
|
<script src="../static/vue/js/vue.min.js"></script>
|
<script src="../static/vue/element/element.js"></script>
|
<style>
|
.el-row {
|
margin-bottom: 10px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
.el-col {
|
border-radius: 4px;
|
}
|
.bg-purple-dark {
|
background: #99a9bf;
|
}
|
.bg-purple {
|
background: #067af8;
|
}
|
.bg-purple-light {
|
background: #ffffff;
|
}
|
.grid-content {
|
border-radius: 4px;
|
min-height: 230px;
|
}
|
.grid-content-bottom {
|
border-radius: 4px;
|
min-height: 176px;
|
}
|
.row-bg {
|
padding: 10px 0;
|
background-color: #f9fafc;
|
}
|
</style>
|
|
</head>
|
<body>
|
<div id="container">
|
<!--第一部分-->
|
<el-row>
|
<el-col :span="22" style="float: right" class="grid-content bg-purple-light">
|
<el-col :span="5" class="grid-content bg-purple-light">
|
<el-row>
|
<el-col :span="8" :offset="8" class="title">穿梭车位置</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20" :offset="2" class="title">
|
<lable>1#</lable>
|
<el-dropdown trigger="click" :hide-on-click="false">
|
<el-button class="bg-orgin" @click="changePosition($event,1)">修改位置</el-button>
|
<el-dropdown-menu>
|
<el-dropdown-item><span>1</span><input type="text"></el-dropdown-item>
|
<el-dropdown-item>2</el-dropdown-item>
|
<el-dropdown-item>3</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
|
<el-button>所属堆垛机</el-button>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20" :offset="2" class="title">
|
<lable>2#</lable>
|
<el-button @click="changePosition($event,2)">修改位置</el-button>
|
<el-button>所属堆垛机</el-button>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20" :offset="2" class="title">
|
<lable>3#</lable>
|
<el-button @click="changePosition($event,3)">修改位置</el-button>
|
<el-button>所属堆垛机</el-button>
|
</el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="19" class="grid-content bg-purple-dark">
|
|
</el-col>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="22" class="grid-content bg-purple-light" style="float: right"></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="22" class="grid-content bg-purple-light" style="float: right"></el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="22" class="grid-content-bottom bg-purple-light" style="float: right"></el-col>
|
</el-row>
|
</div>
|
</body>
|
</html>
|
<script>
|
var app = new Vue({
|
el: '#container',
|
data: {
|
message: 'btn'
|
},
|
methods: {
|
changePosition(e,id) {
|
e.target.blur();
|
if(e.target.nodeName == "SPAN") {
|
e.target.parentNode.blur(); // 强制失焦
|
}
|
console.log(id)
|
}
|
}
|
})
|
</script>
|
