odc.xiaohui
2023-02-09 085fa2fb257e9f11f8f6d34bf12e2dc281c36b4d
src/views/systemSetting/baseSetting/user/components/main/index.vue
@@ -3,11 +3,12 @@
    <div class="mainContent">
      <!-- 数据展示 -->
      <el-table
        border
        stripe
        ref="multipleTable"
        :header-cell-style="{
          background: '#06122c',
          'font-size': '12px',
          color: '#4b9bb7',
          background: '#F5F5F5',
          'font-size': '14px',
          'font-weight': '650',
          'line-height': '45px',
        }"
@@ -44,7 +45,7 @@
          </template>
        </el-table-column>
        <el-table-column prop="status" label="启用" min-width="5">
          <template slot-scope="scope" >
          <template slot-scope="scope">
            <!-- @change="handleChangeStatus(scope.row)" -->
            <el-switch
              class="switchStyle"
@@ -73,8 +74,9 @@
                >修改部门</span
              >
              <span class="line">|</span>
              <span @click="handleChangeStatus(scope.row)">{{scope.row.status === true ?'停用':'启用' }}</span>
              <span @click="handleChangeStatus(scope.row)">{{
                scope.row.status === true ? "停用" : "启用"
              }}</span>
            </div>
          </template>
        </el-table-column>
@@ -132,6 +134,7 @@
              @change="selectChange"
            >
              <el-option
                popper-class="funs-select"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
@@ -258,6 +261,7 @@
            url: "sccg/admin/deleteBatch?ids=" + idArr,
          }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除用户信息成功",
@@ -480,25 +484,23 @@
</script>
<style lang="scss" scoped>
main {
  background-color: #09152f;
  // background-color: #09152f;
  margin-top: 20px;
  padding-bottom: 50px;
  border: 1pox solid #fff;
  //border: 1px solid #fff;
  .mainTitle {
    line-height: 60px;
  }
  .tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    padding: 0;
    .funs {
      display: flex;
      .funs-sp {
        border: 1px solid #17324c;
        border: 1px solid #dcdfe6;
        background-color: #fff;
      }
      .funsItem {
        line-height: 28px;
@@ -507,45 +509,31 @@
        border-radius: 4px;
        font-size: 12px;
        margin-left: 10px;
        .el-checkbox {
          width: 80px;
          padding: 0 10px;
        }
        .el-select {
          width: 120px;
        }
        &::v-deep .el-input__inner {
          border: none;
          background-color: #09152f;
        }
        &:hover {
          border: 1px solid #4b9bb7;
        }
        &:hover .el-checkbox {
          color: #4b9bb7;
          .funs-select {
            background-color: transparent;
          }
        }
      }
    }
    .pagination {
      margin-top: 50px;
      display: flex;
      line-height: 50px;
      justify-content: center;
      .el-pagination {
        &::v-deep li,
        &::v-deep .btn-prev,
        &::v-deep .btn-next {
          background-color: #071f39;
          color: #4b9bb7;
          // background-color: #071f39;
          // color: #4b9bb7;
        }
        &::v-deep .active {
          background-color: #409eff;
          color: #fff;
@@ -553,49 +541,19 @@
      }
    }
  }
  .el-table {
    color: #4b9bb7;
    font-size: 10px;
    // color: #4b9bb7;
    // font-size: 10px;
    .operation {
      color: var(--operation-color);
      display: flex;
      font-size: 10px;
      .line {
        padding: 0 1px;
      }
      span:hover {
        cursor: pointer;
      }
    }
  }
  // &::v-deep .switchStyle .el-switch__label {
  //     position: absolute;
  //     display: none;
  //     color: #fff;
  // }
  // &::v-deep .el-switch__core {
  //     background-color: rgba(166, 166, 166, 1);
  // }
  // &::v-deep .switchStyle .el-switch__label--left {
  //     z-index: 9;
  //     left: 20px;
  // }
  // &::v-deep .switchStyle .el-switch__label--right {
  //     z-index: 9;
  //     left: 4px;
  // }
  // &::v-deep .switchStyle .el-switch__label.is-active {
  //     display: block;
  // }
  // &::v-deep .switchStyle.el-switch .el-switch__core,
  // &::v-deep .el-switch .el-switch__label {
  //     width: 56px !important;
  // }
}
</style>
</style>