<template>
  <div class="custom-products">
    <template v-for="item in CardList.list" :key="item.label">
      <div class="products-label">
        {{ item.label }}
      </div>
      <!-- 再嵌一层for -->
      <div class="products-content-box">
        <template v-for="it in item.data" :key="it.title">
          <CustomCardTwo
            :img="it.img"
            :title="it.title"
            :content="it.content"
          ></CustomCardTwo>
        </template>
        <template v-for="(it, index) in item.data" :key="it.title">
          <i v-if="index !== item.data.length - 1"></i>
        </template>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import CustomCardTwo from '@/components/card2.vue';
import { reactive } from 'vue';
const CardList = reactive({
  // 这里将返回两层列表
  list: {
    commerce: {
      label: '电商',
      data: [
        {
          img: new URL('../../assets/img/clothes.jpeg', import.meta.url).href,
          title: '亚马逊工具',
          content: `
      产品主图制作、产品文案生成、模仿A+产品、五
点描述生成等......
      `,
        },
        {
          img: new URL('../../assets/img/clothes.jpeg', import.meta.url).href,
          title: '亚马逊工具',
          content: `
      产品主图制作、产品文案生成、模仿A+产品、五
点描述生成等......
      `,
        },
        {
          img: new URL('../../assets/img/clothes.jpeg', import.meta.url).href,
          title: '亚马逊工具',
          content: `
      产品主图制作、产品文案生成、模仿A+产品、五
点描述生成等......
      `,
        },
        {
          img: new URL('../../assets/img/clothes.jpeg', import.meta.url).href,
          title: '亚马逊工具',
          content: `
      产品主图制作、产品文案生成、模仿A+产品、五
点描述生成等......
      `,
        },
        {
          img: new URL('../../assets/img/clothes.jpeg', import.meta.url).href,
          title: '亚马逊工具',
          content: `
      产品主图制作、产品文案生成、模仿A+产品、五
点描述生成等......
      `,
        },
        {
          img: new URL('../../assets/img/clothes.jpeg', import.meta.url).href,
          title: '亚马逊工具',
          content: `
      产品主图制作、产品文案生成、模仿A+产品、五
点描述生成等......
      `,
        },
      ],
    },
    commerce2: {
      label: '亚马逊',
      data: [
        {
          img: new URL('../../assets/img/clothes.jpeg', import.meta.url).href,
          title: '亚马逊工具',
          content: `
      产品主图制作、产品文案生成、模仿A+产品、五
点描述生成等......
      `,
        },
      ],
    },
  },
});

// 产品页
</script>

<style lang="less">
@import '@/style/variables.less';
.custom-products {
  .products-label {
    font-weight: 700;
    font-size: @font-size-26;
    margin-top: @page-padding-top;
    margin-bottom: 20px;
  }
  .products-content-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 30px;
    i {
      width: 339px;
    }
  }
}
</style>
