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(project): 重构载入动画和系统结构样式

Browse Source
This commit is contained in:
chen.home 2023-01-11 00:21:50 +08:00
parent 264cc119cb
commit c5705f7032
18 changed files with 705 additions and 428 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.env
View File

@ -1,7 +1,10 @@
# 项目根目录 # 项目根目录
VITE_BASE_URL=/ VITE_BASE_URL=/
# 项目名称 # 项目名称
VITE_APP_TITLE = Ench Admin VITE_APP_NAME=EnchAdmin
VITE_APP_TITLE=Ench管理系统
VITE_APP_DESC=EnchAdmin是一个中后台管理系统模版
# 路由模式 # 路由模式
VITE_HASH_ROUTE = Y VITE_HASH_ROUTE = Y
# 权限路由模式: static ｜ dynamic # 权限路由模式: static ｜ dynamic

14
index.html
View File

@ -3,23 +3,11 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" /> <link rel="icon" type="image/svg+xml" href="/logo.svg" />
<link rel="stylesheet" href="/resource/loading.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title> <title><%= title %></title>
</head> </head>
<body> <body>
<div id="loading-container"> <div id="app"><div id="appLoading"></div></div>
<div class="app-loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<span class="loading-title"><%= title %>管理系统</span>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

70
package.json
View File

@ -31,54 +31,54 @@
"./src/**/*.{vue,js,jsx,ts,tsx,json}": "eslint --fix" "./src/**/*.{vue,js,jsx,ts,tsx,json}": "eslint --fix"
}, },
"dependencies": { "dependencies": {
"@vueuse/core": "^9.3.0", "@vueuse/core": "^9.10.0",
"@wangeditor/editor": "^5.1.21", "@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12", "@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^0.27.2", "axios": "^1.2.2",
"echarts": "^5.4.0", "echarts": "^5.4.1",
"md-editor-v3": "^2.3.0", "md-editor-v3": "^2.7.2",
"pinia": "^2.0.20", "pinia": "^2.0.28",
"pinia-plugin-persist": "^1.0.0", "pinia-plugin-persist": "^1.0.0",
"vue": "^3.2.37", "vue": "^3.2.45",
"vue-qr": "^4.0.9", "vue-qr": "^4.0.9",
"vue-router": "^4.1.4" "vue-router": "^4.1.6"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^17.0.3", "@commitlint/cli": "^17.4.1",
"@commitlint/config-conventional": "^17.0.3", "@commitlint/config-conventional": "^17.4.0",
"@iconify-json/icon-park-outline": "^1.1.5", "@iconify-json/icon-park-outline": "^1.1.9",
"@iconify/vue": "^3.2.1", "@iconify/vue": "^4.0.2",
"@types/mockjs": "^1.0.6", "@types/mockjs": "^1.0.7",
"@types/node": "^18.7.13", "@types/node": "^18.11.18",
"@typescript-eslint/eslint-plugin": "^5.35.1", "@typescript-eslint/eslint-plugin": "^5.48.1",
"@typescript-eslint/parser": "^5.35.1", "@typescript-eslint/parser": "^5.48.1",
"@unocss/preset-attributify": "^0.45.18", "@unocss/preset-attributify": "^0.48.3",
"@unocss/preset-uno": "^0.45.18", "@unocss/preset-uno": "^0.48.3",
"@unocss/vite": "^0.45.18", "@unocss/vite": "^0.48.3",
"@vitejs/plugin-vue": "^3.0.3", "@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "^2.0.0", "@vitejs/plugin-vue-jsx": "^3.0.0",
"@vue/eslint-config-typescript": "^11.0.0", "@vue/eslint-config-typescript": "^11.0.2",
"commitizen": "^4.2.5", "commitizen": "^4.2.6",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0", "cz-conventional-changelog": "^3.3.0",
"cz-customizable": "^6.9.1", "cz-customizable": "^7.0.0",
"eslint": "^8.22.0", "eslint": "^8.31.0",
"eslint-import-resolver-alias": "^1.1.2", "eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.26.0", "eslint-plugin-import": "^2.26.0",
"eslint-plugin-vue": "^9.4.0", "eslint-plugin-vue": "^9.8.0",
"husky": "^8.0.1", "husky": "^8.0.3",
"lint-staged": "^13.0.3", "lint-staged": "^13.1.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"naive-ui": "^2.32.2", "naive-ui": "^2.34.3",
"rollup-plugin-visualizer": "^5.8.0", "rollup-plugin-visualizer": "^5.9.0",
"typescript": "^4.7.4", "typescript": "^4.9.4",
"unplugin-icons": "^0.14.8", "unplugin-icons": "^0.15.1",
"unplugin-vue-components": "^0.22.4", "unplugin-vue-components": "^0.22.12",
"vite": "^3.0.9", "vite": "^4.0.4",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0", "vite-plugin-html": "^3.2.0",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svg-icons": "^2.0.1",
"vue-tsc": "^0.40.1" "vue-tsc": "^1.0.24"
} }
} }

74
public/resource/loading.css
View File

@ -1,74 +0,0 @@
body{
margin: 0;
}
#loading-container{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10vh;
position: fixed;
background-color: aliceblue;
z-index: 1;
}
.app-loading {
width: 88px;
height: 88px;
animation: app-loading-y0fdc1 2s infinite ease;
transform-style: preserve-3d;
}
.loading-title{
font-size: 1.5em;
}
.app-loading > div {
background-color: rgba(0, 77, 255, 0.2);
height: 100%;
position: absolute;
width: 100%;
border: 2px solid #004dff;
}
.app-loading div:nth-of-type(1) {
transform: translateZ(-44px) rotateY(180deg);
}
.app-loading div:nth-of-type(2) {
transform: rotateY(-270deg) translateX(50%);
transform-origin: top right;
}
.app-loading div:nth-of-type(3) {
transform: rotateY(270deg) translateX(-50%);
transform-origin: center left;
}
.app-loading div:nth-of-type(4) {
transform: rotateX(90deg) translateY(-50%);
transform-origin: top center;
}
.app-loading div:nth-of-type(5) {
transform: rotateX(-90deg) translateY(50%);
transform-origin: bottom center;
}
.app-loading div:nth-of-type(6) {
transform: translateZ(44px);
}
@keyframes app-loading-y0fdc1 {
0% {
transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
}
50% {
transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
}
100% {
transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
}
}

33
src/App.vue
View File

@ -1,15 +1,3 @@
<script setup lang="ts">
import { useAppStore } from './store';
import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
import json from './theme.json';
const locale = zhCN;
const dateLocale = dateZhCN;
const appStore = useAppStore();
const themeOverrides: GlobalThemeOverrides = json;
</script>
<template> <template>
<n-config-provider <n-config-provider
class="wh-full" class="wh-full"
@ -22,4 +10,25 @@ const themeOverrides: GlobalThemeOverrides = json;
</n-config-provider> </n-config-provider>
</template> </template>
<script setup lang="ts">
import { useAppStore } from './store';
import {
zhCN,
dateZhCN,
GlobalThemeOverrides,
useOsTheme,
darkTheme,
} from 'naive-ui';
import themeConfig from './theme.json';
const locale = zhCN;
const dateLocale = dateZhCN;
const appStore = useAppStore();
const osThemeRef = useOsTheme();
appStore.setDarkMode(osThemeRef.value === 'dark');
const themeOverrides: GlobalThemeOverrides = themeConfig;
</script>
<style scoped></style> <style scoped></style>

241
src/components/common/appLoading.vue Normal file
View File

@ -0,0 +1,241 @@
<template>
<div id="loading-container">
<div class="boxes">
<div class="box">
<div />
<div />
<div />
<div />
</div>
<div class="box">
<div />
<div />
<div />
<div />
</div>
<div class="box">
<div />
<div />
<div />
<div />
</div>
<div class="box">
<div />
<div />
<div />
<div />
</div>
</div>
<h2 class="text-28px font-500 text-#646464">
{{ title }}
</h2>
</div>
</template>
<script setup lang="ts">
import { useAppInfo } from '@/hooks';
const { title } = useAppInfo();
</script>
<style scoped>
#loading-container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10vh;
position: fixed;
background-color: aliceblue;
z-index: 1;
}
.boxes {
--size: 48px;
--duration: 800ms;
height: calc(var(--size) * 2);
width: calc(var(--size) * 3);
position: relative;
transform-style: preserve-3d;
transform-origin: 50% 50%;
margin-top: calc(var(--size) * 1.5 * -1);
transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}
.boxes .box {
width: var(--size);
height: var(--size);
top: 0;
left: 0;
position: absolute;
transform-style: preserve-3d;
}
.boxes .box:nth-child(1) {
transform: translate(100%, 0);
-webkit-animation: box1 var(--duration) linear infinite;
animation: box1 var(--duration) linear infinite;
}
.boxes .box:nth-child(2) {
transform: translate(0, 100%);
-webkit-animation: box2 var(--duration) linear infinite;
animation: box2 var(--duration) linear infinite;
}
.boxes .box:nth-child(3) {
transform: translate(100%, 100%);
-webkit-animation: box3 var(--duration) linear infinite;
animation: box3 var(--duration) linear infinite;
}
.boxes .box:nth-child(4) {
transform: translate(200%, 0);
-webkit-animation: box4 var(--duration) linear infinite;
animation: box4 var(--duration) linear infinite;
}
.boxes .box > div {
--background: #5c8df6;
--top: auto;
--right: auto;
--bottom: auto;
--left: auto;
--translateZ: calc(var(--size) / 2);
--rotateY: 0deg;
--rotateX: 0deg;
position: absolute;
width: 100%;
height: 100%;
background: var(--background);
top: var(--top);
right: var(--right);
bottom: var(--bottom);
left: var(--left);
transform: rotateY(var(--rotateY)) rotateX(var(--rotateX))
translateZ(var(--translateZ));
}
.boxes .box > div:nth-child(1) {
--top: 0;
--left: 0;
}
.boxes .box > div:nth-child(2) {
--background: #145af2;
--right: 0;
--rotateY: 90deg;
}
.boxes .box > div:nth-child(3) {
--background: #447cf5;
--rotateX: -90deg;
}
.boxes .box > div:nth-child(4) {
--background: #dbe3f4;
--top: 0;
--left: 0;
--translateZ: calc(var(--size) * 3 * -1);
}
@-webkit-keyframes box1 {
0%,
50% {
transform: translate(100%, 0);
}
100% {
transform: translate(200%, 0);
}
}
@keyframes box1 {
0%,
50% {
transform: translate(100%, 0);
}
100% {
transform: translate(200%, 0);
}
}
@-webkit-keyframes box2 {
0% {
transform: translate(0, 100%);
}
50% {
transform: translate(0, 0);
}
100% {
transform: translate(100%, 0);
}
}
@keyframes box2 {
0% {
transform: translate(0, 100%);
}
50% {
transform: translate(0, 0);
}
100% {
transform: translate(100%, 0);
}
}
@-webkit-keyframes box3 {
0%,
50% {
transform: translate(100%, 100%);
}
100% {
transform: translate(0, 100%);
}
}
@keyframes box3 {
0%,
50% {
transform: translate(100%, 100%);
}
100% {
transform: translate(0, 100%);
}
}
@-webkit-keyframes box4 {
0% {
transform: translate(200%, 0);
}
50% {
transform: translate(200%, 100%);
}
100% {
transform: translate(100%, 100%);
}
}
@keyframes box4 {
0% {
transform: translate(200%, 0);
}
50% {
transform: translate(200%, 100%);
}
100% {
transform: translate(100%, 100%);
}
}
</style>

1
src/hooks/index.ts
View File

@ -3,3 +3,4 @@ export * from './useBoolean';
export * from './useLoading'; export * from './useLoading';
export * from './useEcharts'; export * from './useEcharts';
export * from './useClipBoard'; export * from './useClipBoard';
export * from './useSystem';

23
src/hooks/useSystem.ts Normal file
View File

@ -0,0 +1,23 @@
interface AppInfo {
/** 项目名称 */
name: string;
/** 项目标题 */
title: string;
/** 项目描述 */
desc: string;
}
/** 项目信息 */
export function useAppInfo(): AppInfo {
const {
VITE_APP_NAME: name,
VITE_APP_TITLE: title,
VITE_APP_DESC: desc,
} = import.meta.env;
return {
name,
title,
desc,
};
}

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

@ -1,5 +1,8 @@
<template> <template>
<n-layout has-sider class="wh-full"> <n-layout
has-sider
class="wh-full"
>
<n-layout-sider <n-layout-sider
bordered bordered
:collapsed="appStore.collapsed" :collapsed="appStore.collapsed"
@ -11,7 +14,10 @@
<Logo v-if="appStore.showLogo" /> <Logo v-if="appStore.showLogo" />
<Menu /> <Menu />
</n-layout-sider> </n-layout-sider>
<n-layout class="h-full" embedded :native-scrollbar="false"> <n-layout
class="h-full"
embedded
>
<n-layout-header <n-layout-header
:position="appStore.fixedHeader ? 'absolute' : 'static'" :position="appStore.fixedHeader ? 'absolute' : 'static'"
:inverted="appStore.invertedHeader" :inverted="appStore.invertedHeader"
@ -43,26 +49,42 @@
> >
<TabBar class="h-45px" /> <TabBar class="h-45px" />
</n-layout-header> </n-layout-header>
<n-layout-content class="bg-transparent"> <n-layout-content
class="bg-transparent"
style="min-height: calc(100% - 105px); height: calc(100% - 105px)"
content-style="padding: 16px;min-height:100%;"
>
<div <div
class="p-16px" class="h-full"
:class="{ :class="{
'p-b-56px': appStore.fixedFooter, 'p-b-40px': appStore.fixedFooter,
'p-t-122px': appStore.fixedHeader && appStore.showTabs, 'p-t-122px': appStore.fixedHeader && appStore.showTabs,
'p-t-77px': appStore.fixedHeader && !appStore.showTabs, 'p-t-77px': appStore.fixedHeader && !appStore.showTabs,
}" }"
> >
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<transition name="fade-slide" mode="out-in"> <transition
name="fade-slide"
mode="out-in"
>
<keep-alive :include="routeStore.cacheRoutes"> <keep-alive :include="routeStore.cacheRoutes">
<component :is="Component" v-if="appStore.loadFlag" :key="route.fullPath" /> <component
:is="Component"
v-if="appStore.loadFlag"
:key="route.fullPath"
/>
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>
</div> </div>
</n-layout-content> </n-layout-content>
<BackTop /> <BackTop />
<n-layout-footer :position="appStore.fixedFooter ? 'absolute' : 'static'" bordered class="flex-center h-40px"> <n-layout-footer
:position="appStore.fixedFooter ? 'absolute' : 'static'"
bordered
class="flex-center h-40px"
style="margin-top: auto"
>
{{ appStore.footerText }} {{ appStore.footerText }}
</n-layout-footer> </n-layout-footer>
</n-layout> </n-layout>

19
src/layouts/components/common/HeaderButton.vue
View File

@ -1,12 +1,27 @@
<template> <template>
<n-el
tag="div"
class="el h-full px-3 cursor-pointer"
>
<n-space <n-space
align="center" align="center"
class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-3 cursor-pointer transition duration-300 dark:bg-hex-f90" class="h-full"
> >
<slot /> <slot />
</n-space> </n-space>
</n-el>
</template> </template>
<script setup lang="ts"></script> <script setup lang="ts"></script>
<style scoped></style> <style scoped>
.el {
color: var(--n-text-color);
background-color: var(--n-color);
transition: 0.3s var(--cubic-bezier-ease-in-out);
}
.el:hover {
background-color: var(--button-color-2-hover);
color: var(--n-text-color-hover);
}
</style>

17
src/layouts/components/sider/Logo.vue
View File

@ -1,13 +1,24 @@
<template> <template>
<div class="h-60px text-2xl flex-center overflow-hidden cursor-pointer" @click="toRoot"> <div
<SvgIcon name="logo" :size="28" /> class="h-60px text-2xl flex-center overflow-hidden cursor-pointer"
<span v-show="!appStore.collapsed" class="mx-4">{{ appStore.title }}</span> @click="toRoot"
>
<SvgIcon
name="logo"
:size="28"
/>
<span
v-show="!appStore.collapsed"
class="mx-4"
>{{ name }}</span>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useAppStore } from '@/store'; import { useAppStore } from '@/store';
import { useAppRouter } from '@/hooks'; import { useAppRouter } from '@/hooks';
import { useAppInfo } from '@/hooks';
const { name } = useAppInfo();
const { toRoot } = useAppRouter(); const { toRoot } = useAppRouter();
const appStore = useAppStore(); const appStore = useAppStore();
</script> </script>

1
src/layouts/components/sider/Menu.vue
View File

@ -2,7 +2,6 @@
<n-menu <n-menu
:collapsed="appStore.collapsed" :collapsed="appStore.collapsed"
:collapsed-width="64" :collapsed-width="64"
:collapsed-icon-size="24"
:indent="20" :indent="20"
accordion accordion
:options="routesStore.menus" :options="routesStore.menus"

9
src/main.ts
View File

@ -1,5 +1,6 @@
import { createApp } from 'vue'; import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import AppLoading from './components/common/appLoading.vue';
import { setupRouter } from './router'; import { setupRouter } from './router';
import { setupAssets } from './plugins'; import { setupAssets } from './plugins';
import { setupStore } from './store'; import { setupStore } from './store';
@ -7,6 +8,9 @@ import { setupStore } from './store';
async function setupApp() { async function setupApp() {
// 引入静态资源 // 引入静态资源
setupAssets(); setupAssets();
// 载入全局loading加载状态
const appLoading = createApp(AppLoading);
appLoading.mount('#appLoading');
// 创建vue实例 // 创建vue实例
const app = createApp(App); const app = createApp(App);
// 安装pinia全局状态库 // 安装pinia全局状态库
@ -15,10 +19,5 @@ async function setupApp() {
await setupRouter(app); await setupRouter(app);
// 挂载 // 挂载
await app.mount('#app'); await app.mount('#app');
closeAppLoading();
} }
setupApp(); setupApp();
function closeAppLoading() {
document.querySelector('#loading-container')!.remove();
}

5
src/router/guard/index.ts
View File

@ -2,7 +2,8 @@ import type { Router } from 'vue-router';
import { createPermissionGuard } from './permission'; import { createPermissionGuard } from './permission';
const appTitle = import.meta.env.VITE_APP_TITLE; import { useAppInfo } from '@/hooks';
const { title } = useAppInfo();
export function setupRouterGuard(router: Router) { export function setupRouterGuard(router: Router) {
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
@ -18,7 +19,7 @@ export function setupRouterGuard(router: Router) {
}); });
router.afterEach((to) => { router.afterEach((to) => {
// 修改网页标题 // 修改网页标题
document.title = `${to.meta.title} — ${appTitle}`; document.title = `${to.meta.title} - ${title}`;
// 结束 loadingBar // 结束 loadingBar
window.$loadingBar?.finish(); window.$loadingBar?.finish();
}); });

16
src/store/modules/app.ts
View File

@ -3,8 +3,7 @@ import { nextTick } from 'vue';
import { darkTheme, GlobalTheme } from 'naive-ui'; import { darkTheme, GlobalTheme } from 'naive-ui';
interface AppStatus { interface AppStatus {
title: string; readonly footerText: string;
footerText: string;
collapsed: boolean; collapsed: boolean;
fullScreen: boolean; fullScreen: boolean;
darkMode: boolean; darkMode: boolean;
@ -26,8 +25,7 @@ const docEle = document.documentElement;
export const useAppStore = defineStore('app-store', { export const useAppStore = defineStore('app-store', {
state: (): AppStatus => { state: (): AppStatus => {
return { return {
title: import.meta.env.VITE_APP_TITLE, footerText: 'Copyright ©2023 Ench Admin',
footerText: 'Copyright ©2022 Ench Admin',
collapsed: false, collapsed: false,
fullScreen: false, fullScreen: false,
darkMode: false, darkMode: false,
@ -68,6 +66,16 @@ export const useAppStore = defineStore('app-store', {
this.darkTheme = null; this.darkTheme = null;
} }
}, },
/* 设置主题深色 */
setDarkMode(mode: boolean) {
if (mode) {
this.darkMode = true;
this.darkTheme = darkTheme;
} else {
this.darkMode = false;
this.darkTheme = null;
}
},
/** /**
* @description: 页面内容重载 * @description: 页面内容重载
* @param {number} delay - 延迟毫秒数 * @param {number} delay - 延迟毫秒数

8
src/typings/env.d.ts vendored
View File

@ -21,7 +21,9 @@ interface ImportMetaEnv {
/** 项目基本地址 */ /** 项目基本地址 */
readonly VITE_BASE_URL: string; readonly VITE_BASE_URL: string;
/** 项目标题 */ /** 项目标题 */
readonly VITE_APP_NAME: string;
readonly VITE_APP_TITLE: string; readonly VITE_APP_TITLE: string;
readonly VITE_APP_DESC: string;
/** 开启请求代理 */ /** 开启请求代理 */
readonly VITE_HTTP_PROXY?: 'Y' | 'N'; readonly VITE_HTTP_PROXY?: 'Y' | 'N';
/** 是否开启打包依赖分析 */ /** 是否开启打包依赖分析 */
@ -29,7 +31,11 @@ interface ImportMetaEnv {
/** 是否开启打包压缩 */ /** 是否开启打包压缩 */
readonly VITE_COMPRESS_OPEN?: 'Y' | 'N'; readonly VITE_COMPRESS_OPEN?: 'Y' | 'N';
/** 压缩算法类型 */ /** 压缩算法类型 */
readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'; readonly VITE_COMPRESS_TYPE?:
| 'gzip'
| 'brotliCompress'
| 'deflate'
| 'deflateRaw';
/** hash路由模式 */ /** hash路由模式 */
readonly VITE_HASH_ROUTE?: 'Y' | 'N'; readonly VITE_HASH_ROUTE?: 'Y' | 'N';
/** 路由加载模式 */ /** 路由加载模式 */

41
src/views/list/cardList/index.vue
View File

@ -1,7 +1,15 @@
<template> <template>
<n-card> <n-card>
<n-radio-group v-model:value="currentRadio" name="radiobuttongroup1"> <n-radio-group
<n-radio-button v-for="item in radioDate" :key="item.value" :value="item.value" :label="item.label" /> v-model:value="currentRadio"
name="radiobuttongroup1"
>
<n-radio-button
v-for="item in radioDate"
:key="item.value"
:value="item.value"
:label="item.label"
/>
</n-radio-group> </n-radio-group>
<n-card <n-card
v-for="item in cardData" v-for="item in cardData"
@ -11,23 +19,40 @@
:title="item.title" :title="item.title"
content-style="padding: 0;" content-style="padding: 0;"
> >
<n-grid :x-gap="8" :y-gap="8"> <n-grid
<n-gi v-for="card in item.children" :key="card.id" :span="6"> :x-gap="8"
:y-gap="8"
:cols="4"
>
<n-gi
v-for="card in item.children"
:key="card.id"
>
<n-card hoverable> <n-card hoverable>
<n-thing content-indented :title="card.title" description="09/30/2022" :content="card.content"> <n-thing
content-indented
:title="card.title"
description="09/30/2022"
:content="card.content"
>
<template #avatar> <template #avatar>
<n-icon color="#de4307" size="24"> <n-icon
color="#de4307"
size="24"
>
<i-icon-park-outline-chart-histogram /> <i-icon-park-outline-chart-histogram />
</n-icon> </n-icon>
</template> </template>
<template #action> <template #action>
<n-space justify="space-between"> <n-space justify="space-between">
<span></span> <span />
<n-button>开通</n-button> <n-button>开通</n-button>
</n-space> </n-space>
</template> </template>
<template #header-extra> <template #header-extra>
<n-tag type="info">生效中</n-tag> <n-tag type="info">
生效中
</n-tag>
</template> </template>
</n-thing> </n-thing>
</n-card> </n-card>