index.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <div class="_layout">
  3. <!-- <Header />
  4. <div class="tagBoss">
  5. <TagList />
  6. </div>
  7. <div class="_content">
  8. <router-view />
  9. </div> -->
  10. <div class="layout-left">
  11. <Menus />
  12. </div>
  13. <div class="layout-right">
  14. <div class="layout-header">
  15. <Header />
  16. <TagList />
  17. </div>
  18. <div class="layout-content">
  19. <router-view />
  20. </div>
  21. </div>
  22. </div>
  23. </template>
  24. <script setup lang="ts">
  25. import Header from './header.vue'
  26. import TagList from './tagList.vue'
  27. import Menus from './menus.vue'
  28. defineOptions({ name: 'Layout' })
  29. /** 初始化 **/
  30. onMounted(() => {})
  31. </script>
  32. <style lang="scss" scoped>
  33. ._layout {
  34. width: 100%;
  35. height: 100%;
  36. box-sizing: border-box;
  37. display: flex;
  38. align-items: center;
  39. justify-content: space-between;
  40. .layout-left {
  41. width: 184px;
  42. height: 100%;
  43. background: linear-gradient(180deg, #336fb6 0%, #0c4689 100%);
  44. }
  45. .layout-right {
  46. width: calc(100% - 184px);
  47. height: 100%;
  48. background: #eaf1f9;
  49. padding: 15px 30px;
  50. .layout-header {
  51. width: 100%;
  52. height: 162px;
  53. }
  54. .layout-content {
  55. width: 100%;
  56. height: calc(100% - 162px);
  57. }
  58. }
  59. }
  60. div,
  61. h1,
  62. h2,
  63. h3,
  64. h4,
  65. h5,
  66. h6,
  67. p,
  68. ul,
  69. li {
  70. box-sizing: border-box;
  71. }
  72. </style>