[add][ui]

src/view/iframe/treasure-hunt/invite-friends.vue

@@ -61,6 +61,7 @@
         }
 
         .btn {
+            user-select: none;
             background: #1D9BF0;
             border-radius: 35px;
             width: 100px;
@@ -78,6 +79,7 @@
         margin-top: 20px;
 
         img {
+            user-select: none;
             cursor: pointer;
             width: 33px;
             height: 33px;
@@ -96,6 +98,7 @@
         line-height: 53px;
         text-align: center;
         font-weight: 600;
+        user-select: none;
         font-size: 17px;
     }
 }

src/view/iframe/treasure-hunt/invite-list.vue

@@ -1,27 +1,29 @@
 <template>
-    <div class="list">
-        <div class="item">
-            <div class="left">
-                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+    <div>
+        <div class="list">
+            <div class="item">
+                <div class="left">
+                    <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+                </div>
+                <div class="right">
+                    <div>@Ambrose1283</div>
+                    <div>3 min ago</div>
+                </div>
             </div>
-            <div class="right">
-                <div>@Ambrose1283</div>
-                <div>3 min ago</div>
+            <div class="item">
+                <div class="left">
+                    <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+                </div>
+                <div class="right">
+                    <div>@Ambrose1283</div>
+                    <div>3 min ago</div>
+                </div>
             </div>
         </div>
-        <div class="item">
-            <div class="left">
-                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-            </div>
-            <div class="right">
-                <div>@Ambrose1283</div>
-                <div>3 min ago</div>
-            </div>
+        <div class="info">
+            Invite people to hunt treasure with you!
         </div>
     </div>
-    <div class="info">
-        Invite people to hunt treasure with you!
-    </div>
 </template>
 <script setup>
 import { reactive } from 'vue'

src/view/iframe/treasure-hunt/invite.vue

@@ -27,14 +27,13 @@
     </div>
 
     <div class="area-nav">
-        <div class="item active">invite friends</div>
-        <div class="item">invited</div>
+        <div class="item" :class="{ active: state.tab == 1 }" @click="clickSwicthTab(1)">invite friends</div>
+        <div class="item" :class="{ active: state.tab == 2 }" @click="clickSwicthTab(2)">invited</div>
     </div>
     <div class="area-info">
-        <!-- <invite-friends></invite-friends> -->
-        <invite-list></invite-list>
+        <invite-friends v-show="state.tab == 1"></invite-friends>
+        <invite-list v-show="state.tab == 2"></invite-list>
     </div>
-
 </template>
 <script setup>
 import { reactive } from 'vue'
@@ -44,8 +43,12 @@ import InviteList from '@/view/iframe/treasure-hunt/invite-list.vue'
 import HoverTip from '@/view/iframe/treasure-hunt/hover-tip.vue'
 import InviteFriends from '@/view/iframe/treasure-hunt/invite-friends.vue'
 let state = reactive({
-    page: '封面'
+    page: '封面',
+    tab: 1
 })
+const clickSwicthTab = (tab) => {
+    state.tab = tab
+}
 
 const mouseItem = (e) => {
     console.log(e)
@@ -167,6 +170,7 @@ const mouseItem = (e) => {
     display: flex;
 
     .item {
+        user-select: none;
         color: #757575;
         background: #F0F0F0;
         text-align: center;