<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-32 mx-auto pt-14 h-480px box-content flex justify-between items-center">
          <div class="pr-24">
            <div class="text-4xl font-semibold text-headerMain">通证版商城-上链购</div>
            <div
              class="text-base text-contentMain mt-5 pr-3"
            >结合区块链技术，打破传统电商模式，集成商品数字化+商品溯源+区块链提货券+区块链商家积分+数字资产交易模块，构建数字商务全新业态。</div>
            <div class="flex flex-row mt-7">
              <MainButton size="large" text="立即体验" @click="handleClick('https://slg.8n.cn/#/')" />
            </div>
          </div>

          <svg-icon iconClass="mailBanner" width="750" height="314" />
        </div>
      </div>
    </div>
    <div class="product w-bodySet mx-auto">
      <div class="text-3xl text-headerMain pt-12 font-semibold text-center pb-20">产品优势</div>
      <div class="grid grid-cols-3 grid-rows-1 px-44 mx-auto pb-24 gap-x-40 gap-y-16">
        <div v-for="func in productCharacters" :key="func.id">
          <svg-icon :iconClass="func.icon" class="w-14 h-14 mx-auto" />
          <div class="pt-2 text-headerMain text-xl font-semibold text-center">{{ func.title }}</div>
          <div class="text-sm text-contentMain text-center pt-3 h-20">{{ func.detail }}</div>
        </div>
      </div>
    </div>
    <div class="advantages bg-secondaryBlue pb-20 pt-11">
      <div class="text-3xl text-headerMain font-semibold text-center pb-10">产品优势</div>
      <div class="grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-5 w-bodySet mx-auto px-28">
        <div class v-for="i in advantageList" :key="i.id">
          <div class="bg-white border-l-4 border-blue-600 px-12 h-56 hover:shadow-homeCardShadow">
            <div class="pt-12 text-headerMain text-lg font-semibold">{{ i.title }}</div>
            <div class="text-sm text-contentMain text-justify pt-2">{{ i.detail }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="introduction pb-24 w-bodySet mx-auto">
      <div class="text-3xl text-headerMain font-semibold text-center pt-20 pb-16">产品介绍</div>
      <div class="sticky top-15">
        <svg-icon iconClass="mailBg" width="740" height="752" />
      </div>

      <div class="relative z-10 -mt-7/10-screen w-bodySet pl-52 pr-64">
        <div
          class="flex flex-row justify-between py-16 items-center w-full"
          v-for="item in introductions"
          :key="item.id"
        >
          <div class="w-1/3 bg-white px-8 py-14">
            <div class="text-xl text-headerMain font-semibold">{{ item.title }}</div>
            <div class="text-sm text-contentMain pt-4 text-justify">{{ item.detail }}</div>
          </div>
          <div class="flex justify-end">
            <img :src="getImgUrl(item.png)" class="w-1/2" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MainButton from '@/components/mainButton.vue';
import { computed } from 'vue';
import { productCharacters, advantageList, introductions } from "@/context/mail"
import myStyle from "@/assets/style/style.module.css"
const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})

const handleClick = (url: string) => {
  window.open(url)
}
</script>