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.
56 lines
1.8 KiB
56 lines
1.8 KiB
<template> |
|
<div class="w-full 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>
|
|
|