<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-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('personalBanner')" />
        </div>
      </div>
    </div>
    <div class="product">
      <div class="text-center text-gray-800 text-3xl font-medium py-10">产品优势</div>
      <div class="flex flex-row flex-wrap w-6/12 mx-auto">
        <div v-for="item in productsList" :key="item.id" class="w-1/3 px-8 py-4">
          <svg-icon :iconClass="item.icon" class="w-14 h-14 mx-auto" />
          <div class="text-base text-gray-800 font-semibold text-center pt-1">{{ item.title }}</div>
          <div class="text-sm text-gray-500 text-justify pt-3">{{ item.detail }}</div>
        </div>
      </div>
    </div>
    <div class="interface bg-gray-100 pb-20 pt-4">
      <div class="text-center text-gray-800 text-3xl font-medium py-10">接口优势</div>
      <div class="flex flex-row w-8/12 flex-wrap mx-auto">
        <div class="w-1/2 px-6 py-6" v-for="i in interfaceList" :key="i.id">
          <div class=" bg-white border-l-4 border-mainBlue px-6 h-36 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>
</template>

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

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


</script>