|
- <template>
- <div class="login">
- <div class="top_div"></div>
- <div class="login_ct">
- <div class="topImg"></div>
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" class="demo-ruleForm">
- <el-form-item prop="userName">
- <el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
- </el-form-item>
- <el-form-item prop="password2">
- <el-input v-model="ruleForm.password2" type="password" placeholder="确认密码"></el-input>
- </el-form-item>
- <el-form-item prop="name">
- <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
- </el-form-item>
- <el-form-item prop="cardId">
- <el-input v-model="ruleForm.cardId" placeholder="请输入身份证号"></el-input>
- </el-form-item>
- <el-form-item prop="code">
- <el-row>
- <el-col :span="16">
- <el-input v-model="ruleForm.code" placeholder="输入验证码"></el-input>
- </el-col>
- <el-col :span="8">
- <div class="code">1</div>
- </el-col>
- </el-row>
- </el-form-item>
- <el-form-item>
- <el-checkbox v-model="checked"></el-checkbox>
- <div class="login_text">
- 我接受 <a>《武汉壹玖之家网络科技有限公司用户注册协议》</a>及 <a>《武汉壹玖之家网络科技有限公司隐私政策》</a>
- </div>
- </el-form-item>
- </el-form>
- <div class="login_btn">
- <el-link size="small" type="text" @click="goPage('/home')">返回首页</el-link>
- <div class="right">
- <el-link size="small" type="info" @click="register">登录</el-link>
- <el-button size="small" type="primary" @click="login('ruleForm')">注册</el-button>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- ruleForm: {
- userName: '',
- password: '',
- password2: '',
- name: '',
- cardId: '',
- code: ''
- },
- rules: {
- userName: [
- { required: true, message: '请输入用户名', trigger: 'blur' }
- ],
- password: [
- { required: true, message: '请输入密码', trigger: 'blur' }
- ],
- password2: [
- { required: true, message: '请确认密码', trigger: 'blur' }
- ],
- name: [
- { required: true, message: '请输入真实姓名', trigger: 'blur' }
- ],
- cardId: [
- { required: true, message: '请输入身份证号', trigger: 'blur' }
- ],
- code: [
- { required: true, message: '请输入验证码', trigger: 'blur' }
- ]
- }
- };
- },
- methods: {
- login(formName) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- this.$message('人工审核中');
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- goPage(path) {
- if(path) {
- this.$router.push(path);
- }
- },
- resetForm(formName) {
- this.$refs[formName].resetFields();
- },
- }
- }
- </script>
- <style scoped lang="scss">
- .login {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- .top_div{
- height: 50%;
- width: 100%;
- background: #008ead;
- }
- .login_ct{
- width: 400px;
- margin: -100px auto 0;
- background: #fff;
- padding: 40px 0 0;
- border: 1px solid #e7e7e7;
- position: relative;
- .topImg{
- width: 92px;
- height: 97px;
- background: url('../../assets/img/login.png');
- position: absolute;
- top: -85px;
- margin-left: 152.5px;
- }
- .el-form{
- padding: 0 40px;
- .code{
- width: 90%;
- float: right;
- height: 30px;
- vertical-align: middle;
- border-radius: 5px;
- border: 1px solid #d3d3d3;
- background: #F2FBFE;
- text-align: center;
- line-height: 30px;
- font-weight: bold;
- }
- .login_text{
- font-size: 12px;
- line-height: 20px;
- display: inline-block;
- a{
- color: #409EFF;
- font-size: 12px;
- cursor: pointer;
- }
- }
- }
- .login_btn {
- height: 50px;
- margin-top: 40px;
- border-top: 1px solid #e7e7e7;
- line-height: 50px;
- padding: 0 40px;
-
- .right{
- float: right;
- button{
- margin: 0 10px;
- }
- }
- }
- }
- }
- </style>
|