![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bdf1dea113ecd589349d8226f1a1e7b2.png)
<!-- 重置密码弹框 -->
<el-dialog :visible.sync="dialogVisible" class="dialog" :show-close="false">
<div class="title">
<span>重置密码</span>
<img src="../../assets/images/close.png" alt="" @click="close" />
</div>
<el-form
:model="resetForm"
:rules="resetFormrules"
ref="resetFormRef"
label-width="100px"
>
<el-form-item label="用户名">
{{ resetForm.username }}
</el-form-item>
<el-form-item label="重置密码" prop="password">
<el-input v-model="resetForm.password"></el-input>
</el-form-item>
<div class="button">
<el-button class="btn" @click="submitForm()">确认</el-button>
</div>
</el-form>
</el-dialog>
.dialog {
/deep/.el-dialog {
width: 480px;
height: 345px;
background: #ffffff;
border-radius: 4px;
margin-top: 27vh !important;
.el-dialog__header {
padding: 0;
}
.el-dialog__body {
padding: 0;
}
.title {
display: flex;
align-items: center;
justify-content: space-between;
height: 67px;
padding: 0 50px 0 50px;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
margin-bottom: 40px;
span {
font-size: 18px;
font-family: MicrosoftYaHei;
color: #333333;
}
img {
width: 12px;
height: 12px;
cursor: pointer;
}
}
}
.button {
display: flex;
justify-content: center;
}
.btn {
width: 112px;
height: 42px;
line-height: 42px;
background: #20aee5;
border-radius: 4px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ffffff;
text-align: center;
padding: 0;
margin-top: 30px;
}
/deep/.el-input__inner {
width: 335px;
}
/deep/.el-form-item__label {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
}