样式调整
This commit is contained in:
yuyongdong
parent
dc1ceb506a
commit
b73c078aca
@ -52,11 +52,11 @@
|
||||
<UserImg :imgSrc="myTwitterAvatar" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-top-points-right">
|
||||
<!-- <div class="left-top-points-right">
|
||||
<img v-if="inWhiteList == 1" src="@/assets/common/wallet-yes.png" alt="">
|
||||
<img v-else src="@/assets/common/wallet-no.png" alt="">
|
||||
<div class="hover-tips">Partner NFT collection holders get extra rewards</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-title">
|
||||
@ -71,12 +71,9 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="left-title-right">
|
||||
<div class="rule" @click="ruleDialogVisible = true">
|
||||
<img src="@/assets/home/Icon_.png" alt="">
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>Invite friends to earn</p>
|
||||
<p>more rewards</p>
|
||||
<p>more rewards <span @click="ruleDialogVisible = true"><img src="@/assets/home/Icon_.png" alt=""></span></p>
|
||||
</div>
|
||||
<div class="copy-btn" @click="copyLinkCode"><img src="./../../assets/common/Icon_Explore.png" alt=""> Copy referral link</div>
|
||||
<div class="copy-see" @click="isLogin">
|
||||
@ -133,7 +130,7 @@
|
||||
</li>
|
||||
</div>
|
||||
<div class="wallet" @click="onWalletLogin">
|
||||
<span v-if="!showAddress">X Connected</span>
|
||||
<span v-if="!showAddress">Connect Wallet</span>
|
||||
<div
|
||||
class="wallet-address"
|
||||
v-else
|
||||
@ -185,8 +182,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-btm">
|
||||
<p>*Complete tasks to win three exploration</p>
|
||||
<p>attempts.</p>
|
||||
<p>*Complete tasks to win three exploration attempts.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-right">
|
||||
@ -245,8 +241,20 @@
|
||||
<div class="sign-in-content" v-if="navIndex == 1">
|
||||
<div class="calen-content">
|
||||
<div class="calen-content-tips">
|
||||
<p><span>Event start:</span> <span> {{activityData.startTime | formatDate}}</span></p>
|
||||
<p>Event end:<span> {{activityData.endTime | formatDate}}</span></p>
|
||||
<p>
|
||||
<span class="calen-content-tips-title">
|
||||
<span>Event</span>
|
||||
<span>start:</span>
|
||||
</span>
|
||||
<span> {{ formatDateGMT(activityData.startTime )}}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="calen-content-tips-title">
|
||||
<span>Event</span>
|
||||
<span>end:</span>
|
||||
</span>
|
||||
<span>{{ formatDateGMT(activityData.endTime) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<Calen ref="renewCheck" :activityData='activityData' />
|
||||
<div class="rewards">
|
||||
@ -526,11 +534,11 @@
|
||||
<UserImg :imgSrc="myTwitterAvatar" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-top-points-right">
|
||||
<!-- <div class="left-top-points-right">
|
||||
<img v-if="inWhiteList == 1" src="@/assets/common/wallet-yes.png" alt="">
|
||||
<img v-else src="@/assets/common/wallet-no.png" alt="">
|
||||
<div class="hover-tips">Partner NFT collection holders get extra rewards</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -549,7 +557,7 @@
|
||||
</li>
|
||||
</div>
|
||||
<div class="wallet" @click="onWalletLogin">
|
||||
<span v-if="!showAddress">X Connected</span>
|
||||
<span v-if="!showAddress">Connect Wallet</span>
|
||||
<div
|
||||
class="wallet-address"
|
||||
v-else
|
||||
@ -1278,6 +1286,11 @@ export default {
|
||||
this.stepTicket++
|
||||
},
|
||||
|
||||
formatDateGMT(time) {
|
||||
let date = new Date(time).toGMTString()
|
||||
return date
|
||||
},
|
||||
|
||||
// 外链跳转
|
||||
openLink() {
|
||||
window.open('https://counterfire.games/')
|
||||
@ -1328,6 +1341,7 @@ export default {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
padding-right: 30px;
|
||||
margin-right: 30px;
|
||||
background: url('@/assets/common/User-bar.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
@ -1492,33 +1506,36 @@ export default {
|
||||
}
|
||||
.left-title-right {
|
||||
height: 160px;
|
||||
padding: 30px 20px 10px 20px;
|
||||
padding: 20px 20px 10px 20px;
|
||||
background: #2e283a;
|
||||
background: url('./../../assets/home/invite_box.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
.rule {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: 169px;
|
||||
margin: 0 auto;
|
||||
p {
|
||||
width: 100%;
|
||||
font-family: 'Poppins-SemiBold';
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.copy-btn {
|
||||
width: 148px;
|
||||
font-size: 14px;
|
||||
background: url('./../../assets/home/button_copy.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
@ -1602,7 +1619,7 @@ export default {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-family: 'Poppins-Light';
|
||||
color: #9950FD;
|
||||
color: #c79fff;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1712,7 +1729,7 @@ export default {
|
||||
font-family: 'Poppins-Light';
|
||||
}
|
||||
h3 {
|
||||
font-size: 26px;
|
||||
font-size: 24px;
|
||||
font-family: 'Anton-Regular';
|
||||
}
|
||||
}
|
||||
@ -1757,7 +1774,7 @@ export default {
|
||||
font-size: 14px;
|
||||
}
|
||||
.bar-top-right {
|
||||
width: 200px;
|
||||
width: 255px;
|
||||
height: 8px;
|
||||
margin-left: 10px;
|
||||
background: url('@/assets/common/Progress bar bg.png') no-repeat;
|
||||
@ -1817,8 +1834,8 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 60px;
|
||||
padding: 10px;
|
||||
min-height: 55px;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
@ -1843,7 +1860,7 @@ export default {
|
||||
margin: 0 5px;
|
||||
h3 {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-family: 'Poppins-SemiBold';
|
||||
}
|
||||
p {
|
||||
@ -1996,7 +2013,7 @@ export default {
|
||||
margin-left: 10px;
|
||||
p {
|
||||
text-align: left;
|
||||
font-size: 8px;
|
||||
font-size: 10px;
|
||||
font-family: 'Poppins-Light';
|
||||
color: #fff;
|
||||
}
|
||||
@ -2061,7 +2078,7 @@ export default {
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 5px;
|
||||
margin: 0 10px;
|
||||
height: 40px;
|
||||
a {
|
||||
display: flex;
|
||||
@ -2081,7 +2098,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.wallet {
|
||||
width: 120px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
border-radius: 26px;
|
||||
padding-left: 30px;
|
||||
@ -2158,8 +2175,19 @@ export default {
|
||||
.calen-content-tips {
|
||||
// display: flex;
|
||||
p {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
.calen-content-tips-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 80px;
|
||||
margin-right: 10px;
|
||||
>span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.calen-content {
|
||||
@ -2340,6 +2368,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
padding-right: 30px;
|
||||
margin-right: 30px;
|
||||
li {
|
||||
color: #fff;
|
||||
padding: 10px 20px 5px 40px;
|
||||
@ -2530,7 +2559,7 @@ export default {
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 5px;
|
||||
margin: 0 10px;
|
||||
height: 40px;
|
||||
a {
|
||||
display: flex;
|
||||
@ -2550,7 +2579,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.wallet {
|
||||
width: 120px;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
border-radius: 26px;
|
||||
padding-left: 30px;
|
||||
|
||||
@ -59,11 +59,17 @@
|
||||
</div>
|
||||
<div class="forward-list-item-btm" v-if="!rankingTableData[1]">
|
||||
<div class="name">none</div>
|
||||
<div>0</div>
|
||||
<div class="points">
|
||||
<span>0</span>
|
||||
<img src="@/assets/common/Icon_Points.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="forward-list-item-btm" v-else>
|
||||
<div class="name">{{ rankingTableData[1].nickname }}</div>
|
||||
<div>{{ rankingTableData[1].score }}</div>
|
||||
<div class="points">
|
||||
<span>{{ rankingTableData[1].score }}</span>
|
||||
<img src="@/assets/common/Icon_Points.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -78,9 +84,19 @@
|
||||
</div>
|
||||
<!-- <div>{{ rankingTableData[0].nickname.slice(0,4) }}{{ '…'+rankingTableData[0].nickname.slice(-4) }}</div> -->
|
||||
</div>
|
||||
<div class="forward-list-item-btm">
|
||||
<div class="forward-list-item-btm" v-if="!rankingTableData[0]">
|
||||
<div class="name">none</div>
|
||||
<div class="points">
|
||||
<span>0</span>
|
||||
<img src="@/assets/common/Icon_Points.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="forward-list-item-btm" v-else>
|
||||
<div class="name">{{ rankingTableData[0].nickname }}</div>
|
||||
<div>{{ rankingTableData[0].score }}</div>
|
||||
<div class="points">
|
||||
<span>{{ rankingTableData[0].score }}</span>
|
||||
<img src="@/assets/common/Icon_Points.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
@ -96,11 +112,17 @@
|
||||
</div>
|
||||
<div class="forward-list-item-btm" v-if="!rankingTableData[2]">
|
||||
<div class="name">none</div>
|
||||
<div>0</div>
|
||||
<div class="points">
|
||||
<span>0</span>
|
||||
<img src="@/assets/common/Icon_Points.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="forward-list-item-btm" v-else>
|
||||
<div class="name">{{ rankingTableData[2].nickname }}</div>
|
||||
<div>{{ rankingTableData[2].score }}</div>
|
||||
<div class="points">
|
||||
<span>{{ rankingTableData[2].score }}</span>
|
||||
<img src="@/assets/common/Icon_Points.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
@ -325,8 +347,8 @@ export default {
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 50px;
|
||||
top: -25px;
|
||||
left: 75px;
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
font-family: "Anton-Regular";
|
||||
@ -338,19 +360,22 @@ export default {
|
||||
width: 60%;
|
||||
position: relative;
|
||||
.ranking-content-left-points {
|
||||
width: 160px;
|
||||
width: 170px;
|
||||
padding: 20px;
|
||||
background: url('./../../assets/ranking/My points bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 10px;
|
||||
margin-top: 40px;
|
||||
margin-left: 30px;
|
||||
.list {
|
||||
.my-points {
|
||||
p {
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.list-btm {
|
||||
position: relative;
|
||||
width: 170px;
|
||||
height: 40px;
|
||||
margin-bottom: 20px;
|
||||
.points {
|
||||
@ -360,11 +385,13 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// justify-content: center;
|
||||
position: absolute;
|
||||
top: -88%;
|
||||
left: 43%;
|
||||
transform: translateX(-50%);
|
||||
padding-left: 75px;
|
||||
box-sizing: border-box;
|
||||
span {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
@ -389,7 +416,8 @@ export default {
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
div {
|
||||
@ -484,12 +512,22 @@ export default {
|
||||
.forward-list-item-btm {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
bottom: 18%;
|
||||
bottom: 20%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.name {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.points {
|
||||
color: #9950fd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
img {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
@ -590,8 +628,8 @@ export default {
|
||||
line-height: 1.4;
|
||||
.label {
|
||||
text-align: left;
|
||||
color: #5b5862;
|
||||
font-size: 12px;
|
||||
color: #979797;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -600,8 +638,8 @@ export default {
|
||||
line-height: 1.4;
|
||||
.label {
|
||||
text-align: left;
|
||||
color: #5b5862;
|
||||
font-size: 12px;
|
||||
color: #979797;
|
||||
font-size: 14px;
|
||||
}
|
||||
.records {
|
||||
text-align: left;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user