修改第一版bug

src/utils/webapi.js

@@ -151,6 +151,12 @@ export const apiUserState = async () => {
   return httpGet(url)
 }
 
+// 邀请新人
+export const apiUploadInviteCode = async (code) => {
+  const url = `${API_BASE}/api/activity/upload_invite_code`;
+  return httpGet(url, { code })
+}
+
 // 探索状态
 export const apiGameStat = async () => {
   const url = `${API_BASE}/api/game/stat`;

src/views/home/awardDialog.vue

@@ -72,7 +72,7 @@
         </div>
         <div class="btn" @click="ExploreDialog">Confirm</div>
       </div>
-      <div v-else-if="eventName == 'help_event' || eventName == 'help_event'">
+      <div v-else-if="eventName == 'help_event' || eventName == 'check_event'">
         <div class="top">
           <div class="top-title"></div>
           <div class="top-close" @click="ExploreDialog">
@@ -89,13 +89,13 @@
             </div>
           </div>
           <div class="points-amount" v-if="awardData.ticket">
-            <div>Points</div>
+            <div>Explore</div>
             <div>
               <span>X {{ awardData.ticket }}</span>
               <img src="./../../assets/common/Icon_Explore9.png" alt="">
             </div>
           </div>
-          <div v-if="awardData.isNewUser == 0">Complete tasks to get more rewards</div>
+          <div>Complete tasks to get more rewards</div>
         </div>
         <div class="btn" v-if="awardData.isNewUser == 0" @click="toComplete">To complete</div>
         <div class="btn" v-else @click="ExploreDialog">Confirm</div>

src/views/home/helpDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- 成功获得奖品弹窗 -->
+    <!--  -->
     <el-dialog class="Explore-dialog" :visible.sync="helpDialogVisible" :modal="false" :before-close="helpDialog">
       <div class="top">
         <div class="top-title">Boosting Records</div>
@@ -47,10 +47,10 @@
                   <div class="user-img" v-else>
                     <img :src="item.imgSrc" alt="">
                   </div>
-                  <div class="user-name">User name</div>
+                  <div class="user-name">{{ item.nickname }}</div>
                 </div>
                 <div class="right">
-                  <div class="records">+8</div>
+                  <div class="records">+{{ item.score }}</div>
                   <div class="icon">
                     <img src="./../../assets/common/Icon_Points.png" alt="">
                   </div>
@@ -98,8 +98,8 @@ export default {
     this.boxId = this.$route.params.boxId.split("id=")[1];
     this.boxCode = this.$route.params.box.split("box=")[1];
     // this.$axios.all([this.getBoxData(),this.getHelpBoxLog(),this.helpConfirm(),this.initBoxState(this.boxCode,this.boxId)])
-    if(this.token) {
     this.getBoxData()
+    if(this.token) {
       this.getHelpBoxLog()
       this.helpConfirm()
       this.initBoxState(this.boxCode,this.boxId)
@@ -108,7 +108,7 @@ export default {
   methods: {
     // 宝箱信息接口
     async getBoxData() {
-      let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/chest/enhance/state', {chestId: '660a4b63de92bca95af2b714'},{})
+      let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/chest/enhance/state', {chestId: this.boxId},{})
       this.boxData = res.data.data
     },
 
@@ -157,37 +157,37 @@ export default {
           if(this.boxState.enhanced == 0) {
             // 4、开始助力
             this.sendEnhanceReq(this.boxCode)
-            // try{
+            try{
-            //   // 5、链上请求交互
+              // 5、链上请求交互
-            //   let helpRes = await sendHelp(address, this.boxCode)
+              let helpRes = await sendHelp(address, this.boxCode)
-            //   if(helpRes) {
+              if(helpRes) {
-            //     // 6、轮询是否助力成功
+                // 6、轮询是否助力成功
-            //     let serTimeId = setInterval(async () => {
+                let serTimeId = setInterval(async () => {
-            //       let res = await this.$axios.post(
+                  let res = await this.$axios.post(
-            //           "/api/chest/enhance",
+                      "/api/chest/enhance",
-            //           { code: this.boxCode },
+                      { code: this.boxCode },
-            //           { headers: { Authorization: `Bearer ${this.token}` } }
+                      { headers: { Authorization: `Bearer ${this.token}` } }
-            //         );
+                    );
-            //         if (res.data.errcode == 0) {
+                    if (res.data.errcode == 0) {
-            //           // 7、判断是否是新用户
+                      // 7、判断是否是新用户
-            //           if(this.isNewUser == 0) {
+                      if(this.isNewUser == 0) {
-            //             // 8、关闭助力弹窗
+                        // 8、关闭助力弹窗
-            //             this.awardData = {...res.data.data, isNewUser: this.isNewUser}
+                        this.awardData = {...res.data.data, isNewUser: this.isNewUser}
-            //             this.$emit('awardDialog', this.awardData)
+                        this.$emit('awardDialog', this.awardData)
-            //             this.$emit('handleClose')
+                        this.$emit('handleClose')
-            //           } else {
+                      } else {
-            //             // 8、关闭助力弹窗
+                        // 8、关闭助力弹窗
-            //             this.awardData = {...res.data.data, isNewUser: this.isNewUser}
+                        this.awardData = {...res.data.data, isNewUser: this.isNewUser}
-            //             this.$emit('awardDialog', this.awardData)
+                        this.$emit('awardDialog', this.awardData)
-            //             this.$emit('handleClose')
+                        this.$emit('handleClose')
-            //           }
+                      }
-            //           clearInterval(serTimeId)
+                      clearInterval(serTimeId)
-            //         }
+                    }
-            //     }, 2000)
+                }, 2000)
-            //   }
+              }
-            // } catch(e) {
+            } catch(e) {
-            //   this.$message.error(e.message)
+              this.$message.error(e.message)
-            // }
+            }
           } else {
             this.$emit('handleClose')
             this.$message.error('Already helped this treasure chest')

src/views/home/index.vue

@@ -14,6 +14,7 @@
                   <img src="./../../assets/common/Invites.png" alt="">
                 </div>
                 <div class="btm">Invites</div>
+                <div class="hover-tips">Successful invtations</div>
               </li>
               <li>
                 <div class="top">
@@ -21,25 +22,32 @@
                   <img src="./../../assets/common/Icon_Boosting.png" alt="">
                 </div>
                 <div class="btm">Boosting</div>
+                <div class="hover-tips">Daily boosting reamaining times</div>
               </li>
-              <!-- <li v-if="navIndex == 1"> -->
               <li>
                 <div class="top">
                   <span class="textCol2">{{ todayStepTicket }}</span>
                   <img src="./../../assets/common/Icon_Explore.png" alt="">
                 </div>
                 <div class="btm">Exploration</div>
+                <div class="hover-tips">Explorations obtained</div>
               </li>
               <li>
                 <div class="top">
-                  <span class="textCol1">{{ myScoreTotal }}.000</span>
+                  <span class="textCol1">{{ myScoreTotal }}</span>
                   <img src="./../../assets/common/Icon_Points.png" alt="">
                 </div>
                 <div class="btm">Points</div>
+                <div class="hover-tips">Explorations obtained</div>
               </li>
+              <div class="touxiang">
+                <img src="./../../assets/home/Nav bar_character.png" alt />
+              </div>
             </div>
             <div class="left-top-points-right">
-              <img src="./../../assets/home/Nav bar_character.png" alt />
+              <img v-if="inWhiteList == 1" src="@/assets/common/wallet-no.png" alt="">
+              <img v-else src="@/assets/common/wallet-yes.png" alt="">
+              <div v-if="inWhiteList == 1" class="hover-tips">Holder of the partner NFT collections will receive additional rewards</div>
             </div>
           </div>
         </div>
@@ -155,15 +163,29 @@
           </div>
           <div class="quest">
             <div class="bar">
+              <div class="bar-left">
                 <div class="bar-top">
-                <div class="bar-top-left">12</div>
+                  <div class="bar-top-left">Progress</div>
-                <div class="bar-top-right">34</div>
+                  <div class="bar-top-right">
+                    <div class="bar-top-jinDu" :style="{width: filteredBar+'%'}" ref="questPendingBg"></div>
+                  </div>
                 </div>
                 <div class="bar-btm">
                   <p>*Complete tasks to win three exploration</p>
                   <p>attempts.</p>
                 </div>
               </div>
+              <div class="bar-right">{{filteredBar}}
+                <div class="bar-no" v-if="filteredBar < 100">
+                  <span>X 3 </span>
+                  <img src="@/assets/common/Icon_explore0.png" alt="">
+                </div>
+                <div class="bar-yes" v-else>
+                  <span>X 3 </span>
+                  <img src="@/assets/common/Icon_Explore9.png" alt="">
+                </div>
+              </div>
+            </div>
             <div class="quest-list">
               <li v-for="(item, index) in activeList" :key="index">
                 <div class="quest-item"  @click="toPost(item, true)">
@@ -383,37 +405,45 @@
                 <span>Daily Check-in </span>+{{ gameStateData.todayTickets }}
                 <img src="./../../assets/common/Icon_Daily.png" alt="">
               </li>
-              <li v-if="gameStateData.todayStat == 9">
+              <div class="check-yes"  v-if="gameStateData.todayStat == 9">
-                <span>Daily Check-in </span>+{{ gameStateData.todayTickets }}
                 <img src="./../../assets/home/check-yes.png" alt="">
-              </li>
+              </div>
             </div>
           </div>
         </div>
         <div class="content-right" v-if="navIndex == 2">
           <div class="title">
-            <div class="title-left">
+            <!-- <div class="title-left">
               <div>Partner</div>
-            </div>
+            </div> -->
           </div>
           <div class="quest">
-            <div class="quest-list">
+            <div class="partner-list">
-              <div ></div>
+              <div>
-              <li v-for="(item, index) in activeList" :key="index">
+                coming soon
-                <div class="content-right-left">
+              </div>
-                  <!-- <div class="img-logo">
+              <!-- <div class="partner">
+                <div>Partner</div>
+                <div>Rewards</div>
+                <div></div>
+              </div>
+              <li v-for="(item, index) in nftsList" :key="index">
+                <div class="quest-item">
+                  <div class="content-rewards-left">
+                    <div class="img-logo">
                       <img src="./../../assets/home/twitter.png" alt />
                     </div>
-                  <div class="score">
-                    <span>{{ item.score }} Pts</span>
-                  </div>-->
                     <div class="desc">
-                    <h3>{{ item.title }}</h3>
+                      <h3>{{ item.collection }}</h3>
-                    <p>{{ item.desc }}</p>
+                      <p>{{ item.projectName }}</p>
                     </div>
                   </div>
+                  <div class="rewards">
+                    <img src="@/assets/box/box01.png" alt="">
+                  </div>
                   <div v-if="token != null" class="btn">
                     <div class="is-btn">
+                      <div>Chick</div>
                       <div v-if="item.status == 0" class="started" @click="toPost(item)">{{ item.actionTitle }}</div>
                       <CheckBtn v-if="item.status == 1" @stateupdate="toCheck" :dataid="item.id" time="10" title="Check" class="started">Check</CheckBtn>
                       <div v-if="item.status == 2" class="claim" @click="getTaskClaim(item.id)">Claim</div>
@@ -421,7 +451,8 @@
                     </div>
                   </div>
                   <div class='light-btn' v-else @click="onWalletLogin">Connect Wallet</div>
-              </li>
+                </div>
+              </li> -->
             </div>
           </div>
         </div>
@@ -443,6 +474,7 @@
                       <img src="./../../assets/common/Invites.png" alt="">
                     </div>
                     <div class="btm">Invites</div>
+                    <div class="hover-tips">Successful invtations</div>
                   </li>
                   <li>
                     <div class="top">
@@ -450,25 +482,31 @@
                       <img src="./../../assets/common/Icon_Boosting.png" alt="">
                     </div>
                     <div class="btm">Boosting</div>
+                    <div class="hover-tips">Daily boosting reamaining times</div>
                   </li>
-                  <!-- <li v-if="navIndex == 1"> -->
                   <li>
                     <div class="top">
                       <span class="textCol2">{{ todayStepTicket }}</span>
                       <img src="./../../assets/common/Icon_Explore.png" alt="">
                     </div>
                     <div class="btm">Exploration</div>
+                    <div class="hover-tips">Explorations obtained</div>
                   </li>
                   <li>
                     <div class="top">
-                      <span class="textCol1">{{ myScoreTotal }}.000</span>
+                      <span class="textCol1">{{ myScoreTotal }}</span>
                       <img src="./../../assets/common/Icon_Points.png" alt="">
                     </div>
                     <div class="btm">Points</div>
+                    <div class="hover-tips">Explorations obtained</div>
                   </li>
+                  <div class="touxiang">
+                    <img src="./../../assets/home/Nav bar_character.png" alt />
+                  </div>
                 </div>
                 <div class="left-top-points-right">
-                  <img src="./../../assets/home/Nav bar_character.png" alt />
+                  <img src="@/assets/common/wallet-no.png" alt="">
+                  <div class="hover-tips">Holder of the partner NFT collections will receive additional rewards</div>
                 </div>
               </div>
             </div>
@@ -558,6 +596,7 @@ import LogDialog from './logDialog.vue'
 import { getToken } from '@/utils/cookies.js'
 // import { getWalletAddress, isWalletConnected, linkWallet } from "@/wallet/index.js";
 import {
+  apiUploadInviteCode,
   apiBeginActivity,
   apiCheckActivity,
   apiTaskClaim,
@@ -597,7 +636,9 @@ export default {
   },
   data() {
     return {
+      inWhiteList: 0,
       activityData: {},
+      baseTasks: [],
       myScoreTotal: 0,
       myInviteCount: 0,
       myEnhanceCount: 0,
@@ -668,6 +709,8 @@ export default {
       dialogTitle: '',
       eventName: '',
       logDialogVisible: false,
+      nftsList: [],
+      isNewUser: 0,
     };
   },
   watch: {
@@ -678,6 +721,15 @@ export default {
       deep: true
     }
   },
+  computed: {
+    filteredBar() {
+      let aa = this.activeList.filter(item => this.baseTasks.includes(item.id))
+      let bb = aa.filter(item => item.status == 2 || 3).length
+      console.log(bb, aa, this.baseTasks, this.activeList,'-------------------------------------------------------------------------')
+      let cc = bb / this.baseTasks.length * 100
+      return cc
+    },
+  },
   created() {
     this.userData = JSON.parse(localStorage.getItem("userData"));
     this.token = getToken();
@@ -705,6 +757,10 @@ export default {
         this.myScoreTotal = this.userData.scoreTotal
         this.myInviteCount = this.userData.inviteCount
         this.myEnhanceCount = this.userData.enhanceCount
+        this.inWhiteList = this.userData.inWhiteList
+        if(this.$route.params.name) {
+          this.helpConfirm()
+        }
         
       }  else {
         this.walletDialogVisible = true
@@ -730,6 +786,8 @@ export default {
             this.activeList.push(data)
           }
           this.activityData = res.data.data
+          this.baseTasks = res.data.data.baseTasks
+          console.log(this.baseTasks, this.activityData)
           // }
         })
         .catch(err => {
@@ -939,6 +997,7 @@ export default {
 
     // 社媒任务奖励
     activityDialog(val) {
+      console.log('社媒任务奖励',val)
       this.awardData = val
       this.eventName = 'help_event'
       this.dialogTitle = 'Congratulations'
@@ -1082,6 +1141,7 @@ export default {
     async getNftList() {
       let res = await this.$axios.get(process.env.VUE_APP_API_URL+'/api/partner/nfts')
       console.log('apiNftList获取nft合作列表', res)
+      this.nftsList = res.data.data
     },
 
     // 复制链接
@@ -1102,6 +1162,51 @@ export default {
       }
       
     },
+
+    // 邀请新人
+    async getUploadInviteCode(code) {
+      await apiUploadInviteCode(code)
+      return
+      try {
+          let { errcode, errmsg, data } = apiUploadInviteCode(code)
+          if (errcode) {
+            if (errcode === 12) {
+              // 已领取, 给个提示就可以了
+              this.$message.error(errmsg)
+            } else if (errcode !== 14) {
+              // 状态不是等待链上确认的, 都提示错误
+              this.$message.error(errmsg)
+            }
+          } else {
+            if(data?.status == 3) {
+              // alert(`领取成功, 获得积分: ${data.score}`)
+              // this.activityDialog({data, isNewUser: this.isNewUser})
+              localStorage.removeItem(storeageKey)
+            }
+          }
+        } catch (err) {
+          this.$message.error(`claim task reward error: ${err}`)
+        }
+    },
+
+    // 领取助力奖励 || 判断是否是新用户
+    async helpConfirm() {
+      if(this.$route.params.name != undefined) {
+        let newInvite = this.$route.params.name.split("new=")[1];
+        let rtoken = await checkReCaptcha("invite_user");
+        let res = await this.$axios.get(process.env.VUE_APP_API_URL+"/api/activity/upload_invite_code", {
+          params: { code: newInvite, rtoken: rtoken },
+          headers: { Authorization: `Bearer ${this.token}` }
+        });
+        if (res.data.errcode == 0) {
+          this.isNewUser = 0
+          this.getUploadInviteCode(newInvite)
+        } else {
+          this.isNewUser = 1
+        }
+      }
+    },
+
     isLogin() {
       if(this.token) {
         this.logDialogVisible = true
@@ -1176,16 +1281,34 @@ export default {
           }
         }
         .left-top-points {
-          background: #2d2738;
           border-radius: 15px;
-          position: relative;
+          display: flex;
+          align-items: center;
           .left-top-points-left {
             // width: 140px;
             display: flex;
+            height: 50px;
             padding-right: 30px;
+            background: url('@/assets/common/User-bar.png') no-repeat;
+            background-size: 100% 100%;
+            position: relative;
             li {
               color: #fff;
-              padding: 5px 20px 5px 40px;
+              padding: 10px 20px 5px 40px;
+              cursor: pointer;
+              position: relative;
+              .hover-tips {
+                display: none;
+                position: absolute;
+                top: 35px;
+                right: 0px;
+                width: 240px;
+                height: 100px;
+                line-height: 90px;
+                background: url('@/assets/common/WL .png') no-repeat;
+                background-size: 100% 100%;
+                z-index: 1;
+              }
               .top {
                 display: flex;
                 justify-content: end;
@@ -1215,6 +1338,11 @@ export default {
                 color: #A8A5AC;
                 text-align: right;
               }
+              &:hover {
+                .hover-tips {
+                  display: block;
+                }
+              }
             }
             li:nth-child(1) {
               img {
@@ -1227,25 +1355,52 @@ export default {
                 width: 13px;
                 height: 13px;
               }
+              &:hover {
+                .hover-tips {
+                  display: block;
+                  width: 300px;
+                }
+              }
             }
             li:nth-child(4) {
               img {
-                width: 10px;
+                width: 12px;
-                height: 12px;
+                height: 16px;
               }
             }
-          }
+            .touxiang {
-          .left-top-points-right {
               position: absolute;
               top: 50%;
               right: -20px;
               transform: translateY(-50%);
+            }
+          }
+          .left-top-points-right {
+            margin-left: 30px;
             width: 60px;
             height: 60px;
+            cursor: pointer;
+            position: relative;
             img {
               width: 100%;
               height: 100%;
             }
+            .hover-tips {
+              display: none;
+              position: absolute;
+              top: 35px;
+              right: -60px;
+              width: 590px;
+              height: 120px;
+              line-height: 110px;
+              background: url('@/assets/common/WL .png') no-repeat;
+              background-size: 100% 100%;
+            }
+            &:hover {
+              .hover-tips {
+                display: block;
+              }
+            }
           }
         }
       }
@@ -1512,22 +1667,75 @@ export default {
           border-radius: 20px;
           .bar {
             margin-bottom: 10px;
+            display: flex;
+            .bar-left {
+              padding: 0 10px;
               .bar-top {
                 display: flex;
+                align-items: center;
+                margin-bottom: 5px;
+                .bar-top-left {
+                  font-size: 14px;
+                }
+                .bar-top-right {
+                  width: 200px;
+                  height: 8px;
+                  margin-left: 10px;
+                  background: url('@/assets/common/Progress bar bg.png') no-repeat;
+                  background-size: 100% 100%;
+                  .bar-top-jinDu {
+                    width: 80%;
+                    height: 8px;
+                    background: url('@/assets/common/Progress bar fill.png') no-repeat;
+                    background-size: 100% 100%;
+                  }
+                }
               }
               .bar-btm {
-              font-size: 10px;
+                font-size: 12px;
                 color: #9950FD;
                 p {
                   text-align: left;
                 }
               }
             }
+            .bar-right {
+              >div {
+                display: flex;
+                align-items: center;
+                font-weight: 700;
+              }
+              .bar-no {
+                color: #4E475B;
+              }
+              .bar-yes {
+                color: #9950FD;
+              }
+              img {
+                width: 20px;
+                height: 20px;
+                margin-left: 5px;
+              }
+            }
+          }
           .quest-list {
             width: 100%;
-            height: 380px;
+            height: 320px;
             overflow-y: scroll;
             overflow-x: hidden;
+            .partner {
+              display: flex;
+              height: 30px;
+              font-size: 14px;
+              justify-content: space-between;
+              align-items: center;
+              div:nth-child(1) {
+                width: 180px;
+              }
+              div:nth-child(2) {
+                width: 45px;
+              }
+            }
             li:hover{
               background-color: #27242e;
             }
@@ -1555,8 +1763,33 @@ export default {
                     height: 100%;
                   }
                 }
-                .score {
+                .desc {
-                  margin-left: 10px;
+                  max-width: 240px;
+                  margin: 0 5px;
+                  h3 {
+                    text-align: left;
+                    font-size: 14px;
+                    font-family: 'Poppins-SemiBold';
+                  }
+                  p {
+                    font-family: 'Poppins-Light';
+                    font-size: 12px;
+                    text-align: left;
+                  }
+                }
+              }
+              .content-rewards-left {
+                display: flex;
+                align-items: left;
+                width: 180px;
+                .img-logo {
+                  width: 40px;
+                  height: 40px;
+                  margin-right: 10px;
+                  img {
+                    width: 100%;
+                    height: 100%;
+                  }
                 }
                 .desc {
                   max-width: 240px;
@@ -1573,6 +1806,14 @@ export default {
                   }
                 }
               }
+              .rewards {
+                width: 45px;
+                height: 40px;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
               .btn {
                 border-radius: 15px;
                 color: #000;
@@ -1631,6 +1872,13 @@ export default {
               }
             }
           }
+          .partner-list {
+            height: 380px;
+            line-height: 380px;
+            font-size: 54px;
+            font-family: "Anton-Regular";
+            font-weight: 700;
+          }
           ::v-deep .quest-list::-webkit-scrollbar {
           width: 5px;
         }
@@ -1693,8 +1941,7 @@ export default {
       .right-header {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 10px;
+        margin: 10px 50px 10px 0;
-        margin-top: 10px;
         .right-header-left {
           .right-header-nav {
             width: 160px;
@@ -1923,16 +2170,26 @@ export default {
               background: #fec25d;
               border-radius: 15px;
               font-size: 14px;
+              color: #000;
               cursor: pointer;
               span {
                 display: inline-block;
                 margin-right: 10px;
+                color: #000;
               }
               img {
                 width: 15px;
                 height: 15px;
               }
             }
+            .check-yes {
+              width: 40px;
+              height: 40px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
           }
           .check-btm {
             width: 200px;
@@ -1956,14 +2213,14 @@ export default {
       width: 100%;
       height: 100%;
       background: url('./../../assets/common/bg_p3.png') no-repeat;
-      background-size: 100%;
+      background-size: 100% 100%;
       .box-top {
         width: 100%;
         // height: 100%;
         display: flex;
         justify-content: space-between;
         .left {
-          width: 60%;
+          width: 68%;
           .left-top {
             display: flex;
             justify-content: space-between;
@@ -1980,16 +2237,34 @@ export default {
               }
             }
             .left-top-points {
-              background: #2d2738;
               border-radius: 15px;
-              position: relative;
+              display: flex;
+              align-items: center;
               .left-top-points-left {
                 // width: 140px;
                 display: flex;
+                height: 50px;
+                align-items: center;
+                background: url('@/assets/common/User-bar.png') no-repeat;
+                background-size: 100% 100%;
+                position: relative;
                 padding-right: 30px;
                 li {
                   color: #fff;
-                  padding: 5px 20px 5px 40px;
+                  padding: 10px 20px 5px 40px;
+                  position: relative;
+                  .hover-tips {
+                    display: none;
+                    position: absolute;
+                    top: 35px;
+                    right: 0px;
+                    width: 240px;
+                    height: 100px;
+                    line-height: 90px;
+                    background: url('@/assets/common/WL .png') no-repeat;
+                    background-size: 100% 100%;
+                    z-index: 1;
+                  }
                   .top {
                     display: flex;
                     justify-content: end;
@@ -2019,6 +2294,11 @@ export default {
                     color: #A8A5AC;
                     text-align: right;
                   }
+                  &:hover {
+                    .hover-tips {
+                      display: block;
+                    }
+                  }
                 }
                 li:nth-child(1) {
                   img {
@@ -2031,31 +2311,58 @@ export default {
                     width: 13px;
                     height: 13px;
                   }
+                  &:hover {
+                    .hover-tips {
+                      display: block;
+                      width: 300px;
+                    }
+                  }
                 }
                 li:nth-child(4) {
                   img {
-                    width: 10px;
+                    width: 12px;
-                    height: 12px;
+                    height: 16px;
                   }
                 }
-              }
+                .touxiang {
-              .left-top-points-right {
                   position: absolute;
                   top: 50%;
                   right: -20px;
                   transform: translateY(-50%);
+                }
+              }
+              .left-top-points-right {
+                margin-left: 30px;
                 width: 60px;
                 height: 60px;
+                cursor: pointer;
+                position: relative;
                 img {
                   width: 100%;
                   height: 100%;
                 }
+                .hover-tips {
+                  display: none;
+                  position: absolute;
+                  top: 35px;
+                  right: -60px;
+                  width: 590px;
+                  height: 120px;
+                  line-height: 110px;
+                  background: url('@/assets/common/WL .png') no-repeat;
+                  background-size: 100% 100%;
+                }
+                &:hover {
+                  .hover-tips {
+                    display: block;
+                  }
+                }
               }
             }
           }
         }
         .right {
-          width: 30%;
+          width: 28%;
           padding: 20px 30px;
           .right-header {
             display: flex;
@@ -2155,8 +2462,7 @@ export default {
             }
           }
           .nav-btm {
-            width: 380px;
+            // width: 380px;
-
             margin: 10px auto;
             margin-bottom: 0px;
             .nav {

src/views/home/logDialog.vue

@@ -36,7 +36,7 @@
           <el-table-column label=" Earnings">
             <template slot-scope="scope">
               <div class="points">
-                <span>{{ scope.row.score }}</span>
+                <span>{{ scope.row.scoreInvite }}</span>
                 <!-- <img src="./../../assets/common/Icon_Points.png" alt=""> -->
               </div>
             </template>
@@ -95,6 +95,7 @@ export default {
         headers: { Authorization: `Bearer ${token}` }
       });
       // ToDo
+      this.invitationList = res.data.data
       console.log("我的邀请列表", res.data.data);
     },
 

src/views/home/ranking.vue

@@ -33,7 +33,7 @@
               </div>
               <div class="forward-list-item-top">
                 <div class="user-img">
-                  <img :src="rankingTableData[0].avatar" alt="">
+                  <img :src="rankingTableData[1].avatar" alt="">
                 </div>
               </div>
               <div class="forward-list-item-btm">