|
|
@@ -34,12 +34,54 @@
|
|
|
</div> -->
|
|
|
<div class="remeber">
|
|
|
<el-checkbox v-model="ememberMe" disabled>记住密码</el-checkbox>
|
|
|
+ <!-- <p @click="drawerDia = true">账号注册</p> -->
|
|
|
</div>
|
|
|
<el-button class="loginBtn" :loading="loading" @click.prevent="handleLogin">
|
|
|
<span v-if="!loading">登 录</span>
|
|
|
<span v-else>登 录 中...</span>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
+ <!-- <el-drawer v-model="drawerDia" title="账号注册" class="registerdrawer" :direction="direction"
|
|
|
+ :before-close="handleClose">
|
|
|
+ <div class="register">
|
|
|
+ <el-form :model="drawerform" label-width="80px" :rules="rules" size="default" style="max-width: 500px">
|
|
|
+ <el-form-item label="用户名" prop="username">
|
|
|
+ <el-input v-model="drawerform.username" placeholder="请输入用户名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码" prop="password">
|
|
|
+ <el-input v-model="drawerform.password" placeholder="请输入密码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="姓名" prop="name">
|
|
|
+ <el-input v-model="drawerform.name" placeholder="请输入姓名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="性别">
|
|
|
+ <el-radio-group v-model="drawerform.gender">
|
|
|
+ <el-radio value="1">男</el-radio>
|
|
|
+ <el-radio value="2">女</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门" prop="deptname">
|
|
|
+ <el-select v-model="drawerform.deptname" placeholder="请选择部门">
|
|
|
+ <el-option label="部门1" value="shanghai" />
|
|
|
+ <el-option label="部门2" value="beijing" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="职位" prop="job">
|
|
|
+ <el-select v-model="drawerform.job" placeholder="请选择职位">
|
|
|
+ <el-option label="主任" value="shanghai" />
|
|
|
+ <el-option label="员工" value="beijing" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button class="registerBtn" :loading="regisloading" @click.prevent="handleLogin">
|
|
|
+ <span v-if="!regisloading">注 册</span>
|
|
|
+ <span v-else>注 册 中...</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button class="ResetBtn" @click="drawerDia = false">已有账号?去登录</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-drawer> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -68,7 +110,65 @@
|
|
|
codeUrl: '',
|
|
|
ememberMe: true,
|
|
|
loading: false,
|
|
|
- loginText: ''
|
|
|
+ loginText: '',
|
|
|
+ drawerDia: false,
|
|
|
+ regisloading: false,
|
|
|
+ drawerform: {
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ name: '',
|
|
|
+ gender: '1',
|
|
|
+ job: '',
|
|
|
+ deptname: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ username: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入用户名',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 3,
|
|
|
+ max: 15,
|
|
|
+ message: '长度为3-15位',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ password: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入密码',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 3,
|
|
|
+ max: 15,
|
|
|
+ message: '长度为3-15位',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ name: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入姓名',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 2,
|
|
|
+ max: 6,
|
|
|
+ message: '长度为2-6位',
|
|
|
+ trigger: 'blur'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ job: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择职位',
|
|
|
+ trigger: 'change',
|
|
|
+ }, ],
|
|
|
+ deptname: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择部门',
|
|
|
+ trigger: 'change',
|
|
|
+ }, ],
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -331,7 +431,9 @@
|
|
|
}
|
|
|
|
|
|
.remeber {
|
|
|
- margin: 10px 0 0 30px;
|
|
|
+ margin: 0 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
.el-checkbox {
|
|
|
.el-checkbox__label {
|
|
|
@@ -340,6 +442,16 @@
|
|
|
padding-left: 6px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ p {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ padding-right: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ position: relative;
|
|
|
+ top: 3px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.loginBtn {
|
|
|
@@ -381,5 +493,117 @@
|
|
|
font-size: 12px;
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
+
|
|
|
+ .el-overlay {
|
|
|
+ .registerdrawer {
|
|
|
+ .register {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .el-form {
|
|
|
+ .el-form-item--default {
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__wrapper {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input .el-input__wrapper .el-input__inner {
|
|
|
+ color: #5c5c5c !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-radio-group .el-radio .el-radio__label {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select .el-select__wrapper {
|
|
|
+ background: transparent !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select .el-select__wrapper .el-select__placeholder {
|
|
|
+ color: #ababab !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .registerBtn {
|
|
|
+ width: 500px;
|
|
|
+ height: 34px;
|
|
|
+ background-image: linear-gradient(to right, #5a91f6, #6656ff);
|
|
|
+ border: none;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ResetBtn {
|
|
|
+ width: 500px;
|
|
|
+ height: 34px;
|
|
|
+ margin: 15px 0 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ // .el-overlay {
|
|
|
+ // .registerdrawer {
|
|
|
+ // .register {
|
|
|
+ // margin-top: 20px;
|
|
|
+
|
|
|
+ // .el-form {
|
|
|
+ // .el-form-item--default {
|
|
|
+ // margin-bottom: 25px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .el-input__wrapper {
|
|
|
+ // background: transparent !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .el-input .el-input__wrapper .el-input__inner {
|
|
|
+ // color: #5c5c5c !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .el-radio-group .el-radio .el-radio__label {
|
|
|
+ // color: #000;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .el-select .el-select__wrapper {
|
|
|
+ // background: transparent !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .el-select .el-select__wrapper .el-select__placeholder {
|
|
|
+ // color: #ababab !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // .registerBtn {
|
|
|
+ // width: 500px;
|
|
|
+ // height: 34px;
|
|
|
+ // background-image: linear-gradient(to right, #5a91f6, #6656ff);
|
|
|
+ // border: none;
|
|
|
+ // color: #fff;
|
|
|
+ // margin-top: 10px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .ResetBtn {
|
|
|
+ // width: 500px;
|
|
|
+ // height: 34px;
|
|
|
+ // margin: 15px 0 0 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .el-popper .el-select-dropdown__wrap {
|
|
|
+ // background-color: #fff !important;
|
|
|
+ // border: 1px solid #fff !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .el-popper .el-select-dropdown__wrap .el-select-dropdown__item {
|
|
|
+ // color: #5c5c5c;
|
|
|
+ // }
|
|
|
</style>
|
