|
@@ -1,15 +1,290 @@
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
|
+import {reactive} from "vue";
|
|
|
|
+
|
|
defineOptions({
|
|
defineOptions({
|
|
name: "Welcome"
|
|
name: "Welcome"
|
|
});
|
|
});
|
|
|
|
+
|
|
|
|
+const data = reactive({
|
|
|
|
+ today: {
|
|
|
|
+ // 数量
|
|
|
|
+ quantity: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ },
|
|
|
|
+ // 金额
|
|
|
|
+ amount: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ },
|
|
|
|
+ // 盈利
|
|
|
|
+ earnings: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ yesterday: {
|
|
|
|
+ // 数量
|
|
|
|
+ quantity: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ },
|
|
|
|
+ // 金额
|
|
|
|
+ amount: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ },
|
|
|
|
+ // 盈利
|
|
|
|
+ earnings: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ lastWeek: {
|
|
|
|
+ // 数量
|
|
|
|
+ quantity: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ },
|
|
|
|
+ // 金额
|
|
|
|
+ amount: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ },
|
|
|
|
+ // 盈利
|
|
|
|
+ earnings: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ lastMonth: {
|
|
|
|
+ // 数量
|
|
|
|
+ quantity: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ },
|
|
|
|
+ // 金额
|
|
|
|
+ amount: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ },
|
|
|
|
+ // 盈利
|
|
|
|
+ earnings: {
|
|
|
|
+ total: 0,
|
|
|
|
+ valid: 0
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
+
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
- <div class="max-w-full">
|
|
|
|
- <el-card style="width: 480px; border-radius: 8px" shadow="hover"
|
|
|
|
- >Always</el-card
|
|
|
|
- >
|
|
|
|
- </div>
|
|
|
|
|
|
+ <el-space direction="vertical">
|
|
|
|
+ <el-space class="my-4" wrap>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>今日笔数</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{ data.today.quantity.valid }}</span>
|
|
|
|
+ / {{ data.today.quantity.total }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>今日金额</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{ data.today.amount.valid }}</span> /
|
|
|
|
+ {{ data.today.amount.total }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>今日利润</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{ data.today.earnings.valid }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-space>
|
|
|
|
+ <el-space class="my-4" wrap>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>昨日笔数</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
|
|
|
|
+ data.yesterday.quantity.valid
|
|
|
|
+ }}</span> / {{ data.yesterday.quantity.total }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>昨日金额</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
|
|
|
|
+ data.yesterday.amount.valid
|
|
|
|
+ }}</span> / {{ data.yesterday.amount.total }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>昨日利润</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
|
|
|
|
+ data.yesterday.earnings.valid
|
|
|
|
+ }}</span></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-space>
|
|
|
|
+ <el-space class="my-4" wrap>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>本周笔数</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
|
|
|
|
+ data.lastWeek.quantity.valid
|
|
|
|
+ }}</span> / {{ data.lastWeek.quantity.total }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>本周金额</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{ data.lastWeek.amount.valid }}</span>
|
|
|
|
+ / {{ data.lastWeek.amount.total }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>本周利润</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
|
|
|
|
+ data.lastWeek.earnings.valid
|
|
|
|
+ }}</span></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-space>
|
|
|
|
+ <el-space class="my-4" wrap>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>本月笔数</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
|
|
|
|
+ data.lastMonth.quantity.valid
|
|
|
|
+ }}</span> / {{ data.lastMonth.quantity.total }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>本月金额</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
|
|
|
|
+ data.lastMonth.amount.valid
|
|
|
|
+ }}</span> / {{ data.lastMonth.amount.total }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ <el-card style="width: 350px; border-radius: 8px" shadow="hover">
|
|
|
|
+ <template #header>
|
|
|
|
+ <div class="card-header">
|
|
|
|
+ <span>本月利润</span>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="ep-bg-purple">
|
|
|
|
+ <div class="text">
|
|
|
|
+ <div class="text-center h-[40px]">
|
|
|
|
+ <div class="text-xl font-bold"><span class="text-red-700 text-2xl">{{
|
|
|
|
+ data.lastMonth.earnings.valid
|
|
|
|
+ }}</span></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-space>
|
|
|
|
+ </el-space>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|