merge

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^1.1.3",
+    "clipboard": "^2.0.11",
     "core-js": "^3.8.3",
     "cssnano": "^5.1.14",
     "element-ui": "^2.15.10",
@@ -19,6 +20,7 @@
     "postcss-write-svg": "^3.0.1",
     "three": "^0.146.0",
     "vue": "^2.6.14",
+    "vue-clipboard2": "^0.3.3",
     "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import axios from 'axios';
-
+import VueClipBoard from 'vue-clipboard2'
 // 完整引入，main.js写入以下代码
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
@@ -15,6 +15,8 @@ Vue.use(ElementUI)
 Vue.config.productionTip = false
 
 
+Vue.use(VueClipBoard)
+
 new Vue({
   router,
   store,

src/views/mobile/ListDetails.vue

@@ -33,7 +33,7 @@
             <div>
               <img
                 class="imgs"
-                :src="require('@/assets/mobile/current-' + item.id + '.png')"
+                :src="require('@/assets/mobile/current-' + (i + 1) + '.png')"
                 alt=""
               />
             </div>

src/views/mobile/RankingList.vue

@@ -6,11 +6,11 @@
           <div>
             <img
               class="icon-img"
-              src="../../assets/mobile/twitter.png"
+              src="../../assets/mobile/portrait.png"
               alt=""
             />
           </div>
-          <div class="text">fsdf</div>
+          <div class="text">{{ account }}</div>
         </div>
         <div class="twitter-btn">
           <div>
@@ -19,8 +19,9 @@
               src="../../assets/mobile/twitter.png"
               alt=""
             />
+            <span class="text"> {{ userinfo.twitter }}</span>
           </div>
-          <div class="text">@monal</div>
+          <!-- <div ></div> -->
         </div>
         <div class="discard-btn">
           <div>
@@ -29,8 +30,8 @@
               src="../../assets/mobile/discard.png"
               alt=""
             />
+            <span class="text"> {{ userinfo.discord }}</span>
           </div>
-          <div class="text">Comicboo</div>
         </div>
       </div>
       <div class="switch">
@@ -46,17 +47,34 @@
       <div v-show="currentIndex == 0" class="list">
         <div class="invititaion-code-title">
           INVITATIONN CODE
-          <img class="icon-img" src="../../assets/mobile/i-icon.png" alt="" />
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom-start"
+          >
+          <div slot="content">
+            Invite other player<br /> to register 
+            by exlusive <br />code/link and <br />get Rally points
+                  
+                    </div>
+            <img class="icon-img" src="../../assets/mobile/i-icon.png" alt="" />
+          </el-tooltip>
         </div>
-        <div class="invititaion-code">
+        <div
-          {{ userinfo.invite_code }}
+          class="invititaion-code tag-read"
+          @click="copy"
+          v-clipboard:copy="account"
+          v-clipboard:success="onCopy"
+          v-clipboard:error="onCopyError"
+        >
+          {{ userinfo.invite_code ? userinfo.invite_code : "" }}
           <img class="icon-img" src="../../assets/mobile/copy.png" alt="" />
         </div>
         <div class="time-content">
           <div class="date-time-title">BETA TEST COUNT COUNTDOWN</div>
           <div class="date-time">
             <div>
-              <div class="time-circular">{{ time.day }}</div>
+              <div class="time-circular">{{ time.day || "" }}</div>
               <div class="time-text">DAY(S)</div>
             </div>
 
@@ -87,11 +105,20 @@
               <div class="rank-number">
                 {{ userinfo.point }}
                 <span class="number-img">
-                  <img
+                  <el-tooltip
-                    class="icon-img"
+                    class="item"
-                    src="../../assets/mobile/i-icon.png"
+                    effect="dark"
-                    alt=""
+                    content="Earning Rally Points by:- Registration Success: 200 points- Direct Invitation: 200 points- Second Lv Invitation: 40 points"
-                /></span>
+                    placement="bottom-start"
+                  ><div slot="content">
+                    Earning Rally Points <br /> by:- Registration Success: <br />200 points- Direct <br />Invitation: 200 <br /> points- Second<br /> Lv Invitation: 40 points
+                    </div>
+                    <img
+                      class="icon-img"
+                      src="../../assets/mobile/i-icon.png"
+                      alt=""
+                    /> </el-tooltip
+                ></span>
               </div>
             </div>
             <div class="clan-member">
@@ -99,11 +126,22 @@
               <div class="rank-number">
                 {{ userinfo.clan_member }}
                 <span class="number-img">
-                  <img
+                  <el-tooltip
-                    class="icon-img"
+                    class="item"
-                    src="../../assets/mobile/i-icon.png"
+                    effect="dark"
-                    alt=""
+                    content=""
-                /></span>
+                    placement="bottom-start"
+                  >
+                    <div slot="content">
+                      Total clan member <br />from direct invitation<br />
+                      & second LV invitation
+                    </div>
+                    <img
+                      class="icon-img"
+                      src="../../assets/mobile/i-icon.png"
+                      alt=""
+                    /> </el-tooltip
+                ></span>
               </div>
             </div>
           </div>
@@ -132,17 +170,18 @@
 
 <script>
 import Footer from "../layout/Footer.vue";
+import Clipboard from "clipboard";
 export default {
   components: {
     Footer,
   },
   data() {
     return {
-      userinfo: null,
+      userinfo: {},
-      listevent: null,
+      listevent: [],
       currentIndex: 0,
-      account: '',
+      account: "",
-      time: null,
+      time: {},
       endTime: "2022-11-20 18:00:00",
       flag: false,
       tabbar: [
@@ -158,7 +197,7 @@ export default {
     };
   },
   created() {
-    this.loadLocalData()
+    this.loadLocalData();
     if (!this.account) {
       return;
     }
@@ -197,17 +236,34 @@ export default {
   },
   methods: {
     loadLocalData() {
-      let userInfo = localStorage.getItem('userinfo')
+      let userInfo = localStorage.getItem("userinfo");
       if (userInfo) {
         try {
-          let userData = JSON.parse(userInfo)
+          let userData = JSON.parse(userInfo);
           this.account = userData.account;
-        } catch(err) {
+        } catch (err) {}
-        }
       }
     },
     navigator() {
-      this.$router.push("lisitdetails");
+      this.$router.push("listdetails");
+    },
+    onCopy(e) {
+      this.$message({
+        message: "You just copied accountId",
+        type: "success",
+        duration: 5 * 1000,
+      });
+    },
+
+    onCopyError(e) {
+      this.$message({
+        message: "Failed to copy texts",
+        type: "error",
+        duration: 5 * 1000,
+      });
+    },
+    copy() {
+      document.execCommand("Copy"); // 执行浏览器复制命令
     },
     change(i) {
       this.currentIndex = i;
@@ -272,10 +328,14 @@ export default {
   align-items: center;
 }
 .text {
+  width: 80%;
   font-size: 0.1vw;
   font-family: OPPOSans;
   font-weight: normal;
   color: #d7a972;
+  overflow: hidden !important;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .icon-img {
@@ -532,12 +592,12 @@ export default {
   font-weight: 400;
   color: #fffefe;
 }
-@media screen and (min-width : 992px) {
+@media screen and (min-width: 992px) {
   .icon-img {
-  width: 20px;
+    width: 20px;
+  }
 }
-}
+.footer {
-.footer{
   position: absolute;
   bottom: 0;
 }

src/views/mobile/Success.vue

@@ -5,17 +5,44 @@
       <div class="welcome">Thank you for participating in this CEBG event!</div>
       <div class="event-point">
         CEBG EVENT POINT
-        <img class="i-icon" src="../../assets/mobile/i-icon.png" alt="" />
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="Bottom Left 提示文字"
+          placement="bottom"
+        >
+          <div slot="content">
+            Earning Rally Points<br /> by: - Registration<br /> Success: 200 points <br />- Direct
+            Invitation: 200 points<br /> - Second Lv <br />Invitation: 40 points<br />get
+            Rally points
+          </div>
+          <img class="i-icon" src="../../assets/mobile/i-icon.png" alt="" />
+        </el-tooltip>
       </div>
-      <div class="integral">{{ data.point ? data.point: ""  }}</div>
+      <div class="integral">{{ data.point ? data.point : "" }}</div>
 
       <div class="welcome">APPLICATION TiME</div>
       <div class="time">{{ time }}</div>
       <div class="welcome">
         INVITATIONN CODE
-        <img class="i-icon" src="../../assets/mobile/i-icon.png" alt="" />
+        <el-tooltip
+          class="item"
+          effect="dark"
+          content="Bottom Left 提示文字"
+          placement="bottom"
+        > 
+        <div slot="content">
+          Invite other player to register<br />  by exlusive code/link and get Rally points<br /> 
+          </div>
+          <img class="i-icon" src="../../assets/mobile/i-icon.png" alt="" />
+        </el-tooltip>
       </div>
-      <div class="integral">
+      <div
+        class="integral"
+        v-clipboard:copy="account"
+        v-clipboard:success="onCopy"
+        v-clipboard:error="onCopyError"
+      >
         {{ data.invite_code ? data.invite_code : "" }}
         <img class="copy-img" src="../../assets/mobile/copy.png" alt="" />
       </div>
@@ -56,6 +83,21 @@ export default {
       const D = date.getDate();
       return `${Y}-${M}-${D}`;
     },
+    onCopy(e) {
+      this.$message({
+        message: "You just copied accountId",
+        type: "success",
+        duration: 5 * 1000,
+      });
+    },
+
+    onCopyError(e) {
+      this.$message({
+        message: "Failed to copy texts",
+        type: "error",
+        duration: 5 * 1000,
+      });
+    },
   },
 };
 </script>