<script>
import AddDialog from "./add-dialog.vue";
import EditDialog from "./edit-dialog.vue";
import AuthDialog from "./auth-dialog.vue";
import SearchTable from "./search-table.vue";
export default {
  name: "TableTemplate",
  components: {
    AddDialog,
    EditDialog,
    AuthDialog,
    SearchTable,
  },
  data() {
    return {};
  },
  methods: {},

  created() {},
};
</script>

<template>
  <el-container class="container table-template">
    <search-table></search-table>
    <add-dialog></add-dialog>
    <edit-dialog></edit-dialog>
    <auth-dialog></auth-dialog>
  </el-container>
</template>

<style scoped>
.container {
  --size: 12px;
  --margin: var(--size);
  --padding: var(--size);
}
.container {
  width: calc(100% - calc(var(--size) * 2));
  margin: var(--padding);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>
