u

code/email/Email-Vue/src/components/email-pull-modal.vue

@@ -0,0 +1,119 @@
+<template>
+  <div v-if="visible" class="init-overlay">
+    <div class="init-modal">
+      <div class="init-title">{{ title }}</div>
+      <div class="init-message">{{ content }}</div>
+      <div class="progress-container">
+        <a-progress :percent="percent" size="large" :status="status" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import type { PropType } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  content: {
+    type: String,
+    required: true
+  },
+  status: {
+    type: String as PropType<"normal" | "success" | "warning" | "danger">,
+    default: "normal"
+  },
+  percent: {
+    type: Number,
+    required: true
+  },
+  visible: {
+    type: Boolean,
+    required: true
+  }
+});
+
+watch(
+  () => props.visible,
+  (newVal) => {
+    if (!newVal) {
+      // 当模态框关闭时，重置百分比或执行其他操作
+      console.log("模态框关闭");
+    }
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.init-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9;
+  animation: fadeIn 0.5s ease-in-out; /* 添加渐现动画 */
+}
+
+.init-modal {
+  background-color: white;
+  padding: 30px 40px;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  width: 600px;
+  max-width: 90%;
+  text-align: center;
+  animation: scaleUp 0.5s ease-in-out; /* 添加缩放动画 */
+}
+
+/* 渐现动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 缩放动画 */
+@keyframes scaleUp {
+  from {
+    transform: scale(0.8);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+.init-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.init-message {
+  font-size: 16px;
+  color: #666;
+  margin-bottom: 14px;
+  min-height: 24px;
+  word-break: break-all;
+}
+
+.progress-container {
+  width: 100%;
+}
+
+.init-status {
+  font-size: 14px;
+  color: #888;
+}
+</style>