<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 pt-8 flex items-center justify-between">
        <div class="w-1/2  py-36">
          <div class="text-4xl font-semibold text-gray-800 ">存证服务</div>
          <div
            class="text-base text-contentMain mt-5"
          >面向开发者提供了一套自动化存证接口，无需人工录入数据，通过接口调用实现数据批量上链，提高工作效率、避免数据错误。</div>
          <div class="flex flex-row mt-6">
            <MainButton size="large" text="立即体验" />
          </div>
        </div>
        <img :src="getImgUrl('autoBanner')" class="w-1/2 pl-16" />
      </div>
    </div>
    <div class="functions py-16">
      <div  class="text-3xl text-gray-800 font-semibold text-center pb-8">接口功能</div>
      <div class="flex flex-row w-9/12 mx-auto pb-14">
        <div v-for="func in functionList" :key="func.id" class="px-8 w-1/3 justify-around">
          <svg-icon :iconClass="func.icon" class="w-12 h-12 mx-auto" />
          <div class="text-xl text-gray-800 font-semibold text-center">{{ func.title }}</div>
          <div class="text-base text-gray-500 pt-4 text-justify">{{ func.detail }}</div>
        </div>
      </div>
    </div>
    <div class="advantages bg-secondaryBlue pb-20 pt-4">
      <div  class="text-3xl text-gray-800 pt-16 font-semibold text-center pb-8">接口优势</div>
      <div class="flex flex-row w-9/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 class="framework py-16">
      <div  class="text-3xl text-gray-800 pt-16 font-semibold text-center pb-8">接口架构</div>
      <div class="bg-white flex flex-row w-8/12 mx-auto items-center py-16 border">
        <img src="@/assets/interfaceFramework.png" class="w-1/2 px-12" />
        <div class="w-1/2 text-sm text-gray-500 text-justify">支持失败重传机制，数据传输异常将持续重传，保障链上数据完整。</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MainButton from '@/components/mainButton.vue';
import { computed } from 'vue';
import { functionList, interfaceList } from "@/context/auto"
import myStyle from "@/assets/style/style.module.css"

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