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.
60 lines
1.8 KiB
60 lines
1.8 KiB
<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>
|
|
|