fix bugs of UI of withdraw-page

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 class="dialog">
+  <van-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";
-import {ref, watch} from 'vue';
+defineOptions({ inheritAttrs: false })
 
-const show = ref(true);
-const props = withDefaults(defineProps<{
-  // modelValue: boolean,
-  timeOut: number,
-  text1?: string,
-  text2?: string,
-  text3?: string
-  // top?: string,
+const props = withDefaults(
+  defineProps<{
+    show?: boolean
+    timeOut?: number
+    text1?: string
+    text2?: string
+    text3?: 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)
-  setTimeout(() => {
-    emit('update:modelValue', false)
-  }, props.timeOut);
-};
+
+watch(
+  () => props.show,
+  (value) => {
+    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;
 }