首页样式优化

mayf

2024-11-01 eec3d6bbda82271d81a5f3128ce62b70e3978e95

首页样式优化

 nuxt.config.js

@@ -138,6 +138,20 @@
        'postcss-preset-env': {},
        tailwindcss: {},
        cssnano: { preset: 'default' },
        'postcss-px-to-viewport': {
          unitToConvert: 'PX', // 要转化的单位
          viewportWidth: 1920, // UI设计稿的宽度
          unitPrecision: 5, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: [], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          landscape: false, // 是否处理横屏情况
          exclude: [/assets\/element-variables.scss/],
        },
      },
      preset: {
        autoprefixer: {},

 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>

 static/images/home/ddgl.png

 static/images/home/dfh.png

 static/images/home/down.png

 static/images/home/dshcl.png

 static/images/home/dshsp.png

 static/images/home/gysdtx.png

 static/images/home/gysytx.png

 static/images/home/jrxse.png

 static/images/home/jrxszs.png

 static/images/home/spgl.png

 static/images/home/up.png

 static/images/home/yhgl.png

 static/images/home/zssp.png