feat:新增页面

pages.config.ts

@@ -34,19 +34,19 @@ export default defineUniPages({
       },
       {
         iconPath: 'static/images/tabbar/jiangpai.png',
-        selectedIconPath: 'static/images/tabbar/jangpai-l.png',
+        selectedIconPath: 'static/images/tabbar/jiangpai-l.png',
         pagePath: 'pages/trophy/index',
         text: '%tabbar.Competition%',
       },
       {
-        iconPath: 'static/images/tabbar/people.png',
-        selectedIconPath: 'static/images/tabbar/people-l.png',
+        iconPath: 'static/images/tabbar/team.png',
+        selectedIconPath: 'static/images/tabbar/team-l.png',
         pagePath: 'pages/team/index',
         text: '%tabbar.Team%',
       },
       {
-        iconPath: 'static/images/tabbar/group.png',
-        selectedIconPath: 'static/images/tabbar/group-l.png',
+        iconPath: 'static/images/tabbar/task.png',
+        selectedIconPath: 'static/images/tabbar/task-l.png',
         pagePath: 'pages/task/index',
         text: '%tabbar.Earn%',
       },

src/App.vue

@@ -58,7 +58,7 @@ onHide(() => {
 
 onMounted(() => {
   WebApp.ready()
-  WebApp.setHeaderColor('#09090B')
+  WebApp.setHeaderColor('#ffffff')
   startTracking()
 
   // 只保留最基本的关闭监听

src/components/TabBar/index.vue

@@ -53,19 +53,19 @@ const updateLists = () => {
       pagePath: 'pages/trophy/index',
       text: t('tabbar.Competition'),
       iconPath: '/static/images/tabbar/jiangpai.png',
-      selectedIconPath: '/static/images/tabbar/jangpai-l.png',
+      selectedIconPath: '/static/images/tabbar/jiangpai-l.png',
     },
     {
       pagePath: 'pages/team/index',
       text: t('tabbar.Team'),
-      iconPath: '/static/images/tabbar/people.png',
-      selectedIconPath: '/static/images/tabbar/people-l.png',
+      iconPath: '/static/images/tabbar/team.png',
+      selectedIconPath: '/static/images/tabbar/team-l.png',
     },
     {
       pagePath: 'pages/task/index',
       text: t('tabbar.Earn'),
-      iconPath: '/static/images/tabbar/group.png',
-      selectedIconPath: '/static/images/tabbar/group-l.png',
+      iconPath: '/static/images/tabbar/task.png',
+      selectedIconPath: '/static/images/tabbar/task-l.png',
     },
   ]
 }
@@ -90,6 +90,7 @@ watch(() => i18n.global.locale, updateLists)
   left: 0;
   width: 100%;
   height: 98rpx; /* 调整为更准确的高度 */
+  font-family: 'Source Han Sans CN', serif;
 }
 
 .tab-bar-content {
@@ -117,18 +118,20 @@ watch(() => i18n.global.locale, updateLists)
 }
 
 .tab-text {
-  font-size: 20rpx; /* 调整字体大小 */
+  font-size: 22rpx; /* 调整字体大小 */
   line-height: 1;
-  color: #999999; /* 调整未选中颜色 */
+  color: var(--default-color); /* 调整未选中颜色 */
 }
 
 .text-active {
-  color: #8ae54a; /* 保持选中颜色 */
+  color: var(--primary-color); /* 保持选中颜色 */
 }
+
 /* 移除选中时的背景色变化 */
 .tab-active {
   background: none;
 }
+
 /* 添加顶部边框 */
 .tab-bar-content::after {
   position: absolute;

src/components/common/Dialog/index.vue

@@ -9,20 +9,25 @@
           :style="{ width, height }"
           @click.stop
         >
-          <view v-if="closable" class="popup-close" @click="close">×</view>
-          <view class="bg-[#27272A] flex flex-col items-center h-full">
-            <view class="dialog-box-content overflow-y-scroll w-full flex-grow">
+          <view v-if="closable" class="popup-close" @click="close">
+            <image src="@/static/images/production/close.png" class="w-40rpx h-40rpx"></image>
+          </view>
+          <view class="bg-cardlight flex flex-col items-center h-full">
+            <view
+              class="dialog-box-content w-full flex-grow"
+              :class="ov ? 'overflow-y-scroll' : 'overflow-y-hidden'"
+            >
               <slot></slot>
             </view>
             <slot name="footer">
-              <view class="dialog-box-footer">
-                <view
-                  @click="onConfirm"
-                  class="w-[90%] h-100rpx rounded-20rpx button-bg flex items-center justify-center text-white mx-auto mb-70rpx"
-                >
-                  {{ $t('production.team.joinBtn') }}
-                </view>
-              </view>
+              <!--              <view class="dialog-box-footer">-->
+              <!--                <view-->
+              <!--                  @click="onConfirm"-->
+              <!--                  class="w-[90%] h-100rpx rounded-20rpx button-bg flex items-center justify-center text-white mx-auto mb-70rpx"-->
+              <!--                >-->
+              <!--                  {{ $t('production.team.joinBtn') }}-->
+              <!--                </view>-->
+              <!--              </view>-->
             </slot>
           </view>
         </view>
@@ -39,6 +44,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  ov: {
+    type: Boolean,
+    default: false,
+  },
   width: {
     type: String,
     default: '690rpx',
@@ -116,8 +125,8 @@ const onConfirm = () => {
 .popup-close {
   position: absolute;
   top: 10rpx;
-  right: 10rpx;
-  font-size: 40rpx;
+  right: 30rpx;
+  font-size: 30rpx;
   color: white;
   cursor: pointer;
   z-index: 1;
@@ -164,7 +173,7 @@ const onConfirm = () => {
 }
 
 .button-bg {
-  background: #8ae54a;
+  background: var(--primary-color);
 }
 
 .fade-enter-active,

src/layouts/default.vue

@@ -3,6 +3,7 @@
     <slot class="my-component" />
     <wd-toast />
     <wd-message-box />
+    <wd-notify />
   </wd-config-provider>
 </template>
 

src/locale/en.json

@@ -140,14 +140,12 @@
   "play.OK": "OK",
   "play.right": "The rhythm is right",
   "play.again": "You failed, please try again",
-
   "trophy.Miners": "Miners",
   "trophy.Squad": "Squad",
-
   "team.noData": "no data",
   "team.InviteFriends": "Invite Friends",
   "team.GetMore": " Get More",
-  "team.GT Coin": "GT Coin",
+  "team.BH Coin": "BH Coin",
   "team.MyTeam": "My Team",
   "team.Reward": "Reward",
   "team.Total": "Total",
@@ -162,18 +160,15 @@
   "team.TotalTeamProduction": "Total Team Production",
   "team.WorkingNow": "Working now",
   "team.PleaseShare": "Please share",
-
   "task.Tasks": "Tasks",
   "task.GetRewardsFor": "Get Rewards For",
   "task.CompletingQuests": "Completing Quests",
   "task.Start": "Start",
   "task.Claim": "Claim",
-
   "loading.play": "Play music, Play to earn.",
   "loading.Version": "Version:",
   "loading.Checking": "Checking your account",
   "loading.Continue": "Continue",
-
   "index.Countdown": "Countdown",
   "index.Play": "Play",
   "index.Boosts": "Boosts",
@@ -183,7 +178,7 @@
   "index.Ok": "Ok",
   "index.Upgrade": "Upgrade",
   "index.Popular": "Popular reward tasks",
-  "index.collect": "You can collect GT coins every 12 hours",
+  "index.collect": "You can collect BH coins every 12 hours",
   "index.collection": "The result of the last automatic collection",
   "purse.tokens": "Total amount of tokens",
   "purse.hour": "Profit per hour",
@@ -194,12 +189,12 @@
   "purse.ShareRewards": "Share rewards",
   "team.shuoming": "Team Description",
   "team.haoyou": "Invite Friends",
-  "team.jiangli": "For each friend invited to the game, the user can receive a fixed reward of 1000GTC.",
+  "team.jiangli": "For each friend invited to the game, the user can receive a fixed reward of 1000BHC.",
   "team.jianshe": "Team Building",
-  "team.shouyi": "Users can earn 2% of the revenue when their directly invited friends produce and collect GTC in Team A;",
+  "team.shouyi": "Users can earn 2% of the revenue when their directly invited friends produce and collect BHC in Team A;",
   "team.shouqu": "This revenue can accumulate but needs to be manually collected by the user;",
   "team.xianshi": "Friends invited by the user's friends will become indirect friends and will be displayed in Team B;",
-  "team.lingqu": "Users can earn 0.2% of the revenue from their indirect friends' GTC production and collection, which also needs to be manually claimed;",
+  "team.lingqu": "Users can earn 0.2% of the revenue from their indirect friends' BHC production and collection, which also needs to be manually claimed;",
   "team.eaijiangli": "Additional Invitation Rewards",
   "team.lingquo": "When the number of friends invited by the user reaches certain stages set by the platform, they can receive additional high rewards. This reward is different from the fixed reward for inviting friends and is much higher in amount. Make sure to claim it!",
   "index.prompt": "prompt",

src/main.ts

@@ -6,6 +6,7 @@ import { routeInterceptor, requestInterceptor, prototypeInterceptor } from './in
 
 import 'virtual:uno.css'
 import '@/style/index.scss'
+
 import '@/utils/vConsole'
 
 export function createApp() {

src/pages.json

@@ -29,19 +29,19 @@
       },
       {
         "iconPath": "static/images/tabbar/jiangpai.png",
-        "selectedIconPath": "static/images/tabbar/jangpai-l.png",
+        "selectedIconPath": "static/images/tabbar/jiangpai-l.png",
         "pagePath": "pages/trophy/index",
         "text": "%tabbar.Competition%"
       },
       {
-        "iconPath": "static/images/tabbar/people.png",
-        "selectedIconPath": "static/images/tabbar/people-l.png",
+        "iconPath": "static/images/tabbar/team.png",
+        "selectedIconPath": "static/images/tabbar/team-l.png",
         "pagePath": "pages/team/index",
         "text": "%tabbar.Team%"
       },
       {
-        "iconPath": "static/images/tabbar/group.png",
-        "selectedIconPath": "static/images/tabbar/group-l.png",
+        "iconPath": "static/images/tabbar/task.png",
+        "selectedIconPath": "static/images/tabbar/task-l.png",
         "pagePath": "pages/task/index",
         "text": "%tabbar.Earn%"
       }
@@ -55,6 +55,38 @@
         "navigationStyle": "custom",
         "navigationBarTitleText": ""
       }
+    },
+    {
+      "path": "pages/purse/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/task/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/team/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/trophy/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": ""
+      }
     }
   ],
   "subPackages": []

src/pages/index/index.vue

@@ -8,28 +8,272 @@
 </route>
 
 <template>
-  <view>
-    <view id="lottieContainer" class="box"></view>
-    <button @click="show = !show">Solana Wallet</button>
-    <Dialog v-model:show-value="show" position="top" width="100%"></Dialog>
-    <button>1</button>
+  <image src="@/static/images/production/bg.jpg" class="w-full h-full absolute z-[-10]"></image>
+  <view class="w-full min-h-screen flex flex-col items-center z-10">
+    <view class="w-full h-60rpx flex items-center justify-end mt-20rpx">
+      <view class="flex items-center">
+        <view
+          class="w-60rpx h-60rpx flex items-center justify-center rounded-52rpx bg-#1f2029 mr-20rpx"
+          @click="show = true"
+        >
+          <image
+            :src="getAssetsImages('production', value1)"
+            class="w-38rpx h-38rpx rounded-38rpx"
+          ></image>
+        </view>
+        <view
+          class="min-w-150rpx h-60rpx flex items-center justify-center mr-20rpx bg-#1f2029 rounded-52rpx"
+          @click="goPage('/pages/purse/index')"
+        >
+          <image
+            src="@/static/images/production/wallet.png"
+            class="w-32rpx h-32rpx ml-20rpx mr-7rpx"
+          ></image>
+          <text class="mr-20rpx text-[24rpx] text-white font-400">
+            {{ $t('production.purse') }}
+          </text>
+        </view>
+      </view>
+    </view>
+    <view class="w-690rpx mt-15rpx h-90rpx w-full flex items-center justify-center text-white">
+      <image src="@/static/images/trophy/jinbi.png" class="w-60rpx h-60rpx mr-10rpx"></image>
+      <text class="text-[60rpx] font-700 mr-10rpx" ref="goldCoinEl">111</text>
+      <text class="text-24rpx font-400 pt-20rpx">BHCoin</text>
+    </view>
+    <view class="w-690rpx flex items-center justify-center mt-30rpx" @click="tishishow = true">
+      <image src="@/static/images/production/cat.png" class="w-250rpx h-557rpx"></image>
+    </view>
+    <view class="w-full flex items-center justify-center mt-20rpx">
+      <view class="custrom-bg w-650rpx flex text-white items-center">
+        <wd-progress :percentage="10" hide-text :duration="0.1" />
+      </view>
+    </view>
+    <view class="w-650rpx flex items-center justify-between mt-20rpx">
+      <view class="flex items-center">
+        <image src="@/static/images/production/time.png" class="w-30rpx h-30rpx mr-10rpx"></image>
+        <text class="text-white text-26rpx font-700 mr-5rpx">{{ $t('index.Countdown') }}</text>
+        <text class="text-primary text-26rpx font-400">{{ displayTime }}</text>
+      </view>
+      <view class="flex items-center justify-center">
+        <image src="@/static/images/trophy/jinbi.png" class="w-30rpx h-30rpx mr-10rpx"></image>
+        <text class="text-26rpx font-400 text-white">+0.1/s</text>
+      </view>
+    </view>
+    <view class="w-650rpx flex items-center mt-20rpx justify-between">
+      <view
+        class="w-310rpx h-80rpx flex items-center justify-center relative bg-#111 rounded-20rpx"
+      >
+        <image src="@/static/images/production/btn.png" class="w-310rpx h-80rpx absolute"></image>
+        <image src="@/static/images/production/liwu.png" class="w-36rpx h-36rpx mr-10rpx"></image>
+        <text class="text-white text-28rpx font-700">Play</text>
+      </view>
+      <view
+        @click="shengjishow = true"
+        class="w-310rpx h-80rpx flex items-center justify-center relative bg-#111 rounded-20rpx"
+      >
+        <image src="@/static/images/production/btn.png" class="w-310rpx h-80rpx absolute"></image>
+        <image
+          src="@/static/images/production/shengji.png"
+          class="w-36rpx h-36rpx mr-10rpx"
+        ></image>
+        <text class="text-white text-28rpx font-700">Boots</text>
+      </view>
+    </view>
+    <view class="w-650rpx flex items-center mt-20rpx relative">
+      <image
+        src="@/static/images/production/playbg.png"
+        class="w-243rpx h-44rpx absolute left-36rpx"
+      ></image>
+      <view class="flex items-center justify-center z-1 ml-77rpx mt-10rpx">
+        <image
+          src="@/static/images/production/shangsheng.png"
+          class="w-14rpx h-19rpx mr-10rpx"
+        ></image>
+        <text class="text-18rpx font-400 text-white">08:01:11(+0.02/s)</text>
+      </view>
+    </view>
+    <!--    <view id="lottieContainer" class="box"></view>-->
+    <!--    <button @click="show = !show">Solana Wallet</button>-->
+    <!--    <Dialog v-model:show-value="show" position="top" width="100%"></Dialog>-->
+    <!--    <button>1</button>-->
   </view>
+  <!-- 语言 -->
+  <wd-popup v-model="show" position="top">
+    <view
+      class="bg-cardlight w-full h-750rpx flex items-center flex-col justify-between p-x-30rpx p-y-50rpx box-border"
+    >
+      <view
+        v-for="item in languages"
+        :key="item.label"
+        class="w-690rpx flex items-center h-80rpx rounded-10rpx justify-between text-white text-28rpx langboder"
+        @click="changeLocale(item)"
+        :class="value1 === item.value ? 'bg-ac-yy' : ''"
+      >
+        <view class="ml-30rpx">
+          <image
+            :src="getAssetsImages('production', item.value)"
+            class="w-60rpx h-60rpx mr-30rpx rounded-38rpx"
+          ></image>
+          <text :class="value1 === item.value ? 'text-primary' : 'text-white'">
+            {{ item.label }}
+          </text>
+        </view>
+        <image
+          v-if="value1 === item.value"
+          src="@/static/images/production/gou.png"
+          class="w-30rpx h-30rpx mr-30rpx"
+        ></image>
+      </view>
+    </view>
+  </wd-popup>
+  <Dialog v-model:show-value="shengjishow" position="bottom" width="690rpx" height="672rpx">
+    <view class="w-full flex flex-col items-center">
+      <text class="text-white mt-90rpx text-36rpx font-700">Speed up the process!</text>
+      <view
+        class="w-650rpx h-150rpx flex bg-cards rounded-20rpx items-center justify-between mt-30rpx"
+      >
+        <view class="flex flex-col text-primary ml-20rpx">
+          <text class="text-42rpx font-700 h-63rpx">BH 0</text>
+          <text class="font-400 text-24rpx mt-10rpx">360 HB Coin/H</text>
+        </view>
+        <image
+          src="@/static/images/production/maozhuao.png"
+          class="w-90rpx h-90rpx mr-20rpx"
+        ></image>
+      </view>
+      <view
+        class="w-650rpx h-280rpx flex flex-col bg-cards rounded-20rpx items-center justify-around mt-30rpx"
+      >
+        <view class="flex items-center justify-between text-white w-full">
+          <text class="text-42rpx font-700 ml-20rpx">BH 1</text>
+          <text class="text-24rpx font-400 mr-20rpx">720 HB Coin/H</text>
+        </view>
+        <view class="w-full flex items-center justify-around">
+          <view
+            class="w-285rpx h-156rpx rounded-20rpx bg-cardlight flex flex-col items-center justify-around"
+          >
+            <view class="flex items-center w-full justify-start ml-30rpx">
+              <image src="@/static/images/purse/u.png" class="w-30rpx h-30rpx mr-10rpx"></image>
+              <text class="text-24rpx font-400 text-white">100</text>
+            </view>
+            <view
+              class="w-245rpx h-60rpx bg-primary rounded-20rpx flex items-center justify-center"
+            >
+              <text class="text-26rpx font-700 text-textc">Upgrade</text>
+            </view>
+          </view>
+          <view
+            class="w-285rpx h-156rpx rounded-20rpx bg-cardlight flex flex-col items-center justify-around"
+          >
+            <view class="flex items-center w-full justify-start ml-30rpx">
+              <image
+                src="@/static/images/trophy/jinbi.png"
+                class="w-30rpx h-30rpx mr-10rpx"
+              ></image>
+              <text class="text-24rpx font-400 text-white">100</text>
+            </view>
+            <view
+              class="w-245rpx h-60rpx bg-primary rounded-20rpx flex items-center justify-center"
+            >
+              <text class="text-26rpx font-700 text-textc">Upgrade</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </Dialog>
+  <Dialog v-model:show-value="tishishow" width="690rpx" height="577rpx">
+    <view class="w-full flex flex-col items-center">
+      <image src="@/static/images/production/time.png" class="w-90rpx h-90rpx mt-90rpx"></image>
+      <view class="w-630rpx flex items-center">
+        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
+          You can collect GT coins every 12 hours
+        </text>
+      </view>
+      <view class="w-630rpx flex items-center justify-center mt-30rpx">
+        <text class="text-26rpx font-400 text-primary text-center">10h 13m 26s</text>
+      </view>
+      <view
+        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
+      >
+        <text class="text-28rpx font-700 text-textc">Got it</text>
+      </view>
+    </view>
+    <view class="w-full flex flex-col items-center">
+      <image src="@/static/images/production/time.png" class="w-90rpx h-90rpx mt-90rpx"></image>
+      <view class="w-630rpx flex items-center">
+        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
+          You can collect GT coins every 12 hours
+        </text>
+      </view>
+      <view class="w-630rpx flex items-center justify-center mt-30rpx">
+        <text class="text-26rpx font-400 text-primary text-center">10h 13m 26s</text>
+      </view>
+      <view
+        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
+      >
+        <text class="text-28rpx font-700 text-textc">Got it</text>
+      </view>
+    </view>
+  </Dialog>
+  <Dialog v-model:show-value="lingqushow" width="690rpx" height="577rpx">
+    <view class="w-full flex flex-col items-center">
+      <image src="@/static/images/trophy/jinbi.png" class="w-90rpx h-90rpx mt-90rpx"></image>
+      <view class="w-630rpx flex items-center">
+        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
+          The result of the last automatic collection
+        </text>
+      </view>
+      <view class="w-630rpx flex items-center justify-center mt-30rpx">
+        <text class="text-26rpx font-400 text-primary text-center">+ 12000</text>
+      </view>
+      <view
+        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
+      >
+        <text class="text-28rpx font-700 text-textc">Got it</text>
+      </view>
+    </view>
+    <view class="w-full flex flex-col items-center">
+      <image src="@/static/images/production/time.png" class="w-90rpx h-90rpx mt-90rpx"></image>
+      <view class="w-630rpx flex items-center">
+        <text class="text-white font-700 text-36rpx text-center mt-30rpx">
+          You can collect GT coins every 12 hours
+        </text>
+      </view>
+      <view class="w-630rpx flex items-center justify-center mt-30rpx">
+        <text class="text-26rpx font-400 text-primary text-center">10h 13m 26s</text>
+      </view>
+      <view
+        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
+      >
+        <text class="text-28rpx font-700 text-textc">Got it</text>
+      </view>
+    </view>
+  </Dialog>
+  <tabbar currentTab="pages/index/index"></tabbar>
 </template>
 <script setup lang="ts">
+import i18n, { t } from '@/locale/index'
 import { useLaunchParams } from '@telegram-apps/sdk-vue'
 import lottie from 'lottie-web'
 import animationData from '@/static/Animation.json'
 import Dialog from '@/components/common/Dialog/index.vue'
 import { useUserStore } from '@/store/user'
 import { getShareCode } from '@/service/team'
+import tabbar from '@/components/TabBar/index.vue'
+import { useNotify } from 'wot-design-uni'
+import { useImgPath } from '@/hooks/useImgPath'
+
+const { getAssetsImages } = useImgPath()
+const { showNotify } = useNotify()
+
 const pl = useLaunchParams()
 const useStore = useUserStore()
-const show = ref(false)
 
 const initUser = async (user: any, shareCode: string) => {
   const data = await useStore.setUserInfo(user, shareCode)
 }
-
+const value1 = ref('en')
 onShow(async () => {
   await initUser(pl.initData.user, uni.getStorageSync('shareCode') || '')
   const { data } = await getShareCode()
@@ -53,6 +297,36 @@ onShow(async () => {
       .exec()
   })
 })
+const goPage = async (url: string) => {
+  await uni.navigateTo({
+    url,
+  })
+}
+const languages = [
+  { value: 'en', label: 'English' },
+  { value: 'vi', label: 'Tiếng Việt' },
+  { value: 'th', label: 'ภาษาไทย' },
+  { value: 'ru', label: 'Русский язык' },
+  { value: 'ko', label: '한국어' },
+  { value: 'ja', label: 'にほんご' },
+  { value: 'zh-TW', label: '繁体中文' },
+]
+const changeLocale = async (item) => {
+  // 请求存入语言
+  uni.setLocale(item.value)
+  i18n.global.locale = item.value
+  uni.setStorageSync('lang', item.value)
+  value1.value = item.value
+  show.value = false
+  // await postCheckLang(item.value)
+}
+const show = ref(false)
+
+const displayTime = ref('00h 00m 00s')
+
+const shengjishow = ref(false)
+const tishishow = ref(false)
+const lingqushow = ref(false)
 </script>
 
 <style lang="scss" scoped>
@@ -61,4 +335,24 @@ onShow(async () => {
   height: 500rpx;
   overflow: hidden; /* 如果动画超出容器大小，确保它不会溢出 */
 }
+
+.langboder {
+  border: 1px solid #3d537c;
+}
+
+.bg-ac-yy {
+  border: 1px solid #ffdc00;
+}
+
+.custrom-bg {
+  :deep(.wd-progress__inner) {
+    border-radius: 20px;
+    background: linear-gradient(90deg, #fff199 0%, #ffdc00 100%) !important;
+  }
+
+  :deep(.wd-progress__outer) {
+    height: 24rpx;
+    border-radius: 35rpx;
+  }
+}
 </style>

src/pages/purse/index.vue

@@ -0,0 +1,135 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+    navigationBarTitleText: '',
+  },
+}
+</route>
+<template>
+  <view class="w-full min-h-screen bg-bgc flex flex-col items-center relative">
+    <image
+      src="@/static/images/purse/topbg.png"
+      class="w-690rpx h-710rpx absolute top-30rpx"
+    ></image>
+    <view class="w-690rpx flex z-1 mt-50rpx flex-col items-center">
+      <text class="w-630rpx text-32rpx font-700 text-white ml-40rpx">Total amount of tokens</text>
+      <view class="w-630rpx flex items-center ml-40rpx mt-40rpx">
+        <image src="@/static/images/trophy/jinbi.png" class="w-70rpx h-70rpx mr-20rpx"></image>
+        <text class="text-56rpx font-700 text-white">219.45K</text>
+      </view>
+      <view class="w-630rpx h-1rpx bg-#3D537C mt-50rpx"></view>
+      <view class="w-630rpx flex flex-wrap items-center justify-between mt-30rpx">
+        <view
+          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
+        >
+          <image src="@/static/images/purse/1.png" class="w-45rpx h-52rpx mr-20rpx"></image>
+          <view class="flex flex-col text-white w-182rpx">
+            <text class="text-24rpx font-400">Total proft per hour</text>
+            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
+          </view>
+        </view>
+        <view
+          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
+        >
+          <image src="@/static/images/purse/2.png" class="w-45rpx h-52rpx mr-20rpx"></image>
+          <view class="flex flex-col text-white w-182rpx">
+            <text class="text-24rpx font-400">Profit per hour</text>
+            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
+          </view>
+        </view>
+        <view
+          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
+        >
+          <image src="@/static/images/purse/3.png" class="w-45rpx h-52rpx mr-20rpx"></image>
+          <view class="flex flex-col text-white w-182rpx">
+            <text class="text-24rpx font-400">Task reward</text>
+            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
+          </view>
+        </view>
+        <view
+          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
+        >
+          <image src="@/static/images/purse/4.png" class="w-45rpx h-52rpx mr-20rpx"></image>
+          <view class="flex flex-col text-white w-182rpx">
+            <text class="text-24rpx font-400">Team Sharing</text>
+            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
+          </view>
+        </view>
+        <view
+          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
+        >
+          <image src="@/static/images/purse/5.png" class="w-45rpx h-52rpx mr-20rpx"></image>
+          <view class="flex flex-col text-white w-182rpx">
+            <text class="text-24rpx font-400">Share rewards</text>
+            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
+          </view>
+        </view>
+        <view
+          class="w-305rpx h-120rpx bg-cards rounded-20rpx flex items-center justify-center box-border px-20rpx mb-20rpx"
+        >
+          <image src="@/static/images/purse/6.png" class="w-45rpx h-52rpx mr-20rpx"></image>
+          <view class="flex flex-col text-white w-182rpx">
+            <text class="text-24rpx font-400">Resource placement</text>
+            <text class="text-24rpx font-700 mt-5rpx">125.78K</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="w-690rpx mt-70rpx">
+      <text class="text-32rpx fw-700 text-white">{{ $t('production.purse') }}</text>
+    </view>
+    <view class="flex flex-col justify-center items-center w-full">
+      <view
+        class="w-690rpx h-110rpx mt-40rpx rounded-20rpx bg-cardlight flex items-center justify-between"
+      >
+        <view class="flex items-center ml-20rpx">
+          <image src="@/static/images/purse/u.png" class="w-70rpx h-70rpx mr-29rpx"></image>
+          <text class="text-42rpx text-[#fff] fw-550">11</text>
+        </view>
+        <view
+          class="fw-550 w-230rpx h-70rpx bg-[#999999] flex justify-center rounded-10rpx items-center text-white relative mr-10rpx"
+        >
+          <view
+            class="w-74rpx h-30rpx rounded-15rpx bg-[#D4243E] absolute right-0 top-[-10rpx] flex items-center justify-center"
+          >
+            <text class="text-20rpx">SOON</text>
+          </view>
+          <text>{{ $t('purse.Withdraw') }}</text>
+        </view>
+      </view>
+    </view>
+    <view class="flex flex-col justify-center items-center w-full mb-20rpx">
+      <view
+        class="w-690rpx h-110rpx mt-40rpx rounded-20rpx bg-cardlight flex items-center justify-between"
+      >
+        <view class="flex items-center ml-20rpx">
+          <image src="@/static/images/trophy/jinbi.png" class="w-70rpx h-70rpx mr-29rpx"></image>
+          <text class="text-42rpx text-[#fff] fw-550">11</text>
+        </view>
+        <view
+          class="fw-550 w-230rpx h-70rpx bg-[#999999] flex justify-center rounded-10rpx items-center text-white relative mr-10rpx"
+        >
+          <view
+            class="w-74rpx h-30rpx rounded-15rpx bg-[#D4243E] absolute right-0 top-[-10rpx] flex items-center justify-center"
+          >
+            <text class="text-20rpx">SOON</text>
+          </view>
+          <text>{{ $t('purse.Withdraw') }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useTelegramBackButton } from '@/hooks/useTelegramBackButton'
+
+useTelegramBackButton(() => {
+  uni.switchTab({
+    url: '/pages/index/index',
+  })
+})
+</script>
+
+<style scoped></style>

src/pages/task/index.vue

@@ -0,0 +1,93 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+    navigationBarTitleText: '',
+  },
+}
+</route>
+<template>
+  <view class="w-full min-h-screen bg-bgc flex flex-col items-center">
+    <view class="font-600 text-[48rpx] text-white flex flex-col justify-center w-690rpx mt-20rpx">
+      <text class="text-primary">{{ $t('task.Tasks') }}</text>
+      <text>{{ $t('task.GetRewardsFor') }}</text>
+      <text>{{ $t('CompletingQuests') }}</text>
+    </view>
+    <view
+      class="w-690rpx h-90rpx p-10rpx box-border bg-cardlight rounded-20rpx flex items-center justify-center mt-70rpx"
+    >
+      <view
+        class="w-325rpx h-70rpx rounded-20rpx flex items-center justify-center text-white text-26rpx font-700"
+        :class="activeTab === 'one' ? 'tab-bg' : ''"
+        @click="changeActiveTab('one')"
+      >
+        In-game
+      </view>
+      <view
+        class="w-325rpx h-70rpx rounded-20rpx flex items-center justify-center text-white text-26rpx font-700"
+        :class="activeTab === 'two' ? 'tab-bg' : ''"
+        @click="changeActiveTab('two')"
+      >
+        Partners
+      </view>
+    </view>
+    <view class="w-690rpx flex flex-col items-center mb-120rpx">
+      <view
+        v-for="(item, index) in 10"
+        :key="index"
+        class="w-full h-full mt-20rpx bg-cardlight rounded-20rpx flex justify-between"
+      >
+        <view class="flex-1 flex">
+          <view class="min-w-120rpx h-120rpx rounded-10rpx flex items-center justify-center">
+            <image
+              src="@/static/images/task/task1.png"
+              class="w-90rpx h-90rpx rounded-10rpx"
+              mode="scaleToFill"
+            />
+          </view>
+          <view class="flex flex-col justify-center ml-15rpx text-[#fff] flex-1">
+            <text class="text-[28rpx] font-700">加入频道</text>
+            <view class="mt-10rpx">
+              <image
+                src="@/static/images/trophy/jinbi.png"
+                class="w-30rpx h-30rpx"
+                mode="scaleToFill"
+              />
+              <text class="fw-400 ml-10rpx text-26rpx">+1111</text>
+            </view>
+          </view>
+          <view class="flex flex-col justify-center mr-20rpx">
+            <view class="w-160rpx text-center">
+              <view
+                class="w-160rpx h-60rpx bg-primary rounded-10rpx flex items-center justify-center"
+              >
+                <text class="text-26rpx font-700">check</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+  <tabbar currentTab="pages/task/index"></tabbar>
+</template>
+<script setup lang="ts">
+import tabbar from '@/components/TabBar/index.vue'
+
+type Tab = 'one' | 'two'
+const activeTab = ref<Tab>('one')
+
+// 点击切换个人数据或团队数据
+const changeActiveTab = async (tab: Tab) => {
+  activeTab.value = tab
+  if (tab === 'one') {
+  } else if (tab === 'two') {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tab-bg {
+  background: var(--primary-color);
+  color: var(--text-color);
+}
+</style>

src/pages/team/index.vue

@@ -0,0 +1,522 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+    navigationBarTitleText: '',
+  },
+}
+</route>
+
+<template>
+  <view class="w-full min-h-screen bg-bgc flex flex-col items-center">
+    <view class="w-full bg-cardlight rounded-20rpx flex flex-col items-center">
+      <view
+        class="text-[#fff] w-690rpx flex flex-col justify-center text-center text-[48rpx] font-700 mt-30rpx"
+      >
+        <text>{{ $t('team.InviteFriends') }}</text>
+        <text>
+          {{ $t('team.GetMore') }}
+          <text class="text-primary">
+            {{ $t('team.BH Coin') }}
+          </text>
+        </text>
+      </view>
+      <view class="w-690rpx flex items-center mt-35rpx relative">
+        <text class="text-center text-white flex-1">
+          {{ $t('team.MyTeam') }}
+        </text>
+        <image
+          @click="errorModel = true"
+          src="@/static/images/team/error.png"
+          class="w-40rpx h-40rpx absolute right-60rpx"
+          mode="scaleToFill"
+        />
+      </view>
+      <view class="w-690rpx flex items-center justify-center mt-15rpx">
+        <image src="@/static/images/team/huoban.png" class="w-224rpx h-180rpx" mode="scaleToFill" />
+      </view>
+      <view
+        class="w-690rpx flex items-center justify-center mt-15rpx h-172rpx bg-cards rounded-20rpx"
+      >
+        <view class="w-320rpx h-120rpx text-primary flex flex-col items-center">
+          <text class="w-160rpx h-60rpx text-32rpx font-700 flex items-center justify-center">
+            {{ $t('team.Total') }}
+          </text>
+          <view class="flex items-center mt-17rpx">
+            <image
+              src="@/static/images/team/teamcat.png"
+              class="w-40rpx h-30rpx mr-10rpx"
+              mode="scaleToFill"
+            />
+            <text class="">2</text>
+          </view>
+        </view>
+        <view class="w-320rpx h-120rpx text-primary flex flex-col items-center">
+          <view
+            @click="receiveshow = true"
+            class="w-160rpx h-60rpx bg-primary text-26rpx font-700 text-textc rounded-20rpx flex items-center justify-center"
+          >
+            {{ $t('team.Reward') }}
+          </view>
+          <view class="flex items-center mt-17rpx">
+            <image
+              src="@/static/images/team/cat.png"
+              class="w-23rpx h-30rpx mr-18.5rpx"
+              mode="scaleToFill"
+            />
+            <text class="">2</text>
+          </view>
+        </view>
+      </view>
+      <view
+        class="w-650rpx h-130rpx bg-cards rounded-20rpx mt-15rpx flex items-center justify-around"
+      >
+        <image
+          src="@/static/images/team/a.png"
+          class="w-100rpx h-100rpx mx-20rpx"
+          mode="scaleToFill"
+        />
+        <view class="flex-1">
+          <text class="text-[#fff] text-28rpx font-700">{{ $t('team.TotalA') }}</text>
+          <view class="flex text-[#fff] items-center mt-10rpx">
+            <view class="flex items-center">
+              <image
+                src="@/static/images/trophy/jinbi.png"
+                mode="scaleToFill"
+                class="w-30rpx h-30rpx"
+              />
+              <text class="ml-10rpx text-[24rpx]">11</text>
+            </view>
+            <view class="ml-20rpx flex items-center">
+              <image
+                src="@/static/images/team/teamcat.png"
+                mode="scaleToFill"
+                class="w-30rpx h-22rpx"
+              />
+              <text class="ml-10rpx text-[24rpx] font-700">11</text>
+            </view>
+          </view>
+        </view>
+        <view class="w-160rpx h-60rpx flex flex-col justify-center items-center mr-20rpx">
+          <view
+            @click="abShow = true"
+            class="w-full h-full text-textc bg-primary rounded-10rpx flex items-center justify-center"
+          >
+            <text class="text-[26rpx] fw-700">{{ $t('team.GetIt') }}</text>
+          </view>
+        </view>
+      </view>
+      <view
+        class="w-650rpx h-130rpx bg-cards rounded-20rpx mt-15rpx flex items-center justify-around mb-30rpx"
+      >
+        <image
+          src="@/static/images/team/b.png"
+          class="w-100rpx h-100rpx mx-20rpx"
+          mode="scaleToFill"
+        />
+        <view class="flex-1">
+          <text class="text-[#fff] text-28rpx font-700">{{ $t('team.TotalB') }}</text>
+          <view class="flex text-[#fff] items-center mt-10rpx">
+            <view class="flex items-center">
+              <image
+                src="@/static/images/trophy/jinbi.png"
+                mode="scaleToFill"
+                class="w-30rpx h-30rpx"
+              />
+              <text class="ml-10rpx text-[24rpx]">11</text>
+            </view>
+            <view class="ml-20rpx flex items-center">
+              <image
+                src="@/static/images/team/teamcat.png"
+                mode="scaleToFill"
+                class="w-30rpx h-22rpx"
+              />
+              <text class="ml-10rpx text-[24rpx] font-700">11</text>
+            </view>
+          </view>
+        </view>
+        <view class="w-160rpx h-60rpx flex flex-col justify-center items-center mr-20rpx">
+          <view
+            class="w-full h-full text-textc bg-primary rounded-10rpx flex items-center justify-center"
+          >
+            <text class="text-[26rpx] fw-700">{{ $t('team.GetIt') }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="w-690rpx h-154rpx flex flex-col justify-center px-20rpx box-border">
+      <view class="flex justify-between items-center">
+        <view class="text-[#fff] flex flex-col justify-center">
+          <text class="text-[32rpx] fw-700 mb-10rpx">{{ $t('team.Invite') }}</text>
+          <text class="text-[24rpx] font-400">{{ $t('team.will') }}</text>
+        </view>
+        <view class="flex flex-col justify-center" @click="lianjieShow = true">
+          <view
+            class="w-160rpx h-60rpx text-textc bg-primary rounded-10rpx flex items-center justify-center mr-20rpx"
+          >
+            <text class="text-[26rpx] fw-700">{{ $t('play.Go') }}!</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <scroll-view
+      scroll-x
+      :scroll-anchoring="true"
+      :enhanced="true"
+      :show-scrollbar="false"
+      class="custom-scroll-view w-690rpx overflow-x-auto whitespace-nowrap mb-140rpx"
+    >
+      <view class="inline-flex">
+        <view
+          @click="lingquShow = true"
+          class="w-690rpx h-200rpx bg-cardlight flex items-center rounded-20rpx mr-20rpx"
+          v-for="(item, index) in 1"
+          :key="index"
+        >
+          <view class="flex w-100% items-center">
+            <view class="flex-1 ml-20rpx text-[#fff] flex flex-col justify-center">
+              <view class="flex flex-col">
+                <view class="flex items-center">
+                  <image
+                    src="@/static/images/trophy/jinbi.png"
+                    mode="scaleToFill"
+                    class="w-70rpx h-70rpx"
+                  />
+                  <text class="ml-10rpx text-[50rpx] fw-700">+1000</text>
+                </view>
+                <text class="text-[28rpx] fw-700">Inviting 2 friends can earn</text>
+              </view>
+              <view class="flex">
+                <view class="w-75% c-bg">
+                  <wd-progress :percentage="10" color="primary" hide-text :duration="0.1" />
+                </view>
+                <view class="text-[28rpx] flex flex-col justify-center ml-10rpx">
+                  <text>1/2</text>
+                </view>
+              </view>
+            </view>
+            <view
+              class="mr-40rpx flex flex-col justify-center w-160rpx h-100rpx items-center rounded-10rpx bg-primary"
+            >
+              <text class="text-32rpx font-700">{{ $t('team.GetIt') }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+    <!--    <view class="w-690rpx h-200rpx mb-100rpx relative text-primary">-->
+    <!--      <view-->
+    <!--        class="absolute flex flex-col items-center z-1 left-50% top-50% transform -translate-x-50% -translate-y-50%"-->
+    <!--      >-->
+    <!--        <view class="flex items-center mb-10rpx">-->
+    <!--          <image src="@/static/images/team/a.png" class="w-70rpx h-66rpx"></image>-->
+    <!--          <text class="ml-10rpx text-48rpx font-700">{{ $t('turntable.congratulations') }}</text>-->
+    <!--        </view>-->
+    <!--        <text class="font-400 text-28rpx">您已晋级团队TOP排行榜</text>-->
+    <!--      </view>-->
+    <!--      <image src="@/static/images/team/a.png" class="w-full h-full"></image>-->
+    <!--    </view>-->
+  </view>
+  <Dialog v-model:show-value="receiveshow" width="690rpx" height="686rpx">
+    <view class="w-full flex flex-col items-center">
+      <view class="w-630rpx flex items-center justify-between mt-90rpx">
+        <text class="text-36rpx font-700 text-white">NewComer List</text>
+        <view class="flex items-center">
+          <image
+            src="@/static/images/team/cat.png"
+            class="w-23rpx h-30rpx mr-10rpx"
+            mode="scaleToFill"
+          />
+          <text class="text-primary text-28rpx font-700">2</text>
+        </view>
+      </view>
+      <view class="w-630rpx bg-cards rounded-20rpx flex items-center h-194rpx mt-30rpx">
+        <scroll-view :scroll-y="true" :show-scrollbar="false">
+          <view
+            v-for="(item, index) in 10"
+            :key="index"
+            class="text-[#fff] flex flex-col justify-center w-full items-center"
+          >
+            <view
+              class="w-570rpx h-62rpx flex justify-between py-20rpx text-28rpx font-400 items-center"
+            >
+              <text>Boom!</text>
+              <view class="flex items-center">
+                <image
+                  src="@/static/images/trophy/jinbi.png"
+                  mode="scaleToFill"
+                  class="w-40rpx h-40rpx"
+                />
+                <text class="ml-10rpx">+1000</text>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+        <!--        <view class="flex flex-col justify-center text-center w-100% h-100% text-[#fff]">-->
+        <!--          <text>{{ $t('team.noData') }}</text>-->
+        <!--        </view>-->
+      </view>
+      <view
+        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
+      >
+        <text class="text-28rpx font-700 text-textc">Receive all</text>
+      </view>
+      <view class="w-630rpx bg-cards rounded-20rpx flex items-center h-100rpx mt-30rpx">
+        <text class="text-24rpx font-400 text-white flex-1 ml-30rpx">
+          You will get rewards for every invitation!
+        </text>
+        <view
+          class="w-70rpx h-70rpx rounded-20rpx bg-primary flex items-center justify-center mr-20rpx"
+        >
+          <text class="text-26rpx font-700 text-textc">Go</text>
+        </view>
+      </view>
+    </view>
+  </Dialog>
+  <Dialog v-model:showValue="lianjieShow" height="752rpx" width="690rpx">
+    <view class="flex text-white flex-col items-center">
+      <text class="mt-90rpx text-36rpx font-700">{{ $t('production.rewards.ShareLink') }}</text>
+      <view
+        class="w-630rpx font-700 h-100rpx rounded-20rpx bg-primary flex items-center justify-center text-textc items-center mt-50rpx"
+      >
+        {{ $t('production.rewards.Share') }}
+      </view>
+      <view class="w-95% mx-a h-1px bg-[#636363] mt-60rpx"></view>
+
+      <view class="text-#fff text-26rpx mt-46rpx">{{ $t('production.rewards.secret') }}</view>
+      <view
+        class="w-238rpx flex items-center fw-550 justify-between h-50rpx text-primary text-50rpx mt-38rpx"
+      >
+        <text v-for="item in 'abcde'" :key="item">{{ item }}</text>
+      </view>
+      <view
+        class="w-214rpx h-60rpx rounded-30rpx bg-primary flex items-center justify-center mt-54rpx"
+      >
+        <image src="@/static/images/team/copy.png" class="w-26rpx h-26rpx mr-10rpx"></image>
+        <view class="text-26rpx text-#0E0E0E font-400">{{ $t('production.rewards.Copy') }}</view>
+      </view>
+      <text class="break-all text-24rpx font-400 text-white mt-53rpx">
+        {{ $t('production.rewards.Recommend') }}
+      </text>
+    </view>
+  </Dialog>
+  <Dialog v-model:showValue="abShow" width="690rpx" height="690rpx" position="bottom">
+    <view class="flex text-white flex-col items-center w-full">
+      <view
+        class="w-630rpx h-140rpx flex items-center justify-around bg-cards rounded-20rpx mt-90rpx"
+      >
+        <view class="w-215rpx h-100rpx flex flex-col items-center justify-between">
+          <view class="flex items-center">
+            <image
+              src="@/static/images/team/teamcathui.png"
+              class="w-40rpx h-40rpx mr-10rpx"
+            ></image>
+            <text class="text-28rpx font-400">Total</text>
+          </view>
+          <text class="text-white font-24rpx font-400">1</text>
+        </view>
+        <image src="@/static/images/team/a.png" class="w-100rpx h-100rpx"></image>
+        <view class="w-215rpx h-100rpx flex flex-col items-center justify-between">
+          <text class="text-28rpx font-400">Commission</text>
+          <text class="text-white font-24rpx font-400">2%</text>
+        </view>
+      </view>
+      <view
+        class="w-630rpx h-100rpx bg-cards rounded-20rpx flex items-center justify-center mt-30rpx"
+      >
+        <image src="@/static/images/team/jinbi.png" class="w-40rpx h-40rpx mr-10rpx"></image>
+        <text class="text-28rpx font-700 text-primary">2</text>
+      </view>
+      <view
+        class="w-630rpx h-60rpx flex items-center mt-30rpx justify-between text-26rpx font-400 text-white"
+      >
+        <text>Total Team Production</text>
+        <text>0 BH Coin</text>
+      </view>
+      <view class="w-630rpx h-1rpx bg-cards"></view>
+      <view class="w-630rpx">
+        <scroll-view class="h-200rpx" :scroll-y="true" :show-scrollbar="false">
+          <view v-for="(item, index) in 5" :key="index" class="flex justify-between mt-40rpx">
+            <view class="flex">
+              <image
+                src="@/static/images/trophy/avatar.png"
+                class="w-90rpx h-90rpx rounded-100rpx mr-10rpx flex flex-col justify-center text-center"
+              ></image>
+              <view class="text-[#fff] ml-15rpx">
+                <view>
+                  <text class="mr-10rpx text-26rpx font-700">123123</text>
+                  <image
+                    src="@/static/images/team/fj.png"
+                    mode="scaleToFill"
+                    class="w-30rpx h-30rpx"
+                  />
+                </view>
+                <view>
+                  <image
+                    src="@/static/images/team/mcat.png"
+                    mode="scaleToFill"
+                    class="w-30rpx h-30rpx"
+                  />
+                  <text class="ml-10rpx text-[25rpx]">{{ $t('team.WorkingNow') }}</text>
+                </view>
+              </view>
+            </view>
+            <view class="text-[#fff] flex flex-col justify-center">
+              <view class="flex text-[24rpx] font-400">
+                <text>111</text>
+                <image
+                  src="@/static/images/trophy/jinbi.png"
+                  mode="scaleToFill"
+                  class="w-30rpx h-30rpx ml-10rpx"
+                />
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+
+        <!--      <view-->
+        <!--        v-else-->
+        <!--        class="flex flex-col justify-center text-center w-100% h-100% text-[#fff] mt-50rpx"-->
+        <!--      >-->
+        <!--        <text>{{ $t('team.noData') }}</text>-->
+        <!--      </view>-->
+      </view>
+    </view>
+  </Dialog>
+  <Dialog v-model:showValue="lingquShow" height="500rpx" width="690rpx">
+    <view class="flex text-white flex-col items-center">
+      <view class="w-630rpx flex items-center justify-center mt-90rpx">
+        <image src="@/static/images/team/teamcat.png" mode="scaleToFill" class="w-82rpx h-62rpx" />
+      </view>
+      <view class="w-630rpx flex items-center justify-center mt-30rpx">
+        <text class="text-36rpx font-700 text-white">Invite 1 friends</text>
+      </view>
+      <view class="w-630rpx flex items-center justify-center mt-30rpx">
+        <text class="text-26rpx font-400 text-white">
+          Unlock
+          <text class="text-primary">10,000</text>
+          BH Coin when you reach this level.
+        </text>
+      </view>
+      <view
+        class="w-630rpx bg-primary h-100rpx flex items-center justify-center rounded-20rpx mt-30rpx"
+      >
+        <text class="text-28rpx font-700 text-textc">Claim</text>
+      </view>
+    </view>
+  </Dialog>
+  <Dialog
+    v-model:showValue="errorModel"
+    width="690rpx"
+    position="bottom"
+    height="900rpx"
+    :ov="true"
+  >
+    <view class="flex flex-col mt-90rpx items-center w-full bg-cardlight">
+      <text class="w-355rpx h-54rpx text-36rpx font-700 text-white text-center">
+        {{ $t('team.shuoming') }}
+      </text>
+      <text class="w-630rpx text-32rpx font-700 text-white mt-30rpx">
+        1. {{ $t('team.haoyou') }}
+      </text>
+      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
+        {{ $t('team.jiangli') }}
+      </text>
+      <image
+        src="@/static/images/team/1.png"
+        mode="scaleToFill"
+        class="w-470rpx h-283rpx mt-30rpx"
+      />
+      <text class="w-630rpx text-32rpx font-700 text-white mt-30rpx">
+        2.{{ $t('team.jianshe') }}
+      </text>
+      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
+        {{ $t('team.shouyi') }}
+      </text>
+      <image
+        src="@/static/images/team/2.png"
+        mode="scaleToFill"
+        class="w-470rpx h-118rpx mt-30rpx"
+      />
+      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
+        {{ $t('team.shouqu') }}
+      </text>
+      <image
+        src="@/static/images/team/3.png"
+        mode="scaleToFill"
+        class="w-470rpx h-254rpx mt-30rpx"
+      />
+      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
+        {{ $t('team.xianshi') }}
+      </text>
+      <image
+        src="@/static/images/team/4.png"
+        mode="scaleToFill"
+        class="w-470rpx h-114rpx mt-30rpx"
+      />
+      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
+        {{ $t('team.lingqu') }}
+      </text>
+      <image
+        src="@/static/images/team/5.png"
+        mode="scaleToFill"
+        class="w-470rpx h-269rpx mt-30rpx"
+      />
+      <text class="w-630rpx text-32rpx font-700 text-white mt-30rpx">
+        3.{{ $t('team.eaijiangli') }}
+      </text>
+      <text class="w-630rpx text-26rpx font-400 text-white mt-30rpx">
+        {{ $t('team.lingquo') }}
+      </text>
+      <image
+        src="@/static/images/team/6.png"
+        mode="scaleToFill"
+        class="w-470rpx h-260rpx mt-30rpx mb-20rpx"
+      />
+    </view>
+  </Dialog>
+  <tabbar currentTab="pages/team/index"></tabbar>
+</template>
+<script setup lang="ts">
+import tabbar from '@/components/TabBar/index.vue'
+import Dialog from '@/components/common/Dialog/index.vue'
+
+const receiveshow = ref(false)
+const lianjieShow = ref(false)
+const abShow = ref(false)
+const lingquShow = ref(false)
+const errorModel = ref(false)
+</script>
+<style lang="scss" scoped>
+.custom-scroll-view {
+  touch-action: pan-x;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-x: contain;
+  overscroll-behavior-y: none;
+  position: relative;
+}
+
+/* 可以尝试添加这些属性来优化滑动体验 */
+:deep(.uni-scroll-view) {
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 样式穿透进度条 */
+.c-bg {
+  :deep(.wd-progress__inner) {
+    border-radius: 20px;
+  }
+
+  :deep(.wd-progress__outer) {
+    height: 8rpx;
+    border-radius: 35rpx;
+  }
+}
+
+.b-hr {
+  margin-top: 10px;
+  border: 1px solid #636363;
+  border-radius: 20rpx;
+}
+</style>

src/pages/trophy/index.vue

@@ -0,0 +1,164 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+    navigationBarTitleText: '',
+  },
+}
+</route>
+
+<template>
+  <view class="w-full min-h-screen bg-bgc flex flex-col items-center">
+    <view
+      class="w-690rpx h-90rpx p-10rpx box-border bg-cardlight rounded-20rpx flex items-center justify-center mt-20rpx"
+    >
+      <view
+        class="w-325rpx h-70rpx rounded-20rpx flex items-center justify-center text-white text-26rpx font-700"
+        :class="activeTab === 'one' ? 'tab-bg' : ''"
+        @click="changeActiveTab('one')"
+      >
+        {{ $t('trophy.Miners') }}
+      </view>
+      <view
+        class="w-325rpx h-70rpx rounded-20rpx flex items-center justify-center text-white text-26rpx font-700"
+        :class="activeTab === 'two' ? 'tab-bg' : ''"
+        @click="changeActiveTab('two')"
+      >
+        {{ $t('trophy.Squad') }}
+      </view>
+    </view>
+    <view class="w-690rpx flex items-end justify-around mt-55rpx">
+      <view class="w-216rpx flex flex-col items-center text-white justify-center">
+        <view class="relative w-136rpx h-237rpx">
+          <image
+            src="@/static/images/trophy/two.png"
+            class="w-full h-full absolute left-10rpx"
+          ></image>
+          <image
+            src="@/static/images/trophy/avatar.png"
+            class="w-120rpx h-120rpx absolute left-12rpx top-20rpx"
+          ></image>
+        </view>
+        <view class="text-24rpx font-700 text-center mt-30rpx">Crypto Candlestick</view>
+        <view class="flex items-center justify-center mt-10rpx">
+          <image src="@/static/images/trophy/jinbi.png" class="w-30rpx h-30rpx mr-10rpx"></image>
+          <text class="text-26rpx font-400">20,000</text>
+        </view>
+      </view>
+      <view class="w-216rpx flex flex-col items-center text-white justify-center">
+        <view class="relative w-207rpx h-362rpx">
+          <image
+            src="@/static/images/trophy/one.png"
+            class="w-full h-full absolute left-20rpx"
+          ></image>
+          <image
+            src="@/static/images/trophy/avatar.png"
+            class="w-160rpx h-160rpx absolute left-22rpx top-50rpx"
+          ></image>
+        </view>
+        <view class="text-24rpx font-700 text-center mt-30rpx">Crypto Candlestick</view>
+        <view class="flex items-center justify-center mt-10rpx">
+          <image src="@/static/images/trophy/jinbi.png" class="w-30rpx h-30rpx mr-10rpx"></image>
+          <text class="text-26rpx font-400">20,000</text>
+        </view>
+      </view>
+      <view class="w-216rpx flex flex-col items-center text-white justify-center">
+        <view class="relative w-149rpx h-208rpx">
+          <image src="@/static/images/trophy/three.png" class="w-full h-full"></image>
+          <image
+            src="@/static/images/trophy/avatar.png"
+            class="w-128rpx h-128rpx absolute left-4rpx top-22rpx"
+          ></image>
+        </view>
+        <view class="text-24rpx font-700 text-center mt-30rpx">Crypto Candlestick</view>
+        <view class="flex items-center justify-center mt-10rpx">
+          <image src="@/static/images/trophy/jinbi.png" class="w-30rpx h-30rpx mr-10rpx"></image>
+          <text class="text-26rpx font-400">20,000</text>
+        </view>
+      </view>
+    </view>
+    <view class="flex flex-col justify-center items-center w-full mt-50rpx mb-250rpx">
+      <view
+        v-for="(item, index) in 10"
+        :key="index"
+        class="w-690rpx h-130rpx mt-20rpx rounded-20rpx bg-cardlight flex items-center justify-between"
+      >
+        <view class="flex items-center ml-20rpx">
+          <image
+            src="@/static/images/trophy/avatar.png"
+            class="w-90rpx h-90rpx rounded-100rpx mr-20rpx flex flex-col justify-center text-center"
+          ></image>
+          <view class="flex flex-col">
+            <text class="text-28rpx text-white">Crypto Candlestick</text>
+            <view class="flex items-center mt-10rpx">
+              <image
+                v-if="activeTab === 'one'"
+                src="@/static/images/trophy/jinbi.png"
+                class="w-30rpx h-30rpx mr-10rpx"
+              ></image>
+              <image
+                v-else
+                src="@/static/images/trophy/jinbi.png"
+                class="w-30rpx h-30rpx mr-10rpx"
+              ></image>
+              <view class="text-26rpx text-white">20,000</view>
+            </view>
+          </view>
+        </view>
+
+        <view class="w-120rpx h-70rpflex flex-col justify-center text-center">
+          <text class="text-[30rpx] text-[#fff] font-600">{{ index + 4 }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="w-full h-130rpx bg-cardlight fixed bottom-98rpx flex items-center justify-between">
+    <view class="flex items-center ml-40rpx">
+      <image
+        src="@/static/images/trophy/avatar.png"
+        class="w-90rpx h-90rpx rounded-53rpx mr-20rpx flex flex-col justify-center text-center"
+      ></image>
+      <view class="flex flex-col text-primary">
+        <text class="text-28rpx">Crypto Candlestick</text>
+        <view class="flex items-center mt-10rpx">
+          <image
+            v-if="activeTab === 'one'"
+            src="@/static/images/trophy/jinbi.png"
+            class="w-30rpx h-30rpx mr-10rpx"
+          ></image>
+          <image
+            v-else
+            src="@/static/images/trophy/jinbi.png"
+            class="w-30rpx h-30rpx mr-10rpx"
+          ></image>
+
+          <view class="text-26rpx">2000</view>
+        </view>
+      </view>
+    </view>
+    <view class="min-w-150rpx h-70rpflex flex justify-center text-center">
+      <text class="text-[32rpx] text-primary font-700">200</text>
+    </view>
+  </view>
+  <tabbar currentTab="pages/trophy/index"></tabbar>
+</template>
+<script setup lang="ts">
+import tabbar from '@/components/TabBar/index.vue'
+
+type Tab = 'one' | 'two'
+const activeTab = ref<Tab>('one')
+
+// 点击切换个人数据或团队数据
+const changeActiveTab = async (tab: Tab) => {
+  activeTab.value = tab
+  if (tab === 'one') {
+  } else if (tab === 'two') {
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tab-bg {
+  background: var(--primary-color);
+  color: var(--text-color);
+}
+</style>

src/style/index.scss

@@ -15,4 +15,7 @@ page {
 
   // 修改按钮背景色
   // --wot-button-primary-bg-color: green;
+  --primary-color: #FFDC00;
+  --default-color: #777777;
+  --text-color: #0E0E0E;
 }

src/types/auto-import.d.ts

@@ -97,7 +97,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
 // for vue template auto import
@@ -161,7 +161,6 @@ declare module 'vue' {
     readonly onUnload: UnwrapRef<typeof import('@dcloudio/uni-app')['onUnload']>
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
-    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
     readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
@@ -179,13 +178,97 @@ declare module 'vue' {
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useId: UnwrapRef<typeof import('vue')['useId']>
     readonly useImgPath: UnwrapRef<typeof import('../hooks/useImgPath')['useImgPath']>
-    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
     readonly useRequest: UnwrapRef<typeof import('../hooks/useRequest')['default']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useTelegramBackButton: UnwrapRef<typeof import('../hooks/useTelegramBackButton')['useTelegramBackButton']>
-    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
+    readonly useUpload: UnwrapRef<typeof import('../hooks/useUpload')['default']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+  }
+}
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {}
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly formatAmount: UnwrapRef<typeof import('../hooks/moneyProcessing')['formatAmount']>
+    readonly formatAmountNoFloat: UnwrapRef<typeof import('../hooks/moneyProcessing')['formatAmountNoFloat']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onAddToFavorites: UnwrapRef<typeof import('@dcloudio/uni-app')['onAddToFavorites']>
+    readonly onBackPress: UnwrapRef<typeof import('@dcloudio/uni-app')['onBackPress']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onError: UnwrapRef<typeof import('@dcloudio/uni-app')['onError']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onHide: UnwrapRef<typeof import('@dcloudio/uni-app')['onHide']>
+    readonly onLaunch: UnwrapRef<typeof import('@dcloudio/uni-app')['onLaunch']>
+    readonly onLoad: UnwrapRef<typeof import('@dcloudio/uni-app')['onLoad']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onNavigationBarButtonTap: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarButtonTap']>
+    readonly onNavigationBarSearchInputChanged: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputChanged']>
+    readonly onNavigationBarSearchInputClicked: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputClicked']>
+    readonly onNavigationBarSearchInputConfirmed: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputConfirmed']>
+    readonly onNavigationBarSearchInputFocusChanged: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputFocusChanged']>
+    readonly onPageNotFound: UnwrapRef<typeof import('@dcloudio/uni-app')['onPageNotFound']>
+    readonly onPageScroll: UnwrapRef<typeof import('@dcloudio/uni-app')['onPageScroll']>
+    readonly onPullDownRefresh: UnwrapRef<typeof import('@dcloudio/uni-app')['onPullDownRefresh']>
+    readonly onReachBottom: UnwrapRef<typeof import('@dcloudio/uni-app')['onReachBottom']>
+    readonly onReady: UnwrapRef<typeof import('@dcloudio/uni-app')['onReady']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onResize: UnwrapRef<typeof import('@dcloudio/uni-app')['onResize']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onShareAppMessage: UnwrapRef<typeof import('@dcloudio/uni-app')['onShareAppMessage']>
+    readonly onShareTimeline: UnwrapRef<typeof import('@dcloudio/uni-app')['onShareTimeline']>
+    readonly onShow: UnwrapRef<typeof import('@dcloudio/uni-app')['onShow']>
+    readonly onTabItemTap: UnwrapRef<typeof import('@dcloudio/uni-app')['onTabItemTap']>
+    readonly onThemeChange: UnwrapRef<typeof import('@dcloudio/uni-app')['onThemeChange']>
+    readonly onUnhandledRejection: UnwrapRef<typeof import('@dcloudio/uni-app')['onUnhandledRejection']>
+    readonly onUnload: UnwrapRef<typeof import('@dcloudio/uni-app')['onUnload']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useImgPath: UnwrapRef<typeof import('../hooks/useImgPath')['useImgPath']>
+    readonly useRequest: UnwrapRef<typeof import('../hooks/useRequest')['default']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useTelegramBackButton: UnwrapRef<typeof import('../hooks/useTelegramBackButton')['useTelegramBackButton']>
     readonly useUpload: UnwrapRef<typeof import('../hooks/useUpload')['default']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>