审核弹窗制作以及图片

src/views/examineDialog.vue

@@ -1,6 +1,58 @@
 <template>
-  <div class="home">
-    账号审核弹窗
+  <div class="dialog">
+    <div class="dialog-header">
+      <img src="@/assets/可可乐博logo.jpg" alt="logo" class="search-icon" />
+      <div class="dialog-title">
+        <h1>可可智慧教育平台账号申请</h1>
+      </div>
+      <div class="dialog-main">
+        <div class="dialog-content">
+          <div class="dialog-content-item">
+            <div class="dialog-content-item-content1">
+              <span>
+                <img src="@/assets/红色特殊字符.png" alt="字符" class="search-icon2">
+                学校&nbsp;&nbsp;(组织) &nbsp;&nbsp;名称
+              </span>
+            </div>
+            <input v-model="schoolName" type="text" placeholder="请输入学校名称"  class="input"/>
+            
+            <div class="dialog-content-item-content2">
+              <span>
+                <img src="@/assets/红色特殊字符.png" alt="字符" class="search-icon2">
+                姓名
+              </span>
+            </div>
+            <input v-model="Name" type="text" placeholder="请输入名称"  class="input"/>
+          </div>
+
+          <div class="dialog-content-item-content3">
+              <span>
+                <img src="@/assets/红色特殊字符.png" alt="字符" class="search-icon2">
+                联系电话
+              </span>
+            </div>
+            <input v-model="phonenumber" type="text" placeholder="请输入联系电话"  class="input"/>
+
+          <div class="dialog-content-item-content4">
+              <span>
+                <img src="@/assets/红色特殊字符.png" alt="字符" class="search-icon2">
+                其他备注(如联系人或组织)
+              </span>
+            </div>
+            <p style="color: gray; font-size: 15px;margin-left: -45%;margin-top: 10px;">此项用于审核认证，如有请说明。</p>
+            <input v-model="remark" type="text" placeholder="请输入备注"  class="input"/>
+
+
+          <div class="dialog-content-item">
+          </div>
+        </div>
+      </div>
+      <div class="user_p">
+      <p style="color:#535353; font-size:15px; " >请填写以上申请信息,我们将在工作日24小时内回复您,您的信息将被严格</p>
+      <p style="color:#535353; font-size:15px;margin-left: -308px; ">保密,不会被用于其他用途</p>
+    </div>
+      <button @click="submitForm" class="button">确认提交</button>
+    </div>
   </div>
 </template>
 
@@ -9,11 +61,134 @@
 
 export default {
   name: 'HomeView',
-  components: {
-  },
+  components: {},
   data() {
     return {
-    }
+      schoolName: '', // 定义 schoolName 在 data 中
+      Name: '', // 定义 Name 在 data 中
+      phonenumber: '', // 定义 phonenumber 在 data 中
+      remark: '', // 定义 remark 在 data 中
+    };
   },
-}
+methods: {
+  submitForm() {
+    alert('提交的学校名称: ' + this.schoolName); // 处理按钮点击事件
+    alert('提交的姓名:'+ this.Name); // 处理按钮点击事件
+    alert('提交的联系电话:'+ this.phonenumber); // 处理按钮点击事件
+    alert('提交的邮箱:'+ this.remark); // 处理按钮点击事件
+  },
+},
+};
 </script>
+
+<style scoped>
+/* 通过设置body为flex布局来保证居中 */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 弹窗整体大小 */
+.dialog {
+  width: 600px;
+  height: 800px;
+  background-color: #fff;
+  position: fixed;  /* 使用fixed，避免被其他父容器影响 */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 15px 15px 15px 15px;
+}
+
+/* 弹窗内部的一些样式，可以根据需要修改 */
+.dialog-header,
+.dialog-title,
+.dialog-main {
+  padding: 20px;
+}
+
+.search-icon{
+  width: 170px;
+  height: 50px;
+  margin-left: -70%;
+}
+.search-icon2{
+  width: 20px;
+  height: 20px;
+  position: relative;
+  top: 3px; /* 调整位置，向下移动3px */
+}
+
+.dialog-title h1{
+  font-size: 28px;
+}
+
+/* 弹窗内容 */
+.dialog-content-item-content1{
+  font-size: 15px;
+  font-weight: 550;
+  margin-left: -61%;
+}
+.dialog-content-item-content2{
+  font-size: 15px;
+  font-weight: 550;
+  margin-left: -79%;
+  margin-top: 20px;
+}
+.dialog-content-item-content3{
+  font-size: 15px;
+  font-weight: 550;
+  margin-left: -73%;
+  margin-top: 20px;
+}
+.dialog-content-item-content4{
+  font-size: 15px;
+  font-weight: 550;
+  margin-left: -51%;
+  margin-top: 20px;
+}
+
+
+
+/* input输入框样式 */
+.input {
+  width: 89%;
+  padding: 8px;
+  margin-top: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f0f2f5;
+  height: 36px;
+  margin-left: 22px;
+}
+
+/* 用户协议框架 */
+.user_p{
+  width: 500px;
+  height: 50px;
+  /* border: 1px solid black; */
+  margin-left: 40px;
+  margin-top: 10px;
+}
+
+/* 提交按钮样式 */
+.button{
+  width: 460px;
+  height: 60px;
+  background-color: #3681fc;
+  color: white;               /* 设置字体颜色为白色 */
+  border: none;               /* 去掉按钮的边框 */
+  border-radius: 5px;         /* 可选：添加圆角样式，提升外观 */
+  font-size: 16px;            /* 可选：设置字体大小 */
+  cursor: pointer;           /* 设置鼠标悬停时显示为指针 */
+  text-align: center;         /* 确保文本居中对齐 */
+  display: flex;
+  justify-content: center;    /* 居中对齐内容（水平） */
+  align-items: center;        /* 居中对齐内容（垂直） */
+  margin-left: 50px;
+}
+</style>