<!--
|
* @Date: 2024-01-06 17:40:19
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-01-06 19:54:37
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/list/index.vue
|
-->
|
<template>
|
<div class="list">
|
<div class="search">
|
<slot name="search"></slot>
|
</div>
|
<div class="table">
|
<el-table
|
:data="tableData"
|
style="width: 100%">
|
<slot name="columns"></slot>
|
<!-- <el-table-column
|
prop="date"
|
label="日期"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="姓名"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="地址">
|
</el-table-column> -->
|
</el-table>
|
<div class="pagination">
|
<el-pagination
|
style="background: transparent;"
|
:page-size="20"
|
:pager-count="11"
|
layout="prev, pager, next"
|
:total="1000">
|
</el-pagination>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data () {
|
return {
|
tableData: [{name:123},{name:123}]
|
}
|
},
|
|
}
|
</script>
|
<style lang="scss">
|
.list {
|
width: 100%;
|
height: 100%;
|
overflow: auto;
|
.table {
|
.el-table td, .el-table th.is-leaf {
|
// border-bottom: 1px solid red;
|
// padding: 20px ;
|
}
|
.el-table::before {
|
background-color: transparent;
|
}
|
.el-table th {
|
color: #E6E5E5;
|
background-color: #182D54;
|
border-bottom: none;
|
|
}
|
.el-table {
|
color: #E6E5E5;
|
background: transparent;
|
background-color: transparent;
|
border-bottom: none;
|
padding: 0;
|
}
|
.el-table td{
|
color: #E6E5E5;
|
border-bottom: none;
|
background: transparent;
|
background-color: transparent!important;;
|
// padding: 0;
|
}
|
.el-table tr{
|
color: #E6E5E5;
|
border-bottom: none;
|
background: transparent;
|
background-color: transparent!important;;
|
border-bottom: none;
|
padding: 0;
|
}
|
.el-table__header {
|
color: #E6E5E5;
|
background: transparent;
|
background-color: transparent;
|
border-bottom: none;
|
padding: 0;
|
}
|
.el-table__body-wrapper {
|
color: #E6E5E5;
|
background: transparent;
|
background-color: transparent;
|
border-bottom: none;
|
padding: 0;
|
}
|
.el-table__header-wrapper {
|
border: none;
|
border-bottom: none;
|
padding: 0;
|
}
|
}
|
.pagination {
|
background: transparent;
|
}
|
.el-pager li {
|
background: transparent;
|
}
|
.el-pagination button:disabled {
|
background: transparent;
|
}
|
.el-pagination .btn-next, .el-pagination .btn-prev {
|
background: transparent;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
.list {
|
|
}
|
.search {
|
margin: 20px 30px 0;
|
padding: 20px 30px;
|
display: flex;
|
flex-wrap: wrap;
|
background: url('./search.png') 100% 100% no-repeat;
|
background-size: contain;
|
}
|
.table {
|
margin-top: 20px;
|
margin-bottom: 30px;
|
padding: 20px 30px;
|
background: transparent;
|
overflow: auto;
|
.pagination {
|
position: absolute;
|
bottom: 0;
|
right: 40px;
|
}
|
}
|
</style>
|
