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.
88 lines
3.1 KiB
88 lines
3.1 KiB
<template> |
|
<div class="relative md:mt-6 sm:mt-3 pb-[92px] md:pb-[32px] sm:pb-[16px]"> |
|
<h2 class="title-font pt-12 pb-10 md:pb-7 sm:pt-[16px] sm:pb-[12px] relative z-10"> |
|
电力四级防护 |
|
</h2> |
|
<picture class="absolute inset-0 z-0"> |
|
<source media="(max-width: 1024px)" srcset="/images/electricPower/bg_sm.png" /> |
|
<source media="(max-width: 1025px)" srcset="/images/electricPower/bg_lg.png" /> |
|
<img src="/images/electricPower/bg_lg.png" loading="eager" class="size-full object-cover" /> |
|
</picture> |
|
<div |
|
class="relative w-full h-[calc(100%-136px)] md:h-[calc(100%-100px)] sm:h-[calc(100%-60px)] z-20 text-white max-w-[1440px] mx-auto flex items-center justify-center gap-10" |
|
> |
|
<div |
|
class="w-[494px] h-[672px] md:w-[286px] md:h-[378px] sm:w-[142px] sm:h-[188px] select-none" |
|
> |
|
<SwiperFlip> |
|
<swiper-slide v-for="(movie, index) in imgList" :key="index" class="size-[90%]"> |
|
<div class="w-full h-full"> |
|
<img :src="movie" alt="" class="w-full h-full object-cover" /> |
|
</div> |
|
</swiper-slide> |
|
</SwiperFlip> |
|
</div> |
|
|
|
<div |
|
class="w-[580px] h-[698px] md:w-[308px] md:h-[396px] sm:w-[154px] sm:h-[198px] md:px-0 sm:px-0 px-13 md:py-6 sm:py-3 backdrop-blur-xl rounded-3xl md:rounded-xl sm:rounded-lg flex flex-col justify-center" |
|
style=" |
|
background-image: linear-gradient( |
|
270deg, |
|
rgba(3, 10, 41, 0.64) 4%, |
|
rgba(17, 33, 86, 0.24) 97% |
|
); |
|
" |
|
> |
|
<div |
|
v-for="(item, idx) in electricPowerList" |
|
:key="idx" |
|
class="h-[150px] md:h-[96px] sm:h-[48px] md:pl-7 sm:pl-4 md:py-4 sm:py-2 w-full flex items-center border-b border-white/20 border-dashed gap-9 md:gap-6 sm:gap-2" |
|
:class="{ 'md:border-b-0 sm:border-b-0': idx === electricPowerList.length - 1 }" |
|
> |
|
<img :src="item.img" loading="eager" class="size-16 md:size-10 sm:size-5" /> |
|
<div class="text-white"> |
|
<h6 class="text-3xl md:text-xl sm:text-xs font-bold">{{ item.title }}</h6> |
|
<div |
|
class="text-xl opacity-75 mt-4 md:mt-[6px] md:leading-[16px] sm:leading-[8px] sm:mt-[3px] md:text-base sm:text-[8px]" |
|
> |
|
{{ item.desc }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script setup lang="ts"> |
|
const imgList = [ |
|
'/images/electricPower/c1.png', |
|
'/images/electricPower/c5.png', |
|
'/images/electricPower/c3.png', |
|
'/images/electricPower/c4.png', |
|
] |
|
const electricPowerList = [ |
|
{ |
|
title: '电气安全', |
|
desc: '过载与短路防护', |
|
img: '/images/electricPower/icon1.png', |
|
}, |
|
{ |
|
title: '人身安全', |
|
desc: '绝缘与隔离防护', |
|
img: '/images/electricPower/icon2.png', |
|
}, |
|
{ |
|
title: '系统稳定性', |
|
desc: '电磁与浪涌防护，4kV冲击', |
|
img: '/images/electricPower/icon3.png', |
|
}, |
|
{ |
|
title: '可靠性根基', |
|
desc: '-40℃~85℃宽温域运行能力', |
|
img: '/images/electricPower/icon4.png', |
|
}, |
|
] |
|
</script> |
|
|
|
<style scoped></style>
|
|
|