From b73c078acac2e76bdfdeffcda49cd6f5e3f9ebad Mon Sep 17 00:00:00 2001
From: yuyongdong <yuyongdong@kingsome.cn>
Date: Wed, 17 Apr 2024 17:20:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue   | 107 +++++++++++++++++++++++--------------
 src/views/home/ranking.vue |  76 +++++++++++++++++++-------
 2 files changed, 125 insertions(+), 58 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 779d1b3..044b832 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -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;
diff --git a/src/views/home/ranking.vue b/src/views/home/ranking.vue
index 9b970c9..a58d5a7 100644
--- a/src/views/home/ranking.vue
+++ b/src/views/home/ranking.vue
@@ -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;