✨ feat:完成了layout布局
This commit is contained in:
parent
2a8862dd00
commit
c6a7e5260d
|
@ -1,5 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<RouterView />
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<t-aside style="border-top: 1px solid var(--component-border); height: 100vh">
|
<div style="height: 100vh">
|
||||||
<t-menu
|
<t-menu
|
||||||
v-model:expanded="expanded"
|
v-model:expanded="expanded"
|
||||||
theme="light"
|
theme="light"
|
||||||
|
@ -60,7 +60,7 @@
|
||||||
</t-button>
|
</t-button>
|
||||||
</template>
|
</template>
|
||||||
</t-menu>
|
</t-menu>
|
||||||
</t-aside>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<t-layout>
|
<t-layout>
|
||||||
|
<t-header><HeaderIndex /></t-header>
|
||||||
<t-content><RouterView /></t-content>
|
<t-content><RouterView /></t-content>
|
||||||
<t-footer>Footer</t-footer>
|
<t-footer>Footer</t-footer>
|
||||||
</t-layout>
|
</t-layout>
|
||||||
|
@ -9,6 +10,7 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { RouterView } from 'vue-router'
|
import { RouterView } from 'vue-router'
|
||||||
|
import HeaderIndex from '@/layout/components/HeaderIndex.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
<style lang="less" scoped></style>
|
||||||
|
|
|
@ -1,25 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
|
||||||
<t-layout>
|
<t-layout>
|
||||||
<t-aside><AsideIndex /></t-aside>
|
<AsideIndex />
|
||||||
<t-layout>
|
<t-layout>
|
||||||
<t-header><HeaderIndex /></t-header>
|
|
||||||
<t-content><ContentIndex /></t-content>
|
<t-content><ContentIndex /></t-content>
|
||||||
<!-- <t-footer>Footer</t-footer> -->
|
|
||||||
</t-layout>
|
</t-layout>
|
||||||
</t-layout>
|
</t-layout>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import AsideIndex from '@/layout/components/AsideIndex.vue'
|
import AsideIndex from '@/layout/components/AsideIndex.vue'
|
||||||
import HeaderIndex from './components/HeaderIndex.vue'
|
|
||||||
import ContentIndex from './components/ContentIndex.vue'
|
import ContentIndex from './components/ContentIndex.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.box {
|
.t-layout {
|
||||||
display: flex;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user