fix:消息提示样式调整

src/components/CustomErrorMessage.vue

@@ -0,0 +1,112 @@
+<template>
+  <transition name="fade">
+    <div v-if="visible" class="custom-info-message" @click="handleClose">
+      <div class="message-content">
+        <div class="icon-wrapper">
+          <span class="icon-text">X</span>
+        </div>
+        <div class="message-text">{{ message }}</div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "CustomErrorMessage",
+  data() {
+    return {
+      visible: false,
+      message: "",
+      timer: null,
+    };
+  },
+  methods: {
+    show(msg, duration = 3000) {
+      this.message = msg;
+      this.visible = true;
+
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+
+      this.timer = setTimeout(() => {
+        this.hide();
+      }, duration);
+    },
+    hide() {
+      this.visible = false;
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+    },
+    handleClose() {
+      this.hide();
+    },
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  },
+};
+</script>
+
+<style scoped>
+.custom-info-message {
+  position: fixed;
+  top: 20%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3000;
+  cursor: pointer;
+}
+
+.message-content {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 241, 240, 1);
+  border-radius: 8px;
+  padding: 8px 16px;
+  border: 1px solid rgba(255, 204, 199, 1);
+}
+
+.icon-wrapper {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgba(230, 31, 31, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.icon-wrapper .icon-text {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1;
+}
+
+.message-text {
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  flex: 1;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/views/new-employee/StudyPage.vue

@@ -234,6 +234,7 @@
     </el-dialog>
     <!-- 自定义信息提示 -->
     <CustomInfoMessage ref="customMessage" />
+    <CustomErrorMessage ref="errorMessage" />
   </div>
 </template>
 
@@ -252,6 +253,7 @@ import {
   getSzxygProjectInfo,
   enrollRequest,
 } from "@/api/new-employee/newEmployee";
+import CustomErrorMessage from "@/components/CustomErrorMessage.vue";
 import { start } from "nprogress";
 
 export default {
@@ -262,6 +264,7 @@ export default {
     portalFloatTools,
     NewEmployeeGuideDialog,
     CustomInfoMessage,
+    CustomErrorMessage,
   },
   data() {
     return {
@@ -402,16 +405,17 @@ export default {
       }
     },
     async returnEnroll() {
-      // this.$router.push("/new-employee/welcome");
-      const res = await enrollRequest();
-      if (res.data.sendToOaSuccess != 0) {
-        this.$refs.customMessage.show(
-          "报名失败请稍后重试，如果再次失败，请联系：XXXX，联系方式：XXXX。"
-        );
-      } else {
-        this.$refs.customMessage.show("您已重新报名成功");
-        this.approvalResults = 2;
-      }
+      this.$confirm("请确认是否重新报名").then(async () => {
+        const res = await enrollRequest();
+        if (res.data.sendToOaSuccess != 0) {
+          this.$refs.errorMessage.show(
+            "报名失败请稍后重试，如果再次失败，请联系：XXXX，联系方式：XXXX。"
+          );
+        } else {
+          this.$refs.customMessage.show("您已重新报名成功");
+          this.approvalResults = 2;
+        }
+      });
     },
   },
   async mounted() {

src/views/new-employee/WelcomePage.vue

@@ -70,7 +70,7 @@
       @close="handleDialogClose"
     /> -->
     <!-- 自定义信息提示 -->
-    <CustomInfoMessage ref="customMessage" />
+    <CustomErrorMessage ref="customMessage" />
   </div>
 </template>
 
@@ -78,11 +78,11 @@
 import { mapGetters } from "vuex";
 import { getWelcomeData, enrollRequest } from "@/api/new-employee/newEmployee";
 import NewEmployeeGuideDialog from "@/components/NewEmployeeGuideDialog.vue";
-import CustomInfoMessage from "@/components/CustomInfoMessage.vue";
+import CustomErrorMessage from "@/components/CustomErrorMessage.vue";
 
 export default {
   name: "WelcomePage",
-  components: { NewEmployeeGuideDialog, CustomInfoMessage },
+  components: { NewEmployeeGuideDialog, CustomErrorMessage },
   data() {
     return {
       userName: "",