fix(样式): 修复不同设备默认字体颜色的显示问题

src/views/AdminCenter.vue

@@ -351,6 +351,10 @@ const formatPrice = (value) => {
 </script>
 
 <style scoped>
+* {
+  color: black;
+}
+
 /* 添加页面样式 */
 .fullPage {
   width: 100vw;

src/views/Recharge.vue

@@ -137,48 +137,58 @@
 </template>
 
 <script setup>
-import MobileHeader from "../components/MobileHeader.vue";
+import MobileHeader from '../components/MobileHeader.vue'
-import { ref } from "vue";
+import { ref } from 'vue'
-import { searchUser } from "@/api/userInfo";
+import { searchUser } from '@/api/userInfo'
-import { showWarning, } from "@/utils/toast.js";
+import { showWarning } from '@/utils/toast.js'
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router'
-import {usePageInitializationWithConfig} from "@/utils/pageConfig.js";
+import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
 
-const router = useRouter();
+const router = useRouter()
 
-const dialogshow = ref(false);
+const dialogshow = ref(false)
 // 展示弹窗
 const popupHelp = () => {
-  dialogshow.value = true;
+  dialogshow.value = true
-};
+}
 
 // 关闭弹窗
 const closedPopup = () => {
-  dialogshow.value = false;
+  dialogshow.value = false
-};
+}
 
-const targetUserId = ref("");
+const targetUserId = ref('')
 
 const checkUserId = async () => {
-  console.log("充值目标用户id：", targetUserId.value);
+  console.log('充值目标用户id：', targetUserId.value)
 
   try {
-    const targetUserInfo = await searchUser(targetUserId.value);
+    const targetUserInfo = await searchUser(targetUserId.value)
-    console.log("targetUserInfo:", targetUserInfo);
+    console.log('targetUserInfo:', targetUserInfo)
     if (targetUserInfo.status && targetUserInfo.body.id) {
-      router.push({ path: "/recharge-freight-agent", query: { targetUserId: targetUserId.value, isFreightAgent: targetUserInfo.body.isFreightAgent } });
+      router.push({
+        path: '/recharge-freight-agent',
+        query: {
+          targetUserId: targetUserId.value,
+          isFreightAgent: targetUserInfo.body.isFreightAgent,
+        },
+      })
     } else {
       // 信息提示id有误
-      showWarning("User info not found");
+      showWarning('User info not found')
     }
   } catch (error) {
-    console.log("error:", error.response.errorMsg);
+    console.log('error:', error.response.errorMsg)
-    throw error;
+    throw error
   }
-};
+}
 </script>
 
 <style scoped>
+* {
+  color: black;
+}
+
 .fullPage {
   width: 100vw;
   height: 100vh;

src/views/RechargeFreightAgent.vue

@@ -67,7 +67,7 @@
         <img
           :src="userProfile.userAvatar"
           alt=""
-          style="width: 10%; margin: 10px; border-radius: 50%"
+          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">
@@ -141,72 +141,72 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch } from 'vue'
-import MobileHeader from "../components/MobileHeader.vue";
+import MobileHeader from '../components/MobileHeader.vue'
-import { searchUser, searchPayRechargeUser } from "@/api/userInfo";
+import { searchUser, searchPayRechargeUser } from '@/api/userInfo'
 // import { getUserIdentity } from "@/api/wallet";
-import { getPayAplication, getAppCommodityCard, payPlaceAnOrderRecharge } from "@/api/pay";
+import { getPayAplication, getAppCommodityCard, payPlaceAnOrderRecharge } from '@/api/pay'
-import { goAirwallex } from "@/utils/payment";
+import { goAirwallex } from '@/utils/payment'
-import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
+import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
 
-import { useRoute } from "vue-router";
+import { useRoute } from 'vue-router'
-import router from "@/router";
+import router from '@/router'
-import { useCountryStore } from "@/stores/country";
+import { useCountryStore } from '@/stores/country'
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia'
 
-const countryStore = useCountryStore();
+const countryStore = useCountryStore()
-const route = useRoute();
+const route = useRoute()
 
 const languageList = ref([
   {
-    type: "English",
+    type: 'English',
   },
-]);
+])
 const selectedLanguage = ref({
-  type: "English",
+  type: 'English',
-});
+})
-const visibleList = ref(false);
+const visibleList = ref(false)
 const listBt = () => {
-  visibleList.value = !visibleList.value;
+  visibleList.value = !visibleList.value
-};
+}
 
-const applicationId = ref("1963531459019739137");
+const applicationId = ref('1963531459019739137')
-const userProfile = ref({}); //用户信息
+const userProfile = ref({}) //用户信息
-const type = ref(""); //用户身份
+const type = ref('') //用户身份
 
-const regionId = ref(""); //区域id
+const regionId = ref('') //区域id
 
-const { list: countryList, selectedCountry } = storeToRefs(countryStore); //国家信息
+const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息
 
-const channels = ref([]); //支付渠道
+const channels = ref([]) //支付渠道
-const selectedChannelName = ref(""); //选中的支付渠道
+const selectedChannelName = ref('') //选中的支付渠道
 
-const commodityList = ref([]); //商品列表
+const commodityList = ref([]) //商品列表
-const selectedCommodity = ref({}); //选中的商品
+const selectedCommodity = ref({}) //选中的商品
 
 // 前往地图页
 const goMap = () => {
-  router.push({ path: "/map" });
+  router.push({ path: '/map' })
-};
+}
 
 const goPay = async (item, commodity) => {
-  selectedCommodity.value = commodity;
+  selectedCommodity.value = commodity
   let payData = {
     applicationId: applicationId.value,
     payCountryId: selectedCountry.value.id,
     goodsId: commodity.id,
     userId: userProfile.value.id,
     channelCode: item.channel.channelCode,
-  };
-  console.log("payData:", payData);
-
-  const payRes = await payPlaceAnOrderRecharge(payData);
-  const body = payRes.body;
-  if (!body) {
-    console.log("Payment not available, please contact administrator!!!");
-    return;
   }
-  if (body.factoryCode === "AIRWALLEX") {
+  console.log('payData:', payData)
+
+  const payRes = await payPlaceAnOrderRecharge(payData)
+  const body = payRes.body
+  if (!body) {
+    console.log('Payment not available, please contact administrator!!!')
+    return
+  }
+  if (body.factoryCode === 'AIRWALLEX') {
     goAirwallex({
       result: body,
       props: {
@@ -215,66 +215,70 @@ const goPay = async (item, commodity) => {
         failUrl: `${location.origin}/#/pay-result?redirect=recharge&appType=${type.value}&appId=${applicationId.value}&appStatus=1`,
       },
       callback: (response) => {
-        if (response.code === "FAIL") {
+        if (response.code === 'FAIL') {
-          showWarning("init fail!!!");
+          showWarning('init fail!!!')
-          return;
+          return
         }
       },
-    });
+    })
   }
   if (body.requestUrl) {
-    location.href = decodeURIComponent(body.requestUrl);
+    location.href = decodeURIComponent(body.requestUrl)
   }
-};
+}
 
 // 选中支付渠道
 const setChannelName = (channelName) => {
-  selectedChannelName.value = selectedChannelName.value != channelName ? channelName : "";
+  selectedChannelName.value = selectedChannelName.value != channelName ? channelName : ''
-};
+}
 
 onMounted(async () => {
-  type.value = route.params.type || "GOLD";
+  type.value = route.params.type || 'GOLD'
 
-  const PayAplication = await getPayAplication(applicationId.value);
+  const PayAplication = await getPayAplication(applicationId.value)
-  console.log("PayAplication:", PayAplication);
+  console.log('PayAplication:', PayAplication)
   if (PayAplication.body && PayAplication.body.appCode) {
     let params = {
       sysOrigin: PayAplication.body.appCode,
       account: route.query.targetUserId,
-      type: route.query.isFreightAgent === 'true' ? 'FREIGHT_GOLD' : 'GOLD'
+      type: route.query.isFreightAgent === 'true' ? 'FREIGHT_GOLD' : 'GOLD',
-    };
+    }
-    const userInfo = await searchPayRechargeUser(params);
+    const userInfo = await searchPayRechargeUser(params)
 
     if (userInfo.body && userInfo.body.regionId && userInfo.body.countryList.length != 0) {
-      userProfile.value = { ...userInfo.body.userProfile, type: "GOLD" };
+      userProfile.value = { ...userInfo.body.userProfile, type: 'GOLD' }
 
-      countryStore.setCountryList(userInfo.body.countryList);
+      countryStore.setCountryList(userInfo.body.countryList)
-      if (JSON.stringify(selectedCountry.value) == "{}") {
+      if (JSON.stringify(selectedCountry.value) == '{}') {
-        countryStore.setCountry(userInfo.body.countryList[0]);
+        countryStore.setCountry(userInfo.body.countryList[0])
       }
 
-      regionId.value = userInfo.body.regionId;
+      regionId.value = userInfo.body.regionId
 
       let appCommodityCardParams = {
         applicationId: applicationId.value,
         payCountryId: selectedCountry.value.id,
         regionId: userInfo.body.regionId,
-        type: route.query.isFreightAgent === 'true' ? 'FREIGHT_GOLD' : 'GOLD'
+        type: route.query.isFreightAgent === 'true' ? 'FREIGHT_GOLD' : 'GOLD',
-      };
+      }
-      const appCommodityCard = await getAppCommodityCard(appCommodityCardParams);
+      const appCommodityCard = await getAppCommodityCard(appCommodityCardParams)
-      console.log("appCommodityCard:", appCommodityCard);
+      console.log('appCommodityCard:', appCommodityCard)
-      commodityList.value = appCommodityCard.body.commodity;
+      commodityList.value = appCommodityCard.body.commodity
-      channels.value = appCommodityCard.body.channels;
+      channels.value = appCommodityCard.body.channels
     }
   }
-});
+})
 
 watch(selectedCountry, (New, Old) => {
-  console.log(`新值：${New.id},旧值：${Old.id}`);
+  console.log(`新值：${New.id},旧值：${Old.id}`)
-});
+})
 </script>
 
 <style scoped>
+* {
+  color: black;
+}
+
 .fullPage {
   width: 100vw;
   height: 100vh;
@@ -286,9 +290,11 @@ watch(selectedCountry, (New, Old) => {
 .slide-fade-enter-active {
   transition: all 0.3s ease-out;
 }
+
 .slide-fade-leave-active {
   transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
 }
+
 .slide-fade-enter-from,
 .slide-fade-leave-to {
   transform: translateY(-10px);

src/views/payResult.vue

@@ -59,6 +59,10 @@ onMounted(() => {})
 </script>
 
 <style scoped lang="scss">
+* {
+  color: black;
+}
+
 .pay-result {
   background: #ffffff;
   min-height: 100%;