fashion-ssr-vue3/components/business/goods/attribute.vue

<!-- @format -->

<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      properties: [
        {
          chinaName: 'Color',
        },
      ],
    }),
  },
})
const is_open = ref(false)
const propertiesList = computed(() => {
  const originList = props.data?.propertiesList
  if (!originList)
    return []
  const list = originList?.filter((item: any) => item.englishName)
  if (list.length > 9)
    return list.slice(0, 9)

  return list
})
</script>

<template>
  <div>
    <div
      class="text-16px fw-700 flex items-center cursor-pointer mb-20px"
      @click="is_open = !is_open"
    >
      Other attributes
      <svgo-arrow-rotate
        class="!w-18px !h-18px ml-10px"
        :class="is_open ? 'rotate-180' : ''"
      />
    </div>
    <div
      v-show="is_open && propertiesList && propertiesList.length"
      class="grid w-1400px grid-cols-3"
    >
      <div v-for="item in propertiesList" :key="item.id" class="py-10px flex">
        <div class="w-auto text-#999">
          {{
            item.englishName
          }}&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div class="text-#333">
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped></style>