Improve boursecu UX: banners, support FAB, wallet deposit guide, fund/physical layouts, nav, and sidebar credit.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/fund/index.vue

@@ -17,7 +17,20 @@ useFundPage(isDesktop)
 
 <style scoped>
 .fund-page-root {
-  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
   height: 100%;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.fund-page-root > :deep(.mobile-fund),
+.fund-page-root > :deep(.dfund) {
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+  max-width: 100%;
 }
 </style>

src/views/base/fund/mobile/MobileFundView.vue

@@ -1,81 +1,70 @@
 <template>
-  <div>
-    <div
-      class="bg-white w-full mobile-top-chrome px-3 pb-3 text-primary font-bold drop-shadow fixed md:absolute top-0 flex min-h-12 z-20"
-    >
-      <div @click="goBack()">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">دارایی ها</div>
-    </div>
-    <div
-      class="w-screen md:w-full h-[70vh] fixed md:absolute overflow-hidden text-tertiary bg-primary"
-    >
-      <img
-        :src="fundHeaderBackground"
-        alt=""
-        class="pointer-events-none z-0 w-full absolute bottom-0 left-0 opacity-5"
-      />
-      <div class="mobile-page-body--pt15 flex flex-col relative z-10 text-tertiary">
-        <div class="font-bold mr-5 z-20">موجودی دارایی ها</div>
-        <div
-          v-if="meta?.has_count_based_products"
-          class="flex mt-4 justify-center mt-2 w-full z-20"
-        >
-          محصولات:
-          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
-        </div>
-        <template v-if="meta?.single_metal && primaryMetalTotal">
-          <div class="flex justify-center mt-2 w-full z-20">
-            {{ primaryMetalTotal.label }}:
-            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
-          </div>
-        </template>
-        <template v-else>
+  <div class="mobile-fund">
+    <MobilePageHeader title="دارایی ها" show-back class="mobile-fund__header" />
+
+    <div class="mobile-fund__scroll">
+      <section class="mobile-fund__hero text-tertiary bg-primary">
+        <img
+          :src="fundHeaderBackground"
+          alt=""
+          class="mobile-fund__hero-bg"
+        />
+        <div class="mobile-fund__hero-body">
+          <div class="font-bold">موجودی دارایی ها</div>
+
           <div
-            v-for="metal in metalTotals"
-            :key="`metal-${metal.metal_id}`"
-            class="flex justify-center mt-2 w-full z-20"
+            v-if="meta?.has_count_based_products"
+            class="mobile-fund__stat"
           >
-            {{ metal.label }}:
-            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(metal) }}</div>
+            <span>محصولات:</span>
+            <strong>{{ countBasedInventory }} عدد</strong>
+          </div>
+
+          <template v-if="meta?.single_metal && primaryMetalTotal">
+            <div class="mobile-fund__stat">
+              <span>{{ primaryMetalTotal.label }}:</span>
+              <strong>{{ formatMetalTotal(primaryMetalTotal) }}</strong>
+            </div>
+          </template>
+          <template v-else>
+            <div
+              v-for="metal in metalTotals"
+              :key="`metal-${metal.metal_id}`"
+              class="mobile-fund__stat"
+            >
+              <span>{{ metal.label }}:</span>
+              <strong>{{ formatMetalTotal(metal) }}</strong>
+            </div>
+          </template>
+
+          <div
+            v-if="meta?.has_count_based_products"
+            class="mobile-fund__stat"
+          >
+            <span>مجموع موجودی:</span>
+            <strong>{{ countBasedInventory }} عدد</strong>
+          </div>
+
+          <div class="mobile-fund__stat">
+            <span>دارایی ریالی:</span>
+            <strong>{{ usePriceWithoutType(cashWallet) }}ریال</strong>
+          </div>
+
+          <div class="mobile-fund__stat">
+            <span>معادل ریالی مجموع دارایی ها:</span>
+            <strong>{{ usePriceWithoutType(totalRialValue) }}ریال</strong>
           </div>
-        </template>
-        <div
-          v-if="meta?.has_count_based_products"
-          class="flex justify-center mt-2 w-full z-20"
-        >
-          مجموع موجودی:
-          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
         </div>
-        <div class="flex justify-center mt-2 w-full z-20">
-          دارایی ریالی:
-          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(cashWallet) }}ریال</div>
-        </div>
-        <div class="flex justify-center mt-2 w-full z-20">
-          معادل ریالی مجموع دارایی ها:
-          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(totalRialValue) }}ریال</div>
-        </div>
-      </div>
-    </div>
-    <div class="pt-[20rem]">
-      <div
-        class="bg-gray-100 w-screen md:w-full z-20 relative rounded-t-3xl h-[calc(100vh-20rem-70px)] overflow-y-auto pb-15"
-        style="box-shadow: 0px -2px 4px -2px #0000001a"
-      >
+      </section>
+
+      <section class="mobile-fund__sheet">
         <div
           v-if="inventoryCards.length === 0 && !loading"
-          class="w-full h-full flex justify-center items-center"
+          class="mobile-fund__empty"
         >
-          <div>
-            <img
-              :src="fundEmptyImage"
-              alt=""
-              class="w-70"
-            />
-            <div v-if="nameProject !== 'abaeigold'" class="text-center text-lg">
-              {{ fundEmptyText }}
-            </div>
+          <img :src="fundEmptyImage" alt="" class="w-70" />
+          <div v-if="nameProject !== 'abaeigold'" class="text-center text-lg">
+            {{ fundEmptyText }}
           </div>
         </div>
 
@@ -89,13 +78,13 @@
             />
           </div>
         </a-spin>
-      </div>
+      </section>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'
 import { loading } from '@/utils'
 import { usePriceWithoutType } from '@/utils/usePrice'
 import Item from '../components/Item.vue'
@@ -115,6 +104,109 @@ const {
   fundEmptyText,
   formatMetalTotal,
   openFundInfo,
-  goBack,
 } = useFundPageContext()
 </script>
+
+<style scoped lang="less">
+.mobile-fund {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: @App-primary-color;
+}
+
+.mobile-fund__header {
+  z-index: 30;
+}
+
+.mobile-fund__scroll {
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+}
+
+.mobile-fund__hero {
+  position: relative;
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  /* بک‌گراند از لبه بالا؛ متن زیر هدر ثابت */
+  padding: calc(var(--mpage-header-offset) + 0.5rem) 1rem 3.5rem;
+  box-sizing: border-box;
+}
+
+.mobile-fund__hero-bg {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.05;
+  z-index: 0;
+}
+
+.mobile-fund__hero-body {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  width: 100%;
+  max-width: 100%;
+}
+
+.mobile-fund__stat {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: baseline;
+  gap: 0.35rem 0.75rem;
+  width: 100%;
+  text-align: center;
+  font-size: 0.95rem;
+
+  strong {
+    font-weight: 700;
+  }
+}
+
+.mobile-fund__sheet {
+  position: relative;
+  z-index: 2;
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  min-height: calc(100dvh - var(--app-bottom-chrome-height, 108px) - 14rem);
+  margin-top: -1.75rem;
+  border-radius: 1.5rem 1.5rem 0 0;
+  background: #f3f4f6;
+  box-shadow: 0 -2px 4px -2px #0000001a;
+  box-sizing: border-box;
+  padding-bottom: 1rem;
+}
+
+.mobile-fund__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 16rem;
+  padding: 2rem 1rem;
+}
+</style>