freight-web/src/PagesStatistics/index.vue

<template>
  <Box>
    <view v-for="(item, index) in list" :key="index">
      <view class="title">
        <Title :title="item.title" />
      </view>
      <view class="box-content">
        <view v-for="(child, index) in item.child" :key="index" @click="(child as any).fn(child)">
          <view>
            <up-image
              :src="`/static/img/statistic/${child.icon}`"
              :width="child.width"
              :height="child.height"
              mode="aspectFill"
            ></up-image>
          </view>
          <view>{{ child.title }}</view>
        </view>
      </view>

      <view class="line" v-show="index < list.length -1"></view>
    </view>
  </Box>
</template>
<script setup lang="ts">
import Box from "@/components/Box/index.vue";
import Title from "@/components/Title/index.vue";
const list = reactive([
  {
    title: "收货",
    child: [
      {
        icon: "1-1.png",
        width: "42.31rpx",
        height: "50rpx",
        title: "收货汇总",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/receivePanel", // 要跳转到的页面路径
          })
        }
      },
      {
        icon: "1-2.png",
        width: "44.23rpx",
        height: "44.23rpx",
        title: "供应商排行",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/supplierRanking", // 要跳转到的页面路径
          })
        }
        
      },
    ],
  },
  {
    title: "出货",
    child: [
      {
        icon: "2-1.png",
        width: "42.31rpx",
        height: "50rpx",
        title: "出货汇总",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/shipmentPanel", // 要跳转到的页面路径
          })
        }
      },
      {
        icon: "2-2.png",
        width: "46.15rpx",
        height: "46.15rpx",
        title: "客户排行",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/customerRanking", // 要跳转到的页面路径
          })
        }
      },
    ],
  },
  {
    title: "账本",
    child: [
      {
        icon: "3-1.png",
        width: "46.15rpx",
        height: "46.79rpx",
        title: "经营概况",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/businessOverview", // 要跳转到的页面路径
          })
        }
      },
      {
        icon: "3-2.png",
        width: "48.08rpx",
        height: "44.23rpx",
        title: "供应商对账",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/supplierChecking", // 要跳转到的页面路径
          })
        }
      },
      {
        icon: "3-3.png",
        width: "43.59rpx",
        height: "43.59rpx",
        title: "客户对账",
        fn: (item: any) => {
          uni.navigateTo({
            url: "/pagesStatistics/customerChecking", // 要跳转到的页面路径
          })
        }
      },
    ],
  },
]);
</script>
<style lang="scss" scoped>
.title {
  line-height: 80rpx;
  padding: 0rpx 19.87rpx;
}
.box-content {
  display: flex;
  margin: 21rpx 0rpx;
  padding: 0rpx 19.87rpx;
  > view {
    width: 141rpx;
    height: 141rpx;
    background: #f9f9f9;
    border-radius: 26rpx;
    // text-align: center;
    // vertical-align: middle;
    // display: grid;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    > view {
      display: grid;
      place-content: center;
      width: 100%;
    }
  }
  > view + view {
    margin-left: 32.05rpx;
  }
  ::v-deep .u-transition {
    align-items: center;
  }
}
.line {
  height: 18rpx;
  background: #f8f8f8;
}
</style>