修改注册界面

src/views/RegisterView.vue

@@ -76,6 +76,11 @@
               <span>手机验证</span>
             </div>
             
+            <el-form
+              :model="registerForm"
+              :rules="rules"
+              label-position="top"
+            >
             <el-form-item label="手机号" prop="phone">
               <div class="verify-code-input">
                 <el-input 
@@ -112,6 +117,7 @@
                 </template>
               </el-input>
             </el-form-item>
+            </el-form>
           </div>
 
           <div class="verify-section">
@@ -120,6 +126,11 @@
               <span>邮箱验证</span>
             </div>
             
+            <el-form
+              :model="registerForm"
+              :rules="rules"
+              label-position="top"
+            >
             <el-form-item label="邮箱号" prop="email">
               <div class="verify-code-input">
                 <el-input 
@@ -156,6 +167,7 @@
                 </template>
               </el-input>
             </el-form-item>
+            </el-form>
           </div>
         </div>
       </div>
@@ -494,16 +506,17 @@ const sendEmailCode = () => {
   margin-bottom: 20px;
 }
 
-.verify-section .el-form-item__label {
-  height: 20px;
-  line-height: 20px;
-  margin-bottom: 6px;
-  color: #606266;
-  font-size: 14px;
+.verify-section :deep(.el-form-item__label) {
+  float: none;
+  display: block;
+  text-align: left;
+  padding: 0 0 8px;
+  line-height: 1.5;
+  white-space: normal;
 }
 
-.verify-section .el-form-item__content {
-  width: 100%;
+.verify-section :deep(.el-form-item__content) {
+  margin-left: 0 !important;
 }
 
 .verify-code-input {
@@ -524,11 +537,6 @@ const sendEmailCode = () => {
   flex-shrink: 0;
 }
 
-.verify-section .el-form-item:not(:first-child) .el-input {
-  width: calc(100% - 130px);
-  margin-left: 130px;
-}
-
 .verify-title {
   display: flex;
   align-items: center;