blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-05 19:41:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): 增加列表展示页

Browse Source
This commit is contained in:
chen.home 2022-08-24 00:14:18 +08:00
parent c611fa0e35
commit a022685918
4 changed files with 117 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
mock/module/user.ts
View File

@ -107,6 +107,36 @@ const userRoutes = [
},
],
},
{
name: 'list',
path: '/list',
redirect: '/list/commonList',
meta: {
title: '列表页',
requiresAuth: true,
icon: 'icon-park-outline:list-two',
},
children: [
{
name: 'list_commonList',
path: '/list/commonList',
meta: {
title: '常用列表',
requiresAuth: true,
icon: 'icon-park-outline:list-view',
},
},
{
name: 'list_cardList',
path: '/list/cardList',
meta: {
title: '卡片列表',
requiresAuth: true,
icon: 'icon-park-outline:view-grid-list',
},
},
],
},
];
export default [

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

@ -59,4 +59,11 @@ import {
const appStore = useAppStore();
</script>
<style scoped></style>
<style scoped>
.n-layout-sider {
box-shadow: 2px 0 8px #1d23290d;
}
.n-layout-header {
box-shadow: 0 1px 2px #00152914;
}
</style>

7
src/views/list/cardList/index.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div>卡片列表页</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

72
src/views/list/commonList/index.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<n-space vertical size="large">
<n-card>
<n-grid :x-gap="12" :y-gap="8" :cols="23">
<n-gi :span="5">
<n-grid :cols="5">
<n-grid-item :span="1" class="flex-center">条件1</n-grid-item>
<n-grid-item :span="4"><n-input v-model:value="model.condition_1" placeholder="Input" /></n-grid-item>
</n-grid>
</n-gi>
<n-gi :span="5">
<n-grid :cols="5">
<n-grid-item :span="1" class="flex-center">条件2</n-grid-item>
<n-grid-item :span="4"><n-input v-model:value="model.condition_2" placeholder="Input" /></n-grid-item>
</n-grid>
</n-gi>
<n-gi :span="5">
<n-grid :cols="5">
<n-grid-item :span="1" class="flex-center">条件3</n-grid-item>
<n-grid-item :span="4"><n-input v-model:value="model.condition_3" placeholder="Input" /></n-grid-item>
</n-grid>
</n-gi>
<n-gi :span="5">
<n-grid :cols="5">
<n-grid-item :span="1" class="flex-center">条件4</n-grid-item>
<n-grid-item :span="4"><n-input v-model:value="model.condition_4" placeholder="Input" /></n-grid-item>
</n-grid>
</n-gi>
<n-gi :span="3">
<n-space justify="space-between">
<n-button type="primary">
<template #icon><i-icon-park-outline-search /></template>
搜索
</n-button>
<n-button strong secondary>
<template #icon><i-icon-park-outline-redo /></template>
重置
</n-button>
</n-space>
</n-gi>
</n-grid>
</n-card>
<n-card>
<div class="flex gap-4">
<n-button type="primary">
<template #icon><i-icon-park-outline-add-one /></template>
新建
</n-button>
<n-button strong secondary>
<template #icon><i-icon-park-outline-afferent /></template>
批量导入
</n-button>
<n-button strong secondary class="ml-a">
<template #icon><i-icon-park-outline-download /></template>
下载
</n-button>
</div>
</n-card>
</n-space>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const model = ref({
condition_1: '',
condition_2: '',
condition_3: '',
condition_4: '',
});
</script>
<style scoped></style>