Phone-APP/components/customModal.vue

<!-- 
这里是自定义展示框组件，自定义标题、内容、两个按钮
 张志宏 调整删除提示框，使用自定义组件
24.9.6

 
 -->
<template>
  <view class="modal-container" v-if="visible">
    <!-- 遮盖罩 -->
    <view class="modal-overlay" @click="close"></view>
    <!-- 提示栏内容 -->
    <view class="modal-content">
      <view class="modal-title">{{ title }}</view>
      <view class="modal-body">{{ content }}</view>
      <view class="modal-buttons">
        <button @click="onCancel" class="cancel-btn">{{ cancelText }}</button>
        <button @click="onConfirm" class="confirm-btn">{{ confirmText }}</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String,
    content: String,
    confirmText: String,
    cancelText: String
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    },
    onConfirm() {
      this.$emit('confirm');
      this.close();
    },
    onCancel() {
      this.$emit('cancel');
      this.close();
    }
  }
};
</script>

<style scoped>
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: 40px;
}
/* 遮盖罩样式 */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999; /* 确保遮罩在内容下层 */
}

.modal-content {
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  max-width: 90%;
  background: #ffffff;
  z-index: 1000; /* 确保遮罩在内容上层 */
}

.modal-title {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.modal-body {
  font-size: 30px;
  margin-bottom: 20px;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
}

.confirm-btn, .cancel-btn {
  flex: 1;
  padding: 2px;
  margin: 8px;
  background: transparent; /* 背景透明 */
  font-size: 36px;
  border: 2px solid #dbdada;
}

.confirm-btn {
  border-radius: 20px;
  color: #eb9d9a;
  
}

.cancel-btn {
  border-radius: 20px;
  color: #9ee493;
}
</style>