|
@@ -11,12 +11,36 @@
|
|
<div class="dialog-content-item">
|
|
<div class="dialog-content-item">
|
|
<div class="dialog-content-item-content1">
|
|
<div class="dialog-content-item-content1">
|
|
<span>
|
|
<span>
|
|
- <img src="@/assets/红色特殊字符.png" alt="字符" class="search-icon2">
|
|
|
|
- 学校 (组织) 名称
|
|
|
|
|
|
+ <img src="@/assets/红色特殊字符.png" alt="字符" class="search-icon2">组织名称
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 使用 el-select 替代 input -->
|
|
|
|
+ <el-select v-model="orgName" placeholder="请选择组织名称" class="input">
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="(school, index) in orgs"
|
|
|
|
+ :key="index"
|
|
|
|
+ :label="school.name"
|
|
|
|
+ :value="school.id"> <!-- school.id 是学校的唯一标识 -->
|
|
|
|
+ {{ school.name }}
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+
|
|
|
|
+ <div class="dialog-content-item-content1" style="margin-top: 20px;">
|
|
|
|
+ <span>
|
|
|
|
+ <img src="@/assets/红色特殊字符.png" alt="字符" class="search-icon2">学校名称
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
- <input v-model="schoolName" type="text" placeholder="请输入学校名称" class="input"/>
|
|
|
|
-
|
|
|
|
|
|
+ <!-- 使用 el-select 替代 input -->
|
|
|
|
+ <el-select v-model="schoolName" placeholder="请选择学校名称" class="input">
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="(school, index) in schools"
|
|
|
|
+ :key="index"
|
|
|
|
+ :label="school.name"
|
|
|
|
+ :value="school.id"> <!-- school.id 是学校的唯一标识 -->
|
|
|
|
+ {{ school.name }}
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+
|
|
<div class="dialog-content-item-content2">
|
|
<div class="dialog-content-item-content2">
|
|
<span>
|
|
<span>
|
|
<img src="@/assets/红色特殊字符.png" alt="字符" class="search-icon2">
|
|
<img src="@/assets/红色特殊字符.png" alt="字符" class="search-icon2">
|
|
@@ -40,7 +64,7 @@
|
|
其他备注(如联系人或组织)
|
|
其他备注(如联系人或组织)
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
- <p style="color: gray; font-size: 15px;margin-left: -45%;margin-top: 10px;">此项用于审核认证,如有请说明。</p>
|
|
|
|
|
|
+ <p style="color: gray; font-size: 15px;margin-left: -78%;margin-top: 10px;">此项用于审核认证,如有请说明。</p>
|
|
<input v-model="remark" type="text" placeholder="请输入备注" class="input"/>
|
|
<input v-model="remark" type="text" placeholder="请输入备注" class="input"/>
|
|
|
|
|
|
|
|
|
|
@@ -65,11 +89,23 @@ export default {
|
|
components: {},
|
|
components: {},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ orgName: '', // 定义 orgName 在 data 中
|
|
schoolName: '', // 定义 schoolName 在 data 中
|
|
schoolName: '', // 定义 schoolName 在 data 中
|
|
|
|
+ orgs: [ // 示例学校数据
|
|
|
|
+ { id: 1, name: '组织A' },
|
|
|
|
+ { id: 2, name: '组织B' },
|
|
|
|
+ { id: 3, name: '组织C' }
|
|
|
|
+ ],
|
|
|
|
+ schools: [ // 示例学校数据
|
|
|
|
+ { id: 1, name: '学校A' },
|
|
|
|
+ { id: 2, name: '学校B' },
|
|
|
|
+ { id: 3, name: '学校C' }
|
|
|
|
+ ],
|
|
Name: '', // 定义 Name 在 data 中
|
|
Name: '', // 定义 Name 在 data 中
|
|
phonenumber: '', // 定义 phonenumber 在 data 中
|
|
phonenumber: '', // 定义 phonenumber 在 data 中
|
|
remark: '', // 定义 remark 在 data 中
|
|
remark: '', // 定义 remark 在 data 中
|
|
};
|
|
};
|
|
|
|
+
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
submitForm() {
|
|
submitForm() {
|
|
@@ -99,8 +135,8 @@ body {
|
|
|
|
|
|
/* 弹窗整体大小 */
|
|
/* 弹窗整体大小 */
|
|
.dialog {
|
|
.dialog {
|
|
- width: 600px;
|
|
|
|
- height: 800px;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
position: fixed; /* 使用fixed,避免被其他父容器影响 */
|
|
position: fixed; /* 使用fixed,避免被其他父容器影响 */
|
|
top: 50%;
|
|
top: 50%;
|
|
@@ -119,7 +155,8 @@ body {
|
|
.search-icon{
|
|
.search-icon{
|
|
width: 170px;
|
|
width: 170px;
|
|
height: 50px;
|
|
height: 50px;
|
|
- margin-left: -70%;
|
|
|
|
|
|
+ margin-left: -82%;
|
|
|
|
+ margin-top: 30px;
|
|
}
|
|
}
|
|
.search-icon2{
|
|
.search-icon2{
|
|
width: 20px;
|
|
width: 20px;
|
|
@@ -136,24 +173,24 @@ body {
|
|
.dialog-content-item-content1{
|
|
.dialog-content-item-content1{
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
font-weight: 550;
|
|
font-weight: 550;
|
|
- margin-left: -61%;
|
|
|
|
|
|
+ margin-left: -86%;
|
|
}
|
|
}
|
|
.dialog-content-item-content2{
|
|
.dialog-content-item-content2{
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
font-weight: 550;
|
|
font-weight: 550;
|
|
- margin-left: -79%;
|
|
|
|
|
|
+ margin-left: -87%;
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.dialog-content-item-content3{
|
|
.dialog-content-item-content3{
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
font-weight: 550;
|
|
font-weight: 550;
|
|
- margin-left: -73%;
|
|
|
|
|
|
+ margin-left: -85.5%;
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.dialog-content-item-content4{
|
|
.dialog-content-item-content4{
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
font-weight: 550;
|
|
font-weight: 550;
|
|
- margin-left: -51%;
|
|
|
|
|
|
+ margin-left: -80.2%;
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -171,15 +208,18 @@ body {
|
|
margin-left: 22px;
|
|
margin-left: 22px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
|
|
+
|
|
/* 用户协议框架 */
|
|
/* 用户协议框架 */
|
|
.user_p{
|
|
.user_p{
|
|
- width: 500px;
|
|
|
|
|
|
+ /* width: 500px; */
|
|
height: 50px;
|
|
height: 50px;
|
|
/* border: 1px solid black; */
|
|
/* border: 1px solid black; */
|
|
- margin-left: 40px;
|
|
|
|
|
|
+ margin-left: 69px;
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
/* 提交按钮样式 */
|
|
/* 提交按钮样式 */
|
|
.button{
|
|
.button{
|
|
width: 460px;
|
|
width: 460px;
|
|
@@ -191,7 +231,7 @@ body {
|
|
font-size: 16px; /* 可选:设置字体大小 */
|
|
font-size: 16px; /* 可选:设置字体大小 */
|
|
cursor: pointer; /* 设置鼠标悬停时显示为指针 */
|
|
cursor: pointer; /* 设置鼠标悬停时显示为指针 */
|
|
text-align: center; /* 确保文本居中对齐 */
|
|
text-align: center; /* 确保文本居中对齐 */
|
|
- display: flex;
|
|
|
|
|
|
+ /* display: flex; */
|
|
justify-content: center; /* 居中对齐内容(水平) */
|
|
justify-content: center; /* 居中对齐内容(水平) */
|
|
align-items: center; /* 居中对齐内容(垂直) */
|
|
align-items: center; /* 居中对齐内容(垂直) */
|
|
margin-left: 50px;
|
|
margin-left: 50px;
|
|
@@ -208,4 +248,15 @@ body {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
transition: color 0.3s;
|
|
transition: color 0.3s;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+/* 使用 v-deep 深度选择器,修改 el-input 内部 input 的背景色 */
|
|
|
|
+::v-deep .el-input__inner {
|
|
|
|
+ background-color: #f0f2f5 !important; /* 修改输入框的背景色 */
|
|
|
|
+ border: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/* 保持字体颜色不变,防止被覆盖 */
|
|
|
|
+::v-deep .el-select .el-input__inner::placeholder {
|
|
|
|
+ color: gray; /* 修改为你想要的颜色,如番茄色 */
|
|
|
|
+}
|
|
</style>
|
|
</style>
|