From 547070756653d0ad388ca60c1d26ae862dfcce97 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 4 Mar 2026 17:30:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E8=BF=8E?=
 =?UTF-8?q?=E6=96=B0=E6=B4=BB=E5=8A=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                    |    6 +
 src/utils/permissionManager.js         |    1 +
 src/utils/routeGuard.js                |    1 +
 src/views/Invitation/inviteNewUser.vue | 1635 ++++++++++++++++++++++++
 4 files changed, 1643 insertions(+)
 create mode 100644 src/views/Invitation/inviteNewUser.vue

diff --git a/src/router/index.js b/src/router/index.js
index 026108d..56fd2b1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -305,6 +305,12 @@ const router = createRouter({
       component: () => import('../views/Invitation/InviteToRegister.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/invite-new-user',
+      name: 'invite-new-user',
+      component: () => import('../views/Invitation/inviteNewUser.vue'),
+      meta: { requiresAuth: true },
+    },
     {
       path: '/invite-bd-leader',
       name: 'invite-bd-leader',
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 819d1c8..fa7a1c1 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -56,6 +56,7 @@ const RANKING_PAGES = [
 // 活动页面
 const ACTIVITIES = [
   INVITATION_PAGES.INVITE_USER, //邀请新用户（邀请码）
+  '/invite-new-user', //邀请新用户
   '/recharge-reward', //充值奖励
   '/login-reward', // 登录奖励
 
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index 32d2d0e..6c7c6dd 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -407,6 +407,7 @@ class RouteGuard {
     // 活动页面
     const ACTIVITIES = [
       '/invitation-to-register', //邀请新用户注册页面
+      '/invite-new-user', //邀请新用户
       '/recharge-reward', //充值奖励
       '/login-reward', // 登录奖励
 
diff --git a/src/views/Invitation/inviteNewUser.vue b/src/views/Invitation/inviteNewUser.vue
new file mode 100644
index 0000000..91a1d82
--- /dev/null
+++ b/src/views/Invitation/inviteNewUser.vue
@@ -0,0 +1,1635 @@
+<!-- src/views/Invitation/InviteToRegister.vue -->
+<template>
+  <div class="fullPage">
+    <!-- 预加载状态 -->
+    <div v-if="isLoading" class="loading-container">
+      <!-- 页面背景 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]" />
+
+      <!-- 加载动画 -->
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
+    </div>
+
+    <!-- 主要内容 -->
+    <div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
+      <!-- 页面背景 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]" />
+
+      <div style="position: absolute; top: 0; left: 0; width: 100%">
+        <GeneralHeader
+          :isHomePage="true"
+          :showHelp="true"
+          :backImg="imgUrl"
+          :title="t('invitation_to_register')"
+          @help="helpInfoShow = true"
+        />
+      </div>
+
+      <!-- 确认邀请码 -->
+      <div class="leftBt">
+        <!-- 打开输入邀请码 -->
+        <itemCenter
+          v-if="leftBtType === 'enterCode'"
+          style="width: 40%"
+          :imgUrl="imageUrl('BtBg')"
+          :contentStyle="``"
+          @click="enterCodeShow = true"
+        >
+        </itemCenter>
+        <!-- <itemCenter
+          style="width: 40%"
+          :imgUrl="imageUrl('BtBg')"
+          :contentStyle="`direction: ltr;justify-content: center;inset: 1vw 6vw 0 1vw;`"
+          @click="enterCodeShow = true"
+        >
+          <div style="font-weight: 590; font-size: 0.7em">{{ t('enter_invitation_code') }}</div>
+        </itemCenter> -->
+
+        <!-- 前往邀请人信息页 -->
+        <itemCenter
+          v-else-if="leftBtType === 'privateChat'"
+          style="width: 40%"
+          :imgUrl="imageUrl('BtBg')"
+          :contentStyle="``"
+          @click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
+        >
+          <div style="font-weight: 590; font-size: 1.1em">{{ t('contact_your_inviter') }}</div>
+        </itemCenter>
+        <!-- <itemCenter
+          style="width: 40%"
+          :imgUrl="imageUrl('BtBg')"
+          :contentStyle="`direction: ltr;justify-content: center;inset: 1vw 6vw 0 1vw;`"
+          @click="gotoPrivateChat(myInviter.inviterInfo?.userId)"
+        >
+          <div style="font-weight: 590; font-size: 0.6em">{{ t('contact_your_inviter') }}</div>
+        </itemCenter> -->
+      </div>
+
+      <!-- 主体内容 -->
+      <div
+        style="
+          padding: 130vw 3vw 0;
+
+          display: flex;
+          flex-direction: column;
+          gap: 2vw;
+        "
+      >
+        <!-- 我的邀请码 -->
+        <itemCenter
+          style=""
+          :imgUrl="imageUrl(getImgName('myCode'))"
+          :contentStyle="`padding: 98vw 10vw 14vw;flex-direction: column;justify-content: flex-start;gap: 0vw;`"
+        >
+          <!-- 邀请码 -->
+          <div
+            style="
+              width: 90%;
+              height: 12vw;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              gap: 4px;
+            "
+          >
+            <div style="font-weight: 590; font-size: 1.1em">
+              {{ myInviteInfo.inviteCode || '' }}
+            </div>
+            <img
+              v-if="myInviteInfo.inviteCode"
+              v-smart-img
+              src="../../assets/icon/copy.png"
+              alt=""
+              style="display: block; width: 2em; object-fit: cover"
+              @click="copyCode(myInviteInfo.inviteCode || '')"
+            />
+          </div>
+
+          <!-- 提示 -->
+          <div style="font-size: 0.7em; color: #999">
+            {{ t('copy_invitation_code_tip') }}
+          </div>
+        </itemCenter>
+
+        <!-- 模块切换按钮 -->
+        <div style="display: flex; justify-content: space-around; align-items: center">
+          <!-- 收益模块按钮 -->
+          <div style="width: 40%; position: relative; min-height: max-content">
+            <img
+              v-smart-img.noFade
+              :src="imageUrl(getImgName('incomeBtActive'))"
+              alt=""
+              style="display: block; width: 100%"
+              :style="{ opacity: showModule === 'income' ? 1 : 0 }"
+              @click="showModule = 'income'"
+            />
+            <img
+              v-smart-img.noFade
+              :src="imageUrl(getImgName('incomeBt'))"
+              alt=""
+              style="display: block; width: 100%; position: absolute; bottom: 0; left: 0"
+              :style="{ opacity: showModule === 'income' ? 0 : 1 }"
+              @click="showModule = 'income'"
+            />
+          </div>
+
+          <!-- 排行榜模块按钮 -->
+          <div style="width: 40%; position: relative">
+            <img
+              v-smart-img.noFade
+              :src="imageUrl(getImgName('earningsRankingBtActive'))"
+              alt=""
+              style="display: block; width: 100%"
+              :style="{ opacity: showModule === 'ranking' ? 1 : 0 }"
+              @click="showModule = 'ranking'"
+            />
+            <img
+              v-smart-img.noFade
+              :src="imageUrl(getImgName('earningsRankingBt'))"
+              alt=""
+              style="display: block; width: 100%; position: absolute; bottom: 0; left: 0"
+              :style="{ opacity: showModule === 'ranking' ? 0 : 1 }"
+              @click="showModule = 'ranking'"
+            />
+          </div>
+        </div>
+
+        <!-- 收益模块 -->
+        <div
+          v-show="showModule == 'income'"
+          style="display: flex; flex-direction: column; gap: 2vw; padding-bottom: 10vw"
+        >
+          <!-- 收入展示 -->
+          <itemCenter
+            style=""
+            :imgUrl="imageUrl('incomeBg')"
+            :contentStyle="`padding: 42vw 8vw 18vw 7vw;display:grid;grid-template-columns: repeat(2, 1fr);gap: 4vw;`"
+          >
+            <!-- 更多按钮 -->
+            <div
+              style="
+                position: absolute;
+                z-index: 2;
+                width: 20vw;
+                height: 7.5vw;
+                top: 30vw;
+                right: 6vw;
+              "
+              @click="incomeShow = true"
+            ></div>
+
+            <!-- 总邀请人数 -->
+            <div
+              style="
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                padding: 2vw;
+              "
+            >
+              <div style="font-weight: 700; font-size: 0.9em">{{ t('total_invitations') }}</div>
+              <div style="font-weight: 600; font-size: 1.1em">
+                {{ myInviteIncome.validInviteCount || 0 }}
+              </div>
+            </div>
+
+            <!-- 今日邀请人数 -->
+            <div
+              style="
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                padding: 2vw;
+              "
+            >
+              <div style="font-weight: 700; font-size: 0.9em">{{ t('todays_invitation') }}</div>
+              <div style="font-weight: 600; font-size: 1.1em">
+                {{ myInviteIncome.todayInviteCount || 0 }}
+              </div>
+            </div>
+
+            <!-- 总收入 -->
+            <div
+              style="
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                padding: 2vw;
+              "
+            >
+              <div style="font-weight: 700; font-size: 0.9em">
+                {{ t('invitation_total_income') }}
+              </div>
+              <div style="display: flex; align-items: center">
+                <img
+                  v-smart-img
+                  src="/src/assets/icon/coin.png"
+                  alt=""
+                  style="display: block; width: 1.5em"
+                />
+                <div style="font-weight: 600; font-size: 1.1em; padding-top: 1vw">
+                  {{ myInviteIncome.totalIncome || 0 }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 今日收入 -->
+            <div
+              style="
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                padding: 2vw;
+              "
+            >
+              <div style="font-weight: 700; font-size: 0.9em">{{ t('todays_income') }}</div>
+              <div style="display: flex; align-items: center">
+                <img
+                  v-smart-img
+                  src="/src/assets/icon/coin.png"
+                  alt=""
+                  style="display: block; width: 1.5em"
+                />
+                <div style="font-weight: 600; font-size: 1.1em; padding-top: 1vw">
+                  {{ myInviteIncome.todayIncome || 0 }}
+                </div>
+              </div>
+            </div>
+          </itemCenter>
+
+          <!-- 流程展示 -->
+          <img
+            v-smart-img
+            :src="imageUrl(getImgName('example'))"
+            alt=""
+            style="position: relative; z-index: 2; display: block; width: 100%; object-fit: cover"
+          />
+
+          <!-- 邀请按钮-->
+          <img
+            v-smart-img
+            :src="imageUrl('inviteFriendsBt')"
+            alt=""
+            style="position: relative; z-index: 2; display: block; width: 100%; object-fit: cover"
+            @click="openAppComponent('shareDrawer')"
+          />
+        </div>
+
+        <!-- 排行榜模块 -->
+        <div v-show="showModule == 'ranking'" style="position: relative">
+          <!-- 标签页按钮 -->
+          <div
+            style="
+              width: 90vw;
+              min-height: 22.38vw;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              gap: 10vw;
+            "
+          >
+            <!-- 排行榜栏目按钮 -->
+            <div style="flex: 1; min-width: 0" @click="changeTag('rank')">
+              <img
+                v-smart-img
+                :src="imageUrl(getImgName('rankBt'))"
+                alt=""
+                :class="{
+                  'grayscale-container': !rankShow,
+                }"
+                style="width: 100%; display: block; object-fit: cover"
+              />
+            </div>
+
+            <!-- 奖励栏目按钮 -->
+            <div style="flex: 1; min-width: 0" @click="changeTag('reward')">
+              <img
+                v-smart-img
+                :src="imageUrl(getImgName('rewardBt'))"
+                alt=""
+                :class="{
+                  'grayscale-container': !rewardShow,
+                }"
+                style="width: 100%; display: block; object-fit: cover"
+              />
+            </div>
+          </div>
+
+          <!-- 排行榜 -->
+          <div v-show="rankShow">
+            <itemCenter
+              style=""
+              :imgUrl="imageUrl('rankingBg')"
+              :contentStyle="`padding: 10vw 6vw 10vw;flex-direction: column;justify-content: flex-start;gap:4vw`"
+            >
+              <!-- 倒计时 -->
+              <itemCenter style="width: 85%" :imgUrl="imageUrl('timeBg')" :contentStyle="``">
+                <div class="timeBox">
+                  <div class="timeText" style="">{{ WDays }}Day</div>
+                  <div class="timeText timeGap"></div>
+                  <div class="timeText" style="">{{ WHours }}</div>
+                  <div class="timeText timeGap">:</div>
+                  <div class="timeText" style="">{{ WMinutes }}</div>
+                  <div class="timeText timeGap">:</div>
+                  <div class="timeText" style="">{{ WSeconds }}</div>
+                </div>
+              </itemCenter>
+
+              <!-- 列表 -->
+              <div
+                style="
+                  flex: 1;
+                  min-height: 0;
+                  width: 100%;
+
+                  display: flex;
+                  flex-direction: column;
+                  gap: 4px;
+                "
+              >
+                <!-- 列表项 -->
+                <div
+                  class="overflow-y-auto"
+                  style="display: flex; flex-direction: column; width: 100%; gap: 2vw"
+                >
+                  <itemCenter
+                    style=""
+                    v-for="(listItem, index) in rankingTotal"
+                    :key="listItem.userId"
+                    :imgUrl="imageUrl('rankItemBg')"
+                    :contentStyle="`padding: 0 5vw`"
+                    :lazy="true"
+                    :immediate="index < 2"
+                    @click="viewUserInfo(listItem.userId)"
+                  >
+                    <!-- 基本信息 -->
+                    <div
+                      style="
+                        flex: 1;
+                        min-width: 0;
+
+                        display: flex;
+                        justify-content: space-around;
+                        align-items: center;
+
+                        gap: 8px;
+                      "
+                    >
+                      <!-- 排名 -->
+                      <div style="color: #ffe601; font-weight: 700">
+                        {{ listItem?.rank }}
+                      </div>
+
+                      <!-- 头像 -->
+                      <img
+                        :src="listItem?.avatar || ''"
+                        alt=""
+                        style="
+                          display: block;
+                          width: 13vw;
+                          aspect-ratio: 1/1;
+                          border-radius: 50%;
+                          object-fit: cover;
+                        "
+                        @error="handleAvatarImageError"
+                      />
+
+                      <!-- 名称、id -->
+                      <div
+                        style="
+                          flex: 1;
+                          min-width: 0;
+                          align-self: stretch;
+
+                          display: flex;
+                          flex-direction: column;
+                          justify-content: space-around;
+                        "
+                      >
+                        <div
+                          style="
+                            color: #fff;
+                            font-size: 0.9em;
+                            font-weight: 860;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                          "
+                        >
+                          {{ listItem?.nickname }}
+                        </div>
+                        <div style="font-size: 0.8em; color: #fff; font-weight: 590">
+                          {{ $t('user_id_prefix') }} {{ listItem?.account }}
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 贡献值 -->
+                    <div
+                      style="
+                        width: auto;
+                        min-width: 0;
+
+                        display: flex;
+                        align-items: center;
+                      "
+                    >
+                      <img
+                        v-smart-img
+                        src="/src/assets/icon/coin.png"
+                        alt=""
+                        style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
+                      />
+                      <div style="font-size: 0.9em; font-weight: 700">
+                        {{ listItem?.quantity }}
+                      </div>
+                    </div>
+                  </itemCenter>
+                </div>
+              </div>
+            </itemCenter>
+
+            <!-- 我的排名占位 -->
+            <div style="height: 30vw"></div>
+          </div>
+
+          <!-- 奖励展示 -->
+          <div
+            v-show="rewardShow"
+            style="display: flex; flex-direction: column; gap: 2vw; padding-bottom: 10vw"
+          >
+            <itemCenter
+              v-for="(rewardsTop, index) in rankingRewards"
+              style=""
+              :imgUrl="imageUrl(`rewardTop${index + 1}Bg`)"
+              :contentStyle="`padding: 35vw 9vw 18vw;align-items: flex-start;gap: 10vw;`"
+            >
+              <div
+                v-for="(reward, index) in rewardsTop"
+                style="flex: 1; align-self: stretch; display: flex; flex-direction: column"
+              >
+                <div
+                  style="
+                    width: 100%;
+                    aspect-ratio: 1/1;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img
+                    :src="reward.cover || ''"
+                    alt=""
+                    width="70%"
+                    style="display: block; object-fit: cover"
+                    @error="(e) => handleRewardImageError(e, reward.type)"
+                  />
+                </div>
+                <div style="flex: 1; display: flex; justify-content: center; align-items: center">
+                  <div style="font-size: 1.2em; color: #fff; font-weight: 600">*7Days</div>
+                </div>
+              </div>
+            </itemCenter>
+          </div>
+        </div>
+      </div>
+
+      <!-- 我的排名 -->
+      <itemCenter
+        v-if="showModule == 'ranking' && rankShow"
+        style="position: fixed; bottom: 0; z-index: 3"
+        :imgUrl="imageUrl('rankItemBg')"
+        :contentStyle="`padding: 0 7vw`"
+      >
+        <!-- 基本信息 -->
+        <div
+          style="
+            flex: 1;
+            min-width: 0;
+
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            gap: 8px;
+          "
+        >
+          <!-- 排名 -->
+          <div style="color: #ffe601; font-weight: 700">
+            {{ myRanking.rank || 999 }}
+          </div>
+
+          <!-- 头像 -->
+          <img
+            :src="myRanking.avatar || ''"
+            alt=""
+            style="
+              display: block;
+              width: 15vw;
+              aspect-ratio: 1/1;
+              border-radius: 50%;
+              object-fit: cover;
+            "
+            @error="handleAvatarImageError"
+          />
+
+          <!-- 名称 -->
+          <div style="flex: 1; min-width: 0; display: flex; flex-direction: column">
+            <div
+              style="
+                color: #fff;
+                font-weight: 860;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              "
+              class="UserNickname"
+            >
+              {{ myRanking.nickname }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 贡献值 -->
+        <div
+          style="
+            width: auto;
+            min-width: 0;
+
+            display: flex;
+            align-items: center;
+          "
+        >
+          <img
+            v-smart-img
+            src="/src/assets/icon/coin.png"
+            alt=""
+            style="display: block; width: 1.5em; aspect-ratio: 1/1; object-fit: cover"
+          />
+          <div style="font-weight: 700">
+            {{ myRanking.quantity || 0 }}
+          </div>
+        </div>
+      </itemCenter>
+
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+        <!-- 帮助模块 -->
+        <div v-show="helpInfoShow" style="margin: 20% 0; position: relative" @click.stop>
+          <img
+            v-smart-img
+            :src="imageUrl(getImgName('helpInfo'))"
+            alt=""
+            width="100%"
+            style="display: block"
+          />
+        </div>
+
+        <!-- 输入邀请码模块 -->
+        <div
+          v-show="enterCodeShow"
+          style="
+            width: 100vw;
+
+            padding: 20vw 0 10vw;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          @click="closedPopup"
+        >
+          <itemCenter
+            style="width: 100vw"
+            :imgUrl="imageUrl(getImgName('enterCodeBg'))"
+            :contentStyle="`padding: 31.5vw 6vw 10vw;display: flex;flex-direction: column;justify-content: flex-start;`"
+            @click.stop
+          >
+            <!-- 邀请码 -->
+            <div class="bindingUserCode">
+              <!-- 输入框 -->
+              <input
+                v-model="invitationCode"
+                type="text"
+                style="
+                  width: 60vw;
+                  min-width: 0;
+                  align-self: stretch;
+
+                  color: white;
+                  font-weight: 510;
+
+                  padding: 4px 8px;
+                  border: none;
+                  outline: none;
+                  background-color: transparent;
+                "
+                @keyup.enter="confirmInvitationCode"
+              />
+
+              <!-- 按钮 -->
+              <div style="width: 16vw" @click="confirm"></div>
+            </div>
+
+            <!-- 邀请奖励 -->
+            <div
+              style="
+                width: 85vw;
+                height: 28vw;
+
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: 1.3vw;
+              "
+              :class="['inviteReward', `inviteReward_${currentLangType}`]"
+            >
+              <div
+                v-for="(reward, index) in bindingUserRewards"
+                style="align-self: stretch; display: flex; flex-direction: column"
+              >
+                <!-- 奖励图 -->
+                <div
+                  style="
+                    width: 100%;
+                    min-width: 0;
+                    aspect-ratio: 1/1;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img
+                    :src="reward.cover || ''"
+                    alt=""
+                    width="70%"
+                    style="display: block; object-fit: cover"
+                    @error="(e) => handleRewardImageError(e, reward.type)"
+                  />
+                </div>
+
+                <!-- 信息 -->
+                <div
+                  style="
+                    width: 100%;
+                    min-width: 0;
+                    flex: 1;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  {{ showDetail(reward) }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 充值奖励 -->
+            <div
+              style="
+                flex: 1;
+                min-height: 0;
+                width: 85vw;
+
+                display: flex;
+                flex-direction: column;
+              "
+              :class="['rechargeReward', `rechargeReward_${currentLangType}`]"
+            >
+              <div
+                v-for="(Rewards, top) in rechargeRewards"
+                style="width: 100%; display: flex; flex-direction: column; gap: 18vw"
+              >
+                <div style="width: 100%; height: 30vw; display: flex; gap: 12vw">
+                  <div
+                    v-for="reward in Rewards"
+                    style="
+                      flex: 1;
+                      min-width: 0;
+                      height: 100%;
+                      display: flex;
+                      flex-direction: column;
+                    "
+                  >
+                    <!-- 奖励图 -->
+                    <div
+                      style="
+                        width: 100%;
+                        min-width: 0;
+                        aspect-ratio: 1/1;
+
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                      "
+                    >
+                      <img
+                        :src="reward.cover || ''"
+                        alt=""
+                        width="70%"
+                        style="display: block; object-fit: cover"
+                        @error="(e) => handleRewardImageError(e, reward.type)"
+                      />
+                    </div>
+                    <!-- 信息 -->
+                    <div
+                      style="
+                        width: 100%;
+                        min-width: 0;
+                        flex: 1;
+
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                      "
+                    >
+                      {{ showDetail(reward) }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </itemCenter>
+        </div>
+
+        <!-- 收益&列表 -->
+        <div
+          v-show="incomeShow"
+          style="
+            width: 100vw;
+
+            padding: 20vw 0 10vw;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          "
+          @click="closedPopup"
+        >
+          <!-- 收益&列表 -->
+          <itemCenter
+            style=""
+            :imgUrl="imageUrl('incomeListBg')"
+            :contentStyle="`padding: 37vw 6.5vw 10vw 5.5vw;flex-direction: column;gap: 4vw;justify-content: flex-start;`"
+            @click.stop
+          >
+            <!-- 收益 -->
+            <div
+              style="
+                width: 95%;
+                height: 37vw;
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 5vw;
+              "
+            >
+              <!-- 总邀请人数 -->
+              <div
+                style="
+                  align-self: stretch;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                  padding: 2vw;
+                "
+              >
+                <div style="font-weight: 700; font-size: 0.9em">{{ t('total_invitations') }}</div>
+                <div style="font-weight: 600; font-size: 1.1em">
+                  {{ myInviteIncome.validInviteCount || 0 }}
+                </div>
+              </div>
+
+              <!-- 今日邀请人数 -->
+              <div
+                style="
+                  align-self: stretch;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                  padding: 2vw;
+                "
+              >
+                <div style="font-weight: 700; font-size: 0.9em">{{ t('todays_invitation') }}</div>
+                <div style="font-weight: 600; font-size: 1.1em">
+                  {{ myInviteIncome.todayInviteCount || 0 }}
+                </div>
+              </div>
+
+              <!-- 总收入 -->
+              <div
+                style="
+                  align-self: stretch;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                  padding: 2vw;
+                "
+              >
+                <div style="font-weight: 700; font-size: 0.9em">
+                  {{ t('invitation_total_income') }}
+                </div>
+                <div style="display: flex; align-items: center">
+                  <img
+                    v-smart-img
+                    src="/src/assets/icon/coin.png"
+                    alt=""
+                    style="display: block; width: 1.5em"
+                  />
+                  <div style="font-weight: 600; font-size: 1.1em; padding-top: 1vw">
+                    {{ myInviteIncome.totalIncome || 0 }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- 今日收入 -->
+              <div
+                style="
+                  align-self: stretch;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+                  padding: 2vw;
+                "
+              >
+                <div style="font-weight: 700; font-size: 0.9em">{{ t('todays_income') }}</div>
+                <div style="display: flex; align-items: center">
+                  <img
+                    v-smart-img
+                    src="/src/assets/icon/coin.png"
+                    alt=""
+                    style="display: block; width: 1.5em"
+                  />
+                  <div style="font-weight: 600; font-size: 1.1em; padding-top: 1vw">
+                    {{ myInviteIncome.todayIncome || 0 }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 列表 -->
+            <div
+              style="
+                flex: 1;
+                min-height: 0;
+                width: 100%;
+                border-radius: 8px;
+                background: rgba(194, 174, 232, 0.2);
+                backdrop-filter: blur(1px);
+                padding: 12px;
+
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+              "
+            >
+              <!-- 头部 -->
+              <div style="width: 100%; display: flex; align-items: center">
+                <!-- user项 -->
+                <div style="flex: 1; font-weight: 590; font-size: 0.8em; text-align: center">
+                  {{ t('users') }}
+                </div>
+
+                <!-- 时间项 -->
+                <div
+                  style="
+                    flex: 1;
+                    font-weight: 590;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                  "
+                >
+                  <!-- 分割线 -->
+                  <div
+                    style="
+                      width: 1px;
+                      height: 16px;
+                      background: linear-gradient(
+                        rgba(217, 217, 217, 0) 0%,
+                        #d9d9d9 50%,
+                        rgba(217, 217, 217, 0) 100%
+                      );
+                    "
+                  ></div>
+
+                  <div style="font-weight: 590; font-size: 0.8em; text-align: center">
+                    {{ t('unbinding_time') }}
+                  </div>
+
+                  <!-- 分割线 -->
+                  <div
+                    style="
+                      width: 1px;
+                      height: 16px;
+                      background: linear-gradient(
+                        rgba(217, 217, 217, 0) 0%,
+                        #d9d9d9 50%,
+                        rgba(217, 217, 217, 0) 100%
+                      );
+                    "
+                  ></div>
+                </div>
+
+                <!-- 收入项 -->
+                <div
+                  style="
+                    flex: 1;
+                    font-weight: 590;
+                    text-align: end;
+                    font-size: 0.8em;
+                    text-align: center;
+                  "
+                >
+                  {{ t('prowide_income') }}
+                </div>
+              </div>
+
+              <!-- 列表项 -->
+              <div class="overflow-y-auto" style="align-self: stretch; width: 100%">
+                <div
+                  v-for="user in myInviteUsers"
+                  style="width: 100%; display: flex; align-items: center"
+                >
+                  <!-- ID 项 -->
+                  <div style="flex: 1; font-weight: 590; font-size: 0.8em; text-align: center">
+                    {{ t('user_id_prefix') }}{{ user.invitedUserAccount || '-' }}
+                  </div>
+
+                  <!-- 时间项 -->
+                  <div
+                    style="
+                      flex: 1;
+                      font-weight: 590;
+                      display: flex;
+                      justify-content: space-between;
+                      align-items: center;
+                    "
+                  >
+                    <div
+                      style="
+                        width: 1px;
+                        height: 16px;
+                        background: linear-gradient(
+                          rgba(217, 217, 217, 0) 0%,
+                          #d9d9d9 50%,
+                          rgba(217, 217, 217, 0) 100%
+                        );
+                      "
+                    ></div>
+                    <div style="font-weight: 590; font-size: 0.8em">
+                      {{ user.remainingDays || 0 }}{{ t('day_unit') }}
+                    </div>
+                    <div
+                      style="
+                        width: 1px;
+                        height: 16px;
+                        background: linear-gradient(
+                          rgba(217, 217, 217, 0) 0%,
+                          #d9d9d9 50%,
+                          rgba(217, 217, 217, 0) 100%
+                        );
+                      "
+                    ></div>
+                  </div>
+
+                  <!-- 收入项 -->
+                  <div
+                    style="
+                      flex: 1;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      gap: 4px;
+                    "
+                  >
+                    <img
+                      v-smart-img
+                      src="/src/assets/icon/coin.png"
+                      alt=""
+                      style="display: block; width: 1em"
+                    />
+                    <div style="color: #ffb627; font-size: 1em; font-weight: 590">
+                      {{ user.provideIncome || 0 }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </itemCenter>
+        </div>
+      </maskLayer>
+
+      <!-- 提示弹窗 -->
+      <div
+        v-show="tipShow"
+        style="position: fixed; top: 50vh; display: flex; justify-content: center; width: 100vw"
+      >
+        <div
+          style="
+            padding: 12px;
+            border-radius: 8px;
+            background: rgba(0, 0, 0, 0.4);
+            font-weight: 600;
+          "
+        >
+          {{ t('copied_successfully') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useLangStore } from '@/stores/lang'
+import { viewUserInfo, gotoPrivateChat, openAppComponent } from '@/utils/appBridge.js'
+import { showError, showWarning, showSuccess } from '@/utils/toast.js'
+import { useClipboard } from '@vueuse/core'
+import { connectToApp } from '@/utils/appConnector.js'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+
+import {
+  getRankingListAndMyRanking, // 获取排行榜和当前用户排名
+} from '@/api/activity.js'
+import {
+  getMyInviteCode, // 获取我的邀请码
+  bindInviteCode, // 绑定邀请码
+  getMyInviteIncome, // 获取收益统计
+  getMyInviteUsers, // 有效邀请用户列表
+  apiGetBindingUserRewards, // 获取绑定用户奖励
+  getMyInviter, // 获取我的邀请人信息
+} from '@/api/invitation.js'
+
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const imgUrl = new URL('/src/assets/icon/arrowBack.png', import.meta.url).href
+
+const { t } = useI18n()
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'en' ? filename : `${filename}_${currentLangType.value}`
+}
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('invitation/inviteTemp/', filename)
+
+const { copy, isSupported } = useClipboard()
+
+// 预加载状态
+const isLoading = ref(true)
+
+const invitationCode = ref('') //邀请码
+const myInviteInfo = ref({}) //我的邀请信息
+const myInviter = ref({}) //我的邀请人信息
+const myInviteIncome = ref({}) //邀请用户收益统计
+const myInviteUsers = ref([]) //邀请用户列表
+const bindingUserRewards = ref([]) //绑定用户奖励
+// 充值奖励
+const rechargeRewards = ref([
+  Array(3).fill({
+    type: 'GOLD',
+    detailType: 'GOLD',
+    content: '1000',
+    quantity: 0,
+    amount: 1000,
+    sort: 1,
+  }), //用户充值奖励(充值0.99美金)
+  Array(3).fill({
+    type: 'GOLD',
+    detailType: 'GOLD',
+    content: '1000',
+    quantity: 0,
+    amount: 1000,
+    sort: 1,
+  }), //用户充值奖励(充值4.99美金)
+  Array(3).fill({
+    type: 'GOLD',
+    detailType: 'GOLD',
+    content: '1000',
+    quantity: 0,
+    amount: 1000,
+    sort: 1,
+  }), //用户充值奖励(充值9.99美金)
+])
+
+// 排行奖励
+const rankingRewards = ref([
+  Array(2).fill({
+    type: 'GOLD',
+    detailType: 'GOLD',
+    content: '1000',
+    quantity: 0,
+    amount: 1000,
+    sort: 1,
+  }), //top1奖励
+  Array(2).fill({
+    type: 'GOLD',
+    detailType: 'GOLD',
+    content: '1000',
+    quantity: 0,
+    amount: 1000,
+    sort: 1,
+  }), //top2奖励
+  Array(2).fill({
+    type: 'GOLD',
+    detailType: 'GOLD',
+    content: '1000',
+    quantity: 0,
+    amount: 1000,
+    sort: 1,
+  }), //top3奖励
+])
+
+const Ranking = ref([]) // 原始排行榜
+const myRanking = ref({}) // 我的排名
+const RankingLoadmore = ref(null) //触底模块
+const rankingPageNo = ref(1) //分页页码
+const rankingAdd = ref([]) //加载排行榜项
+// 完整排行榜
+const rankingTotal = computed(() => {
+  return [...Ranking.value, ...rankingAdd.value]
+})
+
+const showModule = ref('income') //显示模块
+const rankShow = ref(true) //排行榜显示
+const rewardShow = ref(false) //前三奖励显示
+
+// 栏目切换
+const changeTag = (tag) => {
+  switch (tag) {
+    case 'rank':
+      rankShow.value = true
+      rewardShow.value = false
+      break
+    case 'reward':
+      rankShow.value = false
+      rewardShow.value = true
+      break
+  }
+}
+
+// 弹窗展示
+const helpInfoShow = ref(false) //帮助弹窗
+const enterCodeShow = ref(false) //交易弹窗
+const incomeShow = ref(false) //收益详情弹窗
+const tipShow = ref(false) //提示弹窗
+// 遮罩层展示
+const maskLayerShow = computed(() => {
+  return helpInfoShow.value || enterCodeShow.value || incomeShow.value
+})
+
+// 关闭弹窗
+const closedPopup = () => {
+  helpInfoShow.value = false
+  enterCodeShow.value = false
+  incomeShow.value = false
+}
+
+// 倒计时相关数据
+const WDays = ref(0)
+const WHours = ref(0)
+const WMinutes = ref(0)
+const WSeconds = ref(0)
+let countdownTimer = null
+
+// 按条件展示按钮
+const leftBtType = computed(() => {
+  // 数据还未加载完成
+  if (!myInviter.value || Object.keys(myInviter.value).length === 0) {
+    return null
+  }
+
+  // 优先级1: 如果有邀请人信息且有userId，则显示私聊按钮
+  if (myInviter.value.inviterInfo?.userId) {
+    return 'privateChat'
+  }
+
+  // 优先级2: 如果没有过期且没有邀请人，则显示输入邀请码按钮
+  if (!myInviter.value.myInfo?.expired && !myInviter.value.inviterInfo) {
+    return 'enterCode'
+  }
+
+  // 其他情况不显示按钮
+  return null
+})
+
+// 获取对应的时间戳
+const getNextWeekInBeijing = () => {
+  const now = new Date()
+  const targetDate = new Date(now.getTime()) // 创建一个基于当前时间的新日期对象
+
+  // 转换为北京时间来判断星期几
+  const utcTime = now.getTime() + now.getTimezoneOffset() * 60000
+  const beijingTime = new Date(utcTime + 8 * 3600000) // UTC+8
+
+  const beijingDay = beijingTime.getDay() // 0=周日, 1=周一, ..., 6=周六
+  const beijingHour = beijingTime.getHours()
+
+  // 转换为 0=周一, 1=周二, ..., 6=周日
+  const normalizedDay = beijingDay === 0 ? 6 : beijingDay - 1
+
+  let daysToAdd
+  if (normalizedDay === 0) {
+    // 今天是周一
+    if (beijingHour >= 5) {
+      daysToAdd = 7 // 超过5点，计算到下周一的所需时间
+    } else {
+      daysToAdd = 0 // 今天
+    }
+  } else {
+    daysToAdd = 7 - normalizedDay // 到下周一的天数
+  }
+
+  // 正确地添加天数
+  targetDate.setDate(targetDate.getDate() + daysToAdd) // 添加天数到下周一的当前时间
+  targetDate.setHours(5, 0, 0, 0) // 将时间重新设置为早上5点，作为目标时间戳
+
+  return targetDate.getTime()
+}
+
+const targetTime = ref(getNextWeekInBeijing()) // 闭包保存目标时间 (核心修正)
+
+// 格式化时间
+const formatTime = (value) => {
+  return value < 10 ? `0${value}` : value
+}
+
+// 倒计时
+const getCountdown = () => {
+  const now = Date.now()
+  let diff = targetTime.value - now
+
+  if (diff <= 0) {
+    // 初始化数据
+    initData()
+
+    targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
+    diff = targetTime.value - now
+  }
+
+  const totalSeconds = Math.floor(diff / 1000)
+  WDays.value = Math.floor(totalSeconds / (24 * 3600))
+  WHours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
+  WMinutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
+  WSeconds.value = formatTime(Math.floor(totalSeconds % 60))
+}
+
+// 启动倒计时
+const startCountdown = () => {
+  getCountdown() // 立即执行一次周倒计时
+  countdownTimer = setInterval(getCountdown, 1000)
+}
+
+// 格式化奖励的展示信息
+const showDetail = (reward) => {
+  let showamount = ['GOLD', 'DIAMOND', 'GIFT', 'FRAGMENTS']
+  if (showamount.includes(reward.type)) {
+    return reward.content
+  } else if (reward.type === 'DOLLARS') {
+    return `$${reward.content}`
+  } else {
+    return `${reward.quantity}${t('day_unit')}`
+  }
+}
+
+// 复制到剪贴板（原生方法）
+const copyCode = (text) => {
+  if (isSupported.value) {
+    copy(text)
+  } else {
+    // 降级方案
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    document.body.appendChild(textArea)
+    textArea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textArea)
+  }
+
+  tipShow.value = true
+  setTimeout(() => {
+    tipShow.value = false
+  }, 2000)
+}
+
+// 更改邀请码
+const confirmInvitationCode = () => {
+  if (!invitationCode.value.trim()) {
+    showWarning(t('please_enter_valid_invitation_code'))
+    return
+  }
+}
+
+// 获取我的邀请码
+const apiGetMyInviteCode = async () => {
+  const resCode = await getMyInviteCode()
+  if (resCode.status && resCode.body) {
+    myInviteInfo.value = resCode.body
+  }
+}
+
+// 获取我的邀请人信息
+const apiGetMyInviter = async () => {
+  const resInviter = await getMyInviter()
+  if (resInviter.status && resInviter.body) {
+    myInviter.value = resInviter.body || {}
+  }
+}
+
+// 绑定邀请码
+const confirm = async () => {
+  if (!invitationCode.value.trim()) {
+    showWarning(t('please_enter_valid_invitation_code'))
+    return
+  }
+  let data = { inviteCode: invitationCode.value.trim(), inviteType: 'REGISTER' }
+  try {
+    const resBind = await bindInviteCode(data)
+    if (resBind.status) {
+      showSuccess(t('invitation_code_bound_successfully'))
+      apiGetMyInviter() //刷新我的邀请人信息
+    } else {
+      showError(t('invitation_code_binding_failed'))
+    }
+    invitationCode.value = ''
+    enterCodeShow.value = false
+  } catch (error) {
+    showError(error.errorMsg)
+  }
+}
+
+// 获取收益统计
+const apiGetMyInviteIncome = async () => {
+  const resIncome = await getMyInviteIncome()
+  if (resIncome.status && resIncome.body) {
+    myInviteIncome.value = resIncome.body
+  }
+}
+
+// 有效邀请用户列表
+const apiGetMyInviteUsers = async () => {
+  const resUserList = await getMyInviteUsers()
+  if (resUserList.status && resUserList.body) {
+    myInviteUsers.value = resUserList.body
+    // myInviteUsers.value = Array(2).fill(resUserList.body).flat()
+    // myInviteUsers.value = []
+  }
+}
+
+// 绑定用户奖励
+const getBindingUserRewards = async () => {
+  let data = ['1983474358707736577']
+  const resAwardPool = await apiGetBindingUserRewards(data)
+  if (resAwardPool.status && resAwardPool.body) {
+    bindingUserRewards.value = resAwardPool.body['1983474358707736577']
+  }
+}
+
+// 获取排行榜
+const getRanking = async () => {
+  let data = {
+    activityType: 10,
+  }
+  const resRanking = await getRankingListAndMyRanking(data)
+  if (resRanking.status && resRanking.body) {
+    myRanking.value = resRanking.body?.currentUserRank //我的排名信息
+    Ranking.value = resRanking.body?.rankingList
+  } else {
+    Ranking.value = []
+    myRanking.value = {}
+  }
+}
+
+// 预加载关键图片
+const preloadCriticalImages = async () => {
+  const criticalImages = []
+
+  await preloadImages(criticalImages)
+}
+
+// 页面初始化数据
+const initData = async () => {
+  await Promise.all([
+    apiGetMyInviteCode(), // 获取我的邀请码
+    apiGetMyInviter(), // 获取我的邀请人信息
+    apiGetMyInviteIncome(), // 获取收益统计
+    apiGetMyInviteUsers(), // 有效邀请用户列表
+    getBindingUserRewards(), // 绑定用户奖励
+
+    getRanking(), //获取排行榜
+  ])
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([initData(), preloadCriticalImages()])
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+  }
+}
+
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    // 连接成功回调
+    completePreloading() // 完成预加载
+  })
+}
+
+onMounted(() => {
+  startCountdown() //开启倒计时
+  connectToAppHandler()
+})
+
+onUnmounted(() => {
+  // 销毁计时器
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: white;
+}
+
+.fullPage {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #220c34;
+  position: relative;
+}
+
+.grayscale-container {
+  filter: grayscale(100%) brightness(90%);
+}
+
+.timeBox {
+  margin-top: 1vw;
+  width: 80%;
+  display: flex;
+  justify-content: space-around;
+}
+
+.timeText {
+  color: #fff;
+  font-weight: 590;
+  font-size: 2em;
+}
+
+.timeGap {
+  width: 6px;
+  align-self: stretch;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+[dir='rtl'] .timeBox {
+  flex-direction: row-reverse;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-y-auto::-webkit-scrollbar {
+  display: none;
+}
+
+.leftBt {
+  position: absolute;
+  top: 117vw;
+  left: 0;
+  width: 100vw;
+
+  direction: ltr;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.bindingUserCode {
+  width: 100%;
+  padding-left: 5vw;
+  padding-right: 5vw;
+  height: 14vw;
+
+  display: flex;
+  justify-content: space-between;
+}
+
+.inviteReward {
+  margin-top: 22vw;
+}
+
+.inviteReward_bn,
+.inviteReward_tr {
+  margin-top: 19vw;
+}
+
+.rechargeReward {
+  padding: 23.5vw 0 5vw;
+  gap: 8.8vw;
+}
+
+.rechargeReward_bn,
+.rechargeReward_tr {
+  padding: 24.5vw 0 5vw;
+  gap: 10vw;
+}
+
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+
+  overflow: hidden;
+  position: relative;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+
+// [dir='rtl'] .leftBt {
+//   align-items: flex-end;
+// }
+
+// [dir='rtl'] .bindingUserCode {
+//   padding-left: 5vw;
+//   padding-right: 3.5vw;
+// }
+</style>