hxr
parent
642f4cbe8c
commit
21fb121ab8
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 1.5 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1699488416033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2847" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F15BB5" p-id="2848"></path><path d="M772 432.8l-7.9-63.3v-0.2c-0.1-1-0.4-2.1-0.7-3.1v-0.3l-0.2-0.4-25.7-72.1c-0.3-0.7-0.6-1.5-1-2.2-7-14.4-21.5-23.7-37.5-24h-24.1c-10 0-18.6 7.8-18.9 17.8-0.4 10.5 8 19.1 18.4 19.1H699c1.9 0.3 3.4 1.4 4.2 3.1l13.5 37.9c0.7 1.9 0.4 3.9-0.7 5.6-1.1 1.6-3 2.6-5 2.6h-67.3c-3.5 0-6.2-2.8-6.2-6.2v-24.5c0-67.9-55.1-123-123-123s-123 55.1-123 123v24.5c0 3.5-2.8 6.2-6.2 6.2h-69.8c-3.4 0-6.2-2.8-6.2-6.2 0-0.8 0.2-1.6 0.5-2.3l15.5-36.8c0.7-2.1 2.5-3.5 4.7-3.9h24.1c10 0 18.6-7.8 18.9-17.8 0.4-10.5-8-19.1-18.4-19.1H330c-16.5 0.5-31.3 10.2-38.1 25.3l-30.6 72.1v0.2c-0.2 0.4-0.3 0.8-0.5 1.2v0.4c-0.3 1-0.6 2.1-0.7 3.1l-39 310.8c-6.4 50.5 29.5 96.7 80.1 103 3.8 0.5 7.7 0.7 11.5 0.7h94.5C514.8 718.5 680.7 597.9 772 432.8zM440.7 322.5c0-41 33.3-74.1 74.3-73.8 40.7 0.3 73.3 34.1 73.3 74.8V347c0 3.5-2.8 6.2-6.2 6.2H446.9c-3.5 0-6.2-2.8-6.2-6.2v-24.5z m152.7 257L514 662.4c-2.3 2.4-6.3 2.5-8.7 0.2l-0.2-0.2-79.4-82.9c-15.1-15.1-18.8-38.2-9.3-57.3 13.4-26.8 47.7-36.1 73.3-18.2 2.3 1.6 4.4 3.5 6.4 5.5l9.2 9.2c2.4 2.4 6.3 2.4 8.7 0l9.4-9.4c19.4-19.4 50.8-19.4 70.2 0 19.3 19.4 19.3 50.8-0.2 70.2z" fill="#FFFDF3" p-id="2849"></path><path d="M803.7 691.6c0-3.8-0.3-7.7-0.7-11.4l-31-247.4c-91.3 165.1-257.2 285.7-364.8 351h304.1c51 0 92.4-41.2 92.4-92.2z" fill="#FFFFFF" opacity=".9" p-id="2850"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1699460669940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6619" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#69ADF4" p-id="6620"></path><path d="M526.765394 288.528561m35.292598-10.116657l42.197672-12.096002q35.292598-10.116657 45.409255 25.175942l117.221262 408.933803q10.116657 35.292598-25.175942 45.409255l-42.197672 12.096003q-35.292598 10.116657-45.409255-25.175942l-117.221262-408.933803q-10.116657-35.292598 25.175942-45.409256Z" fill="#FFFFFF" opacity=".4" p-id="6621"></path><path d="M284.134061 263.382697c-20.275679 0-36.713952 16.437475-36.713952 36.713951v43.897117c0 4.408069 3.573225 7.981294 7.981294 7.981293h55.469992c13.443691 0 24.342946 10.898457 24.342946 24.342947S324.315087 400.660951 310.871395 400.660951H255.401403c-4.408069 0-7.981294 3.573225-7.981294 7.981294v316.857365c0 20.276477 16.438273 36.713952 36.713952 36.713952h43.897116c20.275679 0 36.713952-16.437475 36.713952-36.713952V300.096648c0-20.276477-16.438273-36.713952-36.713952-36.713951h-43.897116zM436.576773 263.382697c-20.275679 0-36.713952 16.437475-36.713951 36.713951v122.911926c0 4.408069 3.573225 7.981294 7.981293 7.981293h49.084957c13.443691 0 24.342946 10.898457 24.342947 24.342947S470.372764 479.67576 456.929072 479.67576H407.844115c-4.408069 0-7.981294 3.573225-7.981293 7.981294v237.842556c0 20.276477 16.438273 36.713952 36.713951 36.713952h43.897116c20.275679 0 36.713952-16.437475 36.713952-36.713952V300.096648c0-20.276477-16.438273-36.713952-36.713952-36.713951h-43.897116z" fill="#FFFFFF" p-id="6622"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg t="1699460646090" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6462" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF8F41" p-id="6463"></path><path d="M436.576773 217.091193m29.530787 0l93.381138 0q29.530787 0 29.530788 29.530787l0 51.08028q0 29.530787-29.530788 29.530788l-93.381138 0q-29.530787 0-29.530787-29.530788l0-51.08028q0-29.530787 29.530787-29.530787Z" fill="#FFFFFF" opacity=".4" p-id="6464"></path><path d="M719.583077 342.1014l40.038959-17.701712c3.507779-1.549169 4.020976-6.315598 0.924234-8.578294l-55.734971-40.715773c-3.096742-2.262697-7.481665-0.324839-7.891106 3.488624l-4.475909 41.54423-58.874014 80.591115 28.157206 20.568592 57.855601-79.196782z" fill="#FFFFFF" opacity=".4" p-id="6465"></path><path d="M512.399065 521.178488m-249.016368 0a249.016368 249.016368 0 1 0 498.032736 0 249.016368 249.016368 0 1 0-498.032736 0Z" fill="#FFFFFF" p-id="6466"></path><path d="M512.399065 348.383476c9.917556 0 17.957911 8.040355 17.957911 17.957911v143.564321l97.432443 55.102055c8.633366 4.882157 11.67344 15.838878 6.791282 24.471445-4.882157 8.633366-15.838878 11.67344-24.471445 6.791283l-106.550272-60.258768A17.957911 17.957911 0 0 1 494.441154 520.380359V366.341387c0-9.917556 8.040355-17.957911 17.957911-17.957911z" fill="#FF8F41" p-id="6467"></path><path d="M513.197194 524.371005m-40.704599 0a40.704599 40.704599 0 1 0 81.409198 0 40.704599 40.704599 0 1 0-81.409198 0Z" fill="#FF8338" p-id="6468"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 897 B |
|
|
@ -15,11 +15,11 @@ const greetings = computed(() => {
|
|||
if (hours >= 6 && hours < 8) {
|
||||
return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
|
||||
} else if (hours >= 8 && hours < 12) {
|
||||
return "上午好🌞！";
|
||||
return "上午好，" + useUserStore().user.nickname + "！";
|
||||
} else if (hours >= 12 && hours < 18) {
|
||||
return "下午好☕！";
|
||||
return "下午好，" + useUserStore().user.nickname + "！";
|
||||
} else if (hours >= 18 && hours < 24) {
|
||||
return "晚上好🌃！";
|
||||
return "晚上好，" + useUserStore().user.nickname + "！";
|
||||
} else if (hours >= 0 && hours < 6) {
|
||||
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ const greetings = computed(() => {
|
|||
|
||||
const duration = 5000;
|
||||
|
||||
// 收入金额
|
||||
// 销售额
|
||||
const amount = ref(0);
|
||||
const amountOutput = useTransition(amount, {
|
||||
duration: duration,
|
||||
|
|
@ -35,7 +35,7 @@ const amountOutput = useTransition(amount, {
|
|||
});
|
||||
amount.value = 2000;
|
||||
|
||||
// 访问数
|
||||
// 访问量
|
||||
const visitCount = ref(0);
|
||||
const visitCountOutput = useTransition(visitCount, {
|
||||
duration: duration,
|
||||
|
|
@ -43,15 +43,15 @@ const visitCountOutput = useTransition(visitCount, {
|
|||
});
|
||||
visitCount.value = 2000;
|
||||
|
||||
//消息数
|
||||
const messageCount = ref(0);
|
||||
const messageCountOutput = useTransition(messageCount, {
|
||||
// 留资数
|
||||
const dauCount = ref(0);
|
||||
const dauCountOutput = useTransition(dauCount, {
|
||||
duration: duration,
|
||||
transition: TransitionPresets.easeOutExpo,
|
||||
});
|
||||
messageCount.value = 2000;
|
||||
dauCount.value = 2000;
|
||||
|
||||
// 订单数
|
||||
// 订单量
|
||||
const orderCount = ref(0);
|
||||
const orderCountOutput = useTransition(orderCount, {
|
||||
duration: duration,
|
||||
|
|
@ -65,57 +65,64 @@ orderCount.value = 2000;
|
|||
<!-- github角标 -->
|
||||
<github-corner class="github-corner" />
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<el-row class="mb-8">
|
||||
<el-card class="w-full">
|
||||
<div class="flex justify-between flex-wrap">
|
||||
<div class="flex items-center">
|
||||
<el-card shadow="never">
|
||||
<el-row justify="space-between">
|
||||
<el-col :span="18" :xs="24">
|
||||
<div class="flex h-full items-center">
|
||||
<img
|
||||
class="user-avatar"
|
||||
class="w-20 h-20 mr-5 rounded-full"
|
||||
:src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
|
||||
/>
|
||||
<span class="ml-[10px] text-[16px]">
|
||||
{{ userStore.user.nickname }}
|
||||
</span>
|
||||
<div>
|
||||
<p>{{ greetings }}</p>
|
||||
<p class="text-sm text-gray">
|
||||
今日天气晴朗，气温在15℃至25℃之间，东南风。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<div class="leading-[40px]">
|
||||
{{ greetings }}
|
||||
</div>
|
||||
<el-col :span="6" :xs="24">
|
||||
<div class="flex h-full items-center justify-around">
|
||||
<el-statistic :value="99">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<svg-icon icon-class="message" :size="16" />
|
||||
<span class="text-[16px] ml-1">消息</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-statistic>
|
||||
|
||||
<div class="space-x-2 flex items-center justify-end">
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="danger"
|
||||
href="https://blog.csdn.net/u013737132/article/details/130191394"
|
||||
>💥官方从零到一文档</el-link
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="success"
|
||||
href="https://gitee.com/youlaiorg"
|
||||
>Gitee</el-link
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="primary"
|
||||
href="https://github.com/youlaitech"
|
||||
>GitHub
|
||||
</el-link>
|
||||
<el-statistic :value="50">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<svg-icon icon-class="todolist" :size="16" />
|
||||
<span class="text-[16px] ml-1">待办</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #suffix>/100</template>
|
||||
</el-statistic>
|
||||
|
||||
<el-statistic :value="10">
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<svg-icon icon-class="project" :size="16" />
|
||||
<span class="text-[16px] ml-1">项目</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 数据卡片 -->
|
||||
<el-row :gutter="40" class="mb-4">
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4">
|
||||
<el-row :gutter="40" class="mt-3">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[var(--el-text-color-secondary)]">访问数</span>
|
||||
<span class="text-[var(--el-text-color-secondary)]">访问量</span>
|
||||
<el-tag type="success">日</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -131,24 +138,24 @@ orderCount.value = 2000;
|
|||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
<span> 总访问数 </span>
|
||||
<span> {{ Math.round(visitCountOutput) }} </span>
|
||||
<span> {{ Math.round(visitCountOutput * 15) }} </span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!--消息数-->
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4">
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[var(--el-text-color-secondary)]">消息数</span>
|
||||
<el-tag>周</el-tag>
|
||||
<span class="text-[var(--el-text-color-secondary)]">留资数</span>
|
||||
<el-tag type="success">日</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex items-center justify-between mt-5">
|
||||
<div class="text-lg text-right">
|
||||
{{ Math.round(messageCountOutput) }}
|
||||
{{ Math.round(dauCountOutput) }}
|
||||
</div>
|
||||
<svg-icon icon-class="message" size="2em" />
|
||||
</div>
|
||||
|
|
@ -156,21 +163,19 @@ orderCount.value = 2000;
|
|||
<div
|
||||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
<span> 总消息数 </span>
|
||||
<span> {{ Math.round(messageCountOutput) }} </span>
|
||||
<span> 总留资数 </span>
|
||||
<span> {{ Math.round(dauCountOutput) }} </span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!--收入金额-->
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4">
|
||||
<!--销售额-->
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[var(--el-text-color-secondary)]"
|
||||
>收入金额</span
|
||||
>
|
||||
<el-tag type="warning">月</el-tag>
|
||||
<span class="text-[var(--el-text-color-secondary)]">销售额</span>
|
||||
<el-tag>月</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -184,20 +189,19 @@ orderCount.value = 2000;
|
|||
<div
|
||||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
<span> 总收入金额 </span>
|
||||
<span> {{ Math.round(amountOutput) }} </span>
|
||||
<span> 总销售额 </span>
|
||||
<span> {{ Math.round(amountOutput * 15) }} </span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!--订单数-->
|
||||
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4">
|
||||
<!--订单量-->
|
||||
<el-col :xs="24" :sm="12" :lg="6">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[var(--el-text-color-secondary)]">订单数</span>
|
||||
<el-tag type="danger">年</el-tag>
|
||||
<span class="text-[var(--el-text-color-secondary)]">订单量</span>
|
||||
<el-tag type="danger">季</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -205,21 +209,21 @@ orderCount.value = 2000;
|
|||
<div class="text-lg text-right">
|
||||
{{ Math.round(orderCountOutput) }}
|
||||
</div>
|
||||
<svg-icon icon-class="cart" size="2em" />
|
||||
<svg-icon icon-class="order" size="2em" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
|
||||
>
|
||||
<span> 总订单数 </span>
|
||||
<span> {{ Math.round(orderCountOutput) }} </span>
|
||||
<span> 总订单量 </span>
|
||||
<span> {{ Math.round(orderCountOutput * 15) }} </span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- Echarts 图表 -->
|
||||
<el-row :gutter="40">
|
||||
<el-row :gutter="40" class="mt-3">
|
||||
<el-col :sm="24" :lg="8" class="mb-2">
|
||||
<BarChart
|
||||
id="barChart"
|
||||
|
|
|
|||
|
|
@ -172,6 +172,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
|||
"element-plus/es/components/date-picker/style/css",
|
||||
"element-plus/es/components/notification/style/css",
|
||||
"element-plus/es/components/image/style/css",
|
||||
"element-plus/es/components/statistic/style/css",
|
||||
"@vueuse/core",
|
||||
"sortablejs",
|
||||
"path-to-regexp",
|
||||
|
|
|
|||
Loading…
Reference in New Issue