<style scoped>
|
.title {
|
height: 60px;
|
line-height: 60px;
|
}
|
|
.search {
|
background-color: #fff;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
}
|
|
.search_thing {
|
width: 350px;
|
display: flex;
|
align-items: center;
|
}
|
|
.search_label {
|
width: 110px;
|
font-size: 14px;
|
text-align: right;
|
}
|
|
.search_input {
|
width: calc(100% - 110px);
|
}
|
|
.table {
|
margin-top: 10px;
|
background-color: #fff;
|
width: calc(100% - 40px);
|
height: calc(100% - 60px - 80px - 10px - 40px);
|
padding: 20px;
|
}
|
|
ul {
|
list-style-type: none;
|
display: grid;
|
grid-template-columns: repeat(auto-fit, 370px);
|
justify-content: center;
|
grid-gap: 22px;
|
}
|
ul li{
|
width: 370px;
|
height: 160px;
|
border-radius: 8px 8px 8px 8px;
|
border: 1px solid #EEEEEE;
|
margin: 0 !important;
|
display: flex;
|
align-items: center;
|
}
|
ul li img{
|
width: 131px;
|
height: 131px;
|
border-radius: 16px;
|
margin-right: 24px;
|
}
|
</style>
|
|
<template>
|
<div class="role_manage">
|
<div>
|
<el-row class="title">
|
<el-col :span="12" style="padding-left: 20px;">设备总览</el-col>
|
</el-row>
|
</div>
|
<div class="search">
|
<div class="search_thing">
|
<div class="search_label">状态：</div>
|
<el-select v-model="searchForm.status" placeholder="全部" size="small">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="search_thing">
|
<div class="search_label">设备名称：</div>
|
<div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="searchForm.name"
|
@keyup.enter.native="refreshTable()"></el-input></div>
|
</div>
|
<div class="search_thing" style="padding-left: 30px;">
|
<el-button size="small" @click="refresh()">重 置</el-button>
|
<el-button size="small" type="primary" @click="refreshTable()">查 询</el-button>
|
</div>
|
</div>
|
<div class="table">
|
<ul>
|
<li v-for="m in 10" :key="m">
|
<img src="https://cn.bing.com/images/search?view=detailV2&ccid=2rNAMzsn&id=EE3F6A1D4B80118C0F4376BEBAD7B9690DCA0029&thid=OIP.2rNAMzsnuOFoZdUl_OIltQHaE8&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.dab340333b27b8e16865d525fce225b5%3frik%3dKQDKDWm517q%252bdg%26riu%3dhttp%253a%252f%252fseopic.699pic.com%252fphoto%252f50052%252f2932.jpg_wh1200.jpg%26ehk%3dViGq82qf5d0jyp5G9R6ZLs8p6PmBR4IGfEPP48JYdZg%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=800&expw=1200&q=%e5%9c%a8%e7%ba%bf%e8%ae%be%e5%a4%87%e5%9b%be%e7%89%87%e4%b8%8d%e8%b7%a8%e5%9f%9f&simid=608030609452501280&FORM=IRPRST&ck=E1891E3AC31F578247B495D0C618E8AE&selectedIndex=1&itb=0&ajaxhist=0&ajaxserp=0" alt="">
|
<div class="list-left">
|
<div class="list-left-info">
|
<span class="label">设备名称：</span>
|
<span>小舞灵漩涡混合器</span>
|
</div>
|
<div class="list-left-info">
|
<span class="label">规格型号：</span>
|
<span>CASJTS-C004-01</span>
|
</div>
|
<div class="list-left-info">
|
<span class="label">状态：</span>
|
<el-tag type="danger">标签五</el-tag>
|
</div>
|
</div>
|
<div class="circles">
|
<div class="circle0 circle"></div>
|
<div class="circle1 circle"></div>
|
<div class="circle2 circle"></div>
|
<div class="circle3 circle"></div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
options:[],
|
// 搜索表单
|
searchForm:{}
|
}
|
},
|
mounted() {
|
},
|
methods: {
|
refreshTable() {
|
|
},
|
refresh() {
|
|
},
|
}
|
}
|
</script>
|
