优化控制台
This commit is contained in:
zjl
parent
9fa59dc966
commit
13fe4e7c25
@ -127,6 +127,31 @@
|
|||||||
</n-grid-item>
|
</n-grid-item>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
|
|
||||||
|
<!--导航卡片-->
|
||||||
|
<div class="mt-3">
|
||||||
|
<n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="12" :y-gap="8">
|
||||||
|
<n-grid-item v-for="(item, index) in iconList" :key="index">
|
||||||
|
<n-card content-style="padding-top: 0;" size="small" :bordered="false">
|
||||||
|
<template #footer>
|
||||||
|
<n-skeleton v-if="loading" size="medium" />
|
||||||
|
<div class="cursor-pointer" v-else>
|
||||||
|
<p class="flex justify-center">
|
||||||
|
<span>
|
||||||
|
<n-icon :size="item.size" class="flex-1" :color="item.color">
|
||||||
|
<component :is="item.icon" v-on="item.eventObject || {}" />
|
||||||
|
</n-icon>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p class="flex justify-center"
|
||||||
|
><span>{{ item.title }}</span></p
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-card>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
</div>
|
||||||
|
|
||||||
<n-grid cols="1 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="8" class="mt-3">
|
<n-grid cols="1 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="8" class="mt-3">
|
||||||
<n-grid-item>
|
<n-grid-item>
|
||||||
<n-card
|
<n-card
|
||||||
@ -201,6 +226,95 @@
|
|||||||
import VisitSource from './components/VisitSource.vue';
|
import VisitSource from './components/VisitSource.vue';
|
||||||
import Percent from './components/Percent.vue';
|
import Percent from './components/Percent.vue';
|
||||||
import AreaRanking from './components/AreaRanking.vue';
|
import AreaRanking from './components/AreaRanking.vue';
|
||||||
|
import {
|
||||||
|
CaretUpOutlined,
|
||||||
|
CaretDownOutlined,
|
||||||
|
UsergroupAddOutlined,
|
||||||
|
BarChartOutlined,
|
||||||
|
ShoppingCartOutlined,
|
||||||
|
AccountBookOutlined,
|
||||||
|
CreditCardOutlined,
|
||||||
|
MailOutlined,
|
||||||
|
TagsOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
} from '@vicons/antd';
|
||||||
|
|
||||||
|
// 图标列表
|
||||||
|
const iconList = [
|
||||||
|
{
|
||||||
|
icon: UsergroupAddOutlined,
|
||||||
|
size: '32',
|
||||||
|
title: '用户',
|
||||||
|
color: '#69c0ff',
|
||||||
|
eventObject: {
|
||||||
|
click: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: BarChartOutlined,
|
||||||
|
size: '32',
|
||||||
|
title: '分析',
|
||||||
|
color: '#69c0ff',
|
||||||
|
eventObject: {
|
||||||
|
click: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: ShoppingCartOutlined,
|
||||||
|
size: '32',
|
||||||
|
title: '商品',
|
||||||
|
color: '#ff9c6e',
|
||||||
|
eventObject: {
|
||||||
|
click: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: AccountBookOutlined,
|
||||||
|
size: '32',
|
||||||
|
title: '订单',
|
||||||
|
color: '#b37feb',
|
||||||
|
eventObject: {
|
||||||
|
click: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: CreditCardOutlined,
|
||||||
|
size: '32',
|
||||||
|
title: '票据',
|
||||||
|
color: '#ffd666',
|
||||||
|
eventObject: {
|
||||||
|
click: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: MailOutlined,
|
||||||
|
size: '32',
|
||||||
|
title: '消息',
|
||||||
|
color: '#5cdbd3',
|
||||||
|
eventObject: {
|
||||||
|
click: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: TagsOutlined,
|
||||||
|
size: '32',
|
||||||
|
title: '标签',
|
||||||
|
color: '#ff85c0',
|
||||||
|
eventObject: {
|
||||||
|
click: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: SettingOutlined,
|
||||||
|
size: '32',
|
||||||
|
title: '配置',
|
||||||
|
color: '#ffc069',
|
||||||
|
eventObject: {
|
||||||
|
click: () => {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const notification = useNotification();
|
const notification = useNotification();
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (!localStorage.getItem('adClosed')) {
|
if (!localStorage.getItem('adClosed')) {
|
||||||
|
|||||||
@ -1,348 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="console">
|
|
||||||
<!--数据卡片-->
|
|
||||||
<n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
|
|
||||||
<n-grid-item>
|
|
||||||
<n-card
|
|
||||||
title="访问量"
|
|
||||||
:segmented="{ content: true, footer: true }"
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
>
|
|
||||||
<template #header-extra>
|
|
||||||
<n-tag type="success">日</n-tag>
|
|
||||||
</template>
|
|
||||||
<div class="flex justify-between px-1 py-1">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<CountTo v-else :startVal="1" :endVal="visits?.dayVisits" class="text-3xl" />
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between px-1 py-1">
|
|
||||||
<div class="text-sn">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<template v-else>
|
|
||||||
日同比
|
|
||||||
<CountTo :startVal="1" suffix="%" :endVal="visits?.rise" />
|
|
||||||
<n-icon size="12" color="#00ff6f">
|
|
||||||
<CaretUpOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="text-sn">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<template v-else>
|
|
||||||
周同比
|
|
||||||
<CountTo :startVal="1" suffix="%" :endVal="visits?.decline" />
|
|
||||||
<n-icon size="12" color="#ffde66">
|
|
||||||
<CaretDownOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<n-skeleton v-if="loading" text :repeat="2" />
|
|
||||||
<template v-else>
|
|
||||||
<div class="text-sn"> 总访问量：</div>
|
|
||||||
<div class="text-sn">
|
|
||||||
<CountTo :startVal="1" :endVal="visits?.amount" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</n-card>
|
|
||||||
</n-grid-item>
|
|
||||||
<n-grid-item>
|
|
||||||
<n-card
|
|
||||||
title="销售额"
|
|
||||||
:segmented="{ content: true, footer: true }"
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
>
|
|
||||||
<template #header-extra>
|
|
||||||
<n-tag type="info">周</n-tag>
|
|
||||||
</template>
|
|
||||||
<div class="flex justify-between px-1 py-1">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<CountTo
|
|
||||||
v-else
|
|
||||||
prefix="￥"
|
|
||||||
:startVal="1"
|
|
||||||
:endVal="saleroom?.weekSaleroom"
|
|
||||||
class="text-3xl"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between px-2 py-2">
|
|
||||||
<div class="flex-1 text-sn">
|
|
||||||
<n-progress
|
|
||||||
type="line"
|
|
||||||
:percentage="saleroom?.degree"
|
|
||||||
:indicator-placement="'inside'"
|
|
||||||
processing
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<template v-else>
|
|
||||||
<div class="text-sn"> 总销售额：</div>
|
|
||||||
<div class="text-sn">
|
|
||||||
<CountTo prefix="￥" :startVal="1" :endVal="saleroom?.amount" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</n-card>
|
|
||||||
</n-grid-item>
|
|
||||||
<n-grid-item>
|
|
||||||
<n-card
|
|
||||||
title="订单量"
|
|
||||||
:segmented="{ content: true, footer: true }"
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
>
|
|
||||||
<template #header-extra>
|
|
||||||
<n-tag type="warning">周</n-tag>
|
|
||||||
</template>
|
|
||||||
<div class="flex justify-between px-1 py-1">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<CountTo v-else :startVal="1" :endVal="orderLarge?.weekLarge" class="text-3xl" />
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between px-1 py-1">
|
|
||||||
<div class="text-sn">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<template v-else>
|
|
||||||
日同比
|
|
||||||
<CountTo :startVal="1" suffix="%" :endVal="orderLarge?.rise" />
|
|
||||||
<n-icon size="12" color="#00ff6f">
|
|
||||||
<CaretUpOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="text-sn">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<template v-else>
|
|
||||||
周同比
|
|
||||||
<CountTo :startVal="1" suffix="%" :endVal="orderLarge?.rise" />
|
|
||||||
<n-icon size="12" color="#ffde66">
|
|
||||||
<CaretDownOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<template v-else>
|
|
||||||
<div class="text-sn"> 转化率：</div>
|
|
||||||
<div class="text-sn">
|
|
||||||
<CountTo :startVal="1" suffix="%" :endVal="orderLarge?.amount" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</n-card>
|
|
||||||
</n-grid-item>
|
|
||||||
<n-grid-item>
|
|
||||||
<n-card
|
|
||||||
title="成交额"
|
|
||||||
:segmented="{ content: true, footer: true }"
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
>
|
|
||||||
<template #header-extra>
|
|
||||||
<n-tag type="error">月</n-tag>
|
|
||||||
</template>
|
|
||||||
<div class="flex justify-between px-1 py-1">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<CountTo
|
|
||||||
v-else
|
|
||||||
prefix="￥"
|
|
||||||
:startVal="1"
|
|
||||||
:endVal="volume?.weekLarge"
|
|
||||||
class="text-3xl"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between px-1 py-1">
|
|
||||||
<div class="text-sn">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<template v-else>
|
|
||||||
月同比
|
|
||||||
<CountTo :startVal="1" suffix="%" :endVal="volume?.rise" />
|
|
||||||
<n-icon size="12" color="#00ff6f">
|
|
||||||
<CaretUpOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="text-sn">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<template v-else>
|
|
||||||
月同比
|
|
||||||
<CountTo :startVal="1" suffix="%" :endVal="volume?.decline" />
|
|
||||||
<n-icon size="12" color="#ffde66">
|
|
||||||
<CaretDownOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<n-skeleton v-if="loading" :width="100" size="medium" />
|
|
||||||
<template v-else>
|
|
||||||
<div class="text-sn"> 总成交额：</div>
|
|
||||||
<div class="text-sn">
|
|
||||||
<CountTo prefix="￥" :startVal="1" :endVal="volume?.amount" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</n-card>
|
|
||||||
</n-grid-item>
|
|
||||||
</n-grid>
|
|
||||||
|
|
||||||
<!--导航卡片-->
|
|
||||||
<div class="mt-3">
|
|
||||||
<n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="12" :y-gap="8">
|
|
||||||
<n-grid-item v-for="(item, index) in iconList" :key="index">
|
|
||||||
<n-card content-style="padding-top: 0;" size="small" :bordered="false">
|
|
||||||
<template #footer>
|
|
||||||
<n-skeleton v-if="loading" size="medium" />
|
|
||||||
<div class="cursor-pointer" v-else>
|
|
||||||
<p class="flex justify-center">
|
|
||||||
<span>
|
|
||||||
<n-icon :size="item.size" class="flex-1" :color="item.color">
|
|
||||||
<component :is="item.icon" v-on="item.eventObject || {}" />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<p class="flex justify-center"
|
|
||||||
><span>{{ item.title }}</span></p
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</n-card>
|
|
||||||
</n-grid-item>
|
|
||||||
</n-grid>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--访问量 | 流量趋势-->
|
|
||||||
<VisiTab />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, onMounted } from 'vue';
|
|
||||||
import { getConsoleInfo } from '@/api/dashboard/console';
|
|
||||||
import VisiTab from '../console/components/VisiTab.vue';
|
|
||||||
import { CountTo } from '@/components/CountTo/index';
|
|
||||||
import {
|
|
||||||
CaretUpOutlined,
|
|
||||||
CaretDownOutlined,
|
|
||||||
UsergroupAddOutlined,
|
|
||||||
BarChartOutlined,
|
|
||||||
ShoppingCartOutlined,
|
|
||||||
AccountBookOutlined,
|
|
||||||
CreditCardOutlined,
|
|
||||||
MailOutlined,
|
|
||||||
TagsOutlined,
|
|
||||||
SettingOutlined,
|
|
||||||
} from '@vicons/antd';
|
|
||||||
import type {
|
|
||||||
TypeConsole,
|
|
||||||
TypeOrderLarge,
|
|
||||||
TypeSaleroom,
|
|
||||||
TypeVisits,
|
|
||||||
} from '@/api/dashboard/console';
|
|
||||||
|
|
||||||
const loading = ref(true);
|
|
||||||
const visits = ref<TypeVisits>();
|
|
||||||
const saleroom = ref<TypeSaleroom>();
|
|
||||||
const orderLarge = ref<TypeOrderLarge>();
|
|
||||||
const volume = ref<TypeOrderLarge>();
|
|
||||||
|
|
||||||
// 图标列表
|
|
||||||
const iconList = [
|
|
||||||
{
|
|
||||||
icon: UsergroupAddOutlined,
|
|
||||||
size: '32',
|
|
||||||
title: '用户',
|
|
||||||
color: '#69c0ff',
|
|
||||||
eventObject: {
|
|
||||||
click: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: BarChartOutlined,
|
|
||||||
size: '32',
|
|
||||||
title: '分析',
|
|
||||||
color: '#69c0ff',
|
|
||||||
eventObject: {
|
|
||||||
click: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: ShoppingCartOutlined,
|
|
||||||
size: '32',
|
|
||||||
title: '商品',
|
|
||||||
color: '#ff9c6e',
|
|
||||||
eventObject: {
|
|
||||||
click: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: AccountBookOutlined,
|
|
||||||
size: '32',
|
|
||||||
title: '订单',
|
|
||||||
color: '#b37feb',
|
|
||||||
eventObject: {
|
|
||||||
click: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: CreditCardOutlined,
|
|
||||||
size: '32',
|
|
||||||
title: '票据',
|
|
||||||
color: '#ffd666',
|
|
||||||
eventObject: {
|
|
||||||
click: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: MailOutlined,
|
|
||||||
size: '32',
|
|
||||||
title: '消息',
|
|
||||||
color: '#5cdbd3',
|
|
||||||
eventObject: {
|
|
||||||
click: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: TagsOutlined,
|
|
||||||
size: '32',
|
|
||||||
title: '标签',
|
|
||||||
color: '#ff85c0',
|
|
||||||
eventObject: {
|
|
||||||
click: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: SettingOutlined,
|
|
||||||
size: '32',
|
|
||||||
title: '配置',
|
|
||||||
color: '#ffc069',
|
|
||||||
eventObject: {
|
|
||||||
click: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
const res: TypeConsole = await getConsoleInfo();
|
|
||||||
visits.value = res.visits;
|
|
||||||
saleroom.value = res.saleroom;
|
|
||||||
orderLarge.value = res.orderLarge;
|
|
||||||
volume.value = res.volume;
|
|
||||||
loading.value = false;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
|
||||||
@ -1,361 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="n-layout-page-header">
|
|
||||||
<n-card :bordered="false" title="工作台">
|
|
||||||
<n-grid cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen">
|
|
||||||
<n-gi>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div>
|
|
||||||
<n-avatar circle :size="64" :src="schoolboy" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="px-4 text-xl">早安，Ah jung，开始您一天的工作吧！</p>
|
|
||||||
<p class="px-4 text-gray-400">今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</n-gi>
|
|
||||||
<n-gi>
|
|
||||||
<div class="flex justify-end w-full">
|
|
||||||
<div class="flex flex-col justify-center flex-1 text-right">
|
|
||||||
<span class="text-secondary">项目数</span>
|
|
||||||
<span class="text-2xl">16</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col justify-center flex-1 text-right">
|
|
||||||
<span class="text-secondary">待办</span>
|
|
||||||
<span class="text-2xl">3/15</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col justify-center flex-1 text-right">
|
|
||||||
<span class="text-secondary">消息</span>
|
|
||||||
<span class="text-2xl">35</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</n-gi>
|
|
||||||
</n-grid>
|
|
||||||
</n-card>
|
|
||||||
</div>
|
|
||||||
<n-grid class="mt-3" cols="2 s:1 m:1 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="9">
|
|
||||||
<n-gi>
|
|
||||||
<n-card
|
|
||||||
:segmented="{ content: true }"
|
|
||||||
content-style="padding: 0;"
|
|
||||||
:bordered="false"
|
|
||||||
size="small"
|
|
||||||
title="项目"
|
|
||||||
>
|
|
||||||
<div class="flex flex-wrap project-card">
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex">
|
|
||||||
<span>
|
|
||||||
<n-icon size="30">
|
|
||||||
<GithubOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="ml-4 text-lg">Github</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400">
|
|
||||||
是一个面向开源及私有软件项目的托管平台。
|
|
||||||
</div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 开源君，2021-07-04 </div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex">
|
|
||||||
<span>
|
|
||||||
<n-icon size="30" color="#42b983">
|
|
||||||
<LogoVue />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="ml-4 text-lg">Vue</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 渐进式 JavaScript 框架 </div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 学不动也要学，2021-07-04 </div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex">
|
|
||||||
<span>
|
|
||||||
<n-icon size="30" color="#e44c27">
|
|
||||||
<Html5Outlined />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="ml-4 text-lg">Html5</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> HTML5是互联网的下一代标准。 </div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 撸码也是一种艺术 2021-04-01 </div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex">
|
|
||||||
<span>
|
|
||||||
<n-icon size="30" color="#dd0031">
|
|
||||||
<LogoAngular />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="ml-4 text-lg">Angular</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 现代 Web 开发平台，百万粉丝热捧。 </div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 铁粉君 2021-07-04。 </div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex">
|
|
||||||
<span>
|
|
||||||
<n-icon size="30" color="#61dafb">
|
|
||||||
<LogoReact />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="ml-4 text-lg">React</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 用于构建用户界面的 JavaScript 库。 </div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 技术牛 2021-07-04。 </div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
:bordered="false"
|
|
||||||
class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex">
|
|
||||||
<span>
|
|
||||||
<n-icon size="30">
|
|
||||||
<LogoJavascript />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="ml-4 text-lg">Js</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 路是走出来的，而不是空想出来的。 </div>
|
|
||||||
<div class="flex h-10 mt-2 text-gray-400"> 架构组 2021-07-04 </div>
|
|
||||||
</n-card>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
|
|
||||||
<n-card
|
|
||||||
:segmented="{ content: true }"
|
|
||||||
content-style="padding-top: 0;padding-bottom: 0;"
|
|
||||||
:bordered="false"
|
|
||||||
size="small"
|
|
||||||
title="动态"
|
|
||||||
class="mt-3"
|
|
||||||
>
|
|
||||||
<template #header-extra><a href="javascript:;">更多</a></template>
|
|
||||||
<n-list>
|
|
||||||
<n-list-item>
|
|
||||||
<template #prefix>
|
|
||||||
<n-avatar circle :size="40" :src="schoolboy" />
|
|
||||||
</template>
|
|
||||||
<n-thing title="Ah Jung 刚才把工作台页面随便写了一些，凑合能看了！">
|
|
||||||
<template #description
|
|
||||||
><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template
|
|
||||||
>
|
|
||||||
</n-thing>
|
|
||||||
</n-list-item>
|
|
||||||
<n-list-item>
|
|
||||||
<template #prefix>
|
|
||||||
<n-avatar circle :size="40" :src="schoolboy" />
|
|
||||||
</template>
|
|
||||||
<n-thing title="Ah Jung 在 开源组 创建了项目 naive-ui-admin？">
|
|
||||||
<template #description
|
|
||||||
><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template
|
|
||||||
>
|
|
||||||
</n-thing>
|
|
||||||
</n-list-item>
|
|
||||||
<n-list-item>
|
|
||||||
<template #prefix>
|
|
||||||
<n-avatar circle :size="40" :src="schoolboy" />
|
|
||||||
</template>
|
|
||||||
<n-thing title="@风清扬，向naive-ui-admin提交了一个bug，抽时间看看吧！">
|
|
||||||
<template #description
|
|
||||||
><p class="text-xs text-gray-500">2021-07-04 22:37:16</p></template
|
|
||||||
>
|
|
||||||
</n-thing>
|
|
||||||
</n-list-item>
|
|
||||||
<n-list-item>
|
|
||||||
<template #prefix>
|
|
||||||
<n-avatar circle :size="40" :src="schoolboy" />
|
|
||||||
</template>
|
|
||||||
<n-thing title="技术部那几位童鞋，再次警告，不要摸鱼，不要摸鱼，不要摸鱼啦！">
|
|
||||||
<template #description
|
|
||||||
><p class="text-xs text-gray-500">2021-07-04 09:37:16</p></template
|
|
||||||
>
|
|
||||||
</n-thing>
|
|
||||||
</n-list-item>
|
|
||||||
<n-list-item>
|
|
||||||
<template #prefix>
|
|
||||||
<n-avatar circle :size="40" :src="schoolboy" />
|
|
||||||
</template>
|
|
||||||
<n-thing title="上班不摸鱼，和咸鱼有什么区别（这话真不是我说的哈）！">
|
|
||||||
<template #description
|
|
||||||
><p class="text-xs text-gray-500">2021-07-04 20:37:16</p></template
|
|
||||||
>
|
|
||||||
</n-thing>
|
|
||||||
</n-list-item>
|
|
||||||
</n-list>
|
|
||||||
</n-card>
|
|
||||||
</n-gi>
|
|
||||||
<n-gi>
|
|
||||||
<n-card
|
|
||||||
:segmented="{ content: true }"
|
|
||||||
content-style="padding: 0;"
|
|
||||||
:bordered="false"
|
|
||||||
size="small"
|
|
||||||
title="快捷操作"
|
|
||||||
>
|
|
||||||
<div class="flex flex-wrap project-card">
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
class="cursor-pointer project-card-item"
|
|
||||||
:bordered="false"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex flex-col justify-center text-gray-500">
|
|
||||||
<span class="text-center">
|
|
||||||
<n-icon size="28" color="#68c755">
|
|
||||||
<DashboardOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="text-center text-lx">主控台</span>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
class="cursor-pointer project-card-item"
|
|
||||||
:bordered="false"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex flex-col justify-center text-gray-500">
|
|
||||||
<span class="text-center">
|
|
||||||
<n-icon size="28" color="#fab251">
|
|
||||||
<ProfileOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="text-center text-lx">列表</span>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
class="cursor-pointer project-card-item"
|
|
||||||
:bordered="false"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex flex-col justify-center text-gray-500">
|
|
||||||
<span class="text-center">
|
|
||||||
<n-icon size="28" color="#1890ff">
|
|
||||||
<FileProtectOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="text-center text-lx">表单</span>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
class="cursor-pointer project-card-item"
|
|
||||||
:bordered="false"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex flex-col justify-center text-gray-500">
|
|
||||||
<span class="text-center">
|
|
||||||
<n-icon size="28" color="#f06b96">
|
|
||||||
<ApartmentOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="text-center text-lx">权限管理</span>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
class="cursor-pointer project-card-item"
|
|
||||||
:bordered="false"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex flex-col justify-center text-gray-500">
|
|
||||||
<span class="text-center">
|
|
||||||
<n-icon size="28" color="#7238d1">
|
|
||||||
<SettingOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="text-center text-lx">系统管理</span>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
size="small"
|
|
||||||
class="cursor-pointer project-card-item"
|
|
||||||
:bordered="false"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
<div class="flex flex-col justify-center text-gray-500">
|
|
||||||
<span class="text-center">
|
|
||||||
<n-icon size="28" color="#5cdbd3">
|
|
||||||
<MailOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</span>
|
|
||||||
<span class="text-center text-lx">消息</span>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
<n-card
|
|
||||||
:segmented="{ content: true }"
|
|
||||||
:bordered="false"
|
|
||||||
size="small"
|
|
||||||
class="pt-4 pb-3 mt-3"
|
|
||||||
>
|
|
||||||
<img src="~@/assets/images/Business.svg" class="w-full" />
|
|
||||||
</n-card>
|
|
||||||
</n-gi>
|
|
||||||
</n-grid>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import schoolboy from '@/assets/images/schoolboy.png';
|
|
||||||
import {
|
|
||||||
GithubOutlined,
|
|
||||||
DashboardOutlined,
|
|
||||||
ProfileOutlined,
|
|
||||||
FileProtectOutlined,
|
|
||||||
SettingOutlined,
|
|
||||||
ApartmentOutlined,
|
|
||||||
Html5Outlined,
|
|
||||||
MailOutlined,
|
|
||||||
} from '@vicons/antd';
|
|
||||||
import { LogoVue, LogoAngular, LogoReact, LogoJavascript } from '@vicons/ionicons5';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.project-card {
|
|
||||||
&-item {
|
|
||||||
width: 33.333333%;
|
|
||||||
border: none;
|
|
||||||
border-radius: inherit;
|
|
||||||
border-right: 1px solid var(--n-border-color);
|
|
||||||
border-bottom: 1px solid var(--n-border-color);
|
|
||||||
&:nth-child(3n) {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
&:nth-child(n + 4) {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user