400 lines
11 KiB
Vue
400 lines
11 KiB
Vue
<template>
|
|
<div class="vip-dialog" ref="vipModal">
|
|
<a-modal
|
|
:class="'vipDialog'"
|
|
v-model:open="props.vipDialogVisible"
|
|
:closable="false"
|
|
:footer="null"
|
|
:getContainer="() => $refs.vipModal"
|
|
:maskClosable="false"
|
|
destroyOnClose
|
|
>
|
|
<div class="top-close" @click="handleCancel">
|
|
<img src="@/assets/img/marketplace/Close_counter.png" alt />
|
|
</div>
|
|
<div class="vip-dialog-content">
|
|
<div class="vip-top">
|
|
<div class="vip-top-left">
|
|
<div class="vip-logo">
|
|
<img src="@/assets/img/staking/VIP5.png" alt="">
|
|
</div>
|
|
<div class="vip-info">
|
|
<h1>VIP 5</h1>
|
|
<p class="vip-status">VIP status is normal</p>
|
|
<div class="vip-rules">
|
|
<span>VIP points rules</span>
|
|
<div class="vip-rules-box">
|
|
<div class="vip-rules-box-tit">
|
|
VIP growth value description
|
|
</div>
|
|
<p>1. The growth value is not accumulated. According to the CEC being pledged, 1 CEC pledged = 1 point of VIP growth value.</p>
|
|
<p>2. When the number of CEC currently pledged by the user is less than the growth value, it will enter the recession mechanism.</p>
|
|
<p>3. Decline mechanism: VIP growth value decreases over time until it equals the number of CEC currently pledged by the user.
|
|
wait. When the number of CEC pledged by the user is greater than or equal to the growth value, the decline mechanism will be exited.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="vip-top-right" @click="toStake">
|
|
Go to stake CEC
|
|
</div>
|
|
</div>
|
|
<div class="vip-bar">
|
|
<div class="vip-bar-amount"></div>
|
|
<span>2501/3000</span>
|
|
</div>
|
|
<div class="vip-swiper">
|
|
<!-- :autoplay="{ delay: 3200, disableOnInteraction: true }"
|
|
:navigation="navigation" -->
|
|
<Swiper
|
|
:modules="modules"
|
|
:slidesPerView="2"
|
|
:loop="true"
|
|
:initialSlide="vipGrade"
|
|
:centeredSlides="false"
|
|
:navigation="navigation"
|
|
@slideChange="onSlideChange"
|
|
class="mySwiper"
|
|
>
|
|
<SwiperSlide v-for="(slide, index) in vipList" :key="index">
|
|
<div
|
|
:class="vipGrade == index ? 'vip-card' : ''"
|
|
>
|
|
<div class="vip-tit">{{ slide.title }}</div>
|
|
<p v-html="slide.text1"></p>
|
|
<p v-html="slide.text2"></p>
|
|
<p v-html="slide.text3"></p>
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
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: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
buyDataArr: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const vipGrade = ref(0);
|
|
const vipList = ref([
|
|
{
|
|
title: "VIP1 Privileges",
|
|
text1: "1.Have all VIP4 privileges ",
|
|
text2: "2. <span>9.2%</span> off in game mall ",
|
|
text3: "3. Gold inc <span>5%</span>",
|
|
},
|
|
{
|
|
title: "VIP2 Privileges",
|
|
text1: "1.Have all VIP4 privileges ",
|
|
text2: "2. <span>9.2%</span> off in game mall ",
|
|
text3: "3. Gold inc <span>5%</span>",
|
|
},
|
|
{
|
|
title: "VIP3 Privileges",
|
|
text1: "1.Have all VIP4 privileges ",
|
|
text2: "2. <span>9.2%</span> off in game mall ",
|
|
text3: "3. Gold inc <span>5%</span>",
|
|
},
|
|
{
|
|
title: "VIP4 Privileges",
|
|
text1: "1.Have all VIP4 privileges ",
|
|
text2: "2. <span>9.2%</span> off in game mall ",
|
|
text3: "3. Gold inc <span>5%</span>",
|
|
},
|
|
{
|
|
title: "VIP5 Privileges",
|
|
text1: "1.Have all VIP4 privileges ",
|
|
text2: "2. <span>9.2%</span> off in game mall ",
|
|
text3: "3. Gold inc <span>5%</span>",
|
|
}
|
|
])
|
|
|
|
const emit = defineEmits(["handleClose", "vipDialogCli"]);
|
|
const handleCancel = (e) => {
|
|
emit("handleClose");
|
|
};
|
|
|
|
const toStake = () => {
|
|
emit("vipDialogCli");
|
|
}
|
|
|
|
const onSlideChange = (swiper) => {
|
|
console.log("Slide changed to index:", swiper.realIndex);
|
|
// swiper.realIndex = vipGrade.value
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.vipDialog) {
|
|
width: 1200px !important;
|
|
height: 755px;
|
|
.ant-modal-content {
|
|
height: 100%;
|
|
padding: 0px;
|
|
background: #1a1821;
|
|
border: 1px solid #b966ff;
|
|
box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
.vip-dialog {
|
|
.top-close {
|
|
position: absolute;
|
|
top: -23px;
|
|
right: -23px;
|
|
width: 106px;
|
|
height: 106px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.vip-dialog-content {
|
|
width: 1068px;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
.vip-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 987px;
|
|
margin: 0 auto;
|
|
margin-top: 31px;
|
|
.vip-top-left {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
.vip-logo {
|
|
width: 195px;
|
|
height: 189px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.vip-info {
|
|
margin-left: 18px;
|
|
h1 {
|
|
height: 42px;
|
|
font-family: 'Anton';
|
|
font-weight: 400;
|
|
font-size: 48px;
|
|
line-height: 42px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.vip-status {
|
|
height: 18px;
|
|
font-family: 'Poppins';
|
|
font-weight: 400;
|
|
font-size: 22px;
|
|
color: #9950FD;
|
|
margin-bottom: 12px;
|
|
}
|
|
.vip-rules {
|
|
position: relative;
|
|
span {
|
|
font-family: 'Poppins';
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #B29DD1;
|
|
text-decoration-line: underline;
|
|
cursor: pointer;
|
|
}
|
|
.vip-rules-box {
|
|
display: none;
|
|
position: absolute;
|
|
top: -85px;
|
|
right: -745px;
|
|
width: 825px;
|
|
padding: 30px 40px;
|
|
height: 346px;
|
|
background: #1A1821;
|
|
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
|
border-radius: 20px;
|
|
border: 1px solid #B966FF;
|
|
z-index: 9;
|
|
.vip-rules-box-tit {
|
|
font-family: 'Poppins-Regular';
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
border-bottom: 1px solid #ACA3C6;
|
|
padding-bottom: 5px;
|
|
}
|
|
p {
|
|
margin-top: 10px;
|
|
line-height: 1.8;
|
|
font-family: 'Poppins-Regular';
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #B29DD1;
|
|
}
|
|
}
|
|
&:hover {
|
|
.vip-rules-box {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.vip-top-right {
|
|
width: 295px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
margin-top: 110px;
|
|
text-align: center;
|
|
background: #FEC25D;
|
|
border-radius: 30px;
|
|
font-family: 'Poppins-Regular';
|
|
font-weight: 400;
|
|
font-size: 24px;
|
|
color: #2D2738;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.vip-bar {
|
|
width: 987px;
|
|
margin: 0 auto;
|
|
height: 41px;
|
|
line-height: 41px;
|
|
display: flex;
|
|
margin: 15px 0 46px 40px;
|
|
background: #2A2736;
|
|
border-radius: 21px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.vip-bar-amount {
|
|
width: 687px;
|
|
height: 41px;
|
|
background: linear-gradient(0deg, #5032EB, #6F4BF5);
|
|
}
|
|
span {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-family: 'Poppins-Regular';
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.vip-swiper {
|
|
width: 1068px;
|
|
height: 367px;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.mySwiper {
|
|
width: 983px !important;
|
|
overflow: hidden;
|
|
.swiper-wrapper {
|
|
.swiper-slide {
|
|
width: 474px !important;
|
|
height: 367px;
|
|
margin-right: 20px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
>div {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #1a1821;
|
|
border: 1px solid #2A2736;
|
|
border-radius: 20px;
|
|
.vip-tit {
|
|
height: 53px;
|
|
line-height: 53px;
|
|
padding-left: 39px;
|
|
margin-bottom: 20px;
|
|
border-radius: 20px 20px 0px 0px;
|
|
background: #2A2736;
|
|
font-family: 'Poppins';
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
color: #B29DD1;
|
|
}
|
|
p {
|
|
padding-left: 39px;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
font-family: 'Poppins-Regular';
|
|
color: #7A6F9D;
|
|
:deep span {
|
|
color: #BB7FFF;
|
|
}
|
|
}
|
|
}
|
|
.vip-card {
|
|
background: #24212E;
|
|
border: 2px solid #BB7FFF;
|
|
.vip-tit {
|
|
background: #BB7FFF;
|
|
color: #1A1821;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
:deep span {
|
|
color: #BB7FFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.swiper-button-prev {
|
|
width: 23px;
|
|
height: 48px;
|
|
position: absolute;
|
|
left: -0px;
|
|
}
|
|
.swiper-button-prev::after {
|
|
content: "";
|
|
background: url("@/assets/img/staking/VIP_arrow.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 23px;
|
|
height: 43px;
|
|
}
|
|
.swiper-button-next {
|
|
width: 23px;
|
|
transform: rotateY(180deg);
|
|
position: absolute;
|
|
right: -0px;
|
|
}
|
|
.swiper-button-next::after {
|
|
content: "";
|
|
background: url("@/assets/img/staking/VIP_arrow.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 23px;
|
|
height: 43px;
|
|
}
|
|
}
|
|
}
|
|
</style> |