You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
<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>
|