Переглянути джерело

审核弹窗右上角关闭按钮功能制作

cuijunkai 7 місяців тому
батько
коміт
4a7226462a
1 змінених файлів з 17 додано та 0 видалено
  1. 17 0
      src/views/examineDialog.vue

+ 17 - 0
src/views/examineDialog.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="dialog">
     <div class="dialog-header">
+      <button class="close-btn" @click="closePage">×</button>
       <img src="@/assets/可可乐博logo.jpg" alt="logo" class="search-icon" />
       <div class="dialog-title">
         <h1>可可智慧教育平台账号申请</h1>
@@ -77,6 +78,10 @@ methods: {
     alert('提交的联系电话:'+ this.phonenumber); // 处理按钮点击事件
     alert('提交的邮箱:'+ this.remark); // 处理按钮点击事件
   },
+  closePage() {
+      // 在浏览器中直接关闭页面通常会被限制
+      window.history.back();
+  },
 },
 };
 </script>
@@ -191,4 +196,16 @@ body {
   align-items: center;        /* 居中对齐内容(垂直) */
   margin-left: 50px;
 }
+
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 30px;
+  background: none;
+  border: none;
+  color: #a8a8a8;
+  cursor: pointer;
+  transition: color 0.3s;
+}
 </style>