<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 pr-32 mx-auto pt-14 h-480px box-content overflow-hidden flex justify-between items-center"
        >
          <div class="pr-24">
            <div class="text-4xl font-semibold text-headerMain pt-12">企业级溯源系统</div>
            <div
              class="text-base text-contentMain mt-5 pr-3"
            >基于区块链技术的存证溯源服务系统，面向企业和政府部门提供支持数据上链、流程化办公、任务协同、资产数字化的高级版存证溯源服务。</div>
            <div class="flex flex-row mt-7">
              <MainButton size="large" text="立即体验" @click="handleClick('https://slc.8n.cn/')" />
            </div>
          </div>
          <div class="pt-14">
            <svg-icon iconClass="companyBanner" width="510px" height="367px" />
          </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 px-44 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 h-20">{{ item.detail }}</div>
        </div>
      </div>
    </div>
    <div class="functions">
      <div class="text-3xl text-headerMain pt-16 font-semibold text-center pb-8">产品功能</div>
      <div
        v-for="item in functionList"
        :key="item.id"
        class="pb-24 pt-20"
        :class="item.id % 2 == 0 ? ' bg-white' : ' bg-gray-50 '"
      >
        <div
          class="flex items-center w-bodySet mx-auto justify-between pl-40 pr-32"
          data-aos="fade-up"
          data-aos-duration="600"
          data-aos-easing="ease-in-out-cubic"
          :class="item.id % 2 == 0 ? ' flex-row-reverse' : ' flex-row'"
        >
          <div :class="item.id % 2 == 0 ? 'pr-5 pl-14' : 'pl-5 pr-14'">
            <svg-icon :iconClass="item.icon" width="606" height="485" />
          </div>
          <div :class="item.id % 2 == 0 ? ' pl-20' : 'pr-20'">
            <div class="pt-2 text-headerMain text-2xl font-semibold">{{ item.title }}</div>
            <div class="text-sm text-contentMain pt-4 text-justify">{{ item.detail }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import MainButton from '@/components/mainButton.vue';
import { computed } from 'vue';
import { productsList, functionList } from '@/context/company'
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>

<style scoped>
.left {
  text-align: left !important;
}
</style>