| | |
| | | <template> |
| | | <div class="menuPop"> |
| | | <div class="rightTitle"> |
| | | <span>管道</span> |
| | | <el-link @click="closeSpaceBox" :underline="false" class="boxClose" |
| | | ><i class="el-icon-close"></i> |
| | | </el-link> |
| | | </div> |
| | | |
| | | <div style="padding: 5px"> |
| | | <el-form :inline="true" :model="formInline" class="demo-form-inline"> |
| | | <el-form-item> |
| | |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button plain @click="setSpaceTableLayer">查詢</el-button> |
| | | <el-button plain @click="setSpaceTableLayer">查询</el-button> |
| | | <el-button plain @click="restSpacePopLayer">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="centTable"> |
| | | <el-table :data="tableData" height="220" style="width: 100%"> |
| | | <el-table |
| | | :data="tableData" |
| | | height="260px" |
| | | ref="filterTable" |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column |
| | | align="center" |
| | | type="index" |
| | |
| | | </el-table> |
| | | </div> |
| | | |
| | | <div class="bottomPage"> |
| | | <div class="bottomPage pagination_box"> |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | |
| | | } |
| | | } |
| | | this.tableData = data.result; |
| | | this.$refs.filterTable.doLayout(); |
| | | }, |
| | | async spaceLocation(index, row) { |
| | | var param = { |
| | |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | <style lang="less" scoped> |
| | | .menuPop { |
| | | width: 100%; |
| | | height: 100%; |
| | | width: calc(100% - 1px); |
| | | height: calc(100% - 1px); |
| | | margin: 0; |
| | | padding: 0; |
| | | overflow: hidden; |
| | | border: 1px solid gray; |
| | | float: left; |
| | | .centTable { |
| | | height: 230px; |
| | | } |
| | | .rightTitle { |
| | | padding: 5px; |
| | | color: white; |
| | |
| | | color: white; |
| | | } |
| | | } |
| | | |
| | | .bottomPage { |
| | | position: absolute; |
| | | bottom: 1%; |
| | | } |
| | | // 设置输入框的背景色、字体颜色、边框属性设置; |
| | | /deep/.el-input__inner { |
| | | background-color: transparent !important ; |
| | | color: #fff; |
| | | border: 1px solid; |
| | | } |
| | | /deep/ .el-select .el-input__inner { |
| | | border-color: #fff !important; |
| | | } |
| | | /deep/ .el-table { |
| | | background-color: transparent; |
| | | th, |
| | | td { |
| | | background-color: transparent; |
| | | } |
| | | .el-table__expanded-cell { |
| | | background-color: transparent !important; |
| | | } |
| | | |
| | | // 表头背景色 |
| | | th.el-table__cell { |
| | | background-color: #303030; |
| | | color: #fff; |
| | | } |
| | | tr > td { |
| | | background-color: #303030; |
| | | color: #fff; |
| | | } |
| | | |
| | | // hover效果 |
| | | tr:hover > td { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | } |
| | | |
| | | tbody tr:hover { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | // text-align: center; |
| | | } |
| | | |
| | | // 滚动条宽高 |
| | | .el-table__body-wrapper::-webkit-scrollbar { |
| | | width: 5px; |
| | | height: 5px; |
| | | } |
| | | |
| | | .el-table__body-wrapper::-webkit-scrollbar { |
| | | width: 5px; |
| | | /*滚动条宽度*/ |
| | | height: 5px; |
| | | /*滚动条高度*/ |
| | | } |
| | | /*定义滚动条轨道 内阴影+圆角*/ |
| | | .el-table__body-wrapper::-webkit-scrollbar-track { |
| | | box-shadow: 0px 1px 3px #216fe6 inset; |
| | | /*滚动条的背景区域的内阴影*/ |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | /*定义滑块 内阴影+圆角*/ |
| | | .el-table__body-wrapper::-webkit-scrollbar-thumb { |
| | | box-shadow: 0px 1px 3px #216fe6 inset; |
| | | border-radius: 6px; |
| | | background-color: #216fe6; |
| | | } |
| | | } |
| | | .pagination_box { |
| | | margin-top: 20px; |
| | | /deep/.el-input__inner { |
| | | background-color: transparent !important; |
| | | border: 1px solid; |
| | | color: white; |
| | | } |
| | | /deep/.el-pagination__total { |
| | | color: white; |
| | | } |
| | | /deep/.el-pagination__jump { |
| | | color: white; |
| | | } |
| | | /deep/.el-pager li.active { |
| | | color: #409eff; |
| | | } |
| | | /deep/.el-pager li { |
| | | color: white; |
| | | background: transparent; |
| | | } |
| | | /deep/.el-pager li { |
| | | color: white; |
| | | } |
| | | /deep/.btn-prev { |
| | | background: transparent; |
| | | } |
| | | /deep/.btn-next { |
| | | background: transparent; |
| | | } |
| | | /deep/.btn-next i { |
| | | color: white; |
| | | } |
| | | /deep/.btn-prev i { |
| | | color: white; |
| | | } |
| | | } |
| | | } |
| | | </style> |