| | |
| | | <div class="top-title">安全事故列表</div> |
| | | <div class="table-select flex"> |
| | | <div class="select-item mr-2 ml-2 cursor-pointer flex items-center" |
| | | :class="{ 'item-active': selectItem.isActive }" v-for="selectItem in tableType" :key="selectItem.id">{{ |
| | | :class="{ 'item-active': selectItem.isActive }" v-for="selectItem in tableType" :key="selectItem.id" |
| | | @click="changeSelect(selectItem)">{{ |
| | | selectItem.type }}</div> |
| | | </div> |
| | | </div> |
| | |
| | | num3: 2 |
| | | }, |
| | | ]; |
| | | |
| | | const changeSelect = (selectItem) => { |
| | | tableType.value.forEach((item) => { |
| | | item.isActive = false; |
| | | }); |
| | | selectItem.isActive = true; |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .container { |
| | | height: 360px; |
| | | } |
| | | |
| | | .table-container { |
| | | position: relative; |
| | | } |
| | | |
| | | .table-content { |
| | | width: 100%; |
| | | position: absolute; |
| | | top: 0; |
| | | bottom: 0; |
| | | } |
| | | |
| | | .table-top { |
| | | height: 51px; |
| | | background-color: rgba(17, 34, 58, 0.6); |
| | |
| | | } |
| | | |
| | | .select-item { |
| | | padding: 0 14px; |
| | | padding: 0 16px; |
| | | height: 100%; |
| | | border-bottom: 2px solid RGBA(98, 137, 230, 0); |
| | | color: rgba(94, 134, 194, 1); |
| | |
| | | } |
| | | |
| | | .data-table { |
| | | font-size: 14px; |
| | | font-size: 16px; |
| | | border: 1px solid #29466A; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: transparent; |
| | | } |
| | | |
| | | .table-color1 {} |
| | | |
| | | |
| | | |
| | | ::v-deep .el-table__inner-wrapper::before { |
| | | background-color: transparent; |
| | |
| | | |
| | | .el-table__fixed-right { |
| | | height: 100% !important; |
| | | } |
| | | </style> |
| | | }</style> |