<template>
  <div class="bg-white md:min-w-bodySet mx-auto">
    <div class="banner bg-gradient-to-r from-bannerBgStartColor to-bannerBgEndColor">
      <div class="w-bodySet mx-auto">
        <div
          class="pl-48 pr-11 mx-auto pt-14 h-480px box-content overflow-hidden flex justify-between items-center"
        >
          <div class="w-1/2">
            <div class="text-4xl font-semibold text-headerMain">数字资产</div>
            <div
              class="text-base text-contentMain mt-5 pr-7"
            >通过发行通证的方式将资产与通证锚定，实现资产数字化，让线下有价值属性的实物资产，在区块链上进行数字化呈现，促进资产流通，提升资产价值，实现共享经济。</div>
          </div>
          <div class="pt-12">
            <svg-icon iconClass="digitalAssetsBanner" width="649px" height="490px" />
          </div>
        </div>
      </div>
    </div>

    <div class="advantages bg-white">
      <div class="text-4xl text-headerMain pt-16 font-semibold text-center">数字资产优势</div>
      <div
        v-for="item in advantages"
        :key="item.id"
        class="pb-14 pt-20"
        :class="item.id % 2 == 0 ? ' bg-white' : ' bg-gray-50 '"
      >
        <div
          class="flex w-bodySet mx-auto justify-between px-40"
          data-aos="fade-up"
          data-aos-duration="600"
          data-aos-easing="ease-in-out-cubic"
          :class="item.id % 2 == 0 ? ' flex-row-reverse' : ' flex-row'"
        >
          <svg-icon :iconClass="item.icon" width="552px" height="436px" />
          <div class="w-1/2 px-20 pt-28">
            <div class="text-3xl text-headerMain font-semibold">{{ item.title }}</div>
            <div class="text-sm text-contentMain pt-8 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>
