<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('autoBanner')" />
        </div>
      </div>
    </div>
    <div class=" py-16">
      <div class="text-4xl font-semibold text-headerMain text-center ">接口功能</div>
      <div class="functions flex flex-row w-7/12 mx-auto py-14">
        <div v-for="func in functionList" :key="func.id" class="px-12 w-1/3 justify-around">
          <svg-icon :iconClass="func.icon" class="w-12 h-12 mx-auto" />
          <div class="text-center text-base font-semibold pt-1">{{ func.title }}</div>
          <div class="text-sm text-gray-500 text-justify pt-2">{{ func.detail }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MainButton from '@/components/mainButton.vue';
import { computed } from 'vue';
import { functionList } from "@/context/auto"

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