新增积分弹窗

src/components/errorDialog/index.js

@@ -2,16 +2,23 @@ import Vue from 'vue';
 import confirm from './errorDialog.vue';
 const iErrorMessage = Vue.extend(confirm);
 function showErrMsg(err) {
-let errmsg = ''
+let errmsg = err
-
   // alert(err,'----')
   // let errmsg = err;
-  // if (typeof err === 'object') {
+  if (typeof err === 'object') {
-  //   errmsg = JSON.stringify(err);
+    errmsg = JSON.stringify(err);
-  // }
+  }
-  if (err.indexOf('insufficient tickets') > -1) {
+  if (errmsg.indexOf('insufficient tickets') > -1) {
     errmsg = 'Exploration failed, insufficient number  of explorations.'
-  } else if(err.indexOf('invalid opcode: opcode 0xd8 not defined') > -1) {
+  } else if(errmsg.indexOf('invalid opcode: opcode 0xd8 not defined') > -1) {
+    errmsg = `Claim failed due to insufficient gas.`
+  } else if(errmsg.indexOf('User rejected the request') > -1) {
+    errmsg = `User rejected the request`
+  } else if(errmsg.indexOf('User denied transaction signature') > -1) {
+    errmsg = `User denied transaction signature`
+  } else if(errmsg.indexOf('Internal JSON-RPC error') > -1) {
+    errmsg = `Claim failed due to insufficient gas.`
+  } else if(errmsg.indexOf('TransactionBlockTimeoutError') > -1) {
     errmsg = `Claim failed due to insufficient gas.`
   }
 

src/components/paginationDialog.vue

@@ -15,10 +15,10 @@
 export default {
   props:{
     total: Number,
+    pageSize: Number,
   },
   data() {
     return {
-      pageSize: 6,
       currentPage: 1,
     }
   },

src/views/home/boxBtm.vue

@@ -167,18 +167,24 @@
               slot-scope="scope"
             >{{ scope.row.address.slice(0,4) }}{{ '……'+scope.row.username }}</template>
           </el-table-column> -->
-          <el-table-column label="Points">
+          <el-table-column label="Rewards">
-            <template slot-scope="scope">
+            <template slot-scope="{ row }">
-              <div class="points">
+              <div v-if="row.score" class="points">
-                <span>{{ scope.row.score }}</span>
+                <div>
+                  <span>{{ row.score }}</span>
                 <img src="./../../assets/common/Icon_Points.png" alt="">
                 </div>
+                <div v-if="row.items !== undefined && row.items.length > 0">
+                  <span v-if="row.items !== undefined && row.items.length > 0">{{ row.items[0].name }}</span>
+                  <img src="./../../assets/common/whitelist01.png" alt="">
+                </div>
+              </div>
             </template>
           </el-table-column>
         </el-table>
       </div>
-      <div class="btm">
+      <div class="btm">{{ recordsList.length }}
-        <PaginationDialog  @onChangePage="onRecordsChangePage" :total="recordsList.length" />
+        <PaginationDialog  @onChangePage="onRecordsChangePage" :pageSize="recordsPageSize" :total="recordsList.length" />
       </div>
     </el-dialog>
 
@@ -224,7 +230,7 @@
         </el-table>
       </div>
       <div class="btm">
-        <PaginationDialog  @onChangePage="onBoostingChangePage" :total="myRecordsList.length" />
+        <PaginationDialog  @onChangePage="onBoostingChangePage" :pageSize="boostingPageSize" :total="myRecordsList.length" />
       </div>
     </el-dialog>
 
@@ -453,12 +459,12 @@ export default {
         throw new Error('wallet not connected')
       }
       let storeageKey
+      this.isLoading = true
       try {
         storeageKey = await sendToChain('chest_open', address, id)
-      this.isLoading = true
       
       } catch (err) {
-        this.$showErr(err.data.message)
+        this.$showErr(err)
         this.isLoading = false
         return 
       }
@@ -490,31 +496,6 @@ export default {
       }, 3000)
     },
 
-    async turnBox(id) {
-      let address = localStorage.getItem("myAddress")
-      if(this.token) {
-        try {
-          let resOpen = await sendOpenChest(address, id)
-          if(resOpen) {
-            let serTimeId = setInterval(async () => {
-              let res = await this.$axios.post(
-                process.env.VUE_APP_API_URL+"/api/chest/open",
-                  { chestId: id },
-                  { headers: { Authorization: `Bearer ${this.token}` } }
-                );
-                if (res.data.errcode == 0) {
-                  this.getMyBoxList()
-                  this.openBoxLog()
-                  clearInterval(serTimeId)
-                }
-            }, 2000)
-          }
-        } catch (e) {
-          this.$message.error(e.message)
-        }
-      }
-    },
-
     // 开箱子记录
     async openBoxLog() {
       let res = await this.$axios.get(process.env.VUE_APP_API_URL+'/api/chest/open/history', {
@@ -541,7 +522,7 @@ export default {
         console.log('[getMyHistoricalLog error]',res)
       }
     },
-    // 我的助力记录
+    // 我的助力记录分页
     onBoostingChangePage(val) {
       this.boostingCurrentPage = val
     },
@@ -558,8 +539,6 @@ export default {
     // 复制助力链接
     copyLink(data) {
       this.userData = JSON.parse(localStorage.getItem("userData"))
-      // console.log(data, this.userData.code)
-      // return
       let url = `${location.protocol}//${location.host}/home/new=${this.userData.code}/box=${data.shareCode}/id=${data.id}`
       let oInput = document.createElement("input");
       oInput.value = url;
@@ -1062,7 +1041,7 @@ export default {
         }
         .content {
           margin: 20px 0;
-          height: 420px;
+          height: 450px;
           .el-table {
             background: #1a1821;
             .el-table__header-wrapper {
@@ -1095,10 +1074,29 @@ export default {
                       font-family: 'Poppins';
                       font-weight: 600;
                       font-size: 16px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
                       img {
-                        width: 12px;
+                        width: 10px;
-                        height: 16px;
+                        height: 14px;
+                        margin-left: 10px;
+                        margin-top: 2px;
+                      }
+                      div {
+                        width: 55px;
+                        margin-left: 5px;
+                        text-align: right;
+                      }
+                      div:nth-child(2) {
+                        width: 105px;
                         margin-left: 20px;
+                        display: flex;
+                        align-items: center;
+                        img {
+                          width: 20px;
+                          height: 15px;
+                        }
                       }
                     }
                     .touxiang {

src/views/home/gameView.vue

@@ -2,7 +2,6 @@
   <div>
     <!-- <iframe :src="src" ref="iframe" id="iframe" style="border: 0px" width="500" height="480"></iframe> -->
     <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" ref="iframe"></canvas>
-    <!-- <div @click="stepBtn">方法</div> -->
     <loading :loading="isLoading" />
   </div>
 </template>
@@ -76,13 +75,12 @@ export default {
     async sendOneAction(getTotalUsed, step) {
       let address = this.$store.state.user.address;
       if (!this.$store.state.wallet.connected || !address) {
-        console.log('====')
         throw new Error('wallet not connected')
       }
       const preRes = await apiPreStep(step)
       if (preRes.errcode) {
         // this.$message.error(preRes.errmsg)
-        this.$showErr(preRes.errmsg)
+        this.$showErr(preRes)
         return
       }
       this.isLoading = true
@@ -90,7 +88,6 @@ export default {
       try {
         storeageKey = await sendToChain('explore', address, preRes.data.id)
       } catch (err) {
-        this.$showErr(err.data.message)
         this.isLoading = false
         this.$showErr(err)
         return 
@@ -123,41 +120,6 @@ export default {
         }
       }, 3000)
     },
-    // 行动
-    async stepBtn(getTotalUsed,amount) {
-      let myAddress = localStorage.getItem("myAddress")
-      if(await isWalletConnected()) {
-          if(amount >= 1) {
-          cc.mainAnim.setCurrPos(getTotalUsed)
-          cc.mainAnim.setData(amount)
-          let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/game/pre_step',{step: amount},{headers: { Authorization: `Bearer ${this.token}` }})
-          let id = res.data.data.id
-          if(id){
-            try{
-              let result = await sendExplore(myAddress, id)
-              if(result) {
-                let serTimeId = setInterval(async () => {
-                  let resExplore = await apiGameStep(id);
-                  console.log(resExplore)
-                  if(resExplore.data) {
-                    console.log(resExplore.data)
-                    this.$emit('awardDialog', this.awardData)
-                    clearInterval(serTimeId)
-                    // location.reload()
-                  }
-                }, 2000)
-              }
-          } catch(e) {
-            this.$message.error(e.message)
-          }
-          }
-        } else {
-          this.$message.error('Get the number of explorations')
-        }
-      } else {
-        this.$message.error('Log in first')
-      }
-    },
 
   }
 };

src/views/home/helpDialog.vue

@@ -1,6 +1,5 @@
 <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>
@@ -12,12 +11,14 @@
         <div class="content-left">
           <div class="user-info">
             <div class="user-info-img">
-              <img :src="boxData.avatar" alt="" >
+              <img v-if="!boxData.avatar" src="@/assets/common/head_default.jpg" alt="" >
+              <img v-else :src="boxData.avatar" alt="" >
             </div>
             <div class="user-info-name">{{ boxData.nickname }}: <span>Thank you for your support! </span></div>
           </div>
           <div class="con">
-            <img :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt="">
+            <img v-if="!boxData.level" src="./../../assets/box/Unlock .png" alt="">
+            <img v-else :src="require(`./../../assets/box/box0${boxData.level}.png`)" alt="">
           </div>
           <div class="btn" v-if="!token" @click="linkWallet">Wallet Connect</div>
           <div class="btn" v-else>
@@ -103,15 +104,21 @@ export default {
   },
   mounted() {
     this.token = getToken()
+    if(this.$route.params.name) {
+      if(this.$route.params.boxId.split("id=")[1] != 'undefined') {
         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)])
         this.getBoxData()
         if(this.token) {
           this.getHelpBoxLog()
           // this.helpConfirm()
           this.initBoxState(this.boxCode,this.boxId)
         }
+      } else {
+        this.$emit('handleClose')
+      }
+    }
+    
   },
   methods: {
     // 宝箱信息接口
@@ -147,7 +154,7 @@ export default {
         //   headers: { Authorization: `Bearer ${this.token}` }
         // });
         let res = await apiUploadInviteCode(newInvite)
-        console.log('领取助力奖励 || 判断是否是新用户',res)
+        // console.log('领取助力奖励 || 判断是否是新用户',res)
         return
         if (res.data.errcode == 0) {
           this.isNewUser = 0
@@ -202,15 +209,15 @@ export default {
             // }
           } else {
             this.$emit('handleClose')
-            this.$message.error('Already helped this treasure chest')
+            this.$showErr('Already helped this treasure chest')
           }
         } else {
           this.$emit('handleClose')
-          this.$message.error('The number of treasure chest boosts has been capped')
+          this.$showErr('The number of treasure chest boosts has been capped')
         }
       } else {
         this.$emit('handleClose')
-        this.$message.error('The number of assists for the day has been capped')
+        this.$showErr('The number of assists for the day has been capped')
       }
       
     },
@@ -227,8 +234,8 @@ export default {
       try {
         storeageKey = await sendToChain('chest_enhance', address, boxCode)
       } catch (err) {
-        this.$showErr(err.data.message)
         this.isLoading = false;
+        this.$showErr(err)
         return 
       }
       let serTimeId = setInterval(async () => {
@@ -258,7 +265,7 @@ export default {
           }
         } catch (err) {
           this.isLoading = false;
-          this.$message.error(`claim task reward error: ${err}`)
+          this.$showErr(`claim task reward error: ${err}`)
         }
       }, 3000)
     },
@@ -267,6 +274,7 @@ export default {
     async initBoxState(code,chestId) {
       let res = await this.$axios.post(process.env.VUE_APP_API_URL+'/api/chest/enhance/state',{code: code, chestId: chestId, },{headers: { Authorization: `Bearer ${this.token}` }})
       this.boxState = res.data.data
+      console.log(res.data.data)
       if (this.boxState.userCurrent == this.boxState.userMax) {
         if(this.boxState.enhanced == 1) {
           this.$emit('handleClose')

src/views/home/index.vue

@@ -560,7 +560,7 @@
           <BoxBtm ref="boxList" @toExplore="toExplore" @awardDialog="activityDialog" />
         </div>
         <div class="box-btm" v-show="navIndex == 4">
-          <Ranking :activityName="activityData.name" />
+          <Ranking :activityName="activityData.name" ref="rankingData" />
         </div>
       </div>
       
@@ -751,14 +751,10 @@ export default {
   created() {
     this.userData = JSON.parse(localStorage.getItem("userData"));
     this.token = getToken();
-    this.$nextTick(() => {
-      if (this.$route.params.box) {
-        this.helpDialogVisible = true
-      }
-    });
   },
   mounted() {
     this.initData()
+    console.log(this.getUserState())
   },
   methods: {
     async initData() {
@@ -881,7 +877,7 @@ export default {
       var timer = setInterval(function() {
         if (newwin.closed) {
           clearInterval(timer);
-          alert(newwin.closed, "window closed");
+          // alert(newwin.closed, "window closed");
         }
       }, 10);
       // location.href = url;
@@ -910,7 +906,6 @@ export default {
     },
     // 领取任务奖励
     async getTaskClaim(id) {
-      // debugger
       let address = this.$store.state.user.address;
       if (!this.$store.state.wallet.connected || !address) {
         this.walletDialogVisible = true
@@ -921,8 +916,8 @@ export default {
       try {
         storeageKey = await sendToChain('task_claim', address, id)
       } catch (err) {
-        this.$showErr(err.data.message)
         this.isLoading = false
+        this.$showErr(err)
         return 
       }
       let serTimeId = setInterval(async () => {
@@ -1017,6 +1012,7 @@ export default {
       } else {
         this.dialogTitle = 'Congratulations'
       }
+      this.$refs.rankingData.renewData()
       this.getUserState()
       this.getGameStat()
       this.ExploreDialogVisible = true
@@ -1038,7 +1034,8 @@ export default {
       this.awardData = val
       this.eventName = 'help_event'
       this.dialogTitle = 'Congratulations'
-      this.getUserState()
+      
+      this.filteredBar
       this.ExploreDialogVisible = true
     },
 
@@ -1071,9 +1068,8 @@ export default {
       try {
         storeageKey = await sendToChain('check', address, '')
       } catch (err) {
-        this.$showErr(err.data.message)
-        // console.log(err.data.message)
         this.isLoading = false
+        this.$showErr(err)
         return 
       }
       let serTimeId = setInterval(async () => {
@@ -1093,8 +1089,6 @@ export default {
             }
           } else {
             this.isLoading = false
-            // alert(`领取成功, 获得积分: ${data.score}`)
-            // this.$message.success(data.ticket)
             this.checkAwardDialog(data)
             this.$refs.renewCheck.renewCheckInit()
             this.getGameStat();
@@ -1110,9 +1104,6 @@ export default {
 
     // 领取签到奖励
     async claimSeqStat(day) {
-      // console.log(day)
-      // return
-      // ToDo
       let res = await apiCheckinClaimSeq(day)
       console.info(res)
       this.getGameStat();
@@ -1120,8 +1111,7 @@ export default {
 
     // 获取累计签到奖励
     async getCheckClaim(days) {
-      let res = await apiCheckinClaim(days);
+      let res = await apiCheckinClaim(days)
-      // if (res.ticket) {
         console.info(res)
         this.getGameStat();
         // this.$message.success('Received successfully')
@@ -1159,7 +1149,6 @@ export default {
         try {
           let { errcode, errmsg, data } = await apiEnhanceBox(boxCode)
           if (!errcode) {
-            alert(`助力成功, 获得积分: ${data.score}`)
             this.getGameStat();
             localStorage.removeItem(storeageKey)
             clearInterval(serTimeId)

src/views/home/logDialog.vue

@@ -44,7 +44,7 @@
         </el-table>
       </div>
       <div class="btm">
-        <PaginationDialog @onChangePage="onBoostingChangePage" :total="invitationList.length" />
+        <PaginationDialog @onChangePage="onBoostingChangePage" :pageSize="logPageSize" :total="invitationList.length" />
       </div>
     </el-dialog>
   </div>
@@ -104,7 +104,7 @@ export default {
 
     // 分页
     onBoostingChangePage(val) {
-      this.boostingCurrentPage = val;
+      this.logCurrentPage = val;
     },
 
     // 关闭弹窗

src/views/home/ranking.vue

@@ -19,7 +19,13 @@
               </div>
             </div>
             <div class="my-ranking">
+              <div class="my-ranking-history">
                 <p>My Ranking</p>
+                <div @click="historyDialogVisible = true">
+                  <img src="@/assets/box/Icon_history.png" alt="">
+                  <span>History</span>
+                </div>
+              </div>
               <div class="list-btm">
                 <div class="ranking" v-if="userData.rankTotal == '-'">{{ userData.rankTotal }}</div>
                 <div class="ranking" v-else-if="userData.rankTotal >= 100">Not in the top 100 yet</div>
@@ -76,7 +82,7 @@
                 <img src="@/assets/box/Icon_Star_01.png" alt="">
               </div>
               <div class="forward-list-item-top">
-                <div class="user-img">{{rankingTableData[2].avatar}}
+                <div class="user-img">
                   <img v-if="!rankingTableData[2]" src="@/assets/common/head_default.jpg" alt="">
                   <img v-else-if="rankingTableData[2].avatar == ''"  src="@/assets/common/head_default.jpg" alt="">
                   <img v-else :src="rankingTableData[2].avatar" alt="">
@@ -130,15 +136,58 @@
         </div>
       </div>
     </div>
+
+    <!-- 我的积分记录 -->
+    <el-dialog class="records-dialog" :visible="historyDialogVisible" :modal="false" :before-close="historyHandleClose" :show-close="false">
+      <div class="top">
+        <div class="top-title">Historical Records</div>
+        <div class="top-close" @click="historyDialogVisible = false">
+          <img src="./../../assets/common/CloseButton.png" alt="">
+        </div>
+      </div>
+      <div class="content">
+        <el-table :data="historyCurrentPageItems">
+          <template slot="empty">
+            <div>No Data</div>
+          </template>
+          <el-table-column label="Action">
+              <template slot-scope="{ row }">
+                {{ typeName(row.type) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="Time">
+            <template
+              slot-scope="scope"
+            >{{ scope.row.time | formatDate }}</template>
+          </el-table-column>
+          <!-- <el-table-column label="Username" :width="180">
+            <template
+              slot-scope="scope"
+            >{{ scope.row.address.slice(0,4) }}{{ '……'+scope.row.username }}</template>
+          </el-table-column> -->
+          <el-table-column label="Points">
+            <template slot-scope="scope">
+              <div class="points">
+                <span>{{ scope.row.score }}</span>
+                <img src="./../../assets/common/Icon_Points.png" alt="">
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="btm">
+        <PaginationDialog  @onChangePage="onHistoryChangePage" :pageSize="logPageSize" :total="historyList.length" />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getToken } from './../../utils/cookies.js'
-import formatPrice from '@/components/formatPrice.vue'
+import PaginationDialog from '@/components/paginationDialog.vue'
 export default  {
   components: {
-    
+    PaginationDialog
   },
   props: {
     activityName: String,
@@ -147,38 +196,43 @@ export default  {
     return {
       token: getToken(),
       detailsDialog: false,
-      detailsList: [
+      historyList: [],
-        {
-          action: 'Task',
-          time: '2024-03-08 12:59:37',
-          pts: '90'
-        }
-      ],
       rankingTableData: [],
       userData: [
         {
           scoreTotal: '0'
         }
-      ]
+      ],
+      historyDialogVisible: false,
+      logPageSize: 6,
+      logCurrentPage: 1,
     }
   },
+  computed: {
+    // 计算我的助力分页
+    historyCurrentPageItems() {
+      if(this.historyList.length == 0){
+        return this.historyList
+      }
+      let start = (this.logCurrentPage - 1) * this.logPageSize;
+      let end = start + this.logPageSize;
+      return this.historyList.slice(start, end)
+    },
+  },
   mounted() {
-    
     if(this.token) {
       this.getLeaderBoard()
-      // this.getUserState()
       this.userData = JSON.parse(localStorage.getItem("userData"));
-      console.log(this.userData)
       this.getMyIntegralList()
     }
   },
   methods: {
     // 我的积分记录
     async getMyIntegralList() {
-      let res = await this.$axios.get(process.env.VUE_APP_API_URL+`/api/user/checkin/list/all`,{ params: '',
+      let res = await this.$axios.get(process.env.VUE_APP_API_URL+`/api/activity/score_list`,{ params: '',
         headers: { Authorization: `Bearer ${this.token}` },
       })
-      this.detailsList = res.data.data
+      this.historyList = res.data.data
     },
 
     // 获取总积分榜
@@ -197,6 +251,46 @@ export default  {
         localStorage.setItem('userData', JSON.stringify(res.data.data))
       })
     },
+    renewData() {
+      this.getLeaderBoard()
+      this.getMyIntegralList()
+      this.getUserState()
+    },
+
+    // 关闭弹窗
+    historyHandleClose() {
+      this.historyDialogVisible = false;
+    },
+
+    // 分页 翻页
+    onHistoryChangePage(val) {
+      this.logCurrentPage = val;
+    },
+
+    // 处理任务类型名字
+    typeName(type) {
+      if(type.includes('Social Tasks')) {
+      // // 任务
+        return type = `Task`
+      } else if(type.includes('game_step')) {
+        // 探索
+        return type = `Exploration`
+      } else if(type.includes('open_chest')) {
+        // 开宝箱
+        return type = `Open the Treasure`
+      } else if(type.includes('enhance_chest_gift')) {
+        // 助力
+        return type = `Boosting`
+      } else if(type.includes('invite_rebate')) {
+        // 邀请收益
+        return type = `Invitation Earning`
+      } else if(type.includes('')) {
+        // 任务
+        return type = `Task`
+      } else {
+        return type = 'Task'
+      }
+    },
   },
 }
 
@@ -265,10 +359,35 @@ export default  {
             }
           }
           .my-ranking {
+            .my-ranking-history {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-top: 30px;
+              position: relative;
+              z-index: 99;
+              cursor: pointer;
               p {
                 font-size: 12px;
                 text-align: left;
-              margin-top: 40px;
+              }
+              div {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                background: #2d2738;
+                padding: 8px 15px;
+                border-radius: 20px;
+                img {
+                  width: 15px;
+                  height: 15px;
+                  margin-right: 5px;
+                }
+                span {
+                  font-size: 12px;
+                }
+              }
             }
             .list-btm {
               font-size: 28px;
@@ -559,5 +678,112 @@ export default  {
       }
     }
   }
+  ::v-deep .el-dialog {
+    border: 1px solid #924df2;
+    // box-shadow: 0px 0px 20px #924df2;
+    background: #1a1821;
+    border-radius: 80px;
+    padding: 0px 50px;
+    .el-dialog__header {
+      padding: 0;
+    }
+    .el-dialog__body {
+      position: relative;
+      color: #fff;
+      .top {
+        display: flex;
+
+        .top-title {
+          color: #fff;
+          font-size: 28px;
+          font-family: "Anton-Regular";
+        }
+        .top-close {
+          position: absolute;
+          top: -8%;
+          right: -9%;
+          width: 100px;
+          height: 100px;
+          cursor: pointer;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .content {
+        margin: 20px 0;
+        height: 420px;
+        .el-table {
+          background: #1a1821;
+          .el-table__header-wrapper {
+            border-radius: 20px;
+            .el-table__header {
+              tr {
+                background: #1a1821;
+
+                overflow: hidden;
+                .el-table__cell {
+                  border: 0px;
+                  background: #2d2738;
+                  color: #fff;
+                }
+                .el-table__cell:last-child {
+                  border-radius: 0 20px 20px 0 !important;
+                }
+              }
+            }
+          }
+          .el-table__body-wrapper {
+            .el-table__body {
+              .el-table__row {
+                background: #1a1821;
+                .el-table__cell {
+                  color: #fff;
+                  border: 0px;
+                  .points {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    // width: 80px;
+                    margin: 0 auto;
+                    color: #9950fa;
+                    font-family: "Poppins";
+                    font-weight: 600;
+                    font-size: 16px;
+                    img {
+                      width: 12px;
+                      height: 16px;
+                      margin-left: 20px;
+                    }
+                  }
+                  .touxiang {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-evenly;
+                    img {
+                      width: 40px;
+                      height: 40px;
+                    }
+                  }
+                }
+              }
+            }
+            tr:hover {
+              background: none !important;
+              td {
+                background: none;
+              }
+            }
+          }
+          &::before {
+            background: #1a1821;
+          }
+        }
+      }
+      .btm {
+      }
+    }
+  }
 }
 </style>