feat:完成了layout布局

This commit is contained in:
sundongyu 2024-04-22 16:34:56 +08:00
parent 2a8862dd00
commit c6a7e5260d
4 changed files with 11 additions and 14 deletions

View File

@ -1,5 +1,4 @@
<template>
<RouterView />
<div id="app">
<router-view />
</div>

View File

@ -1,5 +1,5 @@
<template>
<t-aside style="border-top: 1px solid var(--component-border); height: 100vh">
<div style="height: 100vh">
<t-menu
v-model:expanded="expanded"
theme="light"
@ -60,7 +60,7 @@
</t-button>
</template>
</t-menu>
</t-aside>
</div>
</template>
<script setup lang="ts">

View File

@ -1,6 +1,7 @@
<template>
<div>
<t-layout>
<t-header><HeaderIndex /></t-header>
<t-content><RouterView /></t-content>
<t-footer>Footer</t-footer>
</t-layout>
@ -9,6 +10,7 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
import HeaderIndex from '@/layout/components/HeaderIndex.vue'
</script>
<style lang="less" scoped></style>

View File

@ -1,25 +1,21 @@
<template>
<div class="box">
<t-layout>
<AsideIndex />
<t-layout>
<t-aside><AsideIndex /></t-aside>
<t-layout>
<t-header><HeaderIndex /></t-header>
<t-content><ContentIndex /></t-content>
<!-- <t-footer>Footer</t-footer> -->
</t-layout>
<t-content><ContentIndex /></t-content>
</t-layout>
</div>
</t-layout>
</template>
<script setup lang="ts">
import AsideIndex from '@/layout/components/AsideIndex.vue'
import HeaderIndex from './components/HeaderIndex.vue'
import ContentIndex from './components/ContentIndex.vue'
</script>
<style lang="less" scoped>
.box {
display: flex;
.t-layout {
flex-direction: row;
}
</style>