Browse Source

fix:修复签到、转盘、钱包、bug

st 3 months ago
parent
commit
383ff78a12
2 changed files with 32 additions and 25 deletions
  1. 31 24
      src/components/common/Dialog/index.vue
  2. 1 1
      src/pages/index/index.vue

+ 31 - 24
src/components/common/Dialog/index.vue

@@ -1,21 +1,24 @@
 <template>
   <Transition name="fade" @after-leave="onTransitionComplete">
-    <view v-show="show" class="popup-overlay" @click="closeOnOverlayClick && close()">
+    <view v-show="showValue" class="popup-overlay" @click="closeOnOverlayClick && close()">
       <Transition name="pop">
-        <view v-show="show" class="popup-content" :class="positionClass" @click.stop>
+        <view
+          v-show="showValue"
+          class="popup-content"
+          :class="positionClass"
+          :style="{ width, height }"
+          @click.stop
+        >
           <view v-if="closable" class="popup-close" @click="close">×</view>
-          <view
-            class="bg-[#27272A] flex flex-col items-center"
-            :style="{ width: width, height: height }"
-          >
-            <view class="dialog-box-content overflow-y-scroll w-full">
+          <view class="bg-[#27272A] flex flex-col items-center h-full">
+            <view class="dialog-box-content overflow-y-scroll w-full flex-grow">
               <slot></slot>
             </view>
             <slot name="footer">
-              <view class="dialog-box-footer absolute bottom-70rpx">
+              <view class="dialog-box-footer">
                 <view
                   @click="onConfirm"
-                  class="w-630rpx h-100rpx rounded-20rpx button-bg flex items-center justify-center text-white"
+                  class="w-[90%] h-100rpx rounded-20rpx button-bg flex items-center justify-center text-white mx-auto mb-70rpx"
                 >
                   {{ $t('production.team.joinBtn') }}
                 </view>
@@ -29,6 +32,8 @@
 </template>
 
 <script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
 const props = defineProps({
   showValue: {
     type: Boolean,
@@ -57,8 +62,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['update:showValue', 'onConfirm'])
-
-const show = ref(props.showValue)
+const showValue = useVModel(props, 'showValue', emit)
 
 const positionClass = computed(() => {
   switch (props.position) {
@@ -76,23 +80,16 @@ const positionClass = computed(() => {
 })
 
 const close = () => {
-  show.value = false
+  showValue.value = false
 }
 
 const onTransitionComplete = () => {
-  emit('update:showValue', show.value)
+  emit('update:showValue', showValue.value)
 }
 
 const onConfirm = () => {
   emit('onConfirm')
 }
-
-watch(
-  () => props.showValue,
-  (newValue) => {
-    show.value = newValue
-  },
-)
 </script>
 
 <style scoped>
@@ -113,6 +110,7 @@ watch(
   background-color: #27272a;
   border-radius: 30rpx;
   position: relative;
+  overflow: hidden;
 }
 
 .popup-close {
@@ -122,6 +120,15 @@ watch(
   font-size: 40rpx;
   color: white;
   cursor: pointer;
+  z-index: 1;
+}
+
+.dialog-box-content {
+  height: calc(100% - 170rpx); /* 减去底部按钮的高度和边距 */
+}
+
+.dialog-box-footer {
+  width: 100%;
 }
 
 .popup-center {
@@ -131,15 +138,15 @@ watch(
 .popup-top {
   position: absolute;
   top: 0;
-  left: 0;
-  right: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .popup-bottom {
   position: absolute;
   bottom: 0;
-  left: 0;
-  right: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .popup-left {

+ 1 - 1
src/pages/index/index.vue

@@ -11,7 +11,7 @@
   <view>
     <view id="lottieContainer" class="box"></view>
     <button @click="show = !show">Solana Wallet</button>
-    <Dialog :showValue="show"></Dialog>
+    <Dialog v-model:show-value="show" position="top" width="100%"></Dialog>
   </view>
 </template>
 <script setup lang="ts">