daimp-front/sub-operation-service/src/views/ecommerce/supplier.vue

<template>
  <div>
    <common current-name="supplier">
      <template #main>
        <banner name="supplier" :imglist="bannerList"></banner>
        <filtertop :list="treeList"></filtertop>
        <div class="goods-list-warp">
          <div class="goods-list">
            <template v-for="(n, index) in 16" :key="index">
              <div class="goods-item">
                <goodsItem></goodsItem>
              </div>
            </template>
          </div>
        </div>
      </template>
    </common>
  </div>
</template>
<script setup name="ecommerce">
import common from './components/common.vue';
import banner from './components/banner.vue';
import filtertop from './components/filtertop.vue';
import goodsItem from './components/goodsItem.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';
let treeList = reactive([
  {
    id: '01',
    name: '农产品',
    children: [
      {
        parentId: '01',
        id: '0101',
        name: '植物性农产品',
        children: [
          { parentId: '0101', id: '010101', name: '谷物' },
          { parentId: '0101', id: '010102', name: '蔬菜' },
          { parentId: '0101', id: '010103', name: '水果' },
          { parentId: '0101', id: '010104', name: '坚果与油料作物' },
          { parentId: '0101', id: '010105', name: '糖料作物' },
          { parentId: '0101', id: '010106', name: '纤维作物' },
          { parentId: '0101', id: '010107', name: '茶叶' },
          { parentId: '0101', id: '010108', name: '咖啡' },
          { parentId: '0101', id: '010109', name: '香料' },
        ],
      },
      {
        parentId: '01',
        id: '0102',
        name: '动物性农产品',
        children: [
          { parentId: '0102', id: '010201', name: '肉类' },
          { parentId: '0102', id: '010202', name: '奶制品' },
          { parentId: '0102', id: '010203', name: '蛋类' },
          { parentId: '0102', id: '010204', name: '蜂蜜' },
          { parentId: '0102', id: '010205', name: '水产品' },
        ],
      },
      {
        parentId: '01',
        id: '0103',
        name: '特殊农产品',
        children: [
          { parentId: '0103', id: '010301', name: '花卉与苗木' },
          { parentId: '0103', id: '010302', name: '药材' },
          { parentId: '0103', id: '010303', name: '菌类' },
        ],
      },
      {
        parentId: '01',
        id: '0104',
        name: '其他',
        children: [{ parentId: '0104', id: '010401', name: '饲料' }],
      },
    ],
  },
  {
    id: '02',
    name: '种子种苗',
    children: [
      {
        parentId: '02',
        id: '0101',
        name: '花卉种子种苗',
        children: [
          { parentId: '0101', id: '010101', name: '草本花卉' },
          { parentId: '0101', id: '010102', name: '木本花卉' },
          { parentId: '0101', id: '010103', name: '野生花卉' },
        ],
      },
      {
        parentId: '02',
        id: '0102',
        name: '蔬菜种子种苗',
        children: [
          { parentId: '0102', id: '010201', name: '叶菜类' },
          { parentId: '0102', id: '010202', name: '根茎类' },
          { parentId: '0102', id: '010203', name: '果实类' },
          { parentId: '0102', id: '010204', name: '豆类' },
          { parentId: '0102', id: '010205', name: '瓜类' },
        ],
      },
      {
        parentId: '02',
        id: '0103',
        name: '果树种苗',
        children: [
          { parentId: '0103', id: '010301', name: '柑橘类' },
          { parentId: '0103', id: '010302', name: '仁果类' },
          { parentId: '0103', id: '010303', name: '核果类' },
          { parentId: '0103', id: '010304', name: '浆果类' },
        ],
      },
      {
        parentId: '02',
        id: '0104',
        name: '药材种子与种苗',
        children: [
          { parentId: '0104', id: '010401', name: '寒地龙药' },
          { parentId: '0104', id: '010402', name: '常见中药材' },
        ],
      },
      {
        parentId: '02',
        id: '0105',
        name: '其他作物',
        children: [
          { parentId: '0105', id: '010501', name: '牧草' },
          { parentId: '0105', id: '010502', name: '经济作物' },
          { parentId: '0105', id: '010503', name: '观赏树木' },
        ],
      },
    ],
  },
]);

let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']);
</script>
<style lang="scss" scoped>
.goods-list-warp {
  margin-top: 16px;
  width: 100%;
  .goods-list {
    display: inline-flex;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    .goods-item {
      display: inline-block;
      overflow: hidden;
      margin-bottom: 16px;
      width: calc((100% - 50px) / 5);
      border-radius: 16px;
      background: $color-fff;
    }
  }

  /* 添加伪元素占位 */
  .goods-list::after {
    content: '';
    flex: auto;
  }
}
</style>