<template>
|
<div class="table1">
|
<div class="header">
|
<span class="title1">应急预案查询</span>
|
</div>
|
|
<el-table :data="tableData" size="mini" style="width: 90%;background: #182a45;margin-top: 16px;" :height="'160px'">
|
<el-table-column prop="name" header-align="center" width="70" align="center" label="预案名称">
|
</el-table-column>
|
<el-table-column prop="type" header-align="center" align="center" label="预案类型">
|
</el-table-column>
|
<el-table-column prop="level" header-align="center" align="center" label="预案等级">
|
<template slot-scope="scope">
|
<span :style="{ color: scope.row.level == '一级预案' ? 'red' : '' }">{{ scope.row.level }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="预案查询">
|
<template slot-scope="scope">
|
<el-button type="text" size="small">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="width: 100%;height: 36px ;margin: 6px 0px; text-align: center">
|
<el-pagination :total="30" layout="total, prev, pager, next, jumper" :page-sizes="[5]">
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: "table1",
|
components: {
|
|
},
|
data() {
|
return {
|
tableTreeDdataTotal: 0,
|
tableData: [
|
{
|
name: '预案1',
|
type: '化学品事故',
|
level: '二级预案',
|
},
|
{
|
name: '预案2',
|
type: '水上交通事故',
|
level: '二级预案',
|
},
|
{
|
name: '预案3',
|
type: '政府预案',
|
level: '一级预案',
|
},
|
{
|
name: '预案4',
|
type: '建筑业事故',
|
level: '二级预案',
|
},
|
|
{
|
name: '预案5',
|
type: '企业预案',
|
level: '一级预案',
|
},
|
{
|
name: '预案6',
|
type: '交通事故',
|
level: '一级预案',
|
},
|
]
|
}
|
},
|
|
|
}
|
</script>
|
|
<style scoped lang="less">
|
.table1 {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
pointer-events: all;
|
|
.header {
|
width: 304px;
|
height: 27.5px;
|
margin-left: 20px;
|
margin-top: 20px;
|
background-image: url("~@/assets/img/menuTitle1.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
font-family: PangMenZhengDao;
|
text-shadow: 0px 6px 9px #20618e;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
flex-shrink: 0;
|
align-self: flex-start;
|
|
.title1 {
|
margin-left: 30px;
|
font-size: 15px;
|
color: #ffffff;
|
}
|
|
}
|
}
|
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: #dedfe1;
|
}
|
|
.el-table /deep/ tr th {
|
background-color: rgba(240, 250, 254, 0.1);
|
color: rgba(240, 250, 254, 0.85);
|
}
|
|
.el-table /deep/ tr:hover>td {
|
background-color: rgba(0, 166, 226, 0.4) !important;
|
}
|
|
.el-pagination /deep/ .btn-prev,
|
.el-pagination /deep/ .btn-next,
|
.el-pagination /deep/ .el-input__inner,
|
.el-pagination /deep/ .el-pager li {
|
background-color: rgba(0, 166, 226, 0.02);
|
border-radius: 2px 2px 2px 2px;
|
border: 1px solid rgba(240, 250, 254, 0.3);
|
color: #dedfe1 !important;
|
}
|
|
.el-pagination /deep/ .el-pagination__jump {
|
color: #dedfe1;
|
}
|
/deep/.el-pagination__total{
|
color: #dedfe1;
|
}
|
|
/deep/ .el-input__inner {
|
background-color: transparent;
|
background-image: none;
|
border-radius: 0px;
|
border: 1px solid #5c6d96;
|
color: #ffffff;
|
}
|
|
/deep/.el-input-group__append {
|
background: transparent;
|
border: 1px solid #5c6d96;
|
color: #ffffff;
|
}
|
|
/deep/.el-table--mini .el-table__cell {
|
padding: 0px 0;
|
}
|
|
/deep/.el-table th.el-table__cell>.cell {
|
padding: 6px 10px;
|
}
|
|
/deep/.el-table .cell {
|
color: #aec2de;
|
}
|
</style>
|
