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.
129 lines
4.4 KiB
129 lines
4.4 KiB
<template> |
|
<div> |
|
<div class="h-[888px] w-full md:h-[710px] sm:h-[410px]"> |
|
<div |
|
class="size-full relative flex overflow-hidden items-center md:items-start sm:items-start" |
|
> |
|
<picture class="absolute w-full h-full left-0 top-0 -z-10"> |
|
<source media="(max-width: 1024px)" :srcset="slide.bgSm" /> |
|
<source media="(max-width: 1025px)" :srcset="slide.bgLg" /> |
|
<img :src="slide.bgLg" loading="eager" class="size-full object-cover" /> |
|
</picture> |
|
<div |
|
class="w-[1440px] md:w-[870px] sm:w-[300px] md:h-[calc(100%-200px)] sm:top-19 relative mx-auto flex md:justify-center sm:justify-center sm:pt-10" |
|
> |
|
<div |
|
class="flex flex-col gap-10 sm:gap-3 text-white justify-center items-center w-[398px]" |
|
> |
|
<h2 |
|
class="text-5xl md:text-[40px] md:leading-[40px] sm:text-[20px] sm:leading-[20px] font-bold" |
|
> |
|
{{ slide.title }} |
|
</h2> |
|
<div |
|
class="text-4xl md:text-[28px] md:leading-[28px] sm:text-xs overflow-hidden font-bold bg-gradient-to-r from-[#69AA25] to-[#13A892] w-[328px] h-[48px] md:w-[258px] sm:w-[130px] sm:h-[24px] rounded-full flex items-center justify-center" |
|
> |
|
{{ slide.subtitle }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div |
|
class="h-[888px] max-w-[1440px] md:max-w-[750px] sm:max-w-[320px] w-full relative mx-auto pt-[136px] md:pt-[48px] sm:pt-[24px]" |
|
> |
|
<div v-for="item in slide.content" :key="item.title" class="flex md:flex-col sm:flex-col"> |
|
<div class="px-[12%] md:px-0 sm:px-0 md:pt-12 sm:pt-6 md:pb-23 sm:pb-11"> |
|
<h3 class="text-5xl sm:text-2xl font-bold text-[#414141] md:text-center sm:text-center"> |
|
{{ item.title }} |
|
</h3> |
|
</div> |
|
<div class="flex-1 grid grid-cols-2 md:hidden sm:hidden"> |
|
<div v-for="column in item.info" :key="column.column" class="flex flex-col"> |
|
<div v-for="info in column.items" :key="info.label" class="min-h-[160px]"> |
|
<div class="text-3xl font-bold text-[#17A755] mb-5">{{ info.label }}</div> |
|
<p |
|
v-for="value in info.value" |
|
:key="value" |
|
class="text-[18px] text-[#6F6F6F] font-[400]" |
|
> |
|
{{ value }} |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="hidden md:block sm:block"> |
|
<div |
|
v-for="column in item.info" |
|
:key="column.column" |
|
class="flex flex-wrap md:gap-5 sm:gap-1" |
|
> |
|
<div |
|
v-for="info in column.items" |
|
:key="info.label" |
|
class="md:min-h-[182px] md:max-w-[640px] sm:max-w-[320px] sm:min-h-[92px] md:min-w-[200px] sm:min-w-[100px]" |
|
:class="{ 'flex-1': column.column === 1 }" |
|
> |
|
<div class="text-3xl sm:text-base font-bold text-[#17A755] mb-5"> |
|
{{ info.label }} |
|
</div> |
|
<p |
|
v-for="value in info.value" |
|
:key="value" |
|
class="text-[18px] sm:text-[10px] sm:leading-[10px] text-[#6F6F6F] font-[400]" |
|
> |
|
{{ value }} |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
const slide = { |
|
bgLg: '/images/banner/bk1000.png', |
|
bgSm: '/images/banner/bk1000_sm.png', |
|
title: '储能工业控制主机', |
|
subtitle: 'BK-1000', |
|
content: [ |
|
{ |
|
title: '尺寸与重量', |
|
info: [ |
|
{ |
|
column: 1, |
|
items: [ |
|
{ label: '长度', value: ['162.6mm'] }, |
|
{ label: '宽度', value: ['75.1mm'] }, |
|
{ label: '厚度', value: ['8.4mm'] }, |
|
], |
|
}, |
|
|
|
{ |
|
column: 2, |
|
items: [ |
|
{ |
|
label: '重量', |
|
value: [ |
|
'约226克（含电池）', |
|
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。', |
|
], |
|
}, |
|
{ |
|
label: 'xxxx', |
|
value: [ |
|
'约226克（含电池）', |
|
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。', |
|
], |
|
}, |
|
], |
|
}, |
|
], |
|
}, |
|
], |
|
} |
|
</script> |
|
|
|
<style scoped></style>
|
|
|