宝箱页面

package.json

@@ -22,6 +22,7 @@
     "postcss-px-to-viewport": "^1.1.1",
     "swiper": "^5.4.5",
     "vue": "^2.6.14",
+    "vue-loader": "^15.10.1",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
     "web3": "^4.5.0"
@@ -34,24 +35,11 @@
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "babel-loader": "^9.1.3",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "vue-template-compiler": "^2.6.14"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
-    "rules": {}
   }
 }

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="referrer" content="no-referrer">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/components/pagination.vue

@@ -3,6 +3,7 @@
     <el-pagination
         @current-change="handleCurrentChange"
         :current-page="currentPage"
+        :pager-count="5"
         :page-size="pageSize"
         layout="prev, pager, next"
         :total="total"
@@ -15,7 +16,7 @@ export default {
   data() {
     return {
       total: 50,
-      pageSize: 10,
+      pageSize: 2,
       currentPage: 1,
     }
   },
@@ -30,34 +31,64 @@ export default {
 
 <style lang="scss" scoped>
 .pagination {
+  position: relative;
   ::v-deep .el-pagination {
     font-size: 12px;
+    .btn-prev, .btn-next {
+      background: none;
+      height: 80px;
+    }
+    .el-icon-arrow-left {
+      position: relative;
+    }
     .el-icon-arrow-left:before {
-      content: "上一页";
+      content: '';
+      display: inline-block;
+      background-image: url('./../assets/common/Previous.png');
       font-size: 12px;
+      width: 80px;
+      height: 80px;
+      position: absolute;
+      top: -65px;
+      left: -200%;
+      // transform: translate(-50%, 50%);
+    }
+    .el-icon-arrow-right {
+      position: relative;
     }
     .el-icon-arrow-right:before {
-      content: "下一页";
+      content:  '';
+      display: inline-block;
+      background-image: url('./../assets/common/Next.png');
       font-size: 12px;
+      width: 80px;
+      height: 80px;
+      position: absolute;
+      top: -65px;
+      right: -200%;
     }
     button {
       height: 20px;
     }
     .el-pager {
       li {
-        min-width: 20px;
-        height: 20px;
-        line-height: 20px;
+        min-width: 30px;
+        height: 30px;
+        line-height: 30px;
         font-size: 12px;
         margin: 0 5px;
         border-radius: 50%;
-        border: 1px solid #f0f0f0;
+        border: 1px solid #2d2738;
+        background: #2d2738;
+        color: #fff;
+        border-radius: 8px;
       }
       li.active {
         font-size: 12px;
-        background: #db9c21;
-        border: 1px solid #000;
-        color: #000;
+        background: #5d5275;
+        border: 1px solid #5d5275;
+        color: #FFFFFF;
+        font-size: 14px;
       }
       .more {
         &::before {

src/views/home/boxBtm.vue

@@ -9,10 +9,10 @@
           <div class="line"></div>
         </div>
         <div class="box-boosting">
-          <li>
+          <li v-for="(item, index) in boostingList" :key="index">
             <div class="left">
               <div class="user-img">
-                <img src="./../../assets/home/Nav bar_character.png" alt="">
+                <!-- <img :src="imgPath(item.imgSrc)" alt=""> -->
               </div>
               <div class="user-name">User name</div>
             </div>
@@ -30,31 +30,60 @@
       </div>
       <div class="box-log">
         <div class="btn" @click="">
-          <div class="icon">1</div>
+          <div class="icon">
+            <img src="./../../assets/box/Icon_history.png" alt="">
+          </div>
           <div>History Records</div>
         </div>
         <div class="btn" @click="">
-          <div class="icon">2</div>
+          <div class="icon">
+            <img src="./../../assets/box/Icon_boost.png" alt="">
+          </div>
           <div>Boosting Records</div>
         </div>
       </div>
     </div>
     <div class="box-btm-con">
-      <div class="box-btm-con-title">11</div>
+      <div class="box-btm-con-title">
+        <div class="box-btm-con-title-top">
+          <div class="icon">
+            <img src="./../../assets/box/Icon_Star_01.png" alt="">
+          </div>
+          <div>BONUS!</div>
+          <div class="icon">
+            <img src="./../../assets/box/Icon_Star_01.png" alt="">
+          </div>
+        </div>
+        <div class="box-btm-con-title-btm">LEGENDARY</div>
+      </div>
       <div class="box-btm-con-img">
-        <div>
+        <div>{{`./../../assets/box/box0${boxData.level}.png`}}
           <img :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt="">
         </div>
       </div>
       <div class="box-btm-con-boost">
-        <p>Invite friends to Boost,</p>
-        <p>Earn more rewards</p>
-        <div class="copy-btn" @click="copyLink(boxData)">
-          <div class="icon">2</div>
-          <div>Invite friends to Boost</div>
+        <div class="boost">
+          <p>Invite friends to Boost,</p>
+          <p>Earn more rewards</p>
+          <div class="copy-btn" @click="copyLink(boxData)">
+            <div class="icon">
+              <img src="@/assets/box/Invite_icon.png" alt="">
+            </div>
+            <div>Invite friends to Boost</div>
+          </div>
+        </div>
+      </div>
+      <div class="box-btm-con-btn">
+        <div class="box-btn-content">
+          <div class="box-btm-con-btn-bar">
+            <div class="bar" ref="pendingBg"></div>
+            <div class="amount" v-if="(boxData.bounsCount < boxData.maxBounsCount)">{{ boxData.bounsCount }}/{{ boxData.maxBounsCount }}</div>
+            <div class="max" v-else>MAX</div>
+          </div>
+          <div class="box-btm-con-btn-tips">* Unlock the treasure will consume a small amount of gas </div>
+          <div class="box-btn" @click="turnBox(boxData.id)">Turn On</div>
         </div>
       </div>
-      <div class="box-btm-con-btn">11</div>
     </div>
     <div class="box-btm-right">
       <div class="box-page">
@@ -67,17 +96,19 @@
           </div>
         </div>
         <div class="box-list">
-          <li v-for="(item, index) in boxList" :key="index">
+          <li v-for="(item, index) in boxList" :key="index" @click="getBoxData(item)">
             <div class="box-img">
-              <img :src="require(`./../../assets/box/box0${item.level}.png`)" alt="">
+              <img class="box-hover-no" :src="require(`./../../assets/box/box0${item.level}.png`)" alt="">
+              <img class="box-hover-yes" :src="require(`./../../assets/box/box${item.level}.png`)" alt="">
             </div>
+            <div class="box-bg"></div>
             <div class="box-name">
               Boosting <span v-if="item.bounsCount == item.maxBounsCount" class="success">({{ item.bounsCount }}/{{ item.maxBounsCount }})</span><span v-else>({{ item.bounsCount }}/{{ item.maxBounsCount }})</span>
             </div>
           </li>
         </div>
         <div class="box-pagination">
-          1212121
+          <Pagination />
         </div>
       </div>
     </div>
@@ -86,19 +117,29 @@
 
 <script>
 import { getToken } from './../../utils/cookies.js'
+import Pagination from './../../components/pagination.vue'
 
 export default {
+  components: {
+    Pagination,
+  },
   data() {
     return {
       token: null,
+      boostingList: {},
       boxList: [],
       boxData: {},
       userData: {},
+      boostingList: {
+        imgSrc: 'https://abs.twimg.com/sticky/default_profile_images/default_profile.png'
+      },
     }
   },
   mounted() {
     this.token = getToken()
-    this.getMyBoxList()
+    this.$nextTick(() => {
+      this.getMyBoxList()
+    })
   },
   methods: {
     // 我的宝箱
@@ -111,7 +152,47 @@ export default {
       console.log('boxList', res.data.data)
       this.boxList = res.data.data
       this.boxData = res.data.data[0]
+      console.log('boxData', this.boxData)
+      if(this.boxData.bounsCount == 0) {
+        this.$refs.pendingBg.style.width = '0%'
+      } else {
+        let pending = (Number(this.boxData.maxBounsCount) / Number(this.boxData.bounsCount))
+        this.$refs.pendingBg.style.width = `${pending}%`
+      }
     },
+
+    // 修改中间宝箱数据
+    async getBoxData(data) {
+      this.boxData = data
+      await this.getHistorical(data.id)
+      if(this.boxData.bounsCount == 0) {
+        this.$refs.pendingBg.style.width = '0%'
+      } else {
+        let pending = (Number(this.boxData.bounsCount) / Number(this.boxData.maxBounsCount)) *100
+        this.$refs.pendingBg.style.width = `${pending}%`
+      }
+    },
+    // 助力记录
+    async getHistorical(id) {
+      let res = await this.$axios
+        .post(
+          "/api/chest/enhance/list",
+          { chestid: id },
+          {
+            headers: { Authorization: `Bearer ${this.token}` }
+          }
+        )
+        if(res.data.errcode == 0) {
+          // this.boostingList = res.data.data
+          console.log('助力记录', this.boostingList)
+        }
+    },
+    // 开宝箱
+    async turnBox(id) {
+      // let res = 
+      console.log(id)
+    },
+
     // 复制助力链接
     copyLink(data) {
       this.userData = JSON.parse(localStorage.getItem("userData"))
@@ -127,6 +208,12 @@ export default {
       oInput.style.display = "none";
       this.$message.success("Copy succeeded");
     },
+
+    imgPath(rsc) {
+      this.$axios.get(`${rsc}`).then(res =>{
+        console.log(res)
+      })
+    },
   },
 };
 </script>
@@ -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;
+    }
   }
 }
 </style>

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;