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.
76 lines
2.5 KiB
76 lines
2.5 KiB
3 months ago
|
<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>
|