huangjinming/CounterFireGames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

staking

Browse Source
This commit is contained in:
yuyongdong 2024-09-09 19:27:41 +08:00
parent 9f297f5aab
commit fe56886c55
1 changed files with 76 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/staking/vipDialog.vue
View File

@ -34,27 +34,27 @@
</div>
<div class="vip-swiper">
<Swiper
:slidesPerView="5"
:modules="modules"
:loop="true"
@slideChange="onSlideChange"
:autoplay="{ delay: 3200, disableOnInteraction: false }"
:navigation="navigation"
class="mySwiper"
:centeredSlides="true"
>
<SwiperSlide v-for="(slide, index) in heroSlides" :key="slide.label">
<!-- 插入每个slide的内容 -->
<div
>{{index}}
<!-- <img v-if="selectHeroIdenx != index" :src="slide.imgUrl" alt="Character Image" />
<img v-else :src="slide.imgUrlActive" alt="Character Image" /> -->
</div>
</SwiperSlide>
</Swiper>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
:slidesPerView="2"
:modules="modules"
:loop="true"
@slideChange="onSlideChange"
:autoplay="{ delay: 3200, disableOnInteraction: false }"
:navigation="navigation"
class="mySwiper"
:centeredSlides="true"
>
<SwiperSlide v-for="(slide, index) in vipList" :key="index">
<!-- 插入每个slide的内容 -->
<div
>{{index}}
<!-- <img v-if="selectHeroIdenx != index" :src="slide.imgUrl" alt="Character Image" />
<img v-else :src="slide.imgUrlActive" alt="Character Image" /> -->
</div>
</SwiperSlide>
</Swiper>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</a-modal>
@ -65,6 +65,15 @@
import {ref} from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const modules = [Pagination, Navigation, Autoplay];
const navigation = ref({
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
});
const props = defineProps({
vipDialogVisible: {
@ -77,6 +86,29 @@ const props = defineProps({
},
});
const vipList = ref([
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
},
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
},
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
},
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
},
{
title: "VIP4 Privileges",
text: "1. Have all VIP4 privileges"
}
])
const emit = defineEmits(["handleClose", "vipDialogCli"]);
const handleCancel = (e) => {
emit("handleClose");
@ -86,6 +118,12 @@ const toStake = () => {
emit("vipDialogCli");
}
const selectHeroIdenx = ref(0);
const onSlideChange = (swiper) => {
// console.log("Slide changed to index:", swiper.realIndex);headeyop
selectHeroIdenx.value = swiper.realIndex;
};
</script>
<style lang="scss" scoped>
@ -212,6 +250,23 @@ const toStake = () => {
width: 1068px;
height: 80px;
margin: 0 auto;
color: #fff;
.mySwiper {
.swiper-wrapper {
width: 983px;
.swiper-slide {
width: 473px;
height: 367px;
margin-left: 20px;
background: #24212E;
border-radius: 20px;
border: 1px solid #BB7FFF;
div {
width: 100%;
}
}
}
}
}
}
}