<template>
  <div class="bg-white md:min-w-bodySet mx-auto">
    <div class="banner bg-gray-100">
      <div class="w-bodySet mx-auto pt-24 flex items-center">
        <div class="w-1/2 pl-36 py-36">
          <div class="text-4xl font-semibold text-headerMain">数字资产</div>
          <div
            class="text-base text-contentMain mt-5"
          >通过发行通证的方式将资产与通证锚定，实现资产数字化，让线下有价值属性的实物资产，在区块链上进行数字化呈现，促进资产流通，提升资产价值，实现共享经济。</div>
          <div class="flex flex-row mt-6">
            <MainButton size="large" text="立即体验" />
          </div>
        </div>
        <div class="w-1/2 pl-20">
          <img :src="getImgUrl('digitalAssetsBanner')" />
        </div>
      </div>
    </div>
    <div class="advantages bg-gray-100">
      <div class="text-center text-gray-800 text-3xl font-medium pt-10">产品功能</div>

      <div
        v-for="item in advantages"
        :key="item.id"
        class="pb-20 pt-10"
        :class="item.id % 2 == 0 ? ' bg-gray-100' : ' bg-gray-50 '"
      >
        <div
          class="flex items-center w-7/12 mx-auto justify-between"
          :class="item.id % 2 == 0 ? ' flex-row' : ' flex-row-reverse'"
        >
          <img :src="getImgUrl(item.icon)" class="w-1/2" />
          <div class="w-1/3">
            <div class=" text-xl text-gray-800 font-semibold">{{ item.title }}</div>
            <div class=" text-sm text-gray-500 pt-4 text-justify">{{ item.detail }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MainButton from '@/components/mainButton.vue';
import { computed } from 'vue';
import advantages from '@/context/digitalAssets'

const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})
</script>
