YY_MP_REFACTOR/src/components/BaseAuthDialog/index.vue

<template>
  <view v-if="modelValue" class="base-auth-dialog">
    <view class="base-auth-dialog__mask" @touchmove.stop.prevent />
    <view class="base-auth-dialog__panel">
      <view class="base-auth-dialog__title">
        {{ title }}
      </view>

      <view class="base-auth-dialog__content">
        <slot />
      </view>

      <button class="base-auth-dialog__confirm" @click="handleConfirm">
        {{ confirmText }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
const modelValue = defineModel<boolean>({ default: false })

withDefaults(
  defineProps<{
    title?: string
    confirmText?: string
  }>(),
  {
    title: '提示',
    confirmText: '确定',
  }
)

const emit = defineEmits<{
  confirm: []
}>()

const handleConfirm = () => {
  modelValue.value = false
  emit('confirm')
}
</script>

<style lang="scss" scoped>
.base-auth-dialog {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.base-auth-dialog__mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.base-auth-dialog__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 610rpx;
  overflow: hidden;
  border-radius: 28rpx;
  background: #ffffff;
  transform: translate(-50%, -50%);
  box-shadow: 0 28rpx 80rpx rgba(15, 23, 42, 0.18);
}

.base-auth-dialog__title {
  padding: 32rpx 36rpx 24rpx;
  color: #111827;
  font-size: 34rpx;
  font-weight: 700;
  line-height: 48rpx;
  text-align: center;
}

.base-auth-dialog__content {
  min-height: 300rpx;
  padding: 20rpx 36rpx 40rpx;
  box-sizing: border-box;
  color: #4b5563;
  font-size: 29rpx;
  line-height: 46rpx;
}

.base-auth-dialog__confirm {
  height: 92rpx;
  margin: 0;
  border-radius: 0;
  background: #1677ff;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 92rpx;
}

.base-auth-dialog__confirm::after {
  border: none;
}

.base-auth-dialog__confirm:active {
  opacity: 0.9;
}
</style>