bxztApp/packages/screen/src/views/RiskWarning/Dialog/confirmDialog.vue

<template>
  <div v-if="visible" class="confirm-dialog-overlay" @click="handleOverlayClick">
    <div class="confirm-dialog" @click.stop>
      <!-- 四个角的装饰 -->
      <div class="corner corner-top-left"></div>
      <div class="corner corner-top-right"></div>
      <div class="corner corner-bottom-left"></div>
      <div class="corner corner-bottom-right"></div>
      <!-- 标题栏 -->
      <div class="dialog-header">
        <div class="header-title">{{ title }}</div>
        <div class="close-btn" @click="handleCancel">
          <el-icon><Close /></el-icon>
        </div>
      </div>

      <!-- 提示内容 -->
      <div class="dialog-content">
        <p class="confirm-message">{{ message }}</p>
      </div>

      <!-- 按钮区域 -->
      <div class="dialog-footer">
        <el-button type="primary" class="btn-confirm" @click="handleCancel">
          {{ cancelText }}
        </el-button>
        <el-button type="primary" class="btn-confirm" @click="handleConfirm">
          {{ confirmText }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Close } from '@element-plus/icons-vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '提示',
  },
  message: {
    type: String,
    default: '',
  },
  confirmText: {
    type: String,
    default: '已拨打',
  },
  cancelText: {
    type: String,
    default: '未拨打',
  },
});

const emit = defineEmits(['update:visible', 'confirm', 'cancel']);

// 确认
const handleConfirm = () => {
  emit('confirm');
  emit('update:visible', false);
};

// 取消
const handleCancel = () => {
  emit('cancel');
  emit('update:visible', false);
};

// 点击遮罩关闭
const handleOverlayClick = () => {
  handleCancel();
};
</script>

<style lang="scss" scoped>
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2200;
}

.confirm-dialog {
  width: 80vw;
  max-width: 300px;
  background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
  border: 1px solid rgba(64, 169, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: dialogSlideIn 0.3s ease-out;
  position: relative;

  @media (max-width: 768px) {
    width: 90vw;
    max-width: 90vw;
  }
  // 四个角的装饰
  .corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #40a9ff;
    z-index: 100;
    pointer-events: none;

    &.corner-top-left {
      top: 0;
      left: 0;
      border-right: none;
      border-bottom: none;
    }

    &.corner-top-right {
      top: 0;
      right: 0;
      border-left: none;
      border-bottom: none;
    }

    &.corner-bottom-left {
      bottom: 0;
      left: 0;
      border-right: none;
      border-top: none;
    }

    &.corner-bottom-right {
      bottom: 0;
      right: 0;
      border-left: none;
      border-top: none;
    }
  }
}

@keyframes dialogSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

// 标题栏
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(64, 169, 255, 0.15) 0%, rgba(64, 169, 255, 0.05) 100%);
  border-bottom: 1px solid rgba(64, 169, 255, 0.2);

  .header-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .close-btn {
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 13px;
    transition: color 0.3s;
    flex-shrink: 0;

    &:hover {
      color: #fff;
    }
  }
}

// 内容区域
.dialog-content {
  padding: 24px 20px;
  text-align: center;
  max-height: 40vh;
  overflow-y: auto;

  .confirm-message {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
    word-wrap: break-word;
    word-break: break-all;
  }
}

// 按钮区域
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0 20px 20px;
  flex-wrap: wrap;

  .btn-cancel {
    min-width: 80px;
    height: 26px;
    padding: 0 16px;
    background-color: transparent;
    border: 1px solid rgba(64, 169, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    flex: 1;
    min-flex: 64px;

    &:hover {
      background-color: rgba(64, 169, 255, 0.1);
      border-color: rgba(64, 169, 255, 0.6);
      color: #fff;
    }
  }

  .btn-confirm {
    min-width: 80px;
    height: 26px;
    padding: 0 16px;
    background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
    border: none;
    color: #fff;
    font-size: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    flex: 1;
    min-flex: 64px;

    &:hover {
      background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
    }
  }
}
</style>