-
+
@@ -30,31 +30,60 @@
- 
+
+
User name
-
1
+
+ 
+
+ History Records
-
2
+
+ 
+
+ Boosting Records
-
@@ -86,19 +117,29 @@
@@ -138,8 +225,10 @@ export default {
justify-content: space-between;
padding: 0 50px;
.box-btm-left {
+ background: url("./../../assets/box/Bg(1).png") no-repeat;
+ background-size: 100% 100%;
.box-page {
- background: #3c2363;
+ // background: #3c2363;
.box-title {
.box-title-top {
margin-bottom: 10px;
@@ -208,6 +297,7 @@ export default {
margin: 20px 0;
.btn {
display: flex;
+ align-items: center;
margin-right: 20px;
background: #3d3646;
padding: 5px 20px 5px 10px;
@@ -216,28 +306,59 @@ export default {
cursor: pointer;
.icon {
margin-right: 8px;
+ width: 12px;
+ height: 12px;
+ img {
+ width: 100%;
+ height: 100%;
+ }
}
}
}
}
.box-btm-con {
- width: 800px;
- height: 100%;
+ width: 760px;
+ height: 700px;
background: #fff;
+ background: url('./../../assets/box/Bg_chest.png') no-repeat;
+ background-size: 100% 100%;
.box-btm-con-title {
- width: 220px;
- height: 100px;
- background: #ffc35b;
+ width: 400px;
+ // height: 100px;
margin: 0 auto;
+ font-family: 'Anton-Regular';
+ .box-btm-con-title-top {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ color: #FFC35B;
+ font-size: 58px;
+ .icon {
+ width: 25px;
+ height: 25px;
+ display: flex;
+ justify-content: center;
+ margin: 0 20px;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ .box-btm-con-title-btm {
+ font-size: 32px;
+ }
}
.box-btm-con-img {
width: 400px;
height: 220px;
margin: 0 auto;
div {
- width: 320px;
- height: 220px;
+ width: 260px;
+ height: 200px;
margin: 0 auto;
+ margin-top: 20px;
img {
width: 100%;
height: 100%;
@@ -246,19 +367,24 @@ export default {
}
.box-btm-con-boost {
width: 240px;
- height: 100px;
+ // height: 100px;
padding-top: 20px;
box-sizing: border-box;
- background: #d4a351;
margin: 0 auto;
p {
font-size: 14px;
+ line-height: 1.2;
}
.copy-btn {
display: flex;
justify-content: center;
align-items: center;
+ padding: 20px 0px;
font-size: 12px;
+ background: url('@/assets/box/button_copy.png') no-repeat;
+ background-size: 100% 100%;
+ border-radius: 20px;
+ cursor: pointer;
.icon {
margin-right: 5px;
}
@@ -267,10 +393,74 @@ export default {
.box-btm-con-btn {
width: 700px;
height: 200px;
- background: #9950fd;
margin: 0 auto;
+ .box-btn-content {
+ height: 100%;
+ position: relative;
+ .box-btm-con-btn-bar {
+ width: 400px;
+ height: 40px;
+ position: absolute;
+ top: 70%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ line-height: 40px;
+ padding: 3px 8px;
+ display: flex;
+ // justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+ background: url('@/assets/box/Progress bar_MAX bg.png') no-repeat;
+ background-size: 100% 100%;
+ .bar {
+ // width: 400px;
+ height: 36px;
+ border-radius: 20px;
+ background: url('@/assets/box/Progress bar_MAX.png') no-repeat;
+ background-size: 100% 100%;
+ }
+ .amount {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ .max {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ .box-btm-con-btn-tips {
+ width: 400px;
+ margin: 0 auto;
+ margin-top: 10px;
+ font-size: 10px;
+ text-align: left;
+ position: absolute;
+ left: 50%;
+ top: 82%;
+ transform: translate(-50%, -50%);
+ }
+ .box-btn {
+ width: 200px;
+ height: 200px;
+ line-height: 200px;
+ position: absolute;
+ top: 20%;
+ right: 5%;
+ background: url('@/assets/box/Button_Ceiling.png') no-repeat;
+ background-size: 100% 100%;
+ cursor: pointer;
+ }
+ }
}
}
+ .box-btm-right {
+ background: url("./../../assets/box/chest bg.png") no-repeat;
+ background-size: 100% 100%;
+ }
.box-btm-left,
.box-btm-right {
width: 380px;
@@ -304,16 +494,37 @@ export default {
width: calc((100% - 10px) / 2);
min-width: calc((100% - 10px) / 2);
max-width: calc((100% - 10px) / 2);
+ position: relative;
cursor: pointer;
.box-img {
width: 160px;
height: 100px;
margin: 0 auto;
margin-bottom: 10px;
+ position: relative;
+ z-index: 9;
img {
width: 100%;
height: 100%;
}
+ .box-hover-yes {
+ display: none;
+ }
+ }
+ .box-bg {
+ width: 160px;
+ height: 80px;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateX(-50%);
+ background: url('@/assets/box/Treasure Chest_bg.png') no-repeat;
+ background-size: 100% 100%;
+ z-index: 0;
+ }
+ .box-name {
+ position: relative;
+ z-index: 9;
}
.success {
color: #31a21d;
@@ -321,10 +532,24 @@ export default {
&:nth-child(2n) {
margin-right: 0;
}
+ &:hover {
+ .box-img {
+ .box-hover-no {
+ display: none;
+ }
+ .box-hover-yes {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
}
}
}
- .box-pagination {}
+ .box-pagination {
+ margin-top: 20px;
+ }
}
}
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3373d52..b72132d 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1953,7 +1953,7 @@ export default {
}
.nav-btm {
margin: 10px auto;
- margin-bottom: 20px;
+ margin-bottom: 0px;
.nav {
display: flex;
justify-content: center;
11
+
+
+
+
+ 
+
+
+ BONUS!
+
+
+
+
+ LEGENDARY
+
-
+
{{`./../../assets/box/box0${boxData.level}.png`}}
![]()
-
Invite friends to Boost,
-Earn more rewards
-
-
+ 2
- Invite friends to Boost
+
+
+ Invite friends to Boost,
+Earn more rewards
+
+
+
+ 
+
+
+ Invite friends to Boost
+
+
-
+
+
* Unlock the treasure will consume a small amount of gas
+ Turn On
11
@@ -67,17 +96,19 @@
-
+
- ![]()
+ ![]()
+ ![]()
+
Boosting ({{ item.bounsCount }}/{{ item.maxBounsCount }})({{ item.bounsCount }}/{{ item.maxBounsCount }})
- 1212121
+