修改调整

public/index.html

@@ -15,3 +15,10 @@
     <!-- built files will be auto injected -->
   </body>
 </html>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+  }
+</style>

src/router/index.js

@@ -18,7 +18,6 @@ const routes = [{
 {
   path: '/login',
   name: 'loginIndex',
-  redirect: '/login',
   meta: {
     title: '登录'
   },
@@ -45,7 +44,7 @@ const routes = [{
 // }
 
 const router = new VueRouter({
-  // mode: 'history',
+  mode: 'history',
   // base: process.env.BASE_URL,
   routes
 })

src/router/index/camp.js

 export default [{
-  path: 'signUp',
+  path: '/signUp',
   name: 'index-signUp',
   component: () => import(/* webpackChunkName: "login" */ 'v/index/camp/SignUp.vue'),
   meta: {
@@ -7,7 +7,7 @@ export default [{
   }
 },
 {
-  path: 'homework',
+  path: '/homework',
   name: 'index-homework',
   component: () => import(/* webpackChunkName: "reset" */ 'v/index/camp/Homework.vue'),
   meta: {
@@ -15,7 +15,7 @@ export default [{
   }
 },
 {
-  path: 'certificate',
+  path: '/certificate',
   name: 'index-certificate',
   component: () => import(/* webpackChunkName: "reset" */ 'v/index/camp/Certificate.vue'),
   meta: {

src/router/index/login.js

@@ -7,7 +7,7 @@ export default [{
   }
 },
 {
-  path: 'register',
+  path: '/register',
   name: 'index-register',
   component: () => import(/* webpackChunkName: "reset" */ 'v/index/login/Register.vue'),
   meta: {
@@ -15,7 +15,7 @@ export default [{
   }
 },
 {
-  path: 'reset',
+  path: '/reset',
   name: 'index-reset',
   component: () => import(/* webpackChunkName: "reset" */ 'v/index/login/Reset.vue'),
   meta: {

src/views/index/login/Login.vue

@@ -263,9 +263,6 @@ export default {
     background: #60194a;
     border-radius: 2px;
   }
-  ::v-deep .el-input__inner {
-    border: 1px solid #ffff;
-  }
   .el-form {
     margin-top: 60px;
     .el-form-item {
@@ -295,6 +292,7 @@ export default {
         padding: 0 10px 0 50px;
         border-radius: 0;
         color: #4d4d4d;
+        border: 0;
         border-bottom: 2px solid #d9d9d9;
         &:focus {
           border-bottom-color: #563279;

src/views/index/login/Register.vue

@@ -11,7 +11,8 @@
           class="demo-registerForm"
         >
           <el-form-item prop="phone">
-            <img class="img_l" src="@/assets/img/reset/username.png" alt="" />
+            <img class="img_l" src="@/assets/img/reset/username.png" alt=""/>
+            <el-input type="password" style="width: 1px;height: 1px;position:fixed;top: -10000px;"></el-input>
             <el-input
               v-model="registerForm.phone"
               placeholder="请输入手机号"
@@ -19,20 +20,22 @@
             ></el-input>
           </el-form-item>
           <el-form-item prop="code">
-            <img class="img_l" src="@/assets/img/reset/code.png" alt="" />
+            <img class="img_l" src="@/assets/img/reset/code.png" alt=""/>
+            <el-input type="password" style="width: 1px;height: 1px;position:fixed;top: -10000px;"></el-input>
             <el-input
               v-model="registerForm.code"
               placeholder="请输入短信验证码"
               maxlength="20"
             ></el-input>
-          </el-form-item>
             <!-- 短信验证码 -->
             <div class="phoneCode">
               <span class="code" v-show="show" @click="getCode">获取验证码</span>
               <span v-show="!show" class="count">{{ count }} s</span>
             </div>
+          </el-form-item>
           <el-form-item prop="password">
-            <img class="img_l" src="@/assets/img/reset/password.png" alt="" />
+            <img class="img_l" src="@/assets/img/reset/password.png" alt=""/>
+            <el-input type="password" style="width: 1px;height: 1px;position:fixed;top: -10000px;"></el-input>
             <el-input
               v-model="registerForm.password"
               :type="isShowPwd ? 'password' : 'text'"
@@ -55,7 +58,8 @@
             />
           </el-form-item>
           <el-form-item prop="rq_password">
-            <img class="img_l" src="@/assets/img/reset/password.png" alt="" />
+            <img class="img_l" src="@/assets/img/reset/password.png" alt=""/>
+            <el-input type="password" style="width: 1px;height: 1px;position:fixed;top: -10000px;"></el-input>
             <el-input
               v-model="registerForm.rq_password"
               placeholder="请再次输入登录密码"
@@ -64,7 +68,7 @@
           </el-form-item>
           <el-form-item style="margin: 40px 0 0 0"></el-form-item>
           <el-form-item>
-            <el-button @click="submitForm()"> 注册 </el-button>
+            <el-button @click="submitForm()"> 注册</el-button>
           </el-form-item>
           <div class="box">
             <div class="fr" @click="toLogin()">已有账号？马上登录</div>
@@ -76,12 +80,12 @@
 </template>
 
 <script>
-/* eslint-disable */
-// 请求接口
-import { registerCode, setAccountInfo } from "r/index/register";
-import { mobileCheck } from "@/common/utils.js";
+  /* eslint-disable */
+  // 请求接口
+  import {registerCode, setAccountInfo} from "r/index/register";
+  import {mobileCheck} from "@/common/utils.js";
 
-export default {
+  export default {
     name: "index-register",
     data() {
       const pwdCheck = async (rule, value, callback) => {
@@ -107,7 +111,7 @@ export default {
         registerRules: {
           // 对手机号进行校验
           phone: [
-          { required: true, message: "请输入手机号", trigger: "blur" },
+            {required: true, message: "请输入手机号", trigger: "blur"},
             {
               validator: function (rule, value, callback) {
                 if (mobileCheck(value) === false) {
@@ -121,17 +125,17 @@ export default {
           ],
           // 对验证码进行校验
           code: [
-          { required: true, message: "请输入验证码", trigger: "blur" },
-          { min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
+            {required: true, message: "请输入验证码", trigger: "blur"},
+            {min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur"},
           ],
           // 对密码进行校验
           password: [
-          { required: true, message: "请输入密码", trigger: "blur" },
-          { min: 6, max: 20, message: "请输入正确的密码", trigger: "blur" },
+            {required: true, message: "请输入密码", trigger: "blur"},
+            {min: 6, max: 20, message: "请输入正确的密码", trigger: "blur"},
           ],
           // 对密码进行校验
           rq_password: [
-          { required: true, message: "请输入确认密码", trigger: "blur" },
+            {required: true, message: "请输入确认密码", trigger: "blur"},
             {
               validator: pwdCheck,
               trigger: "blur",
@@ -146,7 +150,7 @@ export default {
     methods: {
       // 去注册
       toLogin() {
-      this.$router.replace({ name: "index-login" });
+        this.$router.replace({name: "index-login"});
       },
       // 改变密码显示状态
       changePwdStatus() {
@@ -197,20 +201,22 @@ export default {
         });
       }
     },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-// 内容区域
-.box_content {
+  // 内容区域
+  .box_content {
     .content {
       max-width: 1150px;
       margin: 40px auto;
       padding: 0 50px;
       overflow: auto;
+
       .floatL {
         float: left;
         width: 670px;
+
         h3 {
           font-size: 20px;
           color: #4c4c4c;
@@ -219,40 +225,48 @@ export default {
           margin-bottom: 23px;
           border-bottom: 4px solid #e0823d;
         }
+
         ul {
           li {
             height: 40px;
             line-height: 40px;
             border-bottom: 1px solid #ddd;
+
             a {
               display: inline-block;
               width: 100%;
               font-size: 16px;
               color: #34538b;
               text-decoration: none;
+
               &:hover {
                 text-decoration: underline;
               }
             }
           }
         }
+
         .ContentLReg {
           height: 60px;
           color: #333333;
           font-size: 14px;
+
           span {
             cursor: pointer;
             color: #563279;
             font-weight: bold;
+
             &:hover {
               text-decoration: underline;
             }
           }
         }
+
         .img_box {
           width: 100%;
           height: 156px;
           text-align: center;
+
           img {
             &:nth-child(1) {
               margin-right: 40px;
@@ -260,12 +274,15 @@ export default {
           }
         }
       }
+
       .floatR {
         float: right;
         width: 374px;
+
         ul {
           margin-top: 36px;
           margin-left: 87px;
+
           li {
             font-size: 16px;
             width: 100%;
@@ -289,9 +306,10 @@ export default {
         }
       }
     }
-}
-// 注册输入
-.container {
+  }
+
+  // 注册输入
+  .container {
     width: 440px;
     // height: 640px;
     background: #ffffff;
@@ -300,12 +318,11 @@ export default {
     position: absolute;
     top: 50%;
     right: 18%;
-  // left: 10%;
     transform: translate(0, -50%);
     padding: 60px;
     margin-top: 0;
-  // background: url("../../../assets/images/loginbgp.png") no-repeat 0 center;
     overflow: hidden;
+
     .title {
       margin: 19px 0 6px 0;
       width: 132px;
@@ -315,38 +332,42 @@ export default {
       color: #60194a;
       line-height: 20px;
     }
+
     .line {
       width: 48px;
       height: 3px;
       background: #60194a;
       border-radius: 2px;
     }
-  .phone_input {
+
+    ::v-deep .el-form {
+      margin-top: 60px;
+
+      .el-form-item {
         position: relative;
+        margin-bottom: 30px;
+
+        &:last-child {
+          margin: 0;
         }
+
+        .el-form-item__content {
+          position: relative;
+
           .phoneCode {
             position: absolute;
             z-index: 999;
-    top: 38%;
-    right: 15%;
+            top: 50%;
+            right: 25px;
+            transform: translate(0, -50%);
             cursor: pointer;
+
             .code {
               font-size: 14px;
               font-weight: 600;
               color: #60194a;
             }
           }
-  ::v-deep .el-input__inner {
-    border: 1px solid #ffff;
-  }
-  .el-form {
-    margin-top: 60px;
-    .el-form-item {
-      position: relative;
-      margin-bottom: 30px;
-      &:last-child {
-        margin: 0;
-      }
 
           img.img_l {
             position: absolute;
@@ -355,6 +376,7 @@ export default {
             transform: translate(-50%, -50%);
             z-index: 1000;
           }
+
           img.img_r {
             position: absolute;
             right: 15px;
@@ -362,20 +384,25 @@ export default {
             transform: translate(0, -50%);
             z-index: 1000;
           }
-      ::v-deep .el-input__inner {
+
+          .el-input__inner {
             height: 50px;
             line-height: 50px;
             padding: 0 10px 0 50px;
             border-radius: 0;
             color: #4d4d4d;
+            border: 0;
             border-bottom: 2px solid #d9d9d9;
+
             &:focus {
               border-bottom-color: #563279;
             }
           }
-      ::v-deep .el-form-item__error {
+
+          .el-form-item__error {
             color: #e0823d;
           }
+
           .el-button {
             width: 100%;
             height: 60px;
@@ -389,10 +416,14 @@ export default {
             padding: 0;
             margin: 30px 0 0 0;
           }
+
+        }
       }
+
       .box {
         height: 18px;
         display: block;
+
         .fr {
           // float: left;
           text-align: center;
@@ -401,6 +432,7 @@ export default {
           color: #999999;
           margin-top: -10px;
           cursor: pointer;
+
           &:hover {
             color: #563279;
             text-decoration: underline;
@@ -408,20 +440,23 @@ export default {
         }
       }
     }
-}
-@media screen and (max-width: 1601px) {
+  }
+
+  @media screen and (max-width: 1601px) {
     .container {
       right: 18%;
     }
-}
-@media screen and (max-width: 1501px) {
+  }
+
+  @media screen and (max-width: 1501px) {
     .container {
       right: 16%;
     }
-}
-@media screen and (max-width: 1401px) {
+  }
+
+  @media screen and (max-width: 1401px) {
     .container {
       right: 14%;
     }
-}
+  }
 </style>