blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-06 03:57:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(layout): 增加基本三分布局

Browse Source
This commit is contained in:
Coffee-crocodile 2022-08-10 12:51:58 +08:00
parent c0396516fc
commit b1bfe21ada
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/layouts/BasicLayout/index.vue
View File

@ -1,15 +1,24 @@
<template> <template>
<div text-3xl text-center>layout-page</div> <n-layout has-sider wh-full>
<div text-center> <n-layout-sider content-style="padding: 16px;" bordered>
<router-link to="/test1">Go to test1</router-link> <router-link to="/test1">Go to test1</router-link>
| <br />
<router-link to="/test2">Go to test2</router-link> <router-link to="/test2">Go to test2</router-link>
| <br />
<router-link to="/test3">Go to test3</router-link> <router-link to="/test3">Go to test3</router-link>
| <br />
<router-link to="/login" c-gray>Go to login</router-link> <router-link to="/login" c-gray>Go to login</router-link>
</div> </n-layout-sider>
<router-view></router-view> <n-layout h-full bg-hex-f3-f4-f6 :native-scrollbar="false">
<n-layout-header bordered text-2xl h-60px flex-y-center>layout-page</n-layout-header>
<div p-16px>
<n-layout-content>
<router-view></router-view>
</n-layout-content>
</div>
<n-layout-footer position="absolute" text-center op-80 bg-transparent>Ench admin</n-layout-footer>
</n-layout>
</n-layout>
</template> </template>
<script lang="ts"> <script lang="ts">

17
src/views/login/index.vue
View File

@ -6,13 +6,10 @@
<div flex-1 flex-center> <div flex-1 flex-center>
<div b-rd-2 bg-white w-md h-xl shadow-lg p-5xl> <div b-rd-2 bg-white w-md h-xl shadow-lg p-5xl>
<n-h1> <n-h1>
<!-- <Icon icon="icon-park:ad-product" :inline="true" /> --> <Icon icon="icon-park:ad-product" inline-block />
<!-- <icon-icon-park-ad-product /> -->
<!-- <span class="iconify" data-icon="icon-park:ad-product" data-inline="false" style="color: #888888"></span> -->
<n-icon size="40" :depth="2" :component="IconParkAdProduct" />
Ench Admin Ench Admin
</n-h1> </n-h1>
<n-p depth="3">高效、简约、有点好玩</n-p> <n-p depth="3">高效、简约、可能对你有点帮助</n-p>
<n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large"> <n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large">
<n-form-item path="account"> <n-form-item path="account">
<n-input v-model:value="formValue.account" placeholder="输入账号" round /> <n-input v-model:value="formValue.account" placeholder="输入账号" round />
@ -42,8 +39,8 @@
import { FormInst } from 'naive-ui'; import { FormInst } from 'naive-ui';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { ref } from 'vue'; import { ref } from 'vue';
// import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
import IconParkAdProduct from '~icons/icon-park/ad-product'; // import IconParkAdProduct from '~icons/icon-park/ad-product';
const router = useRouter(); const router = useRouter();
const swiperList = ref([ const swiperList = ref([
'https://images.unsplash.com/photo-1659991689791-db84493f8544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80', 'https://images.unsplash.com/photo-1659991689791-db84493f8544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80',
@ -53,9 +50,9 @@ const swiperList = ref([
]); ]);
const formValue = ref({ const formValue = ref({
account: '', account: 'admin',
pwd: '', pwd: '123456',
code: '', code: '1234',
}); });
const rules = { const rules = {
account: { account: {