<script setup>
|
import {ref} from "vue";
|
|
const tableData = ref([
|
{
|
date: '2016-05-03',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
{
|
date: '2016-05-02',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
{
|
date: '2016-05-04',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
{
|
date: '2016-05-01',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
{
|
date: '2016-05-08',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
{
|
date: '2016-05-06',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
{
|
date: '2016-05-07',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
]);
|
|
const carName = ref(null);
|
</script>
|
|
<template>
|
<div class="page-container">
|
<div class="page-content">
|
<div class="page-header">
|
<div class="input-list">
|
<div class="input-item">
|
<div class="input-wrapper">
|
<div class="input-label">车辆名称</div>
|
<div class="input-content">
|
<el-input
|
v-model="carName"
|
size="large"
|
placeholder="Please Input"/>
|
</div>
|
</div>
|
</div>
|
<div class="input-item">
|
<div class="input-wrapper">
|
<div class="input-label">在线状态</div>
|
<div class="input-content">
|
<el-input
|
v-model="carName"
|
size="large"
|
placeholder="Please Input"/>
|
</div>
|
</div>
|
</div>
|
<div class="input-item">
|
<div class="input-wrapper">
|
<div class="input-label">国标设备编码</div>
|
<div class="input-content">
|
<el-input
|
v-model="carName"
|
size="large"
|
placeholder="Please Input"/>
|
</div>
|
</div>
|
</div>
|
<div class="input-item">
|
<el-button type="primary" plain>查询</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="page-content">
|
<el-table :data="tableData" height="100%">
|
<el-table-column prop="date" label="Date" />
|
<el-table-column prop="name" label="Name" />
|
<el-table-column prop="address" label="Address" />
|
</el-table>
|
</div>
|
<div class="page-footer">
|
<div class="el-pagination-container">
|
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.page-container {
|
height: 100%;
|
padding: 12px;
|
.page-content {
|
display: flex;
|
height: 100%;
|
border-radius: 4px;
|
box-shadow: 0 0 12px rgba(0, 0, 0, .16);
|
flex-direction: column;
|
.page-header {
|
padding: 8px;
|
}
|
.page-content {
|
flex: 1;
|
overflow-y: auto;
|
}
|
.page-footer {
|
padding: 8px 0;
|
text-align: center;
|
.el-pagination-container {
|
display: inline-block;
|
}
|
}
|
}
|
}
|
|
.input-list {
|
.input-item {
|
display: inline-block;
|
margin-left: 8px;
|
}
|
}
|
.input-wrapper {
|
display: flex;
|
.input-content {
|
width: 160px;
|
}
|
.input-label {
|
font-size: 14px;
|
line-height: 40px;
|
vertical-align: bottom;
|
margin-right: 8px;
|
}
|
}
|
</style>
|
