1405/04/10-fix bug iphone show

src/views/base/address/mobile/MobileAddressView.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <MobilePageHeader title="آدرس ها" show-back />
-    <div>
-      <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
+  <div class="relative">
+    <div class="mobile-page-bg" aria-hidden="true">
+      <img :src="img" alt="" />
     </div>
+    <MobilePageHeader title="آدرس ها" show-back />
 
     <div
       :class="loading ? 'h-screen' : ''"
-      class="px-3 mpage-content pb-2 overflow-y-scroll mpage-scroll"
+      class="relative z-1 px-3 mpage-content pb-2 overflow-y-scroll mpage-scroll"
     >
       <div
         v-if="isBazretalaProject()"

src/views/base/home/components/AppHeader.vue

@@ -40,7 +40,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onActivated, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { useUserStore } from '@/store/userStore'
 import router from '@/router'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
@@ -48,6 +49,7 @@ import { getProjectMobileNavLogo, isBoursecuProject } from '@/utils/config'
 
 const headerRef = ref<HTMLElement | null>(null)
 const isHeaderScrolled = ref(false)
+const route = useRoute()
 
 const userStore = useUserStore()
 const projectLogo = computed(() => getProjectMobileNavLogo())
@@ -158,6 +160,21 @@ onMounted(async () => {
   requestAnimationFrame(() => setupScrollTracking())
 })
 
+onActivated(() => {
+  isHeaderScrolled.value = false
+  setupScrollTracking()
+})
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (route.name === 'home') {
+      isHeaderScrolled.value = false
+      nextTick(() => setupScrollTracking())
+    }
+  },
+)
+
 onUnmounted(() => {
   teardownScrollTracking()
 })

src/views/base/home/index.vue

@@ -25,6 +25,8 @@ import BalanceSheet from './components/BalanceSheet.vue'
 import ShareModal from './components/ShareModal.vue'
 import HomePageShell from './shell/HomePageShell.vue'
 import { useHomePage } from './composables/useHomePage'
+import { onMounted } from 'vue'
+import { recoverMobileViewportAfterAuth } from '@/layouts/composables/useMobileScrollReset'
 
 const {
   userStore,
@@ -37,6 +39,10 @@ const {
   goldVal,
   logout,
 } = useHomePage()
+
+onMounted(() => {
+  recoverMobileViewportAfterAuth()
+})
 </script>
 
 <style scoped>

src/views/base/products/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="products-page-root">
+  <div class="products-page-root main-with-bottom-chrome-inner--contained">
     <ResponsiveViewPair>
       <template #mobile>
         <MobileProductsView />
@@ -104,16 +104,9 @@ const {
 
 <style scoped>
 .products-page-root {
-  min-height: 100%;
   height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-}
-</style>
-
-<style lang="less">
-.products-page-root.main-with-bottom-chrome-inner {
-  overflow: hidden;
 }
 </style>

src/views/base/products/mobile/MobileProductsView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="products-mobile-root">
-    <div class="products-mobile-root__bg" aria-hidden="true">
+    <div class="mobile-page-bg" aria-hidden="true">
       <img :src="img" alt="" />
     </div>
     <MobilePageHeader title="خرید و فروش" />
@@ -86,20 +86,6 @@ const storeClosedMessage = computed(() => getStoreClosedMessage())
   overflow: hidden;
 }
 
-.products-mobile-root__bg {
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  z-index: 0;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
 .products-mobile-root__chrome {
   position: relative;
   z-index: 1;

src/views/base/transactions/DefaultTransactionsPage.vue

@@ -1,6 +1,10 @@
 <template>
-  <div>
-    <div class="absolute inset-0 bg-cover bg-center opacity-60 pointer-events-none"></div>
+  <div class="relative">
+    <div
+      class="mobile-page-bg mobile-page-bg--cover opacity-60"
+      aria-hidden="true"
+      :style="{ backgroundImage: `url(${img})` }"
+    ></div>
     <MobilePageHeader title="تراکنش ها">
       <template #trailing>
         <BasicIcon icon="vuesax-linear:filter" @click="showFilter = true" />
@@ -8,7 +12,7 @@
     </MobilePageHeader>
 
 <!--    <div ref="el" :class="loading ? 'h-screen' : ''" class="px-3 mpage-content pb-10">-->
-    <div ref="el" class="transactions-page-body px-3 pt-16 pb-24">
+    <div ref="el" class="transactions-page-body relative z-1 px-3 mpage-content pb-24">
       <list-anim v-if="!loading">
         <Item v-for="item in items" :key="item.id" :item="item" />
         <div :ref="bindMobileObserver" v-show="!loading" class="w-full opacity-0 relative">
@@ -52,6 +56,7 @@ import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDateP
 import ListAnim from '@/components/ListAnim.vue'
 import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
 import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+import img from '@/assets/img/user_ly1.svg'
 import { useTransactionsPageContext } from './composables/useTransactionsPage'
 
 const el = ref<HTMLElement | null>(null)

src/views/base/user/mobile/MobileUserView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mobile-user-view">
-    <div class="mobile-user-view__bg" aria-hidden="true">
+    <div class="mobile-page-bg" aria-hidden="true">
       <img :src="img" alt="" />
     </div>
     <MobilePageHeader title="اطلاعات حساب کاربری" show-back />
@@ -114,20 +114,6 @@ const {
   overflow: hidden;
 }
 
-.mobile-user-view__bg {
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  z-index: 0;
-
-  img {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-  }
-}
-
 .mobile-user-view__scroll {
   position: relative;
   z-index: 1;

src/views/base/wallet/mobile/MobileWalletView.vue

@@ -1,6 +1,10 @@
 <template>
-  <div>
-    <div class="absolute inset-0 bg-cover bg-center opacity-60" :style="{ backgroundImage: `url(${img})` }"></div>
+  <div class="relative">
+    <div
+      class="mobile-page-bg mobile-page-bg--cover opacity-60"
+      aria-hidden="true"
+      :style="{ backgroundImage: `url(${img})` }"
+    ></div>
     <MobilePageHeader title="کیف پول" />
     <div class="mpage-subheader wrap-fix flex justify-evenly">
       <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded">