huangjinming/cebg-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

newcebg

Browse Source
This commit is contained in:
huangjinming 2023-02-28 13:47:25 +08:00
parent a91da945c5
commit e366dfb760
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/home/DameplaySwiperCard.vue
View File

@ -28,7 +28,10 @@
>
<swiper-slide v-for="(item, index) in imageList" :key="index"
><img :src="item.imgSrc"
/></swiper-slide>
/>
<div class="mask-next"></div>
<div class="mask-prev"></div>
</swiper-slide>
</swiper>
<div class="swiper-btn-prev" @click="handSlidePrev">
<img src="@/assets/img/home/game-swiper-card/next.png" alt="" />
@ -36,6 +39,7 @@
<div class="swiper-btn-next" @click="handSlideNext">
<img src="@/assets/img/home/game-swiper-card/prev.png" alt="" />
</div>
</div>
</div>
</template>
@ -153,8 +157,34 @@ const handSlideNext = () => {
background: url("@/assets/img/home/game-swiper-card/bullet-active.png")
no-repeat right center;
}
:deep( .swiper-pagination-bullet) {
:deep(.swiper-pagination-bullet) {
opacity: 1;
}
:deep(.swiper-slide-next) {
// opacity: 0.8;
position: relative;
.mask-next {
position: absolute;
left: 0;
top: 0;
width: 720px;
height: 410px;
z-index:1;
background-color: rgba(9, 13, 16, 0.6);
}
}
:deep(.swiper-slide-prev) {
// opacity: 0.8;
position: relative;
.mask-prev {
position: absolute;
left: 0;
top: 0;
width: 720px;
height: 410px;
z-index:1;
background-color: rgba(9, 13, 16, 0.6);
}
}
}
</style>