wo123/lingrui-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 调整首页轮播图样式及响应式布局

Browse Source 
在响应式布局中，将 `.dswper` 的宽度从 100% 调整为 90%，以改善页面显示效果。同时，在首页轮播图的每个幻灯片中添加了内边距，提升视觉体验。
This commit is contained in:
王创世 2025-05-19 18:25:23 +08:00
parent ef4548c1ec
commit 2fc44f947e
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/index.scss
View File

@ -635,7 +635,7 @@
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
.dswper { .dswper {
width: 100%; width: 90%;
} }
} }

4
pages/index.vue
View File

@ -270,7 +270,9 @@
<swiper ref="swiper_exp" :slidesPerView="2" loop :autoplay="false" :modules="modules" <swiper ref="swiper_exp" :slidesPerView="2" loop :autoplay="false" :modules="modules"
:watchSlidesProgress="true" @swiper="onSwiperExp"> :watchSlidesProgress="true" @swiper="onSwiperExp">
<swiper-slide v-for="(item, index) in 14" :key="index"> <swiper-slide v-for="(item, index) in 14" :key="index">
<img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`"> <div style="padding: 20px;">
<img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`">
</div>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;"> <div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;">