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>
<div text-3xl text-center>layout-page</div>
<div text-center>
<router-link to="/test1">Go to test1</router-link>
|
<router-link to="/test2">Go to test2</router-link>
|
<router-link to="/test3">Go to test3</router-link>
|
<router-link to="/login" c-gray>Go to login</router-link>
</div>
<router-view></router-view>
<n-layout has-sider wh-full>
<n-layout-sider content-style="padding: 16px;" bordered>
<router-link to="/test1">Go to test1</router-link>
<br />
<router-link to="/test2">Go to test2</router-link>
<br />
<router-link to="/test3">Go to test3</router-link>
<br />
<router-link to="/login" c-gray>Go to login</router-link>
</n-layout-sider>
<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>
<script lang="ts">

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

@ -6,13 +6,10 @@
<div flex-1 flex-center>
<div b-rd-2 bg-white w-md h-xl shadow-lg p-5xl>
<n-h1>
<!-- <Icon icon="icon-park:ad-product" :inline="true" /> -->
<!-- <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" />
<Icon icon="icon-park:ad-product" inline-block />
Ench Admin
</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-item path="account">
<n-input v-model:value="formValue.account" placeholder="输入账号" round />
@ -42,8 +39,8 @@
import { FormInst } from 'naive-ui';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
// import { Icon } from '@iconify/vue';
import IconParkAdProduct from '~icons/icon-park/ad-product';
import { Icon } from '@iconify/vue';
// import IconParkAdProduct from '~icons/icon-park/ad-product';
const router = useRouter();
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',
@ -53,9 +50,9 @@ const swiperList = ref([
]);
const formValue = ref({
account: '',
pwd: '',
code: '',
account: 'admin',
pwd: '123456',
code: '1234',
});
const rules = {
account: {