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.
90 lines
3.8 KiB
90 lines
3.8 KiB
<template> |
|
<div class="relative h-[976px] mt-17 sm:h-[688px] md:h-[1400px] md:mt-6 sm:mt-3"> |
|
<h2 class="title-font pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] relative z-10">设备接口</h2> |
|
<picture class="absolute inset-0 z-0"> |
|
<source media="(max-width: 1024px)" :srcset="'/images/deviceInterface/bg_sm.png'" /> |
|
<source media="(max-width: 1025px)" :srcset="'/images/deviceInterface/bg_lg.png'" /> |
|
<img src="/images/deviceInterface/bg_lg.png" loading="eager" class="size-full object-cover" /> |
|
</picture> |
|
<div class="relative w-full h-[calc(100%-136px)] z-20 text-white max-w-[1440px] mx-auto px-4"> |
|
<Tabs default-value="BK-2000" class="relative"> |
|
<TabsList class="bg-transparent gap-x-4 w-full"> |
|
<TabsTrigger value="BK-1000" class="tabs-trigger"> BK-1000 </TabsTrigger> |
|
<TabsTrigger value="BK-2000" class="tabs-trigger"> BK-2000 </TabsTrigger> |
|
</TabsList> |
|
|
|
<TabsContent value="BK-1000" class="size-full"> |
|
<ClientOnly> |
|
<!-- background-position-x: -20px; --> |
|
<div |
|
style="background-image: url('/images/deviceInterface/head_bg.png')" |
|
class="tabs-content-head [background-position-x:-20px] sm:[background-position-x:-10px]" |
|
> |
|
<span class="text-white text-xl md:text-xl sm:text-[10px] font-bold" |
|
>BK-1000 参数表</span |
|
> |
|
</div> |
|
<div class="tabs-content-devices"> |
|
<img |
|
src="/images/deviceInterface/bk1000a.png" |
|
loading="eager" |
|
class="tabs-content-img" |
|
/> |
|
<img |
|
src="/images/deviceInterface/bk1000b.png" |
|
loading="eager" |
|
class="tabs-content-img" |
|
/> |
|
</div> |
|
</ClientOnly> |
|
</TabsContent> |
|
<TabsContent value="BK-2000" class="size-full"> |
|
<ClientOnly> |
|
<div |
|
style="background-image: url('/images/deviceInterface/head_bg.png')" |
|
class="tabs-content-head [background-position-x:-20px] sm:[background-position-x:-10px]" |
|
> |
|
<span class="text-white text-xl md:text-xl sm:text-[10px] font-bold" |
|
>BK-2000 参数表</span |
|
> |
|
</div> |
|
<div class="tabs-content-devices"> |
|
<img |
|
src="/images/deviceInterface/bk2000a.png" |
|
loading="eager" |
|
class="tabs-content-img" |
|
/> |
|
|
|
<img |
|
src="/images/deviceInterface/bk2000b.png" |
|
loading="eager" |
|
class="tabs-content-img" |
|
/> |
|
</div> |
|
</ClientOnly> |
|
</TabsContent> |
|
</Tabs> |
|
</div> |
|
</div> |
|
</template> |
|
<script setup lang="ts"> |
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' |
|
</script> |
|
<style> |
|
.tabs-trigger { |
|
@apply relative bg-transparent text-2xl text-[rgba(255,255,255,0.55)] md:text-2xl sm:text-sm |
|
after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1 after:w-auto after:origin-top-right after:scale-x-0 |
|
after:bg-gradient-to-r from-[#11974A] to-[#23C669] |
|
data-[state=active]:text-[#15A351] |
|
after:transition-[transform] after:duration-300 after:content-[''] data-[state=active]:after:origin-top-left data-[state=active]:after:scale-x-100; |
|
} |
|
.tabs-content-head { |
|
@apply w-[446px] h-[50px] bg-cover bg-no-repeat flex items-center pl-15 mt-13 md:pl-10 sm:pl-5 md:w-[350px] md:h-[44px] md:mt-6 sm:w-[176px] sm:h-[22px] sm:mt-3; |
|
} |
|
.tabs-content-devices { |
|
@apply flex gap-21 justify-center mt-17 md:items-center md:mt-[1.8rem] sm:gap-24 sm:mt-10 md:flex-col sm:flex-col md:gap-32; |
|
} |
|
.tabs-content-img { |
|
@apply object-cover w-[700px] sm:w-[274px] mx-auto; |
|
} |
|
</style>
|
|
|