feat: 整理样式代码：table表格，分页，查看按钮

张含笑

2025-04-12 2cd5839cc3957b9443453409fc84402e11bbdfdf

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue

@@ -6,7 +6,7 @@
            >件
         </p>
      </div>
      <div class="deviceevent-table">
      <div class="deviceevent-table ztzf-table">
         <el-table :data="list" :row-class-name="tableRowClassName"
         style="width: 100%;"
         :row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
@@ -19,8 +19,8 @@
         <el-table-column prop="id" label="事件编号" />
         <el-table-column prop="event_name" label="事件名称" />
         <el-table-column prop="event_name" label="所属单位 " />
         <el-table-column prop="media_type" label="事件内容" />
         <el-table-column prop="ai_types" label="关联算法" />
         <el-table-column show-overflow-tooltip prop="media_type" label="事件内容" />
         <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" />
         <el-table-column prop="status" label="事件状态">
            <template #default="scope">
               <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
@@ -33,7 +33,9 @@
         </el-table-column>

         <el-table-column label="操作" width="80">
            <div class="view">查看</div>
            <template #default="scope">
            <div class="ztzf-view" @click="distribution(scope.row)">查看</div>
            </template>
            <!-- <template #default="scope" >
               <el-button type="success" link @click="examine(scope.row)">审核</el-button>
               <el-button type="primary" link @click="distribution(scope.row)">查看</el-button>
@@ -42,6 +44,7 @@
      </el-table>
      </div>
      <el-pagination
      class="ztzf-pagination"
         background
         :page-sizes="[10, 20, 30, 50]"
         v-model:current-page="sizeParams.current"
@@ -83,6 +86,9 @@
      list.value = resData.records
      total.value = resData.total
   })
	
	
	
}
const pageChange = val => {
   sizeParams.value.current = val
@@ -100,50 +106,7 @@
   getList()
})
</script>
<style lang="scss">
.deviceevent-container {
   // 表格
   .el-table__inner-wrapper:before {
      height: 0 !important;
   }
   .el-table .warning-row {
      --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
   }
   .el-table .warning-row::after {
      position: absolute;
      content: '';
      left: 0;
      width: 100%;
      border-bottom: 1px solid;

      border-image: linear-gradient(
            90deg,
            rgba(25, 162, 255, 0) 10%,
            rgba(20, 125, 202, 1) 50%,
            rgba(25, 162, 255, 0) 90%
         )
         2 2 2 2;
   }
   .el-table .success-row {
      --el-table-tr-bg-color: #0b1d38;
   }
   .el-table .success-row::after {
      position: absolute;
      content: '';
      left: 0;
      width: 100%;
      border-bottom: 1px solid;

      border-image: linear-gradient(
            90deg,
            rgba(25, 162, 255, 0) 10%,
            rgba(20, 125, 202, 1) 79%,
            rgba(25, 162, 255, 0) 90%
         )
         2 2 2 2;
   }
}
</style>
<style scoped lang="scss">

// 标题
@@ -171,42 +134,7 @@
.deviceevent-table {
padding: 0 17px;
}
.el-table {
   color: #fff;
   --el-table-border-color: var(--el-border-color-lighter);
   --el-table-border: none !important;
   --el-table-text-color: #fff !important;
   --el-table-header-text-color: #fff !important;
   --el-table-row-hover-bg-color: none !important;
   --el-table-current-row-bg-color: none !important;
   --el-table-header-bg-color: none !important;
   --el-table-fixed-box-shadow: none !important;
   --el-table-bg-color: none !important;
   --el-table-tr-bg-color: none !important;
   --el-table-expanded-cell-bg-color: none !important;
   --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
   --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}
.el-table__header {
   width: 0 !important;
}
.el-table__body {
   border-collapse: collapse;
}
:deep(.el-table .el-table__cell) {
   padding: 0 !important;
   text-align: center !important;
}
:deep(.el-table .el-table__cell) {
   padding: 0 !important;
}
:deep(.el-table thead) {
   border-bottom: 1px solid;
   border: 1px solid;
   border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
   color: var(--el-table-header-text-color);
   background: #102441;
}

// 分页
:deep(.el-pagination) {
   display: flex;
@@ -217,51 +145,10 @@
   background: center center no-repeat none !important;
   color: #8eb8ea !important;
}
:deep(.el-pager li) {
   background: none !important;
   color: #8eb8ea !important;
}
:deep(.el-pager li.is-active) {
   background: #021022 !important;
   border-radius: 0px 0px 0px 0px;
   border: 1px solid #1479ef;
   color: #c7e1ff !important;
}
:deep(.el-pagination__goto) {
   color: #c7e1ff !important;
}
:deep(.el-pagination__classifier) {
   color: #c7e1ff !important;
}
:deep(.el-pager .el-input__wrapper) {
   background: #021022 !important;
   color: #c7e1ff !important;
   border: 1px solid #1479ef !important;
   z-index: 1;
}
:deep(.el-input__wrapper) {
   background: #021022 !important;
   box-shadow: none !important;
   border: 1px solid #178bff;
   color: #fff !important;
}
:deep(.el-input__inner) {
   color: #fff !important;
}

:deep(.el-tag){
background: none !important;
border:none !important
}
.view {
   width: 53px;
   height: 27px;
   background: #001f4e;
   border-radius: 0px 0px 0px 0px;
   border: 1px solid #51a8ff;
   font-size: 14px;
   color: #ffffff;
   text-align: center;
   line-height: 27px;
   cursor: pointer;
}

</style>