|
|
|
|
<template>
|
|
|
|
|
<div class="mx-auto">
|
|
|
|
|
<h2 class="title-font py-11 md:py-8 sm:py-4">应用场景</h2>
|
|
|
|
|
<div
|
|
|
|
|
class="grid grid-cols-2 gap-x-20 pl-12 md:pl-10 sm:pl-4 pb-10 md:pb-8 sm:pb-4 md:gap-8 sm:gap-4 gap-y-8 md:gap-y-6 sm:gap-y-[12px] max-w-[1440px] mx-auto md:px-10 sm:px-4"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, idx) in sceneList"
|
|
|
|
|
:key="idx"
|
|
|
|
|
class="w-full h-[366px] md:h-[237px] sm:h-[118px] relative"
|
|
|
|
|
>
|
|
|
|
|
<picture class="absolute inset-0 z-0">
|
|
|
|
|
<source media="(max-width: 1024px)" :srcset="item.smBg" />
|
|
|
|
|
<source media="(max-width: 1025px)" :srcset="item.lgBg" />
|
|
|
|
|
<img :src="item.lgBg" loading="eager" class="size-full object-cover" />
|
|
|
|
|
</picture>
|
|
|
|
|
<div
|
|
|
|
|
class="absolute -left-10 md:-left-5 sm:-left-1 pl-12 leading-[78px] md:leading-[40px] sm:leading-[20px] z-10 w-[530px] h-[78px] md:w-[214px] md:h-[40px] sm:w-[160px] sm:h-[20px] bg-no-repeat bg-center text-white text-4xl md:text-2xl sm:text-xs font-bold"
|
|
|
|
|
style="
|
|
|
|
|
background-image: linear-gradient(
|
|
|
|
|
90deg,
|
|
|
|
|
#0b207c 0%,
|
|
|
|
|
rgba(16, 73, 119, 0.56) 54%,
|
|
|
|
|
rgba(14, 27, 111, 0) 100%
|
|
|
|
|
);
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
{{ item.title }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
const sceneList = [
|
|
|
|
|
{
|
|
|
|
|
title: '工商业储能',
|
|
|
|
|
lgBg: '/images/scenarios/6.1_lg.png',
|
|
|
|
|
smBg: '/images/scenarios/6.1_sm.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '移动储能',
|
|
|
|
|
lgBg: '/images/scenarios/6.2_lg.png',
|
|
|
|
|
smBg: '/images/scenarios/6.2_sm.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '微电网',
|
|
|
|
|
lgBg: '/images/scenarios/6.3_lg.png',
|
|
|
|
|
smBg: '/images/scenarios/6.3_sm.png',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '其他电力应用',
|
|
|
|
|
lgBg: '/images/scenarios/6.4_lg.png',
|
|
|
|
|
smBg: '/images/scenarios/6.4_sm.png',
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped></style>
|
