瑜璟缘官网
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

174 lines
5.4 KiB

  1. <template>
  2. <div class="login">
  3. <div class="top_div"></div>
  4. <div class="login_ct">
  5. <div class="topImg"></div>
  6. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" class="demo-ruleForm">
  7. <el-form-item prop="userName">
  8. <el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
  9. </el-form-item>
  10. <el-form-item prop="password">
  11. <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
  12. </el-form-item>
  13. <el-form-item prop="password2">
  14. <el-input v-model="ruleForm.password2" type="password" placeholder="确认密码"></el-input>
  15. </el-form-item>
  16. <el-form-item prop="name">
  17. <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
  18. </el-form-item>
  19. <el-form-item prop="cardId">
  20. <el-input v-model="ruleForm.cardId" placeholder="请输入身份证号"></el-input>
  21. </el-form-item>
  22. <el-form-item prop="code">
  23. <el-row>
  24. <el-col :span="16">
  25. <el-input v-model="ruleForm.code" placeholder="输入验证码"></el-input>
  26. </el-col>
  27. <el-col :span="8">
  28. <div class="code">1</div>
  29. </el-col>
  30. </el-row>
  31. </el-form-item>
  32. <el-form-item>
  33. <el-checkbox v-model="checked"></el-checkbox>
  34. <div class="login_text">
  35. 我接受 <a>《武汉壹玖之家网络科技有限公司用户注册协议》</a>及 <a>《武汉壹玖之家网络科技有限公司隐私政策》</a>
  36. </div>
  37. </el-form-item>
  38. </el-form>
  39. <div class="login_btn">
  40. <el-link size="small" type="text" @click="goPage('/home')">返回首页</el-link>
  41. <div class="right">
  42. <el-link size="small" type="info" @click="register">登录</el-link>
  43. <el-button size="small" type="primary" @click="login('ruleForm')">注册</el-button>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </template>
  49. <script>
  50. export default {
  51. data() {
  52. return {
  53. ruleForm: {
  54. userName: '',
  55. password: '',
  56. password2: '',
  57. name: '',
  58. cardId: '',
  59. code: ''
  60. },
  61. rules: {
  62. userName: [
  63. { required: true, message: '请输入用户名', trigger: 'blur' }
  64. ],
  65. password: [
  66. { required: true, message: '请输入密码', trigger: 'blur' }
  67. ],
  68. password2: [
  69. { required: true, message: '请确认密码', trigger: 'blur' }
  70. ],
  71. name: [
  72. { required: true, message: '请输入真实姓名', trigger: 'blur' }
  73. ],
  74. cardId: [
  75. { required: true, message: '请输入身份证号', trigger: 'blur' }
  76. ],
  77. code: [
  78. { required: true, message: '请输入验证码', trigger: 'blur' }
  79. ]
  80. }
  81. };
  82. },
  83. methods: {
  84. login(formName) {
  85. this.$refs[formName].validate((valid) => {
  86. if (valid) {
  87. this.$message('人工审核中');
  88. } else {
  89. console.log('error submit!!');
  90. return false;
  91. }
  92. });
  93. },
  94. goPage(path) {
  95. if(path) {
  96. this.$router.push(path);
  97. }
  98. },
  99. resetForm(formName) {
  100. this.$refs[formName].resetFields();
  101. },
  102. }
  103. }
  104. </script>
  105. <style scoped lang="scss">
  106. .login {
  107. position: absolute;
  108. left: 0;
  109. top: 0;
  110. right: 0;
  111. bottom: 0;
  112. .top_div{
  113. height: 50%;
  114. width: 100%;
  115. background: #008ead;
  116. }
  117. .login_ct{
  118. width: 400px;
  119. margin: -100px auto 0;
  120. background: #fff;
  121. padding: 40px 0 0;
  122. border: 1px solid #e7e7e7;
  123. position: relative;
  124. .topImg{
  125. width: 92px;
  126. height: 97px;
  127. background: url('../../assets/img/login.png');
  128. position: absolute;
  129. top: -85px;
  130. margin-left: 152.5px;
  131. }
  132. .el-form{
  133. padding: 0 40px;
  134. .code{
  135. width: 90%;
  136. float: right;
  137. height: 30px;
  138. vertical-align: middle;
  139. border-radius: 5px;
  140. border: 1px solid #d3d3d3;
  141. background: #F2FBFE;
  142. text-align: center;
  143. line-height: 30px;
  144. font-weight: bold;
  145. }
  146. .login_text{
  147. font-size: 12px;
  148. line-height: 20px;
  149. display: inline-block;
  150. a{
  151. color: #409EFF;
  152. font-size: 12px;
  153. cursor: pointer;
  154. }
  155. }
  156. }
  157. .login_btn {
  158. height: 50px;
  159. margin-top: 40px;
  160. border-top: 1px solid #e7e7e7;
  161. line-height: 50px;
  162. padding: 0 40px;
  163. .right{
  164. float: right;
  165. button{
  166. margin: 0 10px;
  167. }
  168. }
  169. }
  170. }
  171. }
  172. </style>