fix bugs of UI of withdraw-page

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)
-  // console.log(pos,index)
-  let debug
+  const dist = Math.abs(props.sliderIndex - pos)
+  const base = `position: absolute; left: 0; right: 0; margin-inline: auto; background-color: ${props.color};`
+
   if (pos === props.sliderIndex) {
-    debug = `width: 100%; z-index: 100; opacity: 1;/* margin-top: -160px;*/ top: 20%; position: absolute; background-color: ${props.color};`
-  } /*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};`
+    return `${base} width: 100%; z-index: 100; opacity: 1; bottom: 0; top: auto;`
   }
-  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"