performance-form-ui-pc/src/App.vue

<template>
  <div id="app" v-cloak>
    <div class="commission pagePadding">
      <el-tabs type="border-card" v-model="tabPosition" style="height: 100%">
        <el-tab-pane label="业绩达成报表(销售)" name="1">
          <achievement-table />
        </el-tab-pane>
        <el-tab-pane label="确认单绩效报表" name="2">
          <merits-table />
        </el-tab-pane>
        <el-tab-pane label="确认单绩效退款报表" name="3">
          <merits-return-table />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import achievementTable from "@/views/achievementTable";
import meritsTable from "@/views/meritsTable";
import meritsReturnTable from "@/views/meritsReturnTable";
export default {
  name: "commission",
  components: {
    achievementTable,
    meritsTable,
    meritsReturnTable
  },
  data() {
    return {
      tabPosition: "1",
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss">
@mixin layout-dev {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  @include layout-dev;

  body {
    @include layout-dev;
    text-align: left;
  }
  .clear::after,
  .clear::before {
    content: "";
    display: block;
    clear: both;
  }

  #app {
    @include layout-dev;
    padding: 0;
    min-width: 1200px !important;
    .el-table__fixed-right {
      height: 100% !important;
    }
    .el-table__fixed-left {
      height: 100% !important;
    }
    .commission {
      padding: 16px 16px !important;
      box-sizing: border-box !important;
      height: 100%;
    }
    .fr {
      float: right !important;
    }
    .ml10 {
      margin-left: 10px !important;
    }
  }
}
</style>