充值贡献点
This commit is contained in:
yuyongdong
parent
f9704bab9d
commit
524850ec00
@ -340,6 +340,21 @@
|
||||
<div ref="rechargeListModal">
|
||||
<a-modal :class="'rechargeListModal'" :getContainer="() => $refs.rechargeListModal" v-model:open="rechargeListDialogVisible" :closable="false" :footer="null" :maskClosable="false">
|
||||
<div class="title">Top-Up</div>
|
||||
<div class="credits">
|
||||
<div class="credits-top">
|
||||
<p>rechargeListModal</p>
|
||||
<div class="tips-hover">
|
||||
<img src="@/assets/img/marketplace/Description.png" alt="">
|
||||
<div class="credits-tips">
|
||||
121231231321231
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="credits-btm">
|
||||
<img src="@/assets/img/marketplace/totalContribution.png" alt="">
|
||||
<span>9000</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="closable" @click="rechargeListDialogVisible = false">
|
||||
<img src="@/assets/img/marketplace/Close_counter.png" alt="">
|
||||
</div>
|
||||
@ -1897,6 +1912,63 @@ onMounted(() => {
|
||||
font-size: 48px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.credits {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40px;
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
// background: #2d2738;
|
||||
background: rgba(0,0,0,.5);
|
||||
border-radius: 20px;
|
||||
.credits-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
position: relative;
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tips-hover {
|
||||
.credits-tips {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
right: -100px;
|
||||
padding: 10px;
|
||||
background: #2d2738;
|
||||
border-radius: 10px;
|
||||
}
|
||||
&:hover {
|
||||
.credits-tips {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.credits-btm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
span {
|
||||
font-family: 'Poppins';
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.closable {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
|
||||
@ -174,11 +174,11 @@ const navList = reactive([
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: 6,
|
||||
// name: "STAKE",
|
||||
// path: "https://pledge.kingsome.cn",
|
||||
// },
|
||||
{
|
||||
id: 6,
|
||||
name: "STAKE",
|
||||
path: "/cecActivity",
|
||||
},
|
||||
]);
|
||||
function click(event) {
|
||||
router.push(event.key);
|
||||
@ -218,6 +218,8 @@ function handNavCurent(nav) {
|
||||
// window.open(nav.path, "_blank");
|
||||
} else if(nav.id == 5) {
|
||||
window.open(nav.path, "_blank")
|
||||
} else if(nav.id == 6) {
|
||||
router.push(nav.path);
|
||||
}
|
||||
// if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
|
||||
// window.open(nav.path, "_blank");
|
||||
|
||||
@ -7,6 +7,7 @@ import Notice from "../views/NoticeView.vue"
|
||||
import Detail from "../views/DetailView.vue";
|
||||
import PrivacyView from '../views/PrivacyView.vue';
|
||||
import TermsView from '../views/TermsView.vue';
|
||||
import CecActivityView from '../views/CecActivityView.vue';
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
@ -72,6 +73,15 @@ const routes = [
|
||||
canonical: "https://.counterfire.games",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/cecActivity",
|
||||
name: "CecActivityView",
|
||||
component: CecActivityView,
|
||||
meta: {
|
||||
title: "CecActivityView",
|
||||
canonical: "https://.counterfire.games",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/privacy",
|
||||
name: "Privacy",
|
||||
|
||||
152
src/views/CecActivityView.vue
Normal file
152
src/views/CecActivityView.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="cecActivity">
|
||||
<div class="cecActivity-pos">
|
||||
<div class="cecActivity-pos-title">活动标题</div>
|
||||
<div class="cecActivity-pos-time">活动时间</div>
|
||||
<div class="cecActivity-pos-content">
|
||||
1454354534534545645
|
||||
</div>
|
||||
</div>
|
||||
<div class="cecActivity-body">
|
||||
<div class="cecActivity-body-title">总奖池</div>
|
||||
<div class="cecActivity-body-banner">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="cecActivity-body-total">
|
||||
<img src="@/assets/img/marketplace/CECIcon.png" alt="">
|
||||
<span>50000</span>
|
||||
</div>
|
||||
<div class="cecActivity-body-Bar">
|
||||
<div class="cecActivity-body-Bar-left">
|
||||
<div class="left" :style="{width: myWidth}">
|
||||
<div>44444</div>
|
||||
</div>
|
||||
<div class="right" :style="{width: totalWidth}">
|
||||
<div>111</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cecActivity-body-Bar-right">
|
||||
<div class="top">总贡献点</div>
|
||||
<div class="btm">121212</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, toRefs, toRaw, onMounted, computed, inject} from "vue"
|
||||
const message = inject('$message')
|
||||
const myWidth = computed(() => {
|
||||
let str = '5%'
|
||||
return str;
|
||||
});
|
||||
const totalWidth = computed(() => {
|
||||
let str = 100-10+'%'
|
||||
return str;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cecActivity {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding-top: 84px;
|
||||
background: #16141b;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.cecActivity-pos {
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
left: 200px;
|
||||
}
|
||||
.cecActivity-body {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin-top: 100px;
|
||||
.cecActivity-body-title {
|
||||
text-align: center;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
font-family: "Anton";
|
||||
}
|
||||
.cecActivity-body-banner {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
background: #50b699;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cecActivity-body-total {
|
||||
width: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px auto;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
span {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
font-family: "Poppins";
|
||||
}
|
||||
}
|
||||
.cecActivity-body-Bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.cecActivity-body-Bar-left {
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
background: #fff;
|
||||
>div {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.left {
|
||||
width: 0px;
|
||||
background: #f59a23;
|
||||
div {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
&:hover {
|
||||
div {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 100%;
|
||||
background: #8080ff;
|
||||
div {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -20px;
|
||||
}
|
||||
&:hover {
|
||||
div {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cecActivity-body-Bar-right {
|
||||
margin-left: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-family: 'Poppins';
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user