fix(style): use css env as bottom-padding

src/components/BottomPanel/index.scss

@@ -3,7 +3,7 @@
 .bottom-panel {
   height: 49Px;
   padding-top: 8Px;
-  padding-bottom: 8Px;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 8Px);
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -14,8 +14,4 @@
   border-top-left-radius: 1rem;
   z-index: 3000;
   background: var(--wjh-color-background-frame);
-}
-
-.bottom-bar-ios {
-  padding-bottom: 2rem;
-}
+}

src/components/BottomPanel/index.vue

@@ -1,14 +1,10 @@
 <template>
-  <view
-    class="bottom-panel"
-    :class="{ 'bottom-bar-ios': isNewIPhone() }"
-  >
+  <view class="bottom-panel">
     <slot />
   </view>
 </template>
 
 <script setup lang="ts">
-import { isNewIPhone } from "@/utils";
 import "./index.scss";
 
 </script>

src/components/PopView/index.vue

@@ -4,17 +4,14 @@
     <view
       class="wjh-pop-view-body"
       :class="positionClass"
-      :style="isNewIPhone()
-        && positionClass === 'bottom'
-        ? 'padding-bottom: 2rem' : '' "
+      :style="positionClass === 'bottom' && 'padding-bottom: env(safe-area-inset-bottom)'"
     >
       <slot />
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { isNewIPhone } from "@/utils";
 import "./index.scss";
 import { computed, toRefs } from "vue";
 

src/pages/lostfound/ContactMe/index.module.scss

@@ -3,6 +3,7 @@
 .container {
   text-align: center;
   padding: 8Px;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 8Px);
   font-size: 1.0rem;
   color: var(--wjh-color-text-secondary);
   background-color: var(--wjh-color-primary-light);
@@ -26,9 +27,4 @@
     color: var(--wjh-color-primary-dark);
     line-height: 150%;
   }
-}
-
-.ios {
-  padding-bottom: 2rem;
-}
-
+}

src/pages/lostfound/ContactMe/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import styles from "./index.module.scss";
-import { isNewIPhone } from "@/utils";
 import Taro from "@tarojs/taro";
 
 const emit = defineEmits(["showHelp"]);
@@ -42,7 +41,7 @@ function handleTapHelp() {
 </script>
 
 <template>
-  <view :class="[styles.container, isNewIPhone() ? styles.ios : undefined]">
+  <view :class="styles.container">
     <view :class="styles.arrow" @tap="handleClick" />
     <text @tap="handleClick">
       点击查看相关业务服务组织的联系方式

src/pages/suit/ContactMe/index.module.scss

@@ -3,6 +3,7 @@
 .container {
   text-align: center;
   padding: 8Px;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 8Px);
   font-size: 1.0rem;
   color: var(--wjh-color-text-secondary);
   background-color: var(--wjh-color-primary-light);
@@ -26,9 +27,4 @@
     color: var(--wjh-color-primary-dark);
     line-height: 150%;
   }
-}
-
-.ios {
-  padding-bottom: 2rem;
-}
-
+}

src/pages/suit/ContactMe/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import styles from "./index.module.scss";
-import { isNewIPhone } from "@/utils";
 import Taro from "@tarojs/taro";
 
 const emit = defineEmits(["showHelp"]);
@@ -39,7 +38,7 @@ function handleTapHelp() {
 </script>
 
 <template>
-  <view :class="[styles.container, isNewIPhone() ? styles.ios : undefined]">
+  <view :class="styles.container">
     <view :class="styles.arrow" @tap="handleClick" />
     <text @tap="handleClick">
       点击查看学生事务大厅的联系方式

src/utils/effects.ts

@@ -1,33 +1,6 @@
-import Taro from "@tarojs/taro";
-
-/**
- * 适配苹果手机的大小
- * @returns
- */
-
-export function isNewIPhone(): boolean {
-  const info = Taro.getSystemInfoSync();
-  if (!info.model) return false;
-  const isNewIphone = info.model.match(
-    "(iPhone X|iPhone XS|iPhone 11|iPhone 12|iPhone 13|iPhone 14|iPhone 15)"
-  )?.length;
-  return isNewIphone !== undefined && isNewIphone > 0;
-}
-
-export function scrollViewHeight(top = true, bottom = true) {
-  let topHeight = "0px";
-  let bottomHeight = "0px";
-  if (top) topHeight = isNewIPhone() ? "87px" : "60px";
-  if (bottom) bottomHeight = isNewIPhone() ? "88px" : "64px";
-  return {
-    height: `calc(100vh - ${topHeight} - ${bottomHeight})`
-  };
-}
-
 /**
  * 实验室页面 精弘网络copyright
 */
-
 export function getCopyRight() {
   const currentYear = new Date().getFullYear();
   return `精弘网络@${currentYear}`;

src/utils/index.ts

@@ -1,5 +1,5 @@
 import { cookiesToString, ejectCookies } from "./cookie";
-import { getCopyRight, isNewIPhone, scrollViewHeight } from "./effects";
+import { getCopyRight } from "./effects";
 import { fetch } from "./fetch";
 import { checkBind } from "./checkBind";
 import { checkNotification } from "./checkNotification";
@@ -13,8 +13,6 @@ export {
   FetchResult,
   ejectCookies,
   cookiesToString,
-  isNewIPhone,
-  scrollViewHeight,
   getCopyRight,
   fetch,
   checkBind,