调整布局。
This commit is contained in:
parent
2aa382b863
commit
e49e21f841
@ -47,6 +47,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@ -55,6 +56,7 @@
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
}
|
||||
*/
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
#app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
18
src/main.ts
18
src/main.ts
@ -11,10 +11,26 @@ import {
|
||||
create,
|
||||
// component
|
||||
NButton,
|
||||
NLayout,
|
||||
NLayoutHeader,
|
||||
NLayoutContent,
|
||||
NLayoutFooter,
|
||||
NLayoutSider,
|
||||
NMenu,
|
||||
NScrollbar,
|
||||
} from 'naive-ui'
|
||||
|
||||
const naive = create({
|
||||
components: [NButton],
|
||||
components: [
|
||||
NButton,
|
||||
NLayout,
|
||||
NLayoutHeader,
|
||||
NLayoutContent,
|
||||
NLayoutFooter,
|
||||
NLayoutSider,
|
||||
NMenu,
|
||||
NScrollbar,
|
||||
],
|
||||
})
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
@ -1,11 +1,169 @@
|
||||
<template>
|
||||
<div>MainView</div>
|
||||
<n-layout position="absolute" style="top: 0; right: 0; bottom: 0; left: 0">
|
||||
<n-layout-header position="absolute" style="z-index: 9999">
|
||||
<LogoComponent :collapsed="collapsed" style="width: 224px" />
|
||||
<div class="header">颐和园路</div>
|
||||
</n-layout-header>
|
||||
<n-layout has-sider position="absolute" style="top: 72px; right: 0; bottom: 0; left: 0">
|
||||
<n-layout-sider
|
||||
bordered
|
||||
:collapsed-width="64"
|
||||
:width="256"
|
||||
show-trigger="arrow-circle"
|
||||
collapse-mode="width"
|
||||
:collapsed="collapsed"
|
||||
@collapse="collapsed = true"
|
||||
@expand="collapsed = false"
|
||||
:native-scrollbar="false"
|
||||
inverted
|
||||
>
|
||||
<n-menu
|
||||
inverted
|
||||
v-model:value="activeKey"
|
||||
:collapsed="collapsed"
|
||||
:collapsed-width="64"
|
||||
:collapsed-icon-size="22"
|
||||
:options="menuOptions"
|
||||
/>
|
||||
</n-layout-sider>
|
||||
<n-layout-content content-style="padding: 24px;" :native-scrollbar="false">
|
||||
平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
|
||||
平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
|
||||
平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
|
||||
平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />平山道<br />
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { defineComponent, h, ref, type Component } from 'vue'
|
||||
|
||||
import { NIcon } from 'naive-ui'
|
||||
import type { MenuOption } from 'naive-ui'
|
||||
import {
|
||||
BookOpen20Filled as BookIcon,
|
||||
Person20Regular as PersonIcon,
|
||||
DrinkWine20Regular as WineIcon,
|
||||
} from '@vicons/fluent'
|
||||
|
||||
import LogoComponent from './components/LogoComponent.vue'
|
||||
|
||||
function renderIcon(icon: Component) {
|
||||
return () => h(NIcon, null, { default: () => h(icon) })
|
||||
}
|
||||
|
||||
const menuOptions: MenuOption[] = [
|
||||
{
|
||||
label: '且听风吟',
|
||||
key: 'hear-the-wind-sing',
|
||||
icon: renderIcon(BookIcon),
|
||||
},
|
||||
{
|
||||
label: '1973年的弹珠玩具',
|
||||
key: 'pinball-1973',
|
||||
icon: renderIcon(BookIcon),
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: '鼠',
|
||||
key: 'rat',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '寻羊冒险记',
|
||||
key: 'a-wild-sheep-chase',
|
||||
disabled: true,
|
||||
icon: renderIcon(BookIcon),
|
||||
},
|
||||
{
|
||||
label: '舞，舞，舞',
|
||||
key: 'dance-dance-dance',
|
||||
icon: renderIcon(BookIcon),
|
||||
children: [
|
||||
{
|
||||
type: 'group',
|
||||
label: '人物',
|
||||
key: 'people',
|
||||
children: [
|
||||
{
|
||||
label: '叙事者',
|
||||
key: 'narrator',
|
||||
icon: renderIcon(PersonIcon),
|
||||
},
|
||||
{
|
||||
label: '羊男',
|
||||
key: 'sheep-man',
|
||||
icon: renderIcon(PersonIcon),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '饮品',
|
||||
key: 'beverage',
|
||||
icon: renderIcon(WineIcon),
|
||||
children: [
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
{ label: '威士忌', key: 'whisky' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '食物',
|
||||
key: 'food',
|
||||
children: [
|
||||
{
|
||||
label: '三明治',
|
||||
key: 'sandwich',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '过去增多，未来减少',
|
||||
key: 'the-past-increases-the-future-recedes',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
LogoComponent,
|
||||
},
|
||||
setup() {
|
||||
const collapsed = ref(false)
|
||||
return {
|
||||
activeKey: ref<string | null>(null),
|
||||
collapsed,
|
||||
menuOptions,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.n-layout-header {
|
||||
display: flex;
|
||||
}
|
||||
.header {
|
||||
padding: 24px;
|
||||
border-bottom: solid 1px rgb(239, 239, 245);
|
||||
}
|
||||
|
||||
.n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical {
|
||||
--n-scrollbar-color: rgba(255, 255, 255, 0.25);
|
||||
--n-scrollbar-color-hover: rgba(255, 255, 255, 0.4);
|
||||
width: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
34
src/views/HomeView/components/LogoComponent.vue
Normal file
34
src/views/HomeView/components/LogoComponent.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="logo">
|
||||
<img alt="logo" src="@/assets/logo.svg" />
|
||||
<span class="title" v-if="!collapsed">Plusone Admin</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps({
|
||||
collapsed: Boolean,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
padding: 20px 16px;
|
||||
display: inline-flex;
|
||||
background-color: rgb(0, 20, 40);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.logo > img {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.logo > .title {
|
||||
font-size: 22px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user