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.
75 lines
2.5 KiB
75 lines
2.5 KiB
<template> |
|
<div> |
|
<div class="h-[888px] w-full"> |
|
<div class="size-full relative flex overflow-hidden items-center sm:items-start"> |
|
<picture class="absolute w-full h-full left-0 top-0 -z-10"> |
|
<source media="(max-width: 480px)" :srcset="slide.bgSm" /> |
|
<source media="(max-width: 1280px)" :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] sm:top-19 relative mx-auto"> |
|
<div class="flex flex-col gap-10 text-white justify-center items-center w-[398px]"> |
|
<h2 class="text-5xl md:text-lg sm:text-xs font-bold"> |
|
{{ slide.title }} |
|
</h2> |
|
<div |
|
class="text-4xl md:text-2xl sm:text-base overflow-hidden font-bold bg-gradient-to-r from-[#69AA25] to-[#13A892] w-[328px] h-[48px] rounded-full flex items-center justify-center" |
|
> |
|
{{ slide.subtitle }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="h-[888px] max-w-[1440px] w-full relative mx-auto"> |
|
<div v-for="item in slide.content" :key="item.title" class="flex gap-10"> |
|
<div class="px-56"> |
|
<h3 class="text-5xl font-bold text-[#414141]"> |
|
{{ item.title }} |
|
</h3> |
|
</div> |
|
<ul> |
|
<li v-for="info in item.info" :key="info.label"> |
|
<span>{{ info.label }}</span> |
|
<p v-for="value in info.value" :key="value">{{ value }}</p> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
const slide = { |
|
bgLg: '/images/banner/bk1000.png', |
|
bgSm: '/images/banner/device_sm.png', |
|
title: '储能工业控制主机', |
|
subtitle: 'BK-1000', |
|
content: [ |
|
{ |
|
title: '尺寸与重量', |
|
info: [ |
|
{ label: '长度', value: ['162.6mm'] }, |
|
{ label: '宽度', value: ['75.1mm'] }, |
|
{ label: '厚度', value: ['8.4mm'] }, |
|
{ |
|
label: '重量', |
|
value: [ |
|
'约226克（含电池）', |
|
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。', |
|
], |
|
}, |
|
{ |
|
label: 'xxxx', |
|
value: [ |
|
'约226克（含电池）', |
|
'*实际尺寸与重量依配置，制造工艺、测量方法的不同可能有所差异。', |
|
], |
|
}, |
|
], |
|
}, |
|
], |
|
} |
|
</script> |
|
|
|
<style scoped></style>
|
|
|