From eec3d6bbda82271d81a5f3128ce62b70e3978e95 Mon Sep 17 00:00:00 2001
From: mayf <m13160102112@163.com>
Date: 星期五, 01 十一月 2024 16:23:44 +0800
Subject: [PATCH] 首页样式优化
---
pages/home.vue | 558 +++++++++++++++++++++++++++++++------------------------
1 files changed, 311 insertions(+), 247 deletions(-)
diff --git a/pages/home.vue b/pages/home.vue
index de37955..4f933d0 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -1,214 +1,89 @@
<template>
<div class="home-page">
- <div class="top-container">
- <div class="top-container__item">
- <div class="top-container__label">今日销售额</div>
- <div class="top-container__value">{{ statistic.saleAmount || 0 }}</div>
- </div>
- <div class="top-container__item">
- <div class="top-container__label">今日销售扎数</div>
- <div class="top-container__value">
- {{ statistic.saleFlowerCount || 0 }}
- </div>
- </div>
- <div
- class="top-container__item cursor-pointer"
- @click="toRoute('/goods/list')"
- >
- <div class="top-container__label">商品管理</div>
- <div class="top-container__value">{{ statistic.flowerCount || 0 }}</div>
- </div>
- <div
- class="top-container__item cursor-pointer"
- @click="toRoute('/shop/list')"
- >
- <div class="top-container__label">用户管理</div>
- <div class="top-container__value">
- {{ statistic.customerCount || 0 }}
- </div>
- </div>
- <div
- class="top-container__item cursor-pointer"
- @click="toRoute('/order/list')"
- >
- <div class="top-container__label">订单管理</div>
- <div class="top-container__value">
- {{ statistic.orderCount || 0 }}
- </div>
- </div>
+ <div class="block-container">
+ <div class="block-container__title">待办事项</div>
+ <el-row :gutter="30">
+ <el-col v-for="item in todoList" :key="item.key" :span="6">
+ <div class="simple-item is-cursor" @click="toRoute(item.url)">
+ <img :src="item.icon" class="simple-item__img" />
+ <div>
+ <div class="simple-item__value">
+ {{ statistic[item.key] || 0 }}
+ </div>
+ <div class="simple-item__label">{{ item.label }}</div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
</div>
- <el-row :gutter="22" class="mt-22">
- <el-col :span="6">
- <div
- class="statistic-container cursor-pointer"
- @click="toRoute('/order/list?statusBackend=SEND')"
+ <div class="block-container">
+ <div class="block-container__title">销售数据</div>
+ <el-row :gutter="30">
+ <el-col
+ v-for="item in saleList"
+ :key="item.key"
+ :span="6"
+ class="bg-wrapper"
>
- <div class="statistic-title">待发货</div>
- <div class="statistic-num">{{ statistic.orderSendCount || 0 }}</div>
- </div>
- </el-col>
- <el-col :span="6">
- <div
- class="statistic-container cursor-pointer"
- @click="toRoute('/goods/list?status=UP')"
- >
- <div class="statistic-title">在售商品</div>
- <div class="statistic-num">{{ statistic.flowerUpCount || 0 }}</div>
- </div>
- </el-col>
- <el-col :span="6">
- <div
- class="statistic-container cursor-pointer"
- @click="toRoute('/goods/list?status=PENDING')"
- >
- <div class="statistic-title">待审核商品</div>
- <div class="statistic-num">
- {{ statistic.flowerPendingCount || 0 }}
+ <div class="bg-item">
+ <div class="bg-item__label">{{ item.label }}</div>
+ <div class="bg-item__value">{{ statistic[item.key] || 0 }}</div>
</div>
- </div>
- </el-col>
- <el-col :span="6">
- <div
- class="statistic-container cursor-pointer"
- @click="toRoute('/order/after-sale?status=PENDING')"
- >
- <div class="statistic-title">待售后处理</div>
- <div class="statistic-num">{{ statistic.orderSalesCount || 0 }}</div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="statistic-container">
- <div class="statistic-title">总销售金额</div>
- <div class="statistic-num">{{ statistic.totalSaleAmount || 0 }}</div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="statistic-container">
- <div class="statistic-title">总销售扎数</div>
- <div class="statistic-num">
- {{ statistic.totalSaleFlowerCount || 0 }}
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="statistic-container">
- <div class="statistic-title">供应商待提现</div>
- <div class="statistic-num">
- {{ statistic.supplierPendingAmount || 0 }}
- </div>
- </div>
- </el-col>
- <el-col :span="6">
- <div class="statistic-container">
- <div class="statistic-title">供应商已提现</div>
- <div class="statistic-num">
- {{ statistic.supplierCompleteAmount || 0 }}
- </div>
- </div>
- </el-col>
- </el-row>
- <el-row :gutter="22">
- <el-col :span="8">
- <div class="rate-container">
- <div class="flex items-center justify-between mb-16">
- <div class="text-20 text-mainTitle font-bold">
- 订单量：<span class="text-primary">{{
- orderStatistic.count || 0
- }}</span>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="block-container">
+ <div class="block-container__title">供应商财务</div>
+ <el-row :gutter="30">
+ <el-col v-for="item in supplierFinanceList" :key="item.key" :span="6">
+ <div class="simple-item">
+ <img :src="item.icon" class="simple-item__img" />
+ <div>
+ <div class="simple-item__value">
+ {{ statistic[item.key] || 0 }}
+ </div>
+ <div class="simple-item__label">{{ item.label }}</div>
</div>
- <el-tag type="primary">今日</el-tag>
</div>
- <div class="text-14 text-subTitle leading-22">
- 新增订单量：{{ orderStatistic.countToday || 0 }}
- </div>
- <div class="text-14 text-subTitle leading-22">
- 日环比：<span :class="getRateClass(orderStatistic.countRate)"
- >{{ orderStatistic.countRate || 0 }}%</span
- >
- </div>
- </div>
- </el-col>
- <el-col :span="8">
- <div class="rate-container">
- <div class="flex items-center justify-between mb-16">
- <div class="text-20 text-mainTitle font-bold">
- 供应商数量：<span class="text-primary">{{
- supplierStatistic.count || 0
- }}</span>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="block-container">
+ <div class="block-container__title">商品数据</div>
+ <el-row :gutter="30">
+ <el-col v-for="item in goodsList" :key="item.key" :span="6">
+ <div class="simple-item is-cursor" @click="toRoute(item.url)">
+ <img :src="item.icon" class="simple-item__img" />
+ <div>
+ <div class="simple-item__value">
+ {{ statistic[item.key] || 0 }}
+ </div>
+ <div class="simple-item__label">{{ item.label }}</div>
</div>
- <el-tag type="primary">今日</el-tag>
</div>
- <div class="text-14 text-subTitle leading-22">
- 新增供应商：{{ supplierStatistic.countToday || 0 }}
- </div>
- <div class="text-14 text-subTitle leading-22">
- 日环比：<span :class="getRateClass(supplierStatistic.countRate)"
- >{{ supplierStatistic.countRate || 0 }}%</span
- >
- </div>
- </div>
- </el-col>
- <el-col :span="8">
- <div class="rate-container">
- <div class="flex items-center justify-between mb-16">
- <div class="text-20 text-mainTitle font-bold">
- 全部用户量：<span class="text-primary">{{
- userStatistic.count || 0
- }}</span>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="block-container">
+ <div class="block-container__title">店铺数据</div>
+ <el-row :gutter="30">
+ <el-col v-for="item in shopList" :key="item.key" :span="6">
+ <div class="rate-container">
+ <div class="rate-container__title">
+ {{ item.title }}：{{ getRateValue(item.key, 'count') || 0 }}
</div>
- <el-tag type="primary">今日</el-tag>
- </div>
- <div class="text-14 text-subTitle leading-22">
- 新增用户量：{{ userStatistic.countToday || 0 }}
- </div>
- <div class="text-14 text-subTitle leading-22">
- 日环比：<span :class="getRateClass(userStatistic.countRate)"
- >{{ userStatistic.countRate || 0 }}%</span
- >
- </div>
- </div>
- </el-col>
- <el-col :span="8">
- <div class="rate-container">
- <div class="flex items-center justify-between mb-16">
- <div class="text-20 text-mainTitle font-bold">
- 用户访问量：<span class="text-primary">{{
- visitStatistic.count || 0
- }}</span>
+ <div class="rate-container__desc">
+ <div>
+ {{ item.desc }}：{{ getRateValue(item.key, 'countToday') || 0 }}
+ </div>
+ <div :class="getRateClass(getRateValue(item.key, 'countRate'))">
+ 日环比：{{ getRateValue(item.key, 'countRate') || 0 }}%
+ </div>
</div>
- <el-tag type="primary">今日</el-tag>
</div>
- <div class="text-14 text-subTitle leading-22">
- 昨日访问量：{{ visitStatistic.countToday || 0 }}
- </div>
- <div class="text-14 text-subTitle leading-22">
- 日环比：<span :class="getRateClass(visitStatistic.countRate)"
- >{{ visitStatistic.countRate || 0 }}%</span
- >
- </div>
- </div>
- </el-col>
- <el-col :span="8">
- <div class="rate-container">
- <div class="flex items-center justify-between mb-16">
- <div class="text-20 text-mainTitle font-bold">
- 售后订单数量：<span class="text-primary">{{
- saleStatistic.count || 0
- }}</span>
- </div>
- <el-tag type="primary">今日</el-tag>
- </div>
- <div class="text-14 text-subTitle leading-22">
- 新增售后量：{{ saleStatistic.countToday || 0 }}
- </div>
- <div class="text-14 text-subTitle leading-22">
- 日环比：<span :class="getRateClass(saleStatistic.countRate)"
- >{{ saleStatistic.countRate || 0 }}%</span
- >
- </div>
- </div>
- </el-col>
- </el-row>
+ </el-col>
+ </el-row>
+ </div>
</div>
</template>
@@ -223,6 +98,109 @@
userStatistic: {},
visitStatistic: {},
saleStatistic: {},
+ todoList: [
+ {
+ label: '待发货',
+ key: 'orderSendCount',
+ icon: require('@/static/images/home/dfh.png'),
+ url: '/order/list?statusBackend=SEND',
+ },
+ {
+ label: '待审核商品',
+ key: 'flowerPendingCount',
+ icon: require('@/static/images/home/dshsp.png'),
+ url: '/goods/list?status=PENDING',
+ },
+ {
+ label: '待售后处理',
+ key: 'orderSalesCount',
+ icon: require('@/static/images/home/dshcl.png'),
+ url: '/order/after-sale?status=PENDING',
+ },
+ ],
+ saleList: [
+ {
+ label: '今日销售额（元）',
+ key: 'saleAmount',
+ },
+ {
+ label: '今日销售扎数（个）',
+ key: 'saleFlowerCount',
+ },
+ {
+ label: '总销售金额（元）',
+ key: 'totalSaleAmount',
+ },
+ {
+ label: '总销售扎数（个）',
+ key: 'totalSaleFlowerCount',
+ },
+ ],
+ supplierFinanceList: [
+ {
+ label: '供应商待提现（元）',
+ key: 'supplierPendingAmount',
+ icon: require('@/static/images/home/gysdtx.png'),
+ },
+ {
+ label: '供应商已提现（元）',
+ key: 'supplierCompleteAmount',
+ icon: require('@/static/images/home/gysytx.png'),
+ },
+ ],
+ goodsList: [
+ {
+ label: '商品管理',
+ key: 'flowerCount',
+ icon: require('@/static/images/home/spgl.png'),
+ url: '/goods/list',
+ },
+ {
+ label: '在售商品',
+ key: 'flowerUpCount',
+ icon: require('@/static/images/home/zssp.png'),
+ url: '/goods/list?status=UP',
+ },
+ {
+ label: '用户管理',
+ key: 'customerCount',
+ icon: require('@/static/images/home/yhgl.png'),
+ url: '/shop/list',
+ },
+ {
+ label: '订单管理',
+ key: 'orderCount',
+ icon: require('@/static/images/home/ddgl.png'),
+ url: '/order/list',
+ },
+ ],
+ shopList: [
+ {
+ title: '订单量',
+ desc: '新增订单量',
+ key: 'orderStatistic',
+ },
+ {
+ title: '供应商数量',
+ desc: '新增供应商',
+ key: 'supplierStatistic',
+ },
+ {
+ title: '全部用户量',
+ desc: '新增用户量',
+ key: 'userStatistic',
+ },
+ {
+ title: '用户访问量',
+ desc: '昨日访问量',
+ key: 'visitStatistic',
+ },
+ {
+ title: '售后订单数量',
+ desc: '新增售后量',
+ key: 'saleStatistic',
+ },
+ ],
}
},
head() {
@@ -276,71 +254,157 @@
getRateClass(rate) {
if (rate > 0) {
return 'text-success'
- } else if (rate === 0) {
- return ''
- } else {
+ } else if (rate < 0) {
return 'text-danger'
+ } else {
+ return ''
}
},
toRoute(url) {
this.$router.push(url)
+ },
+ getRateValue(key1, key2) {
+ return this[key1]?.[key2]
},
},
}
</script>
<style lang="scss" scoped>
-@import '@/assets/statistic/index.scss';
+/* prettier-ignore */
.home-page {
- .top-container {
- width: 100%;
- display: flex;
- background-color: #fff;
- border-radius: 4px;
- box-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.1);
- padding: 30px;
- &__item {
- background-color: #f4faff;
- border-radius: 2px;
- text-align: center;
- flex: 1;
- height: 110px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- &:not(:last-child) {
- margin-right: 22px;
- }
+ .block-container {
+ &:not(:last-child) {
+ margin-bottom: 36PX;
}
- &__label {
- font-size: 20px;
+ &__title {
+ font-size: 24PX;
color: $main-title-color;
font-weight: bold;
- margin-bottom: 6px;
+ margin-bottom: 10PX;
}
- &__value {
- font-size: 16px;
- color: $primary-color;
+ .simple-item {
+ width: 100%;
+ height: 123PX;
+ background-color: #fff;
+ box-shadow: 0PX 2PX 12PX 0PX rgba(75, 76, 77, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &.is-cursor {
+ cursor: pointer;
+ }
+ &__img {
+ width: 60PX;
+ height: 60PX;
+ margin-right: 22PX;
+ }
+ &__value {
+ font-size: 24PX;
+ color: $main-title-color;
+ font-weight: bold;
+ text-align: center;
+ }
+ &__label {
+ font-size: 18PX;
+ color: $sub-title-color;
+ text-align: center;
+ }
}
- }
- .statistic-container {
- background-color: #fff;
- box-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.1);
- border-radius: 4px;
- height: 110px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-bottom: 22px;
- }
- .rate-container {
- width: 100%;
- background-color: #fff;
- box-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.1);
- padding: 20px;
- margin-bottom: 22px;
+ .bg-item {
+ width: 100%;
+ height: 123PX;
+ position: relative;
+ padding-left: 24PX;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0PX 2PX 12PX 0PX rgba(75, 76, 77, 0.1);
+ &::after {
+ content: '';
+ width: 111PX;
+ height: 94PX;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
+ &__value {
+ font-size: 28PX;
+ color: #fff;
+ font-weight: bold;
+ }
+ &__label {
+ font-size: 18PX;
+ color: #fff;
+ }
+ }
+ .bg-wrapper {
+ &:nth-child(1),
+ &:nth-child(2) {
+ .bg-item {
+ background: linear-gradient(136deg, #31bdff 0%, #1688fe 100%);
+ }
+ }
+ &:nth-child(3),
+ &:nth-child(4) {
+ .bg-item {
+ background: linear-gradient(135deg, #3ad1ea 0%, #01c0d6 100%);
+ }
+ }
+ &:nth-child(odd) {
+ .bg-item {
+ &::after {
+ background: url(~static/images/home/jrxse.png) no-repeat center/cover;
+ }
+ }
+ }
+ &:nth-child(even) {
+ .bg-item {
+ &::after {
+ background: url(~static/images/home/jrxszs.png) no-repeat center/cover;
+ }
+ }
+ }
+ }
+ .rate-container {
+ width: 100%;
+ height: 123PX;
+ background-color: #fff;
+ box-shadow: 0PX 2PX 12PX 0PX rgba(75, 76, 77, 0.1);
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 0 24PX;
+ margin-bottom: 24PX;
+ &::after {
+ content: '今日';
+ width: 59PX;
+ height: 24PX;
+ background-color: #dcedff;
+ font-size: 14PX;
+ color: $primary-color;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
+ &__title {
+ font-size: 20PX;
+ color: $main-title-color;
+ font-weight: bold;
+ margin-bottom: 10PX;
+ }
+ &__desc {
+ font-size: 16PX;
+ color: $sub-title-color;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ }
}
}
</style>
--
Gitblit v1.9.3