fix(样式): 修复屏幕高度不够时，背景图截断的问题

src/views/AdminCenter.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="fullPage">
+    <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">
@@ -106,7 +107,9 @@
             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: 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>
@@ -133,14 +136,19 @@
               <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 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)"
+                style="
+                  width: 24px;
+                  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+                "
                 :class="{ rotated: aIndex == selectedAgencyIndex }"
               />
             </div>
@@ -168,6 +176,7 @@
         <div ref="Agloadmore" v-if="showAgLoading"></div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -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);

src/views/ItemDistribution.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="fullPage">
+    <div class="bg">
       <MobileHeader title="Item Distribution" />
       <!-- 标签 -->
       <div
@@ -138,6 +139,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -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;
 }
 

src/views/Recharge.vue

@@ -1,6 +1,7 @@
 <!-- Recharge.vue -->
 <template>
   <div class="fullPage">
+    <div class="bg">
       <!-- 顶部 -->
       <MobileHeader title="Recharge" showHelp="true" @help="popupHelp" />
 
@@ -122,8 +123,8 @@
                 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
+                3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can
-              the account lD at the topof the page.
+                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
@@ -134,6 +135,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -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;
 }
 

src/views/RechargeFreightAgent.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="fullPage">
+    <div class="bg">
       <!-- 顶部 -->
       <MobileHeader title="Recharge">
         <template v-slot:extraFunction>
@@ -67,12 +68,22 @@
           <img
             :src="userProfile.userAvatar"
             alt=""
-          style="width: 10%; margin: 10px; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+            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" />
+              <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>
@@ -138,6 +149,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -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;
 }
 

src/views/map.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="fullPage">
+    <div class="bg">
       <div>
         <!-- 顶部 -->
         <MobileHeader title="Country&Region">
@@ -71,81 +72,93 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref } from 'vue'
-import MobileHeader from "../components/MobileHeader.vue";
+import MobileHeader from '../components/MobileHeader.vue'
-import { useRoute } from "vue-router";
+import { useRoute } from 'vue-router'
-import { useCountryStore } from "@/stores/country";
+import { useCountryStore } from '@/stores/country'
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia'
 
-const route = useRoute();
+const route = useRoute()
 
-const countryStore = useCountryStore();
+const countryStore = useCountryStore()
-const { list: countryList, selectedCountry } = storeToRefs(countryStore); //国家信息
+const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息
 
-const groupIndex = ref(-1); //选中的首字母区域
+const groupIndex = ref(-1) //选中的首字母区域
-const countryIndex = ref(-1); //选中区域的第几个
+const countryIndex = ref(-1) //选中区域的第几个
 
 const selectC = (gIndex, cIndex, country) => {
-  groupIndex.value = gIndex;
+  groupIndex.value = gIndex
-  countryIndex.value = cIndex;
+  countryIndex.value = cIndex
-  countryStore.setCountry(country);
+  countryStore.setCountry(country)
-}; //选择国家
+} //选择国家
 
 const groupedCountries = computed(() => {
-  const groups = {};
+  const groups = {}
   countryList.value.forEach((item) => {
-    let firstLetter = item.countryName.charAt(0)?.toUpperCase() || "#"; //获取首字母转大写
+    let firstLetter = item.countryName.charAt(0)?.toUpperCase() || '#' //获取首字母转大写
-    const normalizedLetter = /[A-Z]/.test(firstLetter) ? firstLetter : "#"; //处理特殊字符
+    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;
+          groupIndex.value = gIndex
-          countryIndex.value = cIndex;
+          countryIndex.value = cIndex
         }
-      });
+      })
     }
-  });
+  })
 
-  return resCountryList;
+  return resCountryList
-});
+})
 
 onMounted(() => {
-  const countryListStr = sessionStorage.getItem("countryList");
+  const countryListStr = sessionStorage.getItem('countryList')
-  selectedCountry.value = sessionStorage.getItem("selectedCountry");
+  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>