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>
<div class="vip-swiper"> <div class="vip-swiper">
<Swiper <Swiper
:slidesPerView="5" :slidesPerView="2"
:modules="modules" :modules="modules"
:loop="true" :loop="true"
@slideChange="onSlideChange" @slideChange="onSlideChange"
:autoplay="{ delay: 3200, disableOnInteraction: false }" :autoplay="{ delay: 3200, disableOnInteraction: false }"
:navigation="navigation" :navigation="navigation"
class="mySwiper" class="mySwiper"
:centeredSlides="true" :centeredSlides="true"
> >
<SwiperSlide v-for="(slide, index) in heroSlides" :key="slide.label"> <SwiperSlide v-for="(slide, index) in vipList" :key="index">
<!-- 插入每个slide的内容 --> <!-- 插入每个slide的内容 -->
<div <div
>{{index}} >{{index}}
<!-- <img v-if="selectHeroIdenx != index" :src="slide.imgUrl" alt="Character Image" /> <!-- <img v-if="selectHeroIdenx != index" :src="slide.imgUrl" alt="Character Image" />
<img v-else :src="slide.imgUrlActive" alt="Character Image" /> --> <img v-else :src="slide.imgUrlActive" alt="Character Image" /> -->
</div> </div>
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
<div class="swiper-button-next"></div> <div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div> <div class="swiper-button-prev"></div>
</div> </div>
</div> </div>
</a-modal> </a-modal>
@ -65,6 +65,15 @@
import {ref} from "vue"; import {ref} from "vue";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules"; 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({ const props = defineProps({
vipDialogVisible: { 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 emit = defineEmits(["handleClose", "vipDialogCli"]);
const handleCancel = (e) => { const handleCancel = (e) => {
emit("handleClose"); emit("handleClose");
@ -86,6 +118,12 @@ const toStake = () => {
emit("vipDialogCli"); emit("vipDialogCli");
} }
const selectHeroIdenx = ref(0);
const onSlideChange = (swiper) => {
// console.log("Slide changed to index:", swiper.realIndex);headeyop
selectHeroIdenx.value = swiper.realIndex;
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -212,6 +250,23 @@ const toStake = () => {
width: 1068px; width: 1068px;
height: 80px; height: 80px;
margin: 0 auto; 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%;
}
}
}
}
} }
} }
} }