运维管理样式修改

584911253@qq.com

2023-02-25 9660afd3e2ed1b9bd87c9316f8b24c63ad4c9a4e

 src/views/maintenance/tokentool.vue

@@ -17,17 +17,19 @@
            >
              <el-input
                style="width: 200px"
                size="small"
                v-model="ruleForm.name"
                :placeholder="$t('common.pleaseInput')"
                :placeholder="$t('operatManage.tokentoolObj.tokenHolder')"
              />
            </el-form-item>

            <el-form-item :label="$t('operatManage.tokentoolObj.tokenStatus')">
              <el-select
                style="width: 200px"
                size="small"
                :popper-append-to-body="false"
                v-model="ruleForm.value"
                :placeholder="$t('common.choose')"
                :placeholder="$t('operatManage.tokentoolObj.tokenStatusHolder')"
              >
                <el-option
                  value="0"
@@ -78,39 +80,40 @@
        </div>
      </el-form>
    </div>
    <div class="dividing-line"></div>
    <div class="table_box" :style="styleVar">
      <el-table
        ref="filterTable"
        :data="tableData"
        style="width: 100%"
        height="calc(100% - 57px)"
        height="calc(100% - 45px)"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          width="70"
         

          type="index"
          :label="$t('operatManage.tokentoolObj.index')"
        />
        <el-table-column
          prop="token"
       

          :label="$t('operatManage.tokentoolObj.token')"
        />
        <el-table-column
          prop="duration"
    

          :label="$t('operatManage.tokentoolObj.duration')"
        />
        <el-table-column
          prop="expire"
         

          :label="$t('operatManage.tokentoolObj.expire')"
          :formatter="formatTime"
        />
        <el-table-column
          prop="type"
        

          :label="$t('operatManage.tokentoolObj.type')"
        >
          <template slot-scope="scope">
@@ -120,28 +123,28 @@
        </el-table-column>
        <el-table-column
          prop="ip"
         

          :label="$t('operatManage.tokentoolObj.ip')"
        />
        <el-table-column
          prop="createUser"
        

          :label="$t('operatManage.tokentoolObj.createUser')"
        />
        <el-table-column
          prop="createTime"
      

          :label="$t('operatManage.tokentoolObj.createTime')"
          :formatter="formatTime"
        />
        <el-table-column
          prop="updateUser"
         

          :label="$t('operatManage.tokentoolObj.updateUser')"
        />
        <el-table-column
          prop="updateTime"
       

          :label="$t('operatManage.tokentoolObj.updateTime')"
          :formatter="formatTime"
        />
@@ -149,7 +152,7 @@
          fixed="right"
          :label="$t('operatManage.tokentoolObj.operation')"
          width="220"
        

        >
          <template slot-scope="scope">
            <el-button type="danger" size="small" plain>{{
@@ -169,7 +172,7 @@
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 25px">
      <div style="margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -399,7 +402,7 @@
      this.$nextTick(() => {
        const rect = this.$refs.container.getBoundingClientRect();
        this.tableHeight = `${rect.height + 97}px`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 97}px)`;
        this.styleVar["height"] = `calc(100% - ${rect.height + 30}px)`;
      });
    },
    showPermsMenu(res) {
@@ -645,26 +648,26 @@
  },
};
</script>
 

<style lang="less" scoped>
//@import url(); 引入公共css类

.tokentool_box {
  height: 98%;
  width: 98%;
  padding: 1%;
  padding: 0.5% 1%;

  .el-input {
    width: 300px;
  }

  .inquire {
    padding: 8px;
    margin-top: 20px;
    padding: 0 8px;
    //margin-top: 20px;

    border-radius: 5px;

    margin-bottom: 20px;
    //margin-bottom: 20px;
    .el-form-item {
      margin: 5px;
    }