| | |
| | | <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> |
| | | body { |
| | | background-color: #6CA7A8; |
| | | } |
| | | .el-row { |
| | | margin-bottom: 20px; |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | margin-bottom: 10px; |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | .el-col { |
| | | border-radius: 4px; |
| | |
| | | background: #067af8; |
| | | } |
| | | .bg-purple-light { |
| | | background: #e5e9f2; |
| | | background: #ffffff; |
| | | } |
| | | .grid-content { |
| | | border-radius: 4px; |
| | | min-height: 360px; |
| | | min-height: 230px; |
| | | } |
| | | .grid-content-bottom { |
| | | border-radius: 4px; |
| | | min-height: 176px; |
| | | } |
| | | .row-bg { |
| | | padding: 10px 0; |
| | |
| | | </head> |
| | | <body> |
| | | <div id="container"> |
| | | |
| | | <!--第一部分--> |
| | | <el-row> |
| | | <!-- <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>--> |
| | | <el-col :span="22" style="float: right"><div class="grid-content bg-purple-light"></div></el-col> |
| | | <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> |
| | |
| | | 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> |