pblUserManage/src/views/examineDialog.vue

<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>
      </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>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  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); // 处理按钮点击事件
  },
  closePage() {
      // 在浏览器中直接关闭页面通常会被限制
      window.history.back();
  },
},
};
</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;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  background: none;
  border: none;
  color: #a8a8a8;
  cursor: pointer;
  transition: color 0.3s;
}
</style>