|
|
|
|
<template>
|
|
|
|
|
<div
|
|
|
|
|
class="mx-auto h-[824px] md:h-[358px] sm:h-[198px] 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" />
|
|
|
|
|
<img src="/images/about/bg_lg.png" loading="eager" class="size-full object-cover" />
|
|
|
|
|
</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">关于我们</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="text-white font-bold text-center mt-17 md:mt-5 sm:mt-3 text-[28px] md:text-2xl sm:text-xs max-w-[1440px] mx-auto relative z-20 break-all px-48 md:px-20 sm:px-10"
|
|
|
|
|
>
|
|
|
|
|
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="font-bold text-center mt-13 md:mt-5 sm:mt-3 text-3xl md:text-base sm:text-xs text-[#15A351]"
|
|
|
|
|
>
|
|
|
|
|
了解更多>>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-white relative py-[74px] md:py-[40px] sm:py-[10px]">
|
|
|
|
|
<div class="max-w-[1920px] m-auto relative">
|
|
|
|
|
<img
|
|
|
|
|
src="/images/about/mapBg.png"
|
|
|
|
|
class="relative inset-0 w-full h-full object-cover"
|
|
|
|
|
alt="公司地图背景"
|
|
|
|
|
/>
|
|
|
|
|
<div
|
|
|
|
|
class="w-[1172px] h-[300px] px-[95px] md:w-[780px] md:h-[180px] sm:w-[360px] sm:h-[80px] md:px-[20px] sm:px-[10px] 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-[100px] md:ml-[30px] sm:ml-[20px] 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">
|
|
|
|
|
<img
|
|
|
|
|
src="/images/about/location.png"
|
|
|
|
|
class="size-10 md:size-8 sm:size-4 mr-5 sm:mr-2"
|
|
|
|
|
alt="位置图标"
|
|
|
|
|
/>
|
|
|
|
|
<span class="block sm:hidden">来访地址：</span> 辉煌国际 北京市海淀区上地十街1号院
|
|
|
|
|
</div>
|
|
|
|
|
<div class="py-7 md:py-3 sm:py-1 border-t-[1px] border-[#979797] flex items-center">
|
|
|
|
|
<img
|
|
|
|
|
src="/images/about/phone.png"
|
|
|
|
|
class="size-10 md:size-8 sm:size-4 mr-5 sm:mr-2"
|
|
|
|
|
alt="电话图标"
|
|
|
|
|
/>
|
|
|
|
|
<span class="block sm:hidden">服务邮箱：</span> XXXXX@jsldjf.com
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup></script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
