(css) Настройка всплывающей страницы входа в систему
Эффект:
код:
<!-- 登录弹窗 -->
<el-dialog
:visible.sync="dialogVisible"
title="用户登录"
width="25%"
center
class="custom-dialog"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
label-width="60px"
hide-required-asterisk="true"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" type="password"></el-input>
</el-form-item>
</el-form>
<div class="loginBtn">
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="login">登 录</el-button>
</span>
</div>
</el-dialog>
js:
data() {
return {
// 登录
dialogVisible: true,
loginForm: {
username: "",
password: "",
},
loginRules: {
username: [
{
required: true, message: "请输入用户名", trigger: "blur" },
],
password: [{
required: true, message: "请输入密码", trigger: "blur" }],
},
}
}
css
// 登录对话框
/deep/ .el-dialog {
background: transparent;
background-image: url("../assets/image/file-upload-background.png");
background-size: 100% 100%;
}
/deep/ .el-dialog__title {
color: #fff;
}
/deep/ .el-form-item__label {
color: #fff;
}
/deep/ .el-input__inner {
color: #fff;
border: none;
background-color: rgba(31, 159, 191, 0.6);
// background-color: rgba(64, 158, 255, 0.8);
}
.loginBtn {
width: 70px;
height: 40px;
background-image: url("../assets/image/file-button-main-1.png");
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}