mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-05-21 08:19:16 +08:00
374 lines
10 KiB
Vue
374 lines
10 KiB
Vue
<template>
|
||
<n-grid
|
||
:x-gap="16"
|
||
:y-gap="16"
|
||
>
|
||
<n-gi :span="24">
|
||
<n-card>
|
||
<n-space justify="space-between">
|
||
<div class="flex-y-center">
|
||
<n-avatar
|
||
round
|
||
:size="64"
|
||
:src="userInfo?.avatar"
|
||
/>
|
||
<div class="pl-12px">
|
||
<h3 class="text-18px font-semibold">
|
||
您好，{{ userInfo?.nickName }},今天又是充满活力的一天！
|
||
</h3>
|
||
<p class="leading-30px text-[#999]">
|
||
今日多云转晴，20℃ - 25℃！
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<n-row class="w-450px">
|
||
<n-col :span="10">
|
||
<n-statistic
|
||
label="统计数据"
|
||
:value="99"
|
||
>
|
||
<template #prefix>
|
||
<i-icon-park-outline-chart-histogram />
|
||
</template>
|
||
<template #suffix>
|
||
/ 100
|
||
</template>
|
||
</n-statistic>
|
||
</n-col>
|
||
<n-col :span="10">
|
||
<n-statistic
|
||
label="活跃用户"
|
||
value="34,123"
|
||
>
|
||
<template #prefix>
|
||
<i-icon-park-outline-customer />
|
||
</template>
|
||
</n-statistic>
|
||
</n-col>
|
||
<n-col :span="4">
|
||
<n-statistic
|
||
label="待办"
|
||
:value="18"
|
||
>
|
||
<template #prefix>
|
||
<i-icon-park-outline-list-checkbox />
|
||
</template>
|
||
</n-statistic>
|
||
</n-col>
|
||
</n-row>
|
||
</n-space>
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="17">
|
||
<n-space
|
||
vertical
|
||
:size="16"
|
||
>
|
||
<n-card title="项目">
|
||
<template #header-extra>
|
||
<n-button
|
||
type="primary"
|
||
quaternary
|
||
>
|
||
更多
|
||
</n-button>
|
||
</template>
|
||
<n-grid
|
||
:x-gap="8"
|
||
:y-gap="8"
|
||
>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
<template #action>
|
||
#action
|
||
</template>
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
<template #action>
|
||
#action
|
||
</template>
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
<template #action>
|
||
#action
|
||
</template>
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
<template #action>
|
||
#action
|
||
</template>
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
<template #action>
|
||
#action
|
||
</template>
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
<template #action>
|
||
#action
|
||
</template>
|
||
</n-card>
|
||
</n-gi>
|
||
</n-grid>
|
||
</n-card>
|
||
<n-card title="动态">
|
||
<template #header-extra>
|
||
<n-button
|
||
type="primary"
|
||
quaternary
|
||
>
|
||
更多
|
||
</n-button>
|
||
</template>
|
||
<n-list hoverable>
|
||
<n-list-item>
|
||
<template #prefix>
|
||
<n-avatar
|
||
round
|
||
:size="48"
|
||
:src="userInfo?.avatar"
|
||
/>
|
||
</template>
|
||
<n-thing
|
||
title="客怎车"
|
||
title-extra="09/29/2022"
|
||
description="是“我的客厅怎么会有车”的缩写，指那些在车道间肆意穿梭，把马路当客厅的人，多有嘲讽意味，主要用于车祸视频中。"
|
||
/>
|
||
</n-list-item>
|
||
<n-list-item>
|
||
<template #prefix>
|
||
<n-avatar
|
||
round
|
||
:size="48"
|
||
:src="userInfo?.avatar"
|
||
/>
|
||
</template>
|
||
<n-thing
|
||
title="街健五大神技"
|
||
title-extra="09/29/2022"
|
||
description="街头健身五大神技，包括1.单手引体向上。2.慢速双力臂。3.人旗。4.前水平。5.俄式挺身。"
|
||
/>
|
||
</n-list-item>
|
||
<n-list-item>
|
||
<template #prefix>
|
||
<n-avatar
|
||
round
|
||
:size="48"
|
||
:src="userInfo?.avatar"
|
||
/>
|
||
</template>
|
||
<n-thing
|
||
title="天下岂有七十年太子乎"
|
||
title-extra="09/29/2022"
|
||
description="★含义：用来调侃由于英国女王超长的在位时间，导致其长子查理斯王子成为史上等待王位时间最久的王储 "
|
||
/>
|
||
</n-list-item>
|
||
<n-list-item>
|
||
<template #prefix>
|
||
<n-avatar
|
||
round
|
||
:size="48"
|
||
:src="userInfo?.avatar"
|
||
/>
|
||
</template>
|
||
<n-thing
|
||
title="你干嘛～哈哈～哎哟～"
|
||
title-extra="09/29/2022"
|
||
description="出自著名偶像练习生、练习时长两年半、背带异常梳中分的蔡徐坤在2018年的一档综艺节目偶像练习生中出现的一幕"
|
||
/>
|
||
</n-list-item>
|
||
</n-list>
|
||
</n-card>
|
||
</n-space>
|
||
</n-gi>
|
||
<n-gi :span="7">
|
||
<n-space
|
||
vertical
|
||
:size="16"
|
||
>
|
||
<n-card title="公告">
|
||
<template #header-extra>
|
||
<n-button
|
||
type="primary"
|
||
quaternary
|
||
>
|
||
更多
|
||
</n-button>
|
||
</template>
|
||
<n-list>
|
||
<n-list-item>
|
||
<template #prefix>
|
||
<n-tag
|
||
:bordered="false"
|
||
type="info"
|
||
size="small"
|
||
>
|
||
通知
|
||
</n-tag>
|
||
</template>
|
||
<n-button text>
|
||
漂洋过海上大专
|
||
</n-button>
|
||
</n-list-item>
|
||
<n-list-item>
|
||
<template #prefix>
|
||
<n-tag
|
||
:bordered="false"
|
||
type="success"
|
||
size="small"
|
||
>
|
||
消息
|
||
</n-tag>
|
||
</template>
|
||
<n-button text>
|
||
你在玩很新的东西
|
||
</n-button>
|
||
</n-list-item>
|
||
<n-list-item>
|
||
<template #prefix>
|
||
<n-tag
|
||
:bordered="false"
|
||
type="warning"
|
||
size="small"
|
||
>
|
||
活动
|
||
</n-tag>
|
||
</template>
|
||
<n-button text>
|
||
上岸第一剑，先斩意中人
|
||
</n-button>
|
||
</n-list-item>
|
||
</n-list>
|
||
</n-card>
|
||
<n-card title="快捷入口">
|
||
<n-grid
|
||
:x-gap="8"
|
||
:y-gap="8"
|
||
>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
</n-card>
|
||
</n-gi>
|
||
<n-gi :span="8">
|
||
<n-card
|
||
title="卡片"
|
||
hoverable
|
||
>
|
||
卡片内容
|
||
</n-card>
|
||
</n-gi>
|
||
</n-grid>
|
||
</n-card>
|
||
<n-card title="任务进度">
|
||
<n-timeline>
|
||
<n-timeline-item content="啊" />
|
||
<n-timeline-item
|
||
type="success"
|
||
title="成功"
|
||
content="哪里成功"
|
||
time="2018-04-03 20:46"
|
||
/>
|
||
<n-timeline-item
|
||
type="error"
|
||
content="哪里错误"
|
||
time="2018-04-03 20:46"
|
||
/>
|
||
<n-timeline-item
|
||
type="warning"
|
||
title="警告"
|
||
content="哪里警告"
|
||
time="2018-04-03 20:46"
|
||
/>
|
||
<n-timeline-item
|
||
type="info"
|
||
title="信息"
|
||
content="是的"
|
||
time="2018-04-03 20:46"
|
||
line-type="dashed"
|
||
/>
|
||
<n-timeline-item content="啊" />
|
||
</n-timeline>
|
||
</n-card>
|
||
</n-space>
|
||
</n-gi>
|
||
</n-grid>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useAuthStore } from '@/store';
|
||
|
||
const { userInfo } = useAuthStore();
|
||
</script>
|
||
|
||
<style scoped></style>
|