<template>
  <div class="bg-white md:min-w-bodySet mx-auto">
    <div class="banner bg-gradient-to-r from-white to-bannerBgEndColor">
      <div class=" w-9/12 mx-auto flex items-center justify-between">
        <div class="w-1/2 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="立即体验"  @click="handleClick('https://slg.8n.cn')"/>
          </div>
        </div>
       
          <img :src="getImgUrl('mailBanner')" class=" w-1/3" />
       
      </div>
    </div>
    <div class="functions py-16">
      <div class="text-3xl text-headerMain  font-semibold text-center pb-8">产品特色</div>
      <div class="flex flex-row w-8/12 mx-auto pb-14">
        <div v-for="func in productCharacters" :key="func.id" class="px-12 w-1/3 justify-around">
          <svg-icon :iconClass="func.icon" class="w-14 h-14 mx-auto" />
          <div class="pt-2 text-headerMain" :class="myStyle.secondHeader">{{ func.title }}</div>
          <div class="text-sm text-gray-500 text-center pt-2">{{ func.detail }}</div>
        </div>
      </div>
    </div>
    <div class="advantages bg-secondaryBlue pb-20 pt-4">
      <div class="text-3xl text-headerMain  font-semibold text-center pt-10">产品优势</div>
      <div class="flex flex-row w-9/12 flex-wrap mx-auto pt-8">
        <div class="w-1/2 px-6 py-6" v-for="i in advantageList" :key="i.id">
          <div class="bg-white border-l-4 border-mainBlue px-6 h-48 shadow-lg">
            <div class="pt-8 text-gray-800 text-lg font-semibold">{{ i.title }}</div>
            <div class="text-sm text-gray-500 text-justify pt-2">{{ i.detail }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="introduction pb-24">
      <div class="text-3xl text-headerMain  font-semibold text-center py-16">产品介绍</div>
      <img :src="getImgUrl('mailBg')" class="sticky top-16 w-1/2 " />

      <div class=" relative z-10 -mt-7/10-screen w-8/12 mx-auto">
        <div class="flex flex-row justify-between py-16 items-center " v-for="item in introductions" :key="item.id">
          <div class="w-1/3 bg-white px-8 py-14">
            <div class="text-xl text-gray-800 font-semibold">{{ item.title }}</div>
            <div class="text-sm text-gray-500 pt-5 text-justify">{{ item.detail }}</div>
          </div>
          <div class="w-1/2 px-36 ">
            <img :src="getImgUrl(item.png)" />
          </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>