fix bugs of UI

src/views/base/wallet/index.vue

@@ -28,7 +28,7 @@
         ></div>
       </div>
     </div>
-    <div class="px-5 pt-26 pb-2">
+    <div class="px-5 pt-26" :class="isDeposit ? 'pb-2' : 'pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]'">
       <a-form :model="form" class="!mt-5" name="basic" @finish="ok()">
         <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
           <bg_main />
@@ -118,18 +118,8 @@
       <!--      <Slider/>-->
       <Transition mode="out-in" name="fade">
         <template v-if="!isDeposit">
-          <!--        <MySlider v-if="cardItems.length > 0" :items="cardItems" class="mt-[5vh] pb-[25vh] mb-[16vh]"
-                            style="touch-action: none"/>-->
-          <CardSlider
-            v-if="cardItems.length > 0"
-            :items="cardItems"
-            v-model:id="form.card_id"
-            class="card-slider-wrap mt-[2vh] px-3 fixed bottom-10 right-0 left-0"
-            style="touch-action: none"
-            @cardDeleted="getCards"
-          />
           <div
-            v-else-if="!loading && cardItems.length === 0"
+            v-if="!loading && cardItems.length === 0"
             class="h-30 flex items-center justify-center"
           >
             هیچ کارتی یافت نشد
@@ -137,16 +127,29 @@
         </template>
       </Transition>
     </div>
-    <Transition mode="out-in" name="fade">
+
+    <Teleport to="body">
+      <CardSlider
+        v-if="!isDeposit && cardItems.length > 0"
+        v-model:id="form.card_id"
+        :items="cardItems"
+        class="card-slider-wrap wallet-card-slider"
+        @cardDeleted="getCards"
+      />
+    </Teleport>
+
+    <Teleport to="body">
       <div
-        v-if="!isDeposit"
-        class="add-card fixed bottom-0 h-[18vh] bg-[#FBFBFC] w-full shadow-lg rounded-3xl flex justify-center pt-3 z-200"
-        style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 26px 11px"
+        v-if="!isDeposit && !showAddCard"
+        class="add-card app-dock-add-bar"
         @click="showAddCard = true"
       >
         <div>افزودن کارت جدید</div>
         <BasicIcon icon="vuesax-linear:add" />
-        <BasicActionSheet v-model:show="showAddCard" class="!max-h-[95vh]">
+      </div>
+    </Teleport>
+
+    <BasicActionSheet v-model:show="showAddCard" class="!max-h-[95vh]">
           <div class="font-bold text-lg">افزودن کارت</div>
           <div class="mt-4 text-red-600 font-bold">توجه : حتما شماره کارت صاحب حساب نرم افزار وارد شود.</div>
           <div class="pb-20 mt-5">
@@ -200,12 +203,10 @@
                 <a-spin v-if="loading" size="small" />
                 <div v-else>ثبت</div>
               </BasicButton>
-              <BasicButton class="w-full mt-2" @click="showAddCard = false">بازگشت</BasicButton>
+              <BasicButton class="w-full mt-2 mb-8" @click="showAddCard = false">بازگشت</BasicButton>
             </a-form>
           </div>
-        </BasicActionSheet>
-      </div>
-    </Transition>
+    </BasicActionSheet>
     <DialogVant v-model:show="showConfirmCode" :closeOnClickOverlay="true" :timeOut="-1">
       <template v-slot:title>
         <div>
@@ -315,7 +316,6 @@
             پیام به پشتیبانی
           </a>
         </BasicButton>
-
       </div>
       <div v-else class="text-center">
         <div class=" font-bold text-red-600">مشتریان گرامی</div>
@@ -729,10 +729,4 @@ async function handleOnComplete(value: string) {
     margin: 0 auto;
   }
 }
-
-@media screen and (min-width: 426px) {
-  .add-card {
-    position: absolute;
-  }
-}
 </style>