fix bugs of UI of withdraw-page

src/App.vue

@@ -52,6 +52,8 @@
     <van-dialog
         v-model:show="versionDialog"
         class="updateButton"
+        teleport="body"
+        :z-index="5300"
         confirm-button-text="به روزرسانی کنید"
         show-confirm-button
         @confirm="update()"
@@ -171,6 +173,13 @@ function update() {
   --app-nav-height: 80px;
   --app-bottom-chrome-height: calc(var(--app-nav-height) + var(--app-credit-footer-offset));
   --app-add-card-height: 88px;
+  /* بخشی از کارت کیف‌پول زیر نوار «افزودن کارت جدید» دیده می‌شود */
+  --wallet-card-dock-overlap: 52px;
+  --app-z-nav: 5000;
+  --app-z-wallet-dock: 4490;
+  --app-z-wallet-add-bar: 4510;
+  --app-z-action-sheet: 5200;
+  --app-z-dialog: 5300;
 }
 
 .app-credit-footer {

src/components/BasicPacks/BasicActionSheet.vue

@@ -16,7 +16,7 @@
 
 </style>-->
 <template>
-  <VanActionSheet teleport="body">
+  <VanActionSheet teleport="body" :z-index="zIndex">
     <div class="justify-center cursor-pointer flex mt-1" @click="$emit('update:show', false)">
       <span class="rounded-sm w-12 border-t-2 border-t-solid  border-t-gray-500 mt-2"></span>
     </div>
@@ -60,6 +60,8 @@ interface Props {
   showCancel?: boolean
   showOk?: boolean
   okText?: string
+  /** بالاتر از wallet-card-slider (4490) و منوی پایین (5000) */
+  zIndex?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -68,6 +70,7 @@ const props = withDefaults(defineProps<Props>(), {
   showCancel: true,
   showOk: true,
   okText: 'ثبت',
+  zIndex: 5200, // --app-z-action-sheet
 })
 </script>
 

src/components/DialogVant.vue

@@ -1,75 +1,67 @@
 <template>
-  <!--  <div v-if="modelValue">-->
+  <van-dialog
-  <van-dialog class="dialog">
+    v-model:show="show"
+    class="dialog"
+    teleport="body"
+    :z-index="zIndex"
+    v-bind="$attrs"
+  >
     <div class="my-4">
       <div class="w-full flex justify-center">
         <slot name="img">{{ text2 }}</slot>
-
       </div>
       <div class="w-full flex justify-center text-[18px] font-semibold">
         <slot name="title">{{ text1 }}</slot>
       </div>
-      <div class="grid grid-cols-2 border-t border-solid border-[#E5E7EB] pt-4 mx-2 mt-6 font-semibold text-[15px]">
+      <div
+        class="grid grid-cols-2 border-t border-solid border-[#E5E7EB] pt-4 mx-2 mt-6 font-semibold text-[15px]"
+      >
         <slot name="button">{{ text3 }}</slot>
       </div>
     </div>
-
-
-    <!--      <div class="w-full mt-6 text-white ">-->
-    <!--        <div class="w-full flex mb-[10px] ">-->
-
-    <!--          <span class="text-lg flex-1">-->
-
-    <!--        </span>-->
-    <!--        </div>-->
-    <!--        <div class="flex justify-start mb-6  mt-8"  style="font-weight:700;">-->
-    <!--          <slot name="button">{{text2}}</slot>-->
-    <!--        </div>-->
-    <!--      </div>-->
   </van-dialog>
-  <!--  <van-dialog  style="background-color: #2b3f6e" show-cancel-button cancelButtonText="بیخیال"  confirmButtonText="بله"  cancelButtonColor="">-->
-  <!--    <div class="w-full mt-6 text-white ">-->
-  <!--      <div class="w-full flex mb-[10px] ">-->
-  <!--        <Icon icon="vuesax-linear:info-circle" class="mx-4" size="25"/>-->
-  <!--        <span class="text-lg flex-1">-->
-  <!--          <slot name="title">{{text1}}</slot>-->
-  <!--        </span>-->
-  <!--      </div>-->
-  <!--      <div class="flex justify-start mb-6  mt-8"  style="font-weight:700;">-->
-  <!--        <slot name="button">{{text2}}</slot>-->
-  <!--      </div>-->
-  <!--    </div>-->
-  <!--  </van-dialog>-->
-  <!--  </div>-->
 </template>
 
 <script lang="ts" setup>
+import { computed, watch } from 'vue'
 
-// import { Dialog as VanDialog} from "vant";
+defineOptions({ inheritAttrs: false })
-import {ref, watch} from 'vue';
 
-const show = ref(true);
+const props = withDefaults(
-const props = withDefaults(defineProps<{
+  defineProps<{
-  // modelValue: boolean,
+    show?: boolean
-  timeOut: number,
+    timeOut?: number
-  text1?: string,
+    text1?: string
-  text2?: string,
+    text2?: string
-  text3?: string
+    text3?: string
-  // top?: string,
+    zIndex?: number
+  }>(),
+  {
+    show: false,
+    timeOut: 3000,
+    zIndex: 5300,
+  }
+)
 
-}>(), {})
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
+  (e: 'update:show', value: boolean): void
 }>()
-watch(() => props.modelValue, (value) => {
+
-  if (props.timeOut !== -1) showNotify()
+const show = computed({
+  get: () => props.show,
+  set: (value: boolean) => emit('update:show', value),
 })
-const showNotify = () => {
+
-  console.log('notify', show.value)
+watch(
-  setTimeout(() => {
+  () => props.show,
-    emit('update:modelValue', false)
+  (value) => {
-  }, props.timeOut);
+    if (value && props.timeOut !== -1) {
-};
+      setTimeout(() => {
+        emit('update:show', false)
+      }, props.timeOut)
+    }
+  }
+)
 </script>
 
 <style lang="less">
@@ -81,17 +73,13 @@ const showNotify = () => {
   animation: notify-in 0.2s reverse;
 }
 
-.dialog .van-dialog__confirm, .van-dialog__cancel {
+.dialog .van-dialog__confirm,
+.van-dialog__cancel {
   display: none !important;
 }
 
-
-.van-dialog__confirm, .van-dialog__cancel {
-  //background-color: ;
-}
-
 .dialog .van-dialog__confirm .van-button__text {
-  color: #1C2D56;
+  color: #1c2d56;
   font-weight: 600;
   font-size: 15px;
 }

src/views/base/wallet/components/UISlider/CardItem.vue

@@ -89,30 +89,28 @@ const props = defineProps<Prop>()
 const emits = defineEmits(['update:sliderIndex', 'cardDeleted'])
 
 function findPositionStyle(pos: number) {
-  // console.log(localValue.value)
+  const dist = Math.abs(props.sliderIndex - pos)
-  // console.log(pos,index)
+  const base = `position: absolute; left: 0; right: 0; margin-inline: auto; background-color: ${props.color};`
-  let debug
+
   if (pos === props.sliderIndex) {
-    debug = `width: 100%; z-index: 100; opacity: 1;/* margin-top: -160px;*/ top: 20%; position: absolute; background-color: ${props.color};`
+    return `${base} width: 100%; z-index: 100; opacity: 1; bottom: 0; top: auto;`
-  } /*if (pos > index.value)*/ else {
-    // debug = `w-[${100 - Math.abs(index.value-pos) * 2}%] z-${100 - Math.abs(index.value-pos)}`
-    debug = `width: ${100 - Math.abs(props.sliderIndex - pos) * 10}%;
-    z-index: ${100 - Math.abs(props.sliderIndex - pos)};
-    position: absolute;
-    top : ${
-      pos > props.sliderIndex
-        ? checkTopLimit(topDetail(true, pos) as number)
-          ? 100
-          : 20 +
-            Math.abs((props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4)))
-        : checkTopLimit(topDetail(false, pos) as number)
-        ? 0
-        : 20 - Math.abs((props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4)))
-    }%;
-    background-color: ${props.color};`
   }
-  console.log(debug, topDetail(true, pos))
+
-  return debug
+  const width = 100 - dist * 10
+  const zIndex = 100 - dist
+  const step = Math.abs(
+    (props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4))
+  )
+
+  // کارت‌های بالاتر در پشته (index کمتر) کمی بالاتر از کارت فعال دیده می‌شوند
+  const bottom =
+    pos < props.sliderIndex
+      ? `${Math.min(step, 36)}%`
+      : pos > props.sliderIndex
+        ? '0'
+        : '0'
+
+  return `${base} width: ${width}%; z-index: ${zIndex}; opacity: 1; bottom: ${bottom}; top: auto;`
 }
 
 async function confirmDeleteCard() {
@@ -164,33 +162,6 @@ function findPositionStyle(pos: number) {
  * /!*checkTopLimit(topDetail(false, pos) as number) ? 0 :*!/ topDetail(false, pos)
  */
 
-function topDetail(isAfterIndex: boolean, pos: number) {
-  /*  console.log((20 - Math.abs((props.sliderIndex - pos) * (24 - (Math.abs((props.sliderIndex - pos) * 4))))), pos)
-  console.log(Math.abs((props.sliderIndex - pos)) * (24 - (Math.abs((props.sliderIndex - pos) * 4))))*/
-  console.log(
-    20 - Math.abs((props.sliderIndex - pos) * (24 - Math.abs((props.sliderIndex - pos) * 4)))
-  )
-  /*  if (isAfterIndex) console.log(20 + Math.abs(props.sliderIndex - pos))
-  else console.log(20 - Math.abs(props.sliderIndex - pos))*/
-  if (isAfterIndex)
-    return 20 + Math.abs((props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4)))
-  else
-    return 20 - Math.abs((props.sliderIndex - pos) * (18 - Math.abs((props.sliderIndex - pos) * 4)))
-}
-
-/*
-function topDetail(isAfterIndex: boolean, pos: number) {
-  console.log(pos, isAfterIndex, (20 + Math.abs((props.sliderIndex - pos) * (24 - (Math.abs((props.sliderIndex - pos) * 4))))))
-  if (isAfterIndex) return (20 + Math.abs((props.sliderIndex - pos) * (24 - (Math.abs((props.sliderIndex - pos) * 4)))))
-  else return (20 - Math.abs((props.sliderIndex - pos) * (24 - (Math.abs((props.sliderIndex - pos) * 4))))) < 0 //12*64
-}
-*/
-
-function checkTopLimit(val: number) {
-  return val > 100 || val < 0
-}
-
-
 </script>
 
 <style lang="sass" scoped>

src/views/base/wallet/components/UISlider/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div ref="container" class=" h-[38vh] flex items-center">
+  <div ref="container" class="h-[28vh] flex items-end">
     <div ref="el" class="w-full flex flex-col relative h-full test">
       <CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index" :card-number="item?.cart_number"
                 :color="colors[i%3]"
                 :self-index="i" :shaba="item?.shaba_number" :title="item?.bank_name" :active="item.sts === 2" :id="item?.id"
                 @cardDeleted="handleCardDeleted"
       />
-      <div class="absolute bottom-15vh right-0 left-0 z-100 flex justify-center items-center opacity-70">
+      <div class="absolute bottom-1 right-0 left-0 z-100 flex justify-center items-center opacity-70 pointer-events-none">
         <div class="flex gap-1 bg-gray-500 px-2 py-1 rounded-lg">
           <Transition name="slide-up" mode="out-in" v-for="i in items.length" :key="i">
             <div v-if="i - 1  === index" class="w-2 h-2 rounded-full bg-primary"/>

src/views/base/wallet/index.vue

@@ -130,7 +130,7 @@
 
     <Teleport to="body">
       <CardSlider
-        v-if="!isDeposit && cardItems.length > 0"
+        v-if="!isDeposit && cardItems.length > 0 && !showAddCard"
         v-model:id="form.card_id"
         :items="cardItems"
         class="card-slider-wrap wallet-card-slider"

uno.config.ts

@@ -8,9 +8,9 @@ export default defineConfig({
     shortcuts: [
         ['wallet-dock-width', 'fixed inset-x-0 w-full max-w-[426px] mx-auto left-0 right-0'],
         /* z-index زیر منو (5000)؛ fixed تا با اسکرول جابه‌جا نشود */
-        ['app-dock-add-bar', 'wallet-dock-width !fixed bottom-[var(--app-bottom-chrome-height)] z-[4500] h-[var(--app-add-card-height)] flex items-center justify-center gap-1 rounded-t-3xl bg-[#FBFBFC] shadow-[0_1px_26px_11px_rgba(0,0,0,0.1)] cursor-pointer'],
+        ['app-dock-add-bar', 'wallet-dock-width !fixed bottom-[var(--app-bottom-chrome-height)] z-[var(--app-z-wallet-add-bar)] h-[var(--app-add-card-height)] flex items-center justify-center gap-1 rounded-t-3xl bg-[#FBFBFC] shadow-[0_1px_26px_11px_rgba(0,0,0,0.1)] cursor-pointer'],
         ['wallet-add-card-bar', 'app-dock-add-bar'],
-        ['wallet-card-slider', 'wallet-dock-width !fixed bottom-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height))] z-[4500] px-3 touch-none'],
+        ['wallet-card-slider', 'wallet-dock-width !fixed bottom-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)-var(--wallet-card-dock-overlap))] z-[var(--app-z-wallet-dock)] px-3 touch-none flex flex-col justify-end overflow-visible'],
     ],
     theme: {
         colors: {