|
@@ -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 {
|