123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <template>
- <div class="_layout">
- <!-- <Header />
- <div class="tagBoss">
- <TagList />
- </div>
- <div class="_content">
- <router-view />
- </div> -->
- <div class="layout-left">
- <Menus />
- </div>
- <div class="layout-right">
- <div class="layout-header">
- <Header />
- <TagList />
- </div>
- <div class="layout-content">
- <router-view />
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import Header from './header.vue'
- import TagList from './tagList.vue'
- import Menus from './menus.vue'
- defineOptions({ name: 'Layout' })
- /** 初始化 **/
- onMounted(() => {})
- </script>
- <style lang="scss" scoped>
- ._layout {
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .layout-left {
- width: 184px;
- height: 100%;
- background: linear-gradient(180deg, #336fb6 0%, #0c4689 100%);
- }
- .layout-right {
- width: calc(100% - 184px);
- height: 100%;
- background: #eaf1f9;
- padding: 15px 30px;
- .layout-header {
- width: 100%;
- height: 162px;
- }
- .layout-content {
- width: 100%;
- height: calc(100% - 162px);
- }
- }
- }
- div,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- p,
- ul,
- li {
- box-sizing: border-box;
- }
- </style>
|