| | |
| | | <!-- |
| | | * @Date: 2024-01-06 17:40:19 |
| | | * @LastEditors: Sneed |
| | | * @LastEditTime: 2024-01-06 19:54:37 |
| | | * @LastEditTime: 2024-01-06 22:05:59 |
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/list/index.vue |
| | | --> |
| | | <template> |
| | |
| | | </div> |
| | | <div class="table"> |
| | | <el-table |
| | | stripe |
| | | :data="tableData" |
| | | style="width: 100%"> |
| | | <slot name="columns"></slot> |
| | |
| | | export default { |
| | | data () { |
| | | return { |
| | | tableData: [{name:123},{name:123}] |
| | | tableData: [{name:123},{name:123}, |
| | | {name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123},{name:123}, |
| | | ] |
| | | } |
| | | }, |
| | | |
| | |
| | | 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; |
| | | } |
| | |
| | | color: #E6E5E5; |
| | | background-color: #182D54; |
| | | border-bottom: none; |
| | | |
| | | } |
| | | .el-table { |
| | | color: #E6E5E5; |
| | |
| | | border-bottom: none; |
| | | padding: 0; |
| | | } |
| | | .el-table td{ |
| | | .el-table td, .el-table--striped .el-table__body tr.el-table__row--striped td,.el-table--enable-row-hover .el-table__body tr:hover>td{ |
| | | color: #E6E5E5; |
| | | border-bottom: none; |
| | | background: transparent; |
| | | background-color: transparent!important;; |
| | | background-color: transparent; |
| | | // 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 tr.el-table__row--striped { |
| | | background-color: #182D54!important; |
| | | |
| | | } |
| | | // .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; |
| | |
| | | |
| | | } |
| | | .search { |
| | | margin: 20px 30px 0; |
| | | padding: 20px 30px; |
| | | margin: 20px 30px; |
| | | padding: 30px 0px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | background: url('./search.png') 100% 100% no-repeat; |
| | | background: url('./search.png') center center no-repeat; |
| | | background-size: contain; |
| | | } |
| | | .table { |
| | |
| | | right: 40px; |
| | | } |
| | | } |
| | | .table::-webkit-scrollbar { |
| | | width: 4px; /* Chrome/Safari */ |
| | | } |
| | | |
| | | /* 定义滑块(thumb)的样式 */ |
| | | .table::-webkit-scrollbar-thumb { |
| | | background-color: #999; /* Chrome/Safari */ |
| | | } |
| | | |
| | | /* 当滑块被按下时的样式 */ |
| | | .table::-webkit-scrollbar-thumb:hover { |
| | | background-color: #666; /* Chrome/Safari */ |
| | | } |
| | | |
| | | /* 定义两侧边界的样式 */ |
| | | .table::-webkit-scrollbar-track { |
| | | background-color: #f5f5f5; /* Chrome/Safari */ |
| | | } |
| | | |
| | | </style> |