6 changed files with 234 additions and 60 deletions
@ -1,9 +1,129 @@
@@ -1,9 +1,129 @@
|
||||
<template> |
||||
<div> |
||||
<h1>BK-2000</h1> |
||||
<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"></script> |
||||
<script setup lang="ts"> |
||||
const slide = { |
||||
bgLg: '/images/banner/bk2000.png', |
||||
bgSm: '/images/banner/bk2000_sm.png', |
||||
title: '储能工业控制主机', |
||||
subtitle: 'BK-2000', |
||||
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> |
||||
|
After Width: | Height: | Size: 239 KiB |
Loading…
Reference in new issue