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

Deprecate `isNewIPhone` function and related.
zjutjh · Oct 13, 2024 · 02f3c99 · 02f3c99
1 parent 901bd0d
commit 02f3c99
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 60 deletions.
diff --git a/src/components/BottomPanel/index.scss b/src/components/BottomPanel/index.scss
@@ -14,8 +14,5 @@
   border-top-left-radius: 1rem;
   z-index: 3000;
   background: var(--wjh-color-background-frame);
-}
-
-.bottom-bar-ios {
-  padding-bottom: 2rem;
-}
+  padding-bottom: env(safe-area-inset-bottom);
+}
diff --git a/src/components/BottomPanel/index.vue b/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>
diff --git a/src/components/PopView/index.vue b/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";
 

diff --git a/src/pages/lostfound/ContactMe/index.module.scss b/src/pages/lostfound/ContactMe/index.module.scss
@@ -11,6 +11,7 @@
   gap: 8Px;
   align-items: center;
   z-index: 1000;
+  padding-bottom: env(safe-area-inset-bottom);
   @include shadow;
 
   .arrow {
@@ -26,9 +27,4 @@
     color: var(--wjh-color-primary-dark);
     line-height: 150%;
   }
-}
-
-.ios {
-  padding-bottom: 2rem;
-}
-
+}
diff --git a/src/pages/lostfound/ContactMe/index.vue b/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">
       点击查看相关业务服务组织的联系方式

diff --git a/src/pages/suit/ContactMe/index.module.scss b/src/pages/suit/ContactMe/index.module.scss
@@ -11,6 +11,7 @@
   gap: 8Px;
   align-items: center;
   z-index: 1000;
+  padding-bottom: env(safe-area-inset-bottom);
   @include shadow;
 
   .arrow {
@@ -26,9 +27,4 @@
     color: var(--wjh-color-primary-dark);
     line-height: 150%;
   }
-}
-
-.ios {
-  padding-bottom: 2rem;
-}
-
+}
diff --git a/src/pages/suit/ContactMe/index.vue b/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">
       点击查看学生事务大厅的联系方式

diff --git a/src/utils/effects.ts b/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}`;

diff --git a/src/utils/index.ts b/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,