index.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <script>
  2. import LabelTable from "./label-table.vue";
  3. import LabelAddDialog from "./label-add-dialog.vue";
  4. import LabelEditDialog from "./label-edit-dialog.vue";
  5. import LabelBindDialog from "./label-bind-dialog.vue";
  6. import LabelAutoBindDialog from "./label-auto-bind-dialog.vue";
  7. import LabelHandBindDialog from "./label-hand-bind-dialog.vue";
  8. export default {
  9. name: "MaterialLabel",
  10. components: {
  11. LabelTable,
  12. LabelAddDialog,
  13. LabelEditDialog,
  14. LabelBindDialog,
  15. LabelAutoBindDialog,
  16. LabelHandBindDialog,
  17. },
  18. data() {
  19. return {};
  20. },
  21. methods: {},
  22. };
  23. </script>
  24. <template>
  25. <el-container class="container material-label">
  26. <label-table></label-table>
  27. <label-add-dialog></label-add-dialog>
  28. <label-edit-dialog></label-edit-dialog>
  29. <label-bind-dialog></label-bind-dialog>
  30. <label-auto-bind-dialog></label-auto-bind-dialog>
  31. <label-hand-bind-dialog></label-hand-bind-dialog>
  32. </el-container>
  33. </template>
  34. <style scoped>
  35. .container {
  36. --size: 12px;
  37. --margin: var(--size);
  38. --padding: var(--size);
  39. }
  40. .container {
  41. width: calc(100% - calc(var(--size) * 2));
  42. /* height: calc(100vh - calc(var(--size) * 2)); */
  43. margin: var(--margin);
  44. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  45. }
  46. .container .el-aside {
  47. margin: 0;
  48. padding: var(--padding);
  49. background-color: rgba(255, 255, 255, 1);
  50. border-right: 1px solid #dcdfe6;
  51. overflow: hidden;
  52. }
  53. </style>