website/pages/aboutUs.vue

<template>
  <div class="w-full h-screen relative">
    <picture class="absolute inset-0 z-0">
      <NuxtImg
        format="webp"
        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">
          <NuxtImg format="webp" :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:
      '    北京比特电科技术有限公司，简称（比特电科），专注于为电力储能提供设备软硬件服务，公司拥有多项发明专利及软著，通过了ISO9001质量体系。 公司以储能EMS产品为基础，提供从设计到运维，从边端到云端的的全链条专业服务。实现用户侧能源管理的全场景覆盖，为客户打造专业高效、经济省心、开放赋能的数智化能源管理解决方案，从而助力客户构筑自有产品的差异化竞争壁垒，共创生态多赢新格局。',
  },
  {
    title: '企业地址',
    icon: '/images/aboutUs/location.png',
    content: '北京市海淀区西二旗辉煌国际大厦西六号楼317室',
  },
  {
    title: '企业联系人',
    icon: '/images/aboutUs/user.png',
    content: '4000996200',
  },
]
</script>

<style scoped></style>