完善用户注册中心页面,添加数据库字段

readme.md

@@ -1,4 +1,4 @@
-## 用户注册中心,后端均未实现
+## 完善用户注册中心页面,添加数据库字段
 ![](./picture/register.jpg)
 
 ## 登录页面验证码及用户注册

src/views/login/components/register_picture.vue

@@ -0,0 +1,14 @@
+<template>
+  <img :src="src">
+</template>
+<script>
+const src = require('xxx.jpg')
+export default {
+  computed: {
+    src() {
+      return src
+    }
+  }
+}
+</script>
+复制代码

src/views/login/index.vue

@@ -122,7 +122,7 @@
       </el-button>
       <el-button
         :loading="loading"
-        type="warning"
+        type="info"
         icon="el-icon el-icon-circle-plus"
         style="width: 35%; margin-bottom: 20px; margin-left: 20px"
         @click="registerForm()"
@@ -437,6 +437,11 @@ $light_gray: #eee;
     }
   }
 
+  .warning{
+    border-color: #48D1CC;
+    color: #fff;
+    background: #48D1CC;
+  }
   .svg-container {
     padding: 6px 5px 6px 15px;
     color: $dark_gray;

src/views/login/register.vue

@@ -21,8 +21,26 @@
         :hide-required-asterisk="true"
         size="medium"
       >
-        <div style="padding-top: 10px">
-          <el-form-item label="用户名" prop="username">
+        <div class="picture">
+          <!-- 力山特起重机智能运维系统用户注册中心 -->
+          <img src="./picture/picture.jpg">
+        </div>
+        <div class="title">
+          力山特起重机智能运维系统用户注册中心
+        </div>
+        <div class="website">
+          <a ref="url" href="https://lstzn.com/">公司官网</a>
+        </div>
+        <div class="contact">
+          <a ref="ee" href="https://lstzn.com/">联系我们</a>
+        </div>
+        <div class="login_small">
+          <a ref="we">
+            关于我们
+          </a>
+        </div>
+        <div style="padding-top: 60px">
+          <el-form-item label="用户名" prop="username" :rules="username">
             <el-col :span="10">
               <el-input
                 v-model="ruleForm.username"
@@ -35,7 +53,7 @@
               <el-input v-model="ruleForm.name" placeholder="请输入姓名" />
             </el-col>
           </el-form-item>
-          <el-form-item label="身份证号" prop="IdCard">
+          <el-form-item label="身份证号" prop="IdCard" :rules="rules" :model="headerForm">
             <el-col :span="10">
               <el-input
                 v-model="ruleForm.IdCard"
@@ -83,13 +101,13 @@
                 placeholder="输入手机号并点击发送验证码"
               />
             </el-col>
-            <el-button
+            <!-- <el-button
               :loading="codeLoading"
               :disabled="isDisable"
               size="small"
               round
               @click="sendMsg"
-            >发送验证码不可用</el-button>
+            >发送验证码不可用</el-button> -->
 
             <span class="status">{{ statusMsg }}</span>
           </el-form-item>
@@ -106,6 +124,7 @@
 
     <div class="error">{{ error }}</div>
   </div>
+
 </template>
 
 <script>
@@ -242,8 +261,8 @@ $cursor: #fff;
 .register-container {
   .el-input {
     display: inline-block;
-    height: 47px;
-    width: 95%;
+    height: 1px;
+    width: 100%;
 
     input {
       background: rgba(0, 0, 0, 0.1);
@@ -287,14 +306,15 @@ $light_gray: #eee;
     border-bottom: 2px solid rgb(235, 232, 232);
     min-width: 980px;
     color: #666;
-
     header {
       margin: 0 auto;
+      margin-top: 0px;
       padding: 10px 0;
       width: 980px;
 
       .login {
         float: right;
+        margin-top: 7px;
       }
 
       .bold {
@@ -308,14 +328,65 @@ $light_gray: #eee;
     margin: 0 auto 30px;
     padding-top: 30px;
     width: 980px;
+    margin-left: 300px;
     min-height: 300px;
     padding-right: 100px;
     box-sizing: border-box;
 
+    .yello{
+      color: #1890ff
+
+    }
     .status {
       font-size: 12px;
       margin-left: 20px;
-      color: #e6a23c;
+    }
+
+    .picture {
+      position: fixed;
+      margin-top: 120px;
+      margin-left: 600px;
+    }
+
+    .website {
+      position: fixed;
+      margin-left: 400px;
+      margin-top: 350px;
+      margin-left: 690px;
+      font-size: 14px;
+      color: #fff;
+    }
+
+    .login_small {
+      position: fixed;
+      margin-left: 400px;
+      margin-top: 410px;
+      margin-left: 690px;
+      font-size: 14px;
+      color: #fff;
+    }
+    .contact {
+      position: fixed;
+      margin-left: 400px;
+      margin-top: 380px;
+      margin-left: 690px;
+      font-size: 14px;
+      color: #fff;
+    }
+
+    .title {
+      position: fixed;
+      margin-top: 0px;
+      margin-left: 245px;
+      font-size: 24px;
+      color: #fff;
+    }
+    .tips_center {
+      position: fixed;
+      margin-top: 120px;
+      margin-left: 800px;
+      font-size: 24px;
+      color: #fff;
     }
 
     .error {