<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="px-48 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 class="flex flex-row mt-7">
              <MainButton size="large" text="立即体验" @click="handleClick('https://sy.8n.cn/')" />
            </div>
          </div>
          <div class=" pt-16">
            <svg-icon iconClass="personalBanner" width="413px" height="447px" />
          </div>
        </div>
      </div>
    </div>
    <div class="product w-bodySet mx-auto">
      <div class="text-3xl text-headerMain pt-14 font-semibold text-center pb-20">产品优势</div>
      <div class="grid grid-cols-3 grid-rows-2 w-9/12 mx-auto pb-24 gap-x-40 gap-y-16">
        <div v-for="item in productsList" :key="item.id">
          <svg-icon :iconClass="item.icon" class="w-14 h-14 mx-auto" />
          <div class="pt-2 text-headerMain text-xl font-semibold text-center">{{ item.title }}</div>
          <div class="text-sm text-contentMain text-justify pt-3">{{ item.detail }}</div>
        </div>
      </div>
    </div>
    <div class="interface bg-secondaryBlue pb-32 pt-11">
      <div class="text-3xl text-headerMain font-semibold text-center pb-10">接口优势</div>
      <div class="grid grid-cols-2 grid-rows-3 gap-y-6 gap-x-5 w-bodySet mx-auto px-28">
        <div class v-for="i in interfaceList" :key="i.id">
          <div class="bg-white border-l-4 border-blue-600 px-12 h-44 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>
</template>

<script lang="ts" setup>
import MainButton from '@/components/mainButton.vue';
import { computed } from 'vue';
import { productsList, interfaceList } from '@/context/personal'
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>