<template>
  <div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px]">
    <div class="max-w-[1920px] m-auto relative">
      <NuxtImg
        src="/images/about/mapBg.png"
        class="relative inset-0 w-full h-full object-cover"
        alt="公司地图背景"
        format="webp"
      />
      <div
        class="w-[1172px] h-[300px] px-[60px] md:w-[780px] md:h-[180px] sm:w-[362px] sm:h-[80px] md:px-[20px] sm:px-[8px] bg-white absolute bottom-5 md:bottom-2 sm:bottom-1 left-1/2 -translate-x-1/2 flex items-center"
      >
        <div>
          <div class="flex flex-col">
            <div class="relative">
              <span
                class="text-[#CBCBCB] text-[78px] md:text-[48px] sm:text-base font-bold opacity-35"
                >CONTACT</span
              >
              <h4 class="text-[26px] md:text-[18px] sm:text-xs absolute top-1/3 text-[#424242]">
                联系我们
              </h4>
            </div>
            <p class="text-xl text-[#6B6B6B] md:text-base sm:text-[8px] sm:leading-[8px] sm:mt-2">
              欢迎与我们取得联系,我们将竭诚为您服务
            </p>
          </div>
        </div>
        <div
          class="flex flex-1 flex-col ml-[80px] md:ml-[30px] sm:ml-[8px] text-[#424242] text-xl md:text-base sm:text-[8px] sm:leading-[8px]"
        >
          <div class="py-7 md:py-3 sm:py-1 flex items-center">
            <NuxtImg
              src="/images/about/location.png"
              class="size-10 md:size-8 sm:size-4 mr-5 sm:mr-2"
              alt="位置图标"
              format="webp"
            />
            <span class="block sm:hidden">来访地址：</span>
            北京市海淀区西二旗辉煌国际大厦西六号楼317室
          </div>
          <div class="py-7 md:py-3 sm:py-1 border-t-[1px] border-[#E5E5E5] flex items-center">
            <NuxtImg
              src="/images/about/phone.png"
              class="size-10 md:size-8 sm:size-4 mr-5 sm:mr-2"
              alt="电话图标"
              format="webp"
            />
            <span class="block sm:hidden">联系电话</span> 4000996200
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mx-auto h-[824px] md:h-auto sm:h-auto bg-cover bg-no-repeat overflow-hidden relative">
    <picture class="absolute inset-0 z-0">
      <source media="(max-width: 1024px)" srcset="/images/about/bg_sm.png" />
      <source media="(max-width: 1025px)" srcset="/images/about/bg_lg.png" />
      <NuxtImg
        src="/images/about/bg_lg.png"
        loading="eager"
        class="size-full object-cover"
        format="webp"
      />
    </picture>
    <div
      class="text-white font-bold text-center mt-[198px] md:mt-[42px] sm:mt-[20px] flex flex-col items-center relative z-20"
    >
      <span class="text-7xl md:text-6xl sm:text-3xl opacity-35">ABUOT</span>
      <span class="text-4xl md:text-4xl sm:text-base relative -top-8 sm:-top-6">关于我们</span>
    </div>
    <div
      class="text-white text-center mt-17 md:mt-5 sm:mt-3 text-xl md:text-xl sm:text-xs max-w-[1440px] mx-auto relative z-20 break-all px-52 pb-48 md:pb-20 sm:pb-10 md:px-20 sm:px-10"
    >
      北京比特电科技术有限公司，简称（比特电科），专注于为电力储能提供设备软硬件服务，公司拥有多项发明专利及软著，通过了ISO9001质量体系。公司以储能EMS产品为基础，提供从设计到运维，从边端到云端的的全链条专业服务。实现用户侧能源管理的全场景覆盖，为客户打造专业高效、经济省心、开放赋能的数智化能源管理解决方案，从而助力客户构筑自有产品的差异化竞争壁垒，共创生态多赢新格局。
    </div>
  </div>
</template>

<script setup></script>

<style scoped></style>
