From 72a5c6e7cc7952e0da2b34f573fcee23a5669937 Mon Sep 17 00:00:00 2001
From: K <704496037@qq.com>
Date: Wed, 31 Jan 2024 10:36:31 +0800
Subject: [PATCH] Optimized style

---
 package.json              |  2 +-
 src/components/NavBar.vue | 62 ++++++++++++++++++++++++++++-----------
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index c149931b1..9c878d36c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.122",
+  "version": "2.14.124",
   "private": true,
   "scripts": {
     "dev": "vite --host",
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 58fcb5160..615d1b6a8 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -96,30 +96,58 @@ const globalStore = useGlobalStore();
 const showLangSwitchPopup = ref(false);
 const langList = ["zh", "en"];
 const { isSimpleMode, showFloatingRefreshButton } = storeToRefs(globalStore);
-const navBarHeight = ref("56px");
-const navBartop = ref("0px");
-const navBartopRight = ref("15px");
-const Pwa_top = ref("60px");
+
 const isPWA = ref(
   (window.matchMedia("(display-mode: standalone)").matches &&
     !/Android/.test(navigator.userAgent)) ||
     false
 );
 
-// 736 <8p
-if (isPWA.value) {
-  if (window.innerHeight < 750 || /iPad/.test(navigator.userAgent)) {
-    navBarHeight.value = "78px";
-    navBartop.value = "25px";
-    navBartopRight.value = "38px";
-    Pwa_top.value = "20px"
-  } else {
-    navBarHeight.value = "110px";
-    navBartop.value = "58px";
-    navBartopRight.value = "70px";
-    Pwa_top.value = "60px"
+const isSmall = ref(
+  window.innerHeight < 750 || /iPad/.test(navigator.userAgent) || false
+);
+// isPWA.value = true;
+
+const navBarHeight = computed(() => {
+  if (isPWA.value) {
+    if (isSmall.value) {
+      return "78px";
+    }
+    return "110px";
   }
-}
+  return "56px";
+});
+
+const navBartop = computed(() => {
+  if (isPWA.value) {
+    if (isSmall.value) {
+      return "38px";
+    }
+    return "70px";
+  }
+  return "0px";
+});
+
+const navBartopRight = computed(() => {
+  if (isPWA.value) {
+    if (isSmall.value) {
+      return "25px";
+    }
+    return "58px";
+  }
+  return "15px";
+});
+
+
+const Pwa_top = computed(() => {
+  if (isPWA.value) {
+    if (isSmall.value) {
+      return "20px";
+    }
+    return "60px";
+  }
+  return "60px";
+});
 
 const isNeedBack = computed(() => {
   return route.meta.needNavBack ?? false;