diff --git a/src/views/AdminCenter.vue b/src/views/AdminCenter.vue
index 7cd70f3..f57b75e 100644
--- a/src/views/AdminCenter.vue
+++ b/src/views/AdminCenter.vue
@@ -1,171 +1,180 @@
 <template>
   <div class="fullPage">
-    <MobileHeader title="Admin Center" :isHomePage="true">
-      <template v-slot:extraFunction>
-        <div style="color: rgba(187, 146, 255, 1) !important; font-weight: 600" @click="send">
-          Send
-        </div>
-      </template>
-    </MobileHeader>
-    <!-- 标签 -->
-    <div
-      style="
-        display: flex;
-        justify-content: space-around;
-        border-bottom: 1px solid #cccccc;
-        background-color: transparent;
-        position: relative;
-      "
-    >
-      <div
-        v-for="(item, index) in tabList"
-        :key="index"
-        style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
-        class="tab-item"
-        :class="activeIndex == index ? 'tabName-active' : 'tabName'"
-        ref="tabItems"
-        @click="setActiveTab(index)"
-      >
-        {{ item.name }}
-      </div>
-      <!-- 下划线元素 -->
-      <div
-        style="width: 15px; height: 3px; background-color: #bb92ff"
-        :style="underlineStyle"
-      ></div>
-    </div>
-
-    <!-- BD列表 -->
-    <div style="padding: 10px" v-show="activeIndex == 0">
-      <div
-        v-for="(info, BDIndex) in BDList"
-        :key="BDIndex"
-        style="
-          box-shadow: 0 0 4px 0 #00000066;
-          padding: 10px;
-          border-radius: 10px;
-          margin-bottom: 10px;
-          transition: all 0.3s ease-out;
-        "
-        @click="showUserInfo(BDIndex)"
-      >
-        <!-- 基本信息 -->
-        <div style="display: flex; justify-content: space-between">
-          <div style="display: flex; align-items: center">
-            <img
-              :src="info.userProfile.userAvatar"
-              alt="../assets/icon/coin.png"
-              style="width: 36px; height: 36px; border-radius: 50%"
-            />
-            <div style="margin-left: 8px">
-              <div style="font-weight: 700">{{ info.userProfile.userNickname }}</div>
-              <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
-                ID:{{ info.userProfile.account }}
-              </div>
-            </div>
+    <div class="bg">
+      <MobileHeader title="Admin Center" :isHomePage="true">
+        <template v-slot:extraFunction>
+          <div style="color: rgba(187, 146, 255, 1) !important; font-weight: 600" @click="send">
+            Send
           </div>
-          <div style="display: flex; align-items: center">
-            <img
-              src="../assets/icon/arrow.png"
-              alt=""
-              style="width: 24px; transition: transform 0.5s"
-              :class="{ rotated: BDIndex == selectedBDIndex }"
-            />
-          </div>
-        </div>
-        <!-- 展示信息 -->
-        <transition name="info-fade">
-          <div style="display: flex" v-show="BDIndex == selectedBDIndex">
-            <div style="flex: 1">
-              <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Host</div>
-              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-                {{ info.allAnchorCount || 0 }}
-              </div>
-            </div>
-            <div style="flex: 1">
-              <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Agency</div>
-              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-                {{ info.agentCount || 0 }}
-              </div>
-            </div>
-          </div>
-        </transition>
-      </div>
-      <!-- 触发加载功能 -->
-      <div ref="BDloadmore" v-if="showBDLoading"></div>
-    </div>
-
-    <!-- agency列表 -->
-    <div style="padding: 10px" v-show="activeIndex == 1">
+        </template>
+      </MobileHeader>
+      <!-- 标签 -->
       <div
         style="
-          box-shadow: 0 0 4px 0 #00000066;
-          padding: 10px;
-          border-radius: 10px;
-          margin-bottom: 10px;
-          transition: all 0.3s ease-out;
+          display: flex;
+          justify-content: space-around;
+          border-bottom: 1px solid #cccccc;
+          background-color: transparent;
+          position: relative;
         "
       >
-        <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge for the month:</div>
-        <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-          ${{ totalRechargeDetail[0]?.totalAmount || 0 }}
-        </div>
-        <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
-        <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-          ${{ totalRechargeDetail[1]?.totalAmount || 0 }}
+        <div
+          v-for="(item, index) in tabList"
+          :key="index"
+          style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
+          class="tab-item"
+          :class="activeIndex == index ? 'tabName-active' : 'tabName'"
+          ref="tabItems"
+          @click="setActiveTab(index)"
+        >
+          {{ item.name }}
         </div>
+        <!-- 下划线元素 -->
+        <div
+          style="width: 15px; height: 3px; background-color: #bb92ff"
+          :style="underlineStyle"
+        ></div>
       </div>
-      <div
-        v-for="(agency, aIndex) in agencyList"
-        :key="aIndex"
-        style="
-          box-shadow: 0 0 4px 0 #00000066;
-          padding: 10px;
-          border-radius: 10px;
-          margin-bottom: 10px;
-          transition: all 0.3s ease-out;
-        "
-        @click="showAgencyInfo(aIndex)"
-      >
-        <!-- 基本信息 -->
-        <div style="display: flex; justify-content: space-between">
-          <div style="display: flex; align-items: center">
-            <img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
-            <div style="margin-left: 8px">
-              <div style="font-weight: 700">{{ agency.name }}</div>
-              <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ agency.account }}</div>
-            </div>
-          </div>
-          <div style="display: flex; align-items: center">
-            <img
-              src="../assets/icon/arrow.png"
-              alt=""
-              style="width: 24px; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
-              :class="{ rotated: aIndex == selectedAgencyIndex }"
-            />
-          </div>
-        </div>
 
-        <!-- 展示信息 -->
-        <transition name="info-fade">
-          <div style="display: flex" v-show="aIndex == selectedAgencyIndex">
-            <div style="flex: 1">
-              <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">This month:</div>
-              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-                ${{ formatPrice(agency.thisMonth) || 0 }}
+      <!-- BD列表 -->
+      <div style="padding: 10px" v-show="activeIndex == 0">
+        <div
+          v-for="(info, BDIndex) in BDList"
+          :key="BDIndex"
+          style="
+            box-shadow: 0 0 4px 0 #00000066;
+            padding: 10px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            transition: all 0.3s ease-out;
+          "
+          @click="showUserInfo(BDIndex)"
+        >
+          <!-- 基本信息 -->
+          <div style="display: flex; justify-content: space-between">
+            <div style="display: flex; align-items: center">
+              <img
+                :src="info.userProfile.userAvatar"
+                alt="../assets/icon/coin.png"
+                style="width: 36px; height: 36px; border-radius: 50%"
+              />
+              <div style="margin-left: 8px">
+                <div style="font-weight: 700">{{ info.userProfile.userNickname }}</div>
+                <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
+                  ID:{{ info.userProfile.account }}
+                </div>
               </div>
             </div>
-            <div style="flex: 1">
-              <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Last month:</div>
-              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-                ${{ formatPrice(agency.lastMonth) || 0 }}
-              </div>
+            <div style="display: flex; align-items: center">
+              <img
+                src="../assets/icon/arrow.png"
+                alt=""
+                style="width: 24px; transition: transform 0.5s"
+                :class="{ rotated: BDIndex == selectedBDIndex }"
+              />
             </div>
           </div>
-        </transition>
+          <!-- 展示信息 -->
+          <transition name="info-fade">
+            <div style="display: flex" v-show="BDIndex == selectedBDIndex">
+              <div style="flex: 1">
+                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Host</div>
+                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+                  {{ info.allAnchorCount || 0 }}
+                </div>
+              </div>
+              <div style="flex: 1">
+                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Agency</div>
+                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+                  {{ info.agentCount || 0 }}
+                </div>
+              </div>
+            </div>
+          </transition>
+        </div>
+        <!-- 触发加载功能 -->
+        <div ref="BDloadmore" v-if="showBDLoading"></div>
+      </div>
+
+      <!-- agency列表 -->
+      <div style="padding: 10px" v-show="activeIndex == 1">
+        <div
+          style="
+            box-shadow: 0 0 4px 0 #00000066;
+            padding: 10px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            transition: all 0.3s ease-out;
+          "
+        >
+          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
+            Total recharge for the month:
+          </div>
+          <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+            ${{ totalRechargeDetail[0]?.totalAmount || 0 }}
+          </div>
+          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
+          <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+            ${{ totalRechargeDetail[1]?.totalAmount || 0 }}
+          </div>
+        </div>
+        <div
+          v-for="(agency, aIndex) in agencyList"
+          :key="aIndex"
+          style="
+            box-shadow: 0 0 4px 0 #00000066;
+            padding: 10px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            transition: all 0.3s ease-out;
+          "
+          @click="showAgencyInfo(aIndex)"
+        >
+          <!-- 基本信息 -->
+          <div style="display: flex; justify-content: space-between">
+            <div style="display: flex; align-items: center">
+              <img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
+              <div style="margin-left: 8px">
+                <div style="font-weight: 700">{{ agency.name }}</div>
+                <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
+                  ID:{{ agency.account }}
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; align-items: center">
+              <img
+                src="../assets/icon/arrow.png"
+                alt=""
+                style="
+                  width: 24px;
+                  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+                "
+                :class="{ rotated: aIndex == selectedAgencyIndex }"
+              />
+            </div>
+          </div>
+
+          <!-- 展示信息 -->
+          <transition name="info-fade">
+            <div style="display: flex" v-show="aIndex == selectedAgencyIndex">
+              <div style="flex: 1">
+                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">This month:</div>
+                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+                  ${{ formatPrice(agency.thisMonth) || 0 }}
+                </div>
+              </div>
+              <div style="flex: 1">
+                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Last month:</div>
+                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+                  ${{ formatPrice(agency.lastMonth) || 0 }}
+                </div>
+              </div>
+            </div>
+          </transition>
+        </div>
+        <!-- 触发加载功能 -->
+        <div ref="Agloadmore" v-if="showAgLoading"></div>
       </div>
-      <!-- 触发加载功能 -->
-      <div ref="Agloadmore" v-if="showAgLoading"></div>
     </div>
   </div>
 </template>
@@ -346,6 +355,21 @@ const formatPrice = (value) => {
 <style scoped>
 * {
   color: black;
+  font-family: 'SF Pro';
+}
+
+.fullPage {
+  background-color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url(../assets/images/secondBg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
 }
 
 .tabName {
@@ -357,15 +381,6 @@ const formatPrice = (value) => {
   font-weight: 500;
 }
 
-/* 添加页面样式 */
-.fullPage {
-  width: 100vw;
-  height: 100vh;
-  background-image: url(../assets/images/secondBg.png);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
 .info-fade-enter-from,
 .info-fade-leave-to {
   transform: translateY(-10px);
diff --git a/src/views/ItemDistribution.vue b/src/views/ItemDistribution.vue
index 58d2bbc..34db519 100644
--- a/src/views/ItemDistribution.vue
+++ b/src/views/ItemDistribution.vue
@@ -1,139 +1,141 @@
 <template>
   <div class="fullPage">
-    <MobileHeader title="Item Distribution" />
-    <!-- 标签 -->
-    <div
-      style="
-        display: flex;
-        justify-content: space-around;
-        border-bottom: 1px solid #cccccc;
-        background-color: transparent;
-        position: relative;
-      "
-    >
+    <div class="bg">
+      <MobileHeader title="Item Distribution" />
+      <!-- 标签 -->
       <div
-        v-for="(item, index) in tabList"
-        :key="index"
-        style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
-        class="tab-item"
-        :class="activeIndex == index ? 'tabName-active' : 'tabName'"
-        ref="tabItems"
-        @click="setActiveTab(index)"
+        style="
+          display: flex;
+          justify-content: space-around;
+          border-bottom: 1px solid #cccccc;
+          background-color: transparent;
+          position: relative;
+        "
       >
-        {{ item.name }}
+        <div
+          v-for="(item, index) in tabList"
+          :key="index"
+          style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
+          class="tab-item"
+          :class="activeIndex == index ? 'tabName-active' : 'tabName'"
+          ref="tabItems"
+          @click="setActiveTab(index)"
+        >
+          {{ item.name }}
+        </div>
+        <!-- 下划线元素 -->
+        <div
+          style="width: 15px; height: 3px; background-color: #bb92ff"
+          :style="underlineStyle"
+        ></div>
       </div>
-      <!-- 下划线元素 -->
-      <div
-        style="width: 15px; height: 3px; background-color: #bb92ff"
-        :style="underlineStyle"
-      ></div>
-    </div>
 
-    <!-- 商品列表 -->
-    <div
-      style="
-        width: 100%;
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 12px;
-        padding: 15px;
-      "
-    >
-      <div v-for="(product, index) in productList" :key="index" @click="showSendDialog(product)">
+      <!-- 商品列表 -->
+      <div
+        style="
+          width: 100%;
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 12px;
+          padding: 15px;
+        "
+      >
+        <div v-for="(product, index) in productList" :key="index" @click="showSendDialog(product)">
+          <div
+            style="
+              background-color: white;
+              border-radius: 10px;
+              box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            "
+          >
+            <img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
+            <button
+              style="
+                background-color: #bb92ff;
+                color: white;
+                margin-bottom: 10px;
+                border: 0;
+                border-radius: 20px;
+                padding: 5px 10px;
+              "
+            >
+              Send
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 弹窗 -->
+      <!-- 遮罩层 -->
+      <div
+        style="
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          z-index: 9999;
+          background-color: #00000080;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        v-show="dialogshow"
+        @click="closedPopup"
+      >
         <div
           style="
+            padding: 20px;
             background-color: white;
-            border-radius: 10px;
-            box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
             display: flex;
             flex-direction: column;
             align-items: center;
+            border-radius: 20px;
           "
+          @click.stop
         >
-          <img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
-          <button
-            style="
-              background-color: #bb92ff;
-              color: white;
-              margin-bottom: 10px;
-              border: 0;
-              border-radius: 20px;
-              padding: 5px 10px;
-            "
-          >
-            Send
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 弹窗 -->
-    <!-- 遮罩层 -->
-    <div
-      style="
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        z-index: 9999;
-        background-color: #00000080;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      "
-      v-show="dialogshow"
-      @click="closedPopup"
-    >
-      <div
-        style="
-          padding: 20px;
-          background-color: white;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          border-radius: 20px;
-        "
-        @click.stop
-      >
-        <img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
-        <div style="font-weight: 600; font-size: 16px; margin: 10px 0">
-          <span style="color: #00000080; margin-right: 10px">Validity:</span>
-          <span style="font-weight: 700; color: #000">{{ validityPeriod }}day</span>
-        </div>
-        <div>
-          <input
-            type="text"
-            placeholder="Enter user ID"
-            style="
-              height: 36px;
-              width: 171px;
-              border-radius: 8px;
-              border: 0;
-              background-color: #f1f1f1b2;
-              padding: 8px;
-              margin-right: 4px;
-              font-size: 14px;
-              font-weight: 590;
-            "
-            v-model="targetUserId"
-          />
-          <button
-            style="
-              height: 36px;
-              width: 72px;
-              border-radius: 8px;
-              border: 0;
-              padding: 8px;
-              color: white;
-              font-size: 14px;
-              font-weight: 590;
-            "
-            :style="{ backgroundColor: confirmClick ? '#bb92ff' : '#00000080' }"
-            @click="sendGoods"
-          >
-            Confirm
-          </button>
+          <img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
+          <div style="font-weight: 600; font-size: 16px; margin: 10px 0">
+            <span style="color: #00000080; margin-right: 10px">Validity:</span>
+            <span style="font-weight: 700; color: #000">{{ validityPeriod }}day</span>
+          </div>
+          <div>
+            <input
+              type="text"
+              placeholder="Enter user ID"
+              style="
+                height: 36px;
+                width: 171px;
+                border-radius: 8px;
+                border: 0;
+                background-color: #f1f1f1b2;
+                padding: 8px;
+                margin-right: 4px;
+                font-size: 14px;
+                font-weight: 590;
+              "
+              v-model="targetUserId"
+            />
+            <button
+              style="
+                height: 36px;
+                width: 72px;
+                border-radius: 8px;
+                border: 0;
+                padding: 8px;
+                color: white;
+                font-size: 14px;
+                font-weight: 590;
+              "
+              :style="{ backgroundColor: confirmClick ? '#bb92ff' : '#00000080' }"
+              @click="sendGoods"
+            >
+              Confirm
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -321,12 +323,22 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 添加页面样式 */
+* {
+  color: black;
+  font-family: 'SF Pro';
+}
+
 .fullPage {
+  background-color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg {
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
   background-image: url(../assets/images/secondBg.png);
-  background-size: 100% 100%;
+  background-size: 100% auto;
   background-repeat: no-repeat;
 }
 
diff --git a/src/views/Recharge.vue b/src/views/Recharge.vue
index 27c44b9..961ee0c 100644
--- a/src/views/Recharge.vue
+++ b/src/views/Recharge.vue
@@ -1,134 +1,136 @@
 <!-- Recharge.vue -->
 <template>
   <div class="fullPage">
-    <!-- 顶部 -->
-    <MobileHeader title="Recharge" showHelp="true" @help="popupHelp" />
+    <div class="bg">
+      <!-- 顶部 -->
+      <MobileHeader title="Recharge" showHelp="true" @help="popupHelp" />
 
-    <!-- 内容 -->
-    <div style="padding: 4%">
-      <!-- 输入框 -->
-      <div style="display: flex; gap: 20px; width: 100%">
-        <input
-          style="
-            flex: 1;
-            border: 0;
-            border-radius: 8px;
-            box-shadow: 0 0 2px 2px #00000020;
-            padding: 10px 8px;
-          "
-          type="text"
-          placeholder="Please enter your Likei's lD"
-          v-model="targetUserId"
-        />
-        <button
-          style="
-            border: 0;
-            border-radius: 8px;
-            font-weight: 590;
-            color: white;
-            padding: 10px 8px;
-            background-color: #c670ff;
-            background: linear-gradient(to bottom, rgba(198, 112, 255, 1), rgba(119, 38, 255, 1));
-            box-shadow: 0 0 1px 1px #00000020;
-          "
-          @click="checkUserId"
-        >
-          Recharge
-        </button>
-      </div>
-
-      <!-- 功能介绍 -->
-      <div style="margin-top: 16px">
-        <p style="font-weight: bold">Frequently asked question:</p>
-        <div class="textContent">
-          <p>1.Question:</p>
-          <p>How to check whether the account recharge amounthasbeen received.</p>
-          <p>Ask:</p>
-          <p>
-            Firstly, open Likei, enter the 'My' page, click on theWallet' page, and select the
-            recharge record in theupper right corner.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <!-- 弹窗 -->
-    <!-- 遮罩层 -->
-    <div
-      style="
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        z-index: 9999;
-        background-color: #00000080;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      "
-      v-show="dialogshow"
-      @click="closedPopup"
-    >
-      <div
-        style="
-          width: 80%;
-          padding: 8%;
-          background-color: white;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          border-radius: 20px;
-        "
-        @click.stop
-      >
-        <!-- 标题行 -->
-        <div
-          style="
-            width: 100%;
-            display: flex;
-            justify-content: center;
-            font-weight: 800;
-            font-size: 16px;
-            position: relative;
-            padding: 5px 0;
-          "
-        >
-          Help
-          <div
+      <!-- 内容 -->
+      <div style="padding: 4%">
+        <!-- 输入框 -->
+        <div style="display: flex; gap: 20px; width: 100%">
+          <input
             style="
-              position: absolute;
-              top: 50%;
-              right: 0;
-              transform: translateY(-50%);
-              font-weight: bold;
+              flex: 1;
+              border: 0;
+              border-radius: 8px;
+              box-shadow: 0 0 2px 2px #00000020;
+              padding: 10px 8px;
             "
-            @click="closedPopup"
+            type="text"
+            placeholder="Please enter your Likei's lD"
+            v-model="targetUserId"
+          />
+          <button
+            style="
+              border: 0;
+              border-radius: 8px;
+              font-weight: 590;
+              color: white;
+              padding: 10px 8px;
+              background-color: #c670ff;
+              background: linear-gradient(to bottom, rgba(198, 112, 255, 1), rgba(119, 38, 255, 1));
+              box-shadow: 0 0 1px 1px #00000020;
+            "
+            @click="checkUserId"
           >
-            x
+            Recharge
+          </button>
+        </div>
+
+        <!-- 功能介绍 -->
+        <div style="margin-top: 16px">
+          <p style="font-weight: bold">Frequently asked question:</p>
+          <div class="textContent">
+            <p>1.Question:</p>
+            <p>How to check whether the account recharge amounthasbeen received.</p>
+            <p>Ask:</p>
+            <p>
+              Firstly, open Likei, enter the 'My' page, click on theWallet' page, and select the
+              recharge record in theupper right corner.
+            </p>
           </div>
         </div>
+      </div>
 
-        <!-- 内容 -->
-        <div>
-          <p style="font-weight: bold">User recharge instructions:</p>
-          <div class="textContent">
-            <p>
-              1、Before recharging,the user needs toprovide the correct Likei lD to complete
-              thisrecharge.
-            </p>
-            <p>
-              2、After the coin seller recharges, therecharged coins will be directly sent to
-              thecoin seller account.
-            </p>
-            <p>
-              3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can confrm
-              the account lD at the topof the page.
-            </p>
-            <p>
-              4、lf the lD account you enter is a coinseller account, the coin will be sent to
-              thecoin seller center of that account.
-            </p>
+      <!-- 弹窗 -->
+      <!-- 遮罩层 -->
+      <div
+        style="
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          z-index: 9999;
+          background-color: #00000080;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        v-show="dialogshow"
+        @click="closedPopup"
+      >
+        <div
+          style="
+            width: 80%;
+            padding: 8%;
+            background-color: white;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border-radius: 20px;
+          "
+          @click.stop
+        >
+          <!-- 标题行 -->
+          <div
+            style="
+              width: 100%;
+              display: flex;
+              justify-content: center;
+              font-weight: 800;
+              font-size: 16px;
+              position: relative;
+              padding: 5px 0;
+            "
+          >
+            Help
+            <div
+              style="
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: translateY(-50%);
+                font-weight: bold;
+              "
+              @click="closedPopup"
+            >
+              x
+            </div>
+          </div>
+
+          <!-- 内容 -->
+          <div>
+            <p style="font-weight: bold">User recharge instructions:</p>
+            <div class="textContent">
+              <p>
+                1、Before recharging,the user needs toprovide the correct Likei lD to complete
+                thisrecharge.
+              </p>
+              <p>
+                2、After the coin seller recharges, therecharged coins will be directly sent to
+                thecoin seller account.
+              </p>
+              <p>
+                3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can
+                confrm the account lD at the topof the page.
+              </p>
+              <p>
+                4、lf the lD account you enter is a coinseller account, the coin will be sent to
+                thecoin seller center of that account.
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -187,13 +189,20 @@ const checkUserId = async () => {
 <style scoped>
 * {
   color: black;
+  font-family: 'SF Pro';
 }
 
 .fullPage {
+  background-color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg {
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
   background-image: url(../assets/images/secondBg.png);
-  background-size: 100% 100%;
+  background-size: 100% auto;
   background-repeat: no-repeat;
 }
 
diff --git a/src/views/RechargeFreightAgent.vue b/src/views/RechargeFreightAgent.vue
index 1adbe70..42ed67b 100644
--- a/src/views/RechargeFreightAgent.vue
+++ b/src/views/RechargeFreightAgent.vue
@@ -1,137 +1,149 @@
 <template>
   <div class="fullPage">
-    <!-- 顶部 -->
-    <MobileHeader title="Recharge">
-      <template v-slot:extraFunction>
-        <div
-          style="
-            display: flex;
-            align-items: center;
-            position: relative;
-            color: rgba(187, 146, 255, 1) !important;
-          "
-          @click="listBt"
-        >
-          <div style="font-weight: bold">{{ selectedLanguage.type }}</div>
-          <div
-            style="margin-left: 5px; transition: transform 0.5s"
-            :class="{ rotated: visibleList }"
-          >
-            >
-          </div>
-          <transition name="slide-fade">
-            <div
-              style="
-                position: absolute;
-                right: 0;
-                top: 100%;
-                padding: 10px;
-                display: flex;
-                flex-direction: column;
-                width: max-content;
-                background-color: rgba(255, 255, 255, 0.1);
-                border-radius: 10px;
-                margin-top: 5px;
-                backdrop-filter: blur(8px);
-              "
-              v-show="visibleList"
-              class="extraList"
-            >
-              <div
-                style="padding: 8px; color: white !important; font-weight: 590"
-                v-for="(item, index) in languageList"
-                :key="index"
-              >
-                {{ item.type }}
-              </div>
-            </div>
-          </transition>
-        </div>
-      </template>
-    </MobileHeader>
-
-    <div style="padding: 10px">
-      <!-- 头部展示图 -->
-      <img src="../assets/images/firstRechargeBonus.png" alt="" style="width: 100%" />
-
-      <div style="font-weight: 600; margin-bottom: 10px">Recharge ID：</div>
-      <!-- 个人信息 -->
-      <div
-        style="
-          display: flex;
-          border-radius: 8px;
-          box-shadow: 0 0 4px 0 #00000050;
-          align-items: center;
-        "
-      >
-        <img
-          :src="userProfile.userAvatar"
-          alt=""
-          style="width: 10%; margin: 10px; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
-        />
-        <div style="">
-          <div style="font-weight: 700; display: flex; align-items: center">
-            {{ userProfile.userNickname }}
-            <img src="../assets/icon/sellerTab.png" alt="" style="height: 20px; margin-left: 5px" />
-          </div>
-          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">ID:{{ userProfile.id }}</div>
-        </div>
-      </div>
-
-      <div style="width: 100%; display: flex; justify-content: space-between; margin: 10px 0">
-        <div style="font-weight: 600">Select a country：</div>
-        <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)" @click="goMap">
-          <img src="../assets/icon/Vector.png" alt="" style="width: 10px" />
-          {{ selectedCountry.countryName }}
-        </div>
-      </div>
-
-      <!-- 支付渠道 -->
-      <div v-if="channels.length != 0">
-        <div v-for="(channelItem, index) in channels" :key="index">
-          <!-- 支付类型 -->
+    <div class="bg">
+      <!-- 顶部 -->
+      <MobileHeader title="Recharge">
+        <template v-slot:extraFunction>
           <div
             style="
               display: flex;
-              border-radius: 8px;
-              box-shadow: 0 0 4px 0 #00000050;
               align-items: center;
+              position: relative;
+              color: rgba(187, 146, 255, 1) !important;
             "
-            @click="setChannelName(channelItem.channel.channelName)"
+            @click="listBt"
           >
-            <img :src="channelItem.channel.channelIcon" alt="" style="width: 10%; margin: 10px" />
-            <div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
+            <div style="font-weight: bold">{{ selectedLanguage.type }}</div>
+            <div
+              style="margin-left: 5px; transition: transform 0.5s"
+              :class="{ rotated: visibleList }"
+            >
+              >
+            </div>
+            <transition name="slide-fade">
+              <div
+                style="
+                  position: absolute;
+                  right: 0;
+                  top: 100%;
+                  padding: 10px;
+                  display: flex;
+                  flex-direction: column;
+                  width: max-content;
+                  background-color: rgba(255, 255, 255, 0.1);
+                  border-radius: 10px;
+                  margin-top: 5px;
+                  backdrop-filter: blur(8px);
+                "
+                v-show="visibleList"
+                class="extraList"
+              >
+                <div
+                  style="padding: 8px; color: white !important; font-weight: 590"
+                  v-for="(item, index) in languageList"
+                  :key="index"
+                >
+                  {{ item.type }}
+                </div>
+              </div>
+            </transition>
           </div>
+        </template>
+      </MobileHeader>
 
-          <!-- 支付商品 -->
-          <div
+      <div style="padding: 10px">
+        <!-- 头部展示图 -->
+        <img src="../assets/images/firstRechargeBonus.png" alt="" style="width: 100%" />
+
+        <div style="font-weight: 600; margin-bottom: 10px">Recharge ID：</div>
+        <!-- 个人信息 -->
+        <div
+          style="
+            display: flex;
+            border-radius: 8px;
+            box-shadow: 0 0 4px 0 #00000050;
+            align-items: center;
+          "
+        >
+          <img
+            :src="userProfile.userAvatar"
+            alt=""
             style="
-              border-radius: 8px;
-              box-shadow: 0 0 4px 0 #00000050;
-              display: grid;
-              grid-template-columns: repeat(3, 1fr);
-              gap: 12px;
-              padding: 10px;
-              margin-top: 1rem;
+              width: 10%;
+              margin: 10px;
+              border-radius: 50%;
+              aspect-ratio: 1/1;
+              object-fit: cover;
             "
-            v-if="selectedChannelName == channelItem.channel.channelName"
-          >
+          />
+          <div style="">
+            <div style="font-weight: 700; display: flex; align-items: center">
+              {{ userProfile.userNickname }}
+              <img
+                src="../assets/icon/sellerTab.png"
+                alt=""
+                style="height: 20px; margin-left: 5px"
+              />
+            </div>
+            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">ID:{{ userProfile.id }}</div>
+          </div>
+        </div>
+
+        <div style="width: 100%; display: flex; justify-content: space-between; margin: 10px 0">
+          <div style="font-weight: 600">Select a country：</div>
+          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)" @click="goMap">
+            <img src="../assets/icon/Vector.png" alt="" style="width: 10px" />
+            {{ selectedCountry.countryName }}
+          </div>
+        </div>
+
+        <!-- 支付渠道 -->
+        <div v-if="channels.length != 0">
+          <div v-for="(channelItem, index) in channels" :key="index">
+            <!-- 支付类型 -->
             <div
               style="
-                width: 100%;
+                display: flex;
                 border-radius: 8px;
                 box-shadow: 0 0 4px 0 #00000050;
-                display: flex;
-                flex-direction: column;
                 align-items: center;
               "
-              v-for="(goods, index) in commodityList"
-              :key="index"
-              @click="goPay(channelItem, goods)"
+              @click="setChannelName(channelItem.channel.channelName)"
             >
-              <img src="../assets/icon/coin.png" alt="" style="width: 30%" />
-              <div>{{ goods.content }}</div>
-              <div>${{ goods.amountUsd }}</div>
+              <img :src="channelItem.channel.channelIcon" alt="" style="width: 10%; margin: 10px" />
+              <div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
+            </div>
+
+            <!-- 支付商品 -->
+            <div
+              style="
+                border-radius: 8px;
+                box-shadow: 0 0 4px 0 #00000050;
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 12px;
+                padding: 10px;
+                margin-top: 1rem;
+              "
+              v-if="selectedChannelName == channelItem.channel.channelName"
+            >
+              <div
+                style="
+                  width: 100%;
+                  border-radius: 8px;
+                  box-shadow: 0 0 4px 0 #00000050;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                "
+                v-for="(goods, index) in commodityList"
+                :key="index"
+                @click="goPay(channelItem, goods)"
+              >
+                <img src="../assets/icon/coin.png" alt="" style="width: 30%" />
+                <div>{{ goods.content }}</div>
+                <div>${{ goods.amountUsd }}</div>
+              </div>
             </div>
           </div>
         </div>
@@ -279,13 +291,20 @@ watch(selectedCountry, (New, Old) => {
 <style scoped>
 * {
   color: black;
+  font-family: 'SF Pro';
 }
 
 .fullPage {
+  background-color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg {
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
   background-image: url(../assets/images/secondBg.png);
-  background-size: 100% 100%;
+  background-size: 100% auto;
   background-repeat: no-repeat;
 }
 
diff --git a/src/views/map.vue b/src/views/map.vue
index 7b91a4e..a0fe2e1 100644
--- a/src/views/map.vue
+++ b/src/views/map.vue
@@ -1,70 +1,72 @@
 <template>
   <div class="fullPage">
-    <div>
-      <!-- 顶部 -->
-      <MobileHeader title="Country&Region">
-        <template v-slot:extraFunction>
-          <div style="display: flex; justify-content: center; align-items: center; width: 10%">
-            <img src="../assets/icon/selected.png" alt="" style="width: 100%" />
-          </div>
-        </template>
-      </MobileHeader>
-    </div>
-
-    <!-- 内容 -->
-    <div style="padding: 10px">
-      <div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">Select your country</div>
-
-      <div v-for="(countries, gIndex) in groupedCountries" :key="gIndex">
-        <div style="font-weight: 400; color: rgba(0, 0, 0, 0.4)">{{ countries.letter }}</div>
-        <div
-          style="
-            margin: 10px 0;
-            border-radius: 12px;
-            box-shadow: 0 0 4px 0 #00000050;
-            padding: 10px;
-            background-color: white;
-          "
-        >
-          <div
-            v-for="(country, cIndex) in countries.countries"
-            :key="cIndex"
-            style="
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              margin: 10px 0;
-            "
-            @click="selectC(gIndex, cIndex, country)"
-          >
-            <div style="display: flex; align-items: center">
-              <img
-                :src="country.country.nationalFlag"
-                alt=""
-                style="height: 16px; margin-right: 10px"
-              />
-              {{ country.countryName }}
+    <div class="bg">
+      <div>
+        <!-- 顶部 -->
+        <MobileHeader title="Country&Region">
+          <template v-slot:extraFunction>
+            <div style="display: flex; justify-content: center; align-items: center; width: 10%">
+              <img src="../assets/icon/selected.png" alt="" style="width: 100%" />
             </div>
+          </template>
+        </MobileHeader>
+      </div>
+
+      <!-- 内容 -->
+      <div style="padding: 10px">
+        <div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">Select your country</div>
+
+        <div v-for="(countries, gIndex) in groupedCountries" :key="gIndex">
+          <div style="font-weight: 400; color: rgba(0, 0, 0, 0.4)">{{ countries.letter }}</div>
+          <div
+            style="
+              margin: 10px 0;
+              border-radius: 12px;
+              box-shadow: 0 0 4px 0 #00000050;
+              padding: 10px;
+              background-color: white;
+            "
+          >
             <div
+              v-for="(country, cIndex) in countries.countries"
+              :key="cIndex"
               style="
-                width: 16px;
-                height: 16px;
-                border: 1px solid rgba(0, 0, 0, 0.4);
-                border-radius: 50%;
                 display: flex;
-                justify-content: center;
+                justify-content: space-between;
                 align-items: center;
+                margin: 10px 0;
               "
+              @click="selectC(gIndex, cIndex, country)"
             >
+              <div style="display: flex; align-items: center">
+                <img
+                  :src="country.country.nationalFlag"
+                  alt=""
+                  style="height: 16px; margin-right: 10px"
+                />
+                {{ country.countryName }}
+              </div>
               <div
                 style="
-                  width: 10px;
-                  height: 10px;
+                  width: 16px;
+                  height: 16px;
+                  border: 1px solid rgba(0, 0, 0, 0.4);
                   border-radius: 50%;
-                  background-color: rgba(187, 146, 255, 1);
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
                 "
-                v-if="groupIndex == gIndex && countryIndex == cIndex"
-              ></div>
+              >
+                <div
+                  style="
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 50%;
+                    background-color: rgba(187, 146, 255, 1);
+                  "
+                  v-if="groupIndex == gIndex && countryIndex == cIndex"
+                ></div>
+              </div>
             </div>
           </div>
         </div>
@@ -74,78 +76,89 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
-import MobileHeader from "../components/MobileHeader.vue";
-import { useRoute } from "vue-router";
-import { useCountryStore } from "@/stores/country";
-import { storeToRefs } from "pinia";
+import { computed, onMounted, ref } from 'vue'
+import MobileHeader from '../components/MobileHeader.vue'
+import { useRoute } from 'vue-router'
+import { useCountryStore } from '@/stores/country'
+import { storeToRefs } from 'pinia'
 
-const route = useRoute();
+const route = useRoute()
 
-const countryStore = useCountryStore();
-const { list: countryList, selectedCountry } = storeToRefs(countryStore); //国家信息
+const countryStore = useCountryStore()
+const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息
 
-const groupIndex = ref(-1); //选中的首字母区域
-const countryIndex = ref(-1); //选中区域的第几个
+const groupIndex = ref(-1) //选中的首字母区域
+const countryIndex = ref(-1) //选中区域的第几个
 
 const selectC = (gIndex, cIndex, country) => {
-  groupIndex.value = gIndex;
-  countryIndex.value = cIndex;
-  countryStore.setCountry(country);
-}; //选择国家
+  groupIndex.value = gIndex
+  countryIndex.value = cIndex
+  countryStore.setCountry(country)
+} //选择国家
 
 const groupedCountries = computed(() => {
-  const groups = {};
+  const groups = {}
   countryList.value.forEach((item) => {
-    let firstLetter = item.countryName.charAt(0)?.toUpperCase() || "#"; //获取首字母转大写
-    const normalizedLetter = /[A-Z]/.test(firstLetter) ? firstLetter : "#"; //处理特殊字符
+    let firstLetter = item.countryName.charAt(0)?.toUpperCase() || '#' //获取首字母转大写
+    const normalizedLetter = /[A-Z]/.test(firstLetter) ? firstLetter : '#' //处理特殊字符
 
     if (!groups.hasOwnProperty(normalizedLetter)) {
-      groups[normalizedLetter] = [];
+      groups[normalizedLetter] = []
     }
-    groups[normalizedLetter].push(item);
-  });
+    groups[normalizedLetter].push(item)
+  })
 
   let resCountryList = Object.keys(groups)
     .sort()
     .map((letter) => ({
       letter,
       countries: groups[letter].sort((a, b) => a.countryName.localeCompare(b.countryName)),
-    }));
+    }))
 
-  let firstLetter = selectedCountry.value.countryName.charAt(0)?.toUpperCase() || "#"; //当前选中的国家的首字母
+  let firstLetter = selectedCountry.value.countryName.charAt(0)?.toUpperCase() || '#' //当前选中的国家的首字母
   resCountryList.forEach((resitem, gIndex) => {
     if (resitem.letter == firstLetter) {
       resitem.countries.forEach((citem, cIndex) => {
         if (citem.countryName == selectedCountry.value.countryName) {
-          groupIndex.value = gIndex;
-          countryIndex.value = cIndex;
+          groupIndex.value = gIndex
+          countryIndex.value = cIndex
         }
-      });
+      })
     }
-  });
+  })
 
-  return resCountryList;
-});
+  return resCountryList
+})
 
 onMounted(() => {
-  const countryListStr = sessionStorage.getItem("countryList");
-  selectedCountry.value = sessionStorage.getItem("selectedCountry");
+  const countryListStr = sessionStorage.getItem('countryList')
+  selectedCountry.value = sessionStorage.getItem('selectedCountry')
   if (countryListStr) {
-    countryList.value = JSON.parse(countryListStr);
+    countryList.value = JSON.parse(countryListStr)
 
     // 可选：清除临时存储
     // sessionStorage.removeItem('tempCountryList');
   }
-});
+})
 </script>
 
 <style scoped>
+* {
+  color: black;
+  font-family: 'SF Pro';
+}
+
 .fullPage {
+  background-color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg {
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
   background-image: url(../assets/images/secondBg.png);
-  background-size: 100% 100%;
+  background-size: 100% auto;
   background-repeat: no-repeat;
 }
 </style>