348 lines
9.6 KiB
Vue
348 lines
9.6 KiB
Vue
<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 size="small" :bordered="false" hoverable>
|
|
<n-space justify="space-between" align="center">
|
|
<div>
|
|
<img src="~@/assets/images/visits.svg" class="top-card-img" />
|
|
<div class="pt-2">访问量</div>
|
|
</div>
|
|
<div>
|
|
<n-text depth="3">周</n-text>
|
|
</div>
|
|
</n-space>
|
|
<n-space justify="space-between" align="center">
|
|
<n-h1 class="mb-0">98735</n-h1>
|
|
<div>
|
|
<n-tag
|
|
:color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }"
|
|
type="success"
|
|
round
|
|
size="small"
|
|
>
|
|
+10%
|
|
</n-tag>
|
|
<n-text type="success" class="ml-2">
|
|
<n-icon size="16">
|
|
<ArrowUpOutlined />
|
|
</n-icon>
|
|
</n-text>
|
|
</div>
|
|
</n-space>
|
|
</n-card>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-card size="small" :bordered="false" hoverable>
|
|
<n-space justify="space-between" align="center">
|
|
<div>
|
|
<img src="~@/assets/images/sale.svg" class="top-card-img" />
|
|
<div class="pt-2">销售额</div>
|
|
</div>
|
|
<div>
|
|
<n-text depth="3">周</n-text>
|
|
</div>
|
|
</n-space>
|
|
<n-space justify="space-between" align="center">
|
|
<n-h1 class="mb-0">￥3980</n-h1>
|
|
<div>
|
|
<n-tag
|
|
:color="{ color: '#d03050', textColor: '#fff', borderColor: '#d03050' }"
|
|
type="error"
|
|
round
|
|
size="small"
|
|
>
|
|
-20%
|
|
</n-tag>
|
|
<n-text type="error" class="ml-2">
|
|
<n-icon size="16">
|
|
<ArrowDownOutlined />
|
|
</n-icon>
|
|
</n-text>
|
|
</div>
|
|
</n-space>
|
|
</n-card>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-card size="small" :bordered="false" hoverable>
|
|
<n-space justify="space-between" align="center">
|
|
<div>
|
|
<img src="~@/assets/images/order_count.svg" class="top-card-img" />
|
|
<div class="pt-2">订单量</div>
|
|
</div>
|
|
<div>
|
|
<n-text depth="3">周</n-text>
|
|
</div>
|
|
</n-space>
|
|
<n-space justify="space-between" align="center">
|
|
<n-h1 class="mb-0">3685</n-h1>
|
|
<div>
|
|
<n-tag
|
|
:color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }"
|
|
type="success"
|
|
round
|
|
size="small"
|
|
>
|
|
+35%
|
|
</n-tag>
|
|
<n-text type="success" class="ml-2">
|
|
<n-icon size="16">
|
|
<ArrowUpOutlined />
|
|
</n-icon>
|
|
</n-text>
|
|
</div>
|
|
</n-space>
|
|
</n-card>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-card size="small" :bordered="false" hoverable>
|
|
<n-space justify="space-between" align="center">
|
|
<div>
|
|
<img src="~@/assets/images/volume.svg" class="top-card-img" />
|
|
<div class="pt-2">成交额</div>
|
|
</div>
|
|
<div>
|
|
<n-text depth="3">月</n-text>
|
|
</div>
|
|
</n-space>
|
|
<n-space justify="space-between" align="center">
|
|
<n-h1 class="mb-0">￥29856</n-h1>
|
|
<div>
|
|
<n-tag
|
|
:color="{ color: '#d03050', textColor: '#fff', borderColor: '#d03050' }"
|
|
type="error"
|
|
round
|
|
size="small"
|
|
>
|
|
-5%
|
|
</n-tag>
|
|
<n-text type="error" class="ml-2">
|
|
<n-icon size="16">
|
|
<ArrowDownOutlined />
|
|
</n-icon>
|
|
</n-text>
|
|
</div>
|
|
</n-space>
|
|
</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>
|
|
|
|
<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-card
|
|
size="small"
|
|
title="访问量"
|
|
:segmented="{ content: true }"
|
|
:bordered="false"
|
|
hoverable
|
|
>
|
|
<NewVisitAmount />
|
|
</n-card>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-card
|
|
size="small"
|
|
title="区域排行"
|
|
:segmented="{ content: true }"
|
|
:bordered="false"
|
|
hoverable
|
|
>
|
|
<AreaRanking />
|
|
<!-- <div class="-mt-6">
|
|
<n-space justify="space-around">
|
|
<n-statistic label="搜索引擎" value="45.8%" />
|
|
<n-statistic label="直接访问" value="35.5%" />
|
|
<n-statistic label="邮件营销" value="25.56%" />
|
|
</n-space>
|
|
</div> -->
|
|
</n-card>
|
|
</n-grid-item>
|
|
</n-grid>
|
|
|
|
<n-grid cols="1 s:1 m:2 l:2 xl:2 2xl:2" responsive="screen" :x-gap="12" :y-gap="8" class="mt-3">
|
|
<n-grid-item>
|
|
<n-card
|
|
size="small"
|
|
title="销售额"
|
|
:segmented="{ content: true }"
|
|
:bordered="false"
|
|
hoverable
|
|
>
|
|
<Percent />
|
|
</n-card>
|
|
</n-grid-item>
|
|
<n-grid-item>
|
|
<n-card
|
|
size="small"
|
|
title="访问来源"
|
|
:segmented="{ content: true }"
|
|
:bordered="false"
|
|
hoverable
|
|
>
|
|
<VisitSource />
|
|
<!-- <div class="-mt-6">
|
|
<n-space justify="space-around">
|
|
<n-statistic label="搜索引擎" value="45.8%" />
|
|
<n-statistic label="直接访问" value="35.5%" />
|
|
<n-statistic label="邮件营销" value="25.56%" />
|
|
</n-space>
|
|
</div> -->
|
|
</n-card>
|
|
</n-grid-item>
|
|
</n-grid>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, h } from 'vue';
|
|
import { ArrowUpOutlined, ArrowDownOutlined } from '@vicons/antd';
|
|
import { useNotification } from 'naive-ui';
|
|
import NewVisitAmount from './components/NewVisitAmount.vue';
|
|
import VisitSource from './components/VisitSource.vue';
|
|
import Percent from './components/Percent.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();
|
|
onMounted(() => {
|
|
if (!localStorage.getItem('adClosed')) {
|
|
notification.info({
|
|
title: '双十二限时特惠',
|
|
content: () =>
|
|
h('div', [
|
|
h('span', '正在进行双十二限时促销活动，五折特平惠，'),
|
|
h(
|
|
'a',
|
|
{
|
|
href: 'https://www.baidu.com',
|
|
target: '_blank',
|
|
},
|
|
'前往购买授权',
|
|
),
|
|
]),
|
|
duration: 5000,
|
|
});
|
|
localStorage.setItem('adClosed', 'true');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.top-card-img {
|
|
width: 32px;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|