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

<template>
  <div>
    <common current-name="agricultural">
      <template #main>
        <banner :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',
    title: '种子',
    children: [
      { pId: '01', id: '0101', title: '小麦种子' },
      { pId: '01', id: '0102', title: '水稻种子' },
      { pId: '01', id: '0103', title: '玉米种子' },
      { pId: '01', id: '0104', title: '番茄种子' },
      { pId: '01', id: '0105', title: '白菜种子' },
    ],
  },
  {
    id: '02',
    title: '肥料',
    children: [
      { pId: '02', id: '0101', title: '有机肥' },
      { pId: '02', id: '0102', title: '水溶肥' },
      { pId: '02', id: '0103', title: '天然肥料' },
    ],
  },
  {
    id: '03',
    title: '农药',
    children: [
      { pId: '03', id: '0101', title: '杀虫剂' },
      { pId: '03', id: '0102', title: '杀菌剂' },
      { pId: '03', id: '0103', title: '除草剂' },
      { pId: '03', id: '0104', title: '杀螨剂' },
    ],
  },
]);

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