powerForecast-ui/src/views/modules/station/list.vue

<template>
  <div
    class="main-content"
    :style="{ width: '100%', padding: '20px 30px', fontSize: '15px' }"
  >
    <!-- 列表页 -->
    <template>
      <el-form
        class="center-form-pv"
        :style="{
          border: '0px solid #fff',
          padding: '10px',
          margin: '0',
          flexWrap: 'wrap',
          background: '#ffffff',
          display: 'flex',
          width: '100%',
        }"
        :inline="true"
        :model="searchForm"
      >
        <el-row
          :style="{
            padding: '10px',
            alignItems: 'center',
            flexWrap: 'wrap',
            background: 'none',
            display: 'flex',
          }"
        >
          <div
            :style="{
              alignItems: 'center',
              margin: '0 10px 0 0',
              display: 'flex',
            }"
          >
            <label
              :style="{
                margin: '0 10px 0 0',
                whiteSpace: 'nowrap',
                color: '#666',
                display: 'inline-block',
                lineHeight: '40px',
                fontSize: 'inherit',
                fontWeight: '500',
                height: '40px',
              }"
              class="item-label"
              >变电站名称</label
            >
            <el-input
              v-model="searchForm.subName"
              placeholder="变电站名称"
              @keydown.enter.native="search()"
              clearable
            ></el-input>
          </div>
          <el-button class="search" type="success" @click="search()">
            <span
              class="icon iconfont icon-fangdajing07"
              :style="{
                margin: '0 2px',
                fontSize: '16px',
                color: '#fff',
                display: 'none',
                height: '40px',
              }"
            ></span>
            搜索
          </el-button>
        </el-row>

        <el-row
          class="actions"
          :style="{
            padding: '10px',
            margin: '0px 0',
            flexWrap: 'wrap',
            background: 'none',
            display: 'flex',
          }"
        >
          <el-button
            class="add"
            type="success"
            @click="addOrUpdateHandler(null, 'add')"
          >
            <span
              class="icon iconfont icon-xihuan"
              :style="{
                margin: '0 2px',
                fontSize: '14px',
                color: '#fff',
                display: 'none',
                height: '34px',
              }"
            ></span>
            添加
          </el-button>
          <el-button
            class="del"
            :disabled="dataListSelections.length ? false : true"
            type="danger"
            @click="deleteHandler()"
          >
            <span
              class="icon iconfont icon-xihuan"
              :style="{
                margin: '0 2px',
                fontSize: '14px',
                color: '#fff',
                display: 'none',
                height: '34px',
              }"
            ></span>
            批量删除
          </el-button>
        </el-row>
      </el-form>
      <div
        :style="{
          border: '0px solid #fff',
          width: '100%',
          padding: '0 20px 20px',
          fontSize: '14px',
          color: '#000',
          background: '#fff',
        }"
      >
        <el-table
          class="tables"
          :stripe="false"
          :style="{
            padding: '0px 0',
            borderColor: '#f0f0f0',
            borderRadius: '0',
            borderWidth: '0px 0 0 1px',
            background: '#fff',
            width: '100%',
            fontSize: 'inherit',
            borderStyle: 'solid',
          }"
          :border="true"
          :data="dataList"
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandler"
        >
          <el-table-column
            :resizable="true"
            type="selection"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            :resizable="true"
            :sortable="true"
            label="序号"
            type="index"
            width="50"
          />
          <el-table-column
            :resizable="true"
            :sortable="true"
            prop="subName"
            label="变电站名称"
          >
            <template slot-scope="scope">
              {{ scope.row.subName }}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="true"
            :sortable="true"
            prop="voltageLevel"
            label="电压等级"
          >
            <template slot-scope="scope">
              {{ scope.row.voltageLevel }}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="true"
            :sortable="true"
            prop="mainNum"
            label="主变台数"
          >
            <template slot-scope="scope">
              {{ scope.row.mainNum }}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="true"
            :sortable="true"
            prop="mainCapacity"
            label="主变容量(MVA)"
          >
            <template slot-scope="scope">
              {{ scope.row.mainCapacity }}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="true"
            :sortable="true"
            prop="alarmThreshold"
            label="负荷报警阀值"
          >
            <template slot-scope="scope">
              {{ scope.row.alarmThreshold }}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="true"
            :sortable="true"
            prop="cityName"
            label="归属市名称"
          >
            <template slot-scope="scope">
              {{ scope.row.cityName }}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="true"
            :sortable="true"
            prop="compName"
            label="归属旗县"
          >
            <template slot-scope="scope">
              {{ scope.row.compName }}
            </template>
          </el-table-column>
          <el-table-column
            :resizable="true"
            :sortable="true"
            prop="remark"
            label="备注"
          >
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column width="260" label="操作">
            <template slot-scope="scope">
              <el-button
                class="view"
                type="success"
                @click="addOrUpdateHandler(scope.row.id, 'view')"
              >
                <span
                  class="icon iconfont icon-xihuan"
                  :style="{
                    margin: '0 2px',
                    fontSize: '14px',
                    color: '#fff',
                    display: 'none',
                    height: '40px',
                  }"
                ></span>
                查看
              </el-button>
              <el-button
                class="edit"
                type="success"
                @click="addOrUpdateHandler(scope.row.id, 'edit')"
              >
                <span
                  class="icon iconfont icon-xihuan"
                  :style="{
                    margin: '0 2px',
                    fontSize: '14px',
                    color: '#fff',
                    display: 'none',
                    height: '40px',
                  }"
                ></span>
                修改
              </el-button>
              <el-button
                class="del"
                type="primary"
                @click="deleteHandler(scope.row.id)"
              >
                <span
                  class="icon iconfont icon-xihuan"
                  :style="{
                    margin: '0 2px',
                    fontSize: '14px',
                    color: '#fff',
                    display: 'none',
                    height: '40px',
                  }"
                ></span>
                删除
              </el-button>
              <el-button
                class="view"
                type="primary"
                @click="lineHandler(scope.row)"
              >
                <span
                  class="icon iconfont icon-xihuan"
                  :style="{
                    margin: '0 2px',
                    fontSize: '14px',
                    color: '#fff',
                    display: 'none',
                    height: '40px',
                  }"
                ></span>
                线路
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        background
        :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize"
        :layout="layouts.join()"
        :total="totalPage"
        prev-text="< "
        next-text="> "
        :hide-on-single-page="false"
        :style="{
          padding: '0 20px 20px',
          margin: '0px auto',
          whiteSpace: 'nowrap',
          color: '#333',
          textAlign: 'left',
          background: '#fff',
          width: '100%',
          fontSize: 'inherit',
          position: 'relative',
          fontWeight: '500',
        }"
      ></el-pagination>
    </template>

    <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
    <add-or-update :parent="this" ref="addOrUpdate"></add-or-update>
    <!-- 线路页面 -->
    <line-list :parent="this" ref="line"></line-list>
  </div>
</template>

<script>
import AddOrUpdate from "./components/add-or-update";
import LineList from "./components/line-list";
export default {
  data() {
    return {
      searchForm: {
        subName: "",
      },
      form: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      layouts: ["prev", "pager", "next", "sizes"],
    };
  },
  created() {
    this.getDataList();
  },
  mounted() {},
  computed: {},
  components: {
    AddOrUpdate,
    LineList,
  },
  methods: {
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    lineHandler(info) {
      this.$refs.line.openDrawer(info);
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let params = {
        page: this.pageIndex,
        limit: this.pageSize,
        sort: "id",
        order: "desc",
      };
      if (
        this.searchForm.subName != "" &&
        this.searchForm.subName != undefined
      ) {
        params["subName"] = "%" + this.searchForm.subName + "%";
      }
      this.$http({
        url: "/sub/page",
        method: "get",
        params: params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data.list;
          this.totalPage = data.data.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandler(val) {
      this.dataListSelections = val;
    },
    // 添加/修改
    addOrUpdateHandler(id, type) {
      this.$refs.addOrUpdate.openDialog(id, type);
    },
    // 删除
    async deleteHandler(id) {
      var ids = id
        ? [Number(id)]
        : this.dataListSelections.map((item) => {
            return Number(item.id);
          });
      await this.$confirm(
        `确定进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(async () => {
        await this.$http({
          url: "sub/delete",
          method: "post",
          data: ids,
        }).then(async ({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.search();
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.center-form-pv {
  .el-date-editor.el-input {
    width: auto;
  }
}

.el-input {
  width: auto;
}

// form
.center-form-pv .el-input {
  width: auto;
}
.center-form-pv .el-input ::v-deep .el-input__inner {
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 0 12px;
  color: #666;
  width: 150px;
  font-size: 15px;
  height: 40px;
}
.center-form-pv .el-select {
  width: auto;
}
.center-form-pv .el-select ::v-deep .el-input__inner {
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 0 10px;
  color: #666;
  width: 150px;
  font-size: 15px;
  height: 40px;
}
.center-form-pv .el-date-editor {
  width: auto;
}

.center-form-pv .el-date-editor ::v-deep .el-input__inner {
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 0 10px 0 30px;
  color: #666;
  width: 150px;
  font-size: 15px;
  height: 40px;
}

.center-form-pv .search {
  border: 0;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 20px;
  color: #fff;
  background: #0977fd;
  width: auto;
  font-size: 16px;
  min-width: 90px;
  height: 40px;
}

.center-form-pv .search:hover {
  opacity: 0.8;
}

.center-form-pv .actions .add {
  border: 1px solid #0977fd60;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 4px;
  color: #0977fd;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .actions .add:hover {
  opacity: 0.8;
}

.center-form-pv .actions .del {
  border: 1px solid #cc000060;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 4px;
  color: #c00;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .actions .del:hover {
  opacity: 0.8;
}

.center-form-pv .actions .statis {
  border: 1px solid #e0970460;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 20px;
  margin: 4px;
  color: #e09704;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .actions .statis:hover {
  opacity: 0.8;
}

.center-form-pv .actions .btn18 {
  border: 1px solid #ed9a0d60;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 4px;
  color: #ed9a0d;
  background: #fff;
  width: auto;
  font-size: inherit;
  height: 34px;
}

.center-form-pv .actions .btn18:hover {
  opacity: 0.8;
}

// table
.el-table ::v-deep .el-table__header-wrapper thead {
  color: #999;
  background: #fff;
  font-weight: 500;
  width: 100%;
}

.el-table ::v-deep .el-table__header-wrapper thead tr {
  background: #cae2ff;
}

.el-table ::v-deep .el-table__header-wrapper thead tr th {
  padding: 8px 0;
  background: none;
  border-color: #f6f6f6;
  border-width: 0 0px 0px 0;
  border-style: solid;
  text-align: left;
}

.el-table ::v-deep .el-table__header-wrapper thead tr th .cell {
  padding: 0 0 0 5px;
  word-wrap: normal;
  color: #0977fd;
  white-space: normal;
  font-weight: bold;
  display: flex;
  vertical-align: middle;
  font-size: 14px;
  line-height: 24px;
  text-overflow: ellipsis;
  word-break: break-all;
  width: 100%;
  align-items: center;
  position: relative;
  min-width: 110px;
}

.el-table ::v-deep .el-table__body-wrapper {
  position: relative;
}
.el-table ::v-deep .el-table__body-wrapper tbody {
  width: 100%;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr {
  background: #fff;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td {
  padding: 4px 0;
  color: #333;
  background: #fff;
  font-size: inherit;
  border-color: #0977fd30;
  border-width: 0 0px 1px 0;
  border-style: solid;
  text-align: left;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr:hover td {
  padding: 4px 0;
  color: #333;
  background: #f4f9ff;
  border-color: #0977fd30;
  border-width: 0 0px 1px 0;
  border-style: solid;
  text-align: left;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td {
  padding: 4px 0;
  color: #333;
  background: #fff;
  font-size: inherit;
  border-color: #0977fd30;
  border-width: 0 0px 1px 0;
  border-style: solid;
  text-align: left;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .cell {
  padding: 0 0 0 5px;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
  font-size: inherit;
  line-height: 24px;
  text-overflow: ellipsis;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .view {
  border: 1px solid #0977fd60;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 0 5px 5px 0;
  color: #0977fd;
  background: #fff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .view:hover {
  opacity: 0.8;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .add {
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .add:hover {
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit {
  border: 1px solid #21c79260;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 0 5px 5px 0;
  color: #21c792;
  background: #fff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .edit:hover {
  opacity: 0.8;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .del {
  border: 1px solid #cc000060;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 0 5px 5px 0;
  color: #c00;
  background: #fff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .del:hover {
  opacity: 0.8;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8 {
  border: 1px solid #ed9a0d60;
  cursor: pointer;
  border-radius: 0px;
  padding: 0 10px;
  margin: 0 5px 5px 0;
  color: #ed9a0d;
  background: #fff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.el-table ::v-deep .el-table__body-wrapper tbody tr td .btn8:hover {
  opacity: 0.8;
}

// pagination
.main-content .el-pagination ::v-deep .el-pagination__total {
  margin: 0 10px 0 0;
  color: #666;
  font-weight: 400;
  display: inline-block;
  vertical-align: top;
  font-size: inherit;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .btn-prev {
  border: none;
  border-radius: 100px;
  padding: 0;
  margin: 0 5px;
  color: #fff;
  background: #000;
  display: inline-block;
  vertical-align: top;
  width: 28px;
  font-size: 16px;
  line-height: auto;
  height: 28px;
}

.main-content .el-pagination ::v-deep .btn-next {
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: 0 5px;
  color: #fff;
  background: #000;
  display: inline-block;
  vertical-align: top;
  width: 28px;
  font-size: 16px;
  line-height: auto;
  height: 28px;
}

.main-content .el-pagination ::v-deep .btn-prev:disabled {
  border: none;
  cursor: not-allowed;
  padding: 0;
  margin: 0 5px;
  color: #666;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: auto;
  border-radius: 100px;
  background: #ccc;
  width: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .btn-next:disabled {
  border: none;
  cursor: not-allowed;
  padding: 0;
  margin: 0 5px;
  color: #666;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: auto;
  border-radius: 100px;
  background: #ccc;
  width: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pager {
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
}

.main-content .el-pagination ::v-deep .el-pager .number {
  cursor: pointer;
  border-radius: 100%;
  padding: 0 10px;
  margin: 0 2px;
  color: #fff;
  background: #b9b9b9;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pager .number:hover {
  cursor: pointer;
  border-radius: 100%;
  padding: 0 10px;
  margin: 0 2px;
  color: #fff;
  background: #0977fd;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pager .number.active {
  cursor: default;
  border-radius: 100%;
  padding: 0 10px;
  margin: 0 2px;
  color: #fff;
  background: #0977fd;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pagination__sizes {
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pagination__sizes .el-input {
  margin: 0 5px;
  width: 100px;
  position: relative;
}

.main-content
  .el-pagination
  ::v-deep
  .el-pagination__sizes
  .el-input
  .el-input__inner {
  border: 1px solid #dcdfe6;
  cursor: pointer;
  padding: 0 25px 0 8px;
  color: #606266;
  display: inline-block;
  font-size: 15px;
  line-height: 28px;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  width: 100%;
  text-align: center;
  height: 28px;
}

.main-content
  .el-pagination
  ::v-deep
  .el-pagination__sizes
  .el-input
  span.el-input__suffix {
  top: 0;
  position: absolute;
  right: 0;
  height: 100%;
}

.main-content
  .el-pagination
  ::v-deep
  .el-pagination__sizes
  .el-input
  .el-input__suffix
  .el-select__caret {
  cursor: pointer;
  color: #c0c4cc;
  width: 25px;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}

.main-content .el-pagination ::v-deep .el-pagination__jump {
  margin: 0 0 0 24px;
  color: #606266;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
  line-height: 28px;
  height: 28px;
}

.main-content .el-pagination ::v-deep .el-pagination__jump .el-input {
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 2px;
  display: inline-block;
  width: 50px;
  font-size: 15px;
  line-height: 18px;
  position: relative;
  text-align: center;
  height: 28px;
}

.main-content
  .el-pagination
  ::v-deep
  .el-pagination__jump
  .el-input
  .el-input__inner {
  border: 1px solid #dcdfe6;
  cursor: pointer;
  padding: 0 3px;
  color: #606266;
  display: inline-block;
  font-size: 15px;
  line-height: 28px;
  border-radius: 3px;
  outline: 0;
  background: #fff;
  width: 100%;
  text-align: center;
  height: 28px;
}

// list one
.one .list1-view {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: #157ed2;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.one .list1-view:hover {
  opacity: 0.8;
}

.one .list1-edit {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: #409eff;
  width: auto;
  font-size: 14px;
  height: 32px;
}

.one .list1-edit:hover {
  opacity: 0.8;
}

.one .list1-del {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 15px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: rgba(255, 0, 0, 1);
  width: auto;
  font-size: 14px;
  height: 32px;
}

.one .list1-del:hover {
  opacity: 0.8;
}

.one .list1-btn8 {
  border: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 24px;
  margin: 0 5px 5px 0;
  outline: none;
  color: #fff;
  background: rgba(255, 128, 0, 1);
  width: auto;
  font-size: 14px;
  height: 32px;
}

.one .list1-btn8:hover {
  opacity: 0.8;
}

.main-content .el-table .el-switch {
  display: inline-flex;
  vertical-align: middle;
  line-height: 30px;
  position: relative;
  align-items: center;
  height: 30px;
}
.main-content .el-table .el-switch ::v-deep .el-switch__label--left {
  cursor: pointer;
  margin: 0 10px 0 0;
  color: #333;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  transition: 0.2s;
  height: 30px;
}
.main-content .el-table .el-switch ::v-deep .el-switch__label--right {
  cursor: pointer;
  margin: 0 0 0 10px;
  color: #333;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  transition: 0.2s;
  height: 30px;
}
.main-content .el-table .el-switch ::v-deep .el-switch__core {
  border: 1px solid #75c0d6;
  cursor: pointer;
  border-radius: 15px;
  margin: 0;
  background: #75c0d6;
  display: inline-block;
  width: 42px;
  box-sizing: border-box;
  transition: border-color 0.3s, background-color 0.3s;
  height: 20px;
}
.main-content .el-table .el-switch ::v-deep .el-switch__core::after {
  border-radius: 100%;
  top: 1px;
  left: 1px;
  background: #fff;
  width: 16px;
  position: absolute;
  transition: all 0.3s;
  height: 16px;
}
.main-content .el-table .el-switch.is-checked ::v-deep .el-switch__core::after {
  margin: 0 0 0 -18px;
  left: 100%;
}

.main-content .el-table .el-rate ::v-deep .el-rate__item {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  position: relative;
}
.main-content .el-table .el-rate ::v-deep .el-rate__item .el-rate__icon {
  margin: 0 3px;
  display: inline-block;
  font-size: 18px;
  position: relative;
  transition: 0.3s;
}
</style>