<template>
  <div class="w-full h-[888px] md:h-screen sm:h-screen relative">
    <picture class="absolute inset-0 z-0">
      <img src="/images/aboutUs/bg.png" loading="eager" class="size-full object-cover" />
    </picture>
    <div
      class="relative z-10 w-full max-w-[1440px] mx-auto h-[calc(100%-68px)] flex items-center md:flex-col md:justify-center md:px-17 sm:flex-col sm:justify-center sm:px-8 text-white"
    >
      <div class="pl-56 pr-[188px] relative">
        <span class="text-[78px] sm:text-[38px] font-bold opacity-35">ABOUT</span>
        <h2
          class="text-[44px] sm:text-[24px] font-bold absolute bottom-0 left-1/2 -translate-x-[40%]"
        >
          关于我们
        </h2>
      </div>
      <div class="flex flex-col gap-16 md:mt-14 sm:mt-7 sm:gap-8">
        <div v-for="(item, index) in aboutUs" :key="index" class="flex">
          <img :src="item.icon" class="size-10 mr-4" />
          <div>
            <h4 class="text-2xl font-bold">{{ item.title }}</h4>
            <p class="text-lg text-[#BBBBBB] mt-4">{{ item.content }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
useSeoMeta({
  title: '关于我们-比特电科',
  description: '关于我们-比特电科',
})

const aboutUs = [
  {
    title: '公司简介',
    icon: '/images/aboutUs/company.png',
    content:
      '比特电科是一家专注于提供EM系列储能边缘智能网关，为工业控制、能源管理提供高性能、高可靠性的解决方案。',
  },
  {
    title: '企业地址',
    icon: '/images/aboutUs/location.png',
    content: '北京市海淀区上地十街1号院',
  },
  {
    title: '企业联系人',
    icon: '/images/aboutUs/user.png',
    content: '8888-88888888',
  },
]
</script>

<style scoped></style>
