UI兼容调整

src/components/Container.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 defineProps({
@@ -11,13 +12,21 @@ defineProps({
     default: 0,
   },
 });
+const isIos = ref(true);
+onMounted(() => {
+  const deviceInfo = uni.getDeviceInfo();
+  isIos.value = deviceInfo.osName === "ios";
+});
 </script>
 
 <template>
   <view>
     <AppBackground :type="bgType" />
     <Header :title="title" />
-    <view class="content">
+    <view
+      class="content"
+      :style="{ height: `calc(100vh - ${isIos ? 105 : 95}px)` }"
+    >
       <slot></slot>
     </view>
   </view>
@@ -26,7 +35,6 @@ defineProps({
 <style scoped>
 .content {
   width: 100vw;
-  height: calc(100vh - 95px);
   overflow-x: hidden;
   overflow-y: auto;
   display: flex;

src/components/Header.vue

@@ -1,9 +1,11 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import useStore from "@/store";
 import { simulShootAPI } from "@/apis";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { device } = storeToRefs(store);
+const isIos = ref(true);
 
 defineProps({
   title: {
@@ -17,10 +19,15 @@ const simulShoot = async () => {
     await simulShootAPI(device.value.deviceId);
   }
 };
+
+onMounted(() => {
+  const deviceInfo = uni.getDeviceInfo();
+  isIos.value = deviceInfo.osName === "ios";
+});
 </script>
 
 <template>
-  <view class="container">
+  <view class="container" :style="{ paddingTop: isIos ? '35px' : '25px' }">
     <navigator open-type="navigateBack" class="back-btn">
       <image src="../static/back.png" mode="widthFix" />
     </navigator>
@@ -37,7 +44,6 @@ const simulShoot = async () => {
   width: 72vw;
   height: 60px;
   padding-left: 15px;
-  padding-top: 25px;
 }
 .back-btn {
   display: flex;

src/components/UserHeader.vue

@@ -39,7 +39,11 @@ const toUserPage = () => {
     <view class="user-details">
       <view class="user-name">
         <text>{{ user.nickName }}</text>
-        <image class="user-name-image" src="../static/vip1.png" mode="widthFix" />
+        <image
+          class="user-name-image"
+          src="../static/vip1.png"
+          mode="widthFix"
+        />
       </view>
       <view class="user-stats">
         <text class="level-tag level-tag-first">钻石1级</text>
@@ -51,9 +55,17 @@ const toUserPage = () => {
       </view>
     </view>
     <view v-if="showRank === true" class="rank-info">
-      <image class="rank-info-image" src="../static/global-rank.png" mode="widthFix" />
+      <image
+        class="rank-info-image"
+        src="../static/global-rank.png"
+        mode="widthFix"
+      />
       <text>本赛季全国</text>
-      <text class="rank-number">第<text :style="{ color: '#ffd700' }">{{ user.points }}/{{ user.rankLvl }}</text>名</text>
+      <text class="rank-number"
+        >第<text :style="{ color: '#ffd700' }"
+          >{{ user.points }}/{{ user.rankLvl }}</text
+        >名</text
+      >
     </view>
   </view>
 </template>
@@ -79,6 +91,14 @@ const toUserPage = () => {
   margin-bottom: 5px;
 }
 
+.user-name > text:first-child {
+  font-size: 16px;
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .user-name-image {
   margin-left: 5px;
   width: 20px;

src/components/UserItem.vue

@@ -43,6 +43,7 @@ defineProps({
 .user-item > text {
   margin-left: 15px;
   font-size: 14px;
+  color: #000;
 }
 .user-item > view {
   display: flex;

src/pages/index.vue

@@ -13,6 +13,7 @@ const { updateConfig, updateUser, updateDevice } = store;
 // 使用storeToRefs，用于UI里显示，保持响应性
 const { user, device } = storeToRefs(store);
 const showModal = ref(false);
+const isIos = ref(true);
 
 const toPage = (path) => {
   if (!user.value.id) {
@@ -26,6 +27,8 @@ const toPage = (path) => {
 
 onMounted(async () => {
   try {
+    const deviceInfo = uni.getDeviceInfo();
+    isIos.value = deviceInfo.osName === "ios";
     const config = await getAppConfig();
     console.log("全局配置：", config);
     updateConfig(config);
@@ -48,7 +51,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <view class="root-container">
+  <view class="root-container" :style="{ paddingTop: isIos ? '45px' : '40px' }">
     <AppBackground />
     <!-- 根据登录状态显示用户信息或登录按钮 -->
     <block v-if="user.id">
@@ -162,10 +165,8 @@ onMounted(async () => {
 
 <style scoped>
 .root-container {
-  height: calc(100vh - 40px);
   color: white;
   position: relative;
-  padding-top: 40px;
 }
 
 .container {

src/pages/rank-intro.vue

@@ -198,6 +198,7 @@ import Container from "@/components/Container.vue";
   border: 1px solid #e4e4e4;
   border-radius: 4px;
   font-size: 14px;
+  color: #000;
 }
 
 .table-header {