<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="pl-48 mx-auto pt-14 h-480px box-content flex justify-between items-center">
          <div class>
            <div class="text-4xl font-semibold text-headerMain">存证服务</div>
            <div class="text-base text-contentMain mt-5 pr-3">
              面向开发者提供了一套自动化存证接口，无需人工录入数据，通过接口
              <br />调用实现数据批量上链，提高工作效率、避免数据错误。
            </div>
          </div>

          <svg-icon iconClass="autoBanner" width="719" height="474" />
        </div>
      </div>
    </div>
    <div class="function w-bodySet mx-auto">
      <div class="text-3xl text-headerMain pt-12 font-semibold text-center pb-20">接口功能</div>
      <div class="grid grid-cols-3 grid-rows-1 px-44 mx-auto pb-24 gap-x-40 gap-y-16">
        <div v-for="item in functionList" :key="item.id">
          <svg-icon :iconClass="item.icon" class="w-14 h-14 mx-auto" />
          <div :class="myStyle.secondHeader">{{ item.title }}</div>
          <div class="text-sm text-contentMain text-justify pt-3 h-20">{{ item.detail }}</div>
        </div>
      </div>
    </div>
    <div class="interface bg-secondaryBlue pb-20 pt-11">
      <div class="text-3xl text-headerMain font-semibold text-center pb-10">接口优势</div>
      <div class="grid grid-cols-2 grid-rows-2 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 pb-2 hover:shadow-homeCardShadow"
          >
            <div class="pt-12  text-headerMain text-xl font-semibold">{{ i.title }}</div>
            <div class="text-sm text-contentMain text-justify pt-2">{{ i.detail }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="framework pb-32 w-bodySet px-28 mx-auto">
      <div class="text-3xl text-gray-800 font-semibold text-center py-12">接口架构</div>
      <div class="bg-white flex flex-row mx-auto  p-8 pr-36 border justify-between items-center">
        <svg-icon iconClass="if" width="486" height="365" />
        <div
          class=" w-96 text-sm text-contentMain text-justify pt-1 "
        >本平台采用分层提供服务支持的设计思想，可将系统简化分为数据服务层，区块链层，逻辑处理层，业务表现层。系统内的每一层都有明确的接口定义，同时在层次内实现组件化的接口实现。层次化、模块组件化的实现，使系统具备了最大程度的灵活度，从而能对业务需求的变化作出快速的反应，使系统具有很好的扩展性。表现层支持app，h5和小程序各种主流应用，表现层通过api接口与逻辑处理服务层通信，逻辑处理服务层与数据存储层交互完成用户私有信息的检验存储，逻辑处理服务层与区块链层的交互，完成数据上链和查询。</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
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>