登陆页面调整 404 页面调整

src/modules/404/index.vue

 
 <style>
 
-  .m404{
-    font-size: 30px;
-    margin-left: 33%;
-    margin-top: 6%;
-    color: #bababe;
-  }
   .pic-404 {
     position: relative;
-    float: left;
-    width: 600px;
+    margin-left: 35%;
+    width: 500px;
     overflow: hidden;
   }
   .pic-404__parent {
-     width: 100%;
-   }
+    width: 90%;
+  }
+  .pic-404__child {
+    width: 17%;
+  }
+  .my-font{
+    margin-left: 15%;
+    margin-top: 6%;
+    position: relative;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+  }
+  .my-font .m404{
+    font-size: 30px;
+    /*color: #bababe;*/
+  }
+  .my-font .detail{
+    font-size: 15px;
+    color: #bababe;
+  }
+
+  .bullshit__return-home{
+    display: block;
+    float: left;
+    width: 110px;
+    height: 36px;
+    background: #1482f0;
+    border-radius: 100px;
+    text-align: center;
+    color: #ffffff;
+    opacity: 1;
+    font-size: 14px;
+    line-height: 36px;
+    cursor: pointer;
+    animation-name: slideUp;
+    animation-duration: 0.5s;
+    animation-delay: 0.3s;
+    animation-fill-mode: forwards;
+  }
 </style>
 
 <template>
@@ -24,9 +56,10 @@
     <img class="pic-404__child left" src="../../assets/404_images/404_cloud.png" alt="404">
     <img class="pic-404__child mid" src="../../assets/404_images/404_cloud.png" alt="404">
     <img class="pic-404__child right" src="../../assets/404_images/404_cloud.png" alt="404">
-    <div class="m404">
-      <p>你是不是迷路了~~~ <a href="/" class="bullshit__return-home">返回首页</a></p>
-<!--      <a href="/" class="bullshit__return-home">返回首页</a>-->
+    <div class="my-font">
+      <p class="m404">同学你迷路了~~~ </p>
+      <p class="detail">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</p>
+      <a href="/" class="bullshit__return-home">返回首页</a>
     </div>
   </div>
 </template>

src/modules/login/index.vue

@@ -10,8 +10,8 @@
         <span class="svg-container">
           <svg-icon :iconClass="'user'"/>
         </span>
-        <el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="邮箱前缀" :suffixIcon="'form'">
-          <span slot="suffix">@quantgroup.cn</span>
+        <el-input v-model="loginForm.username" name="username" placeholder="邮箱前缀">
+            <template slot="append">@quantgroup.cn</template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -100,7 +100,7 @@
 
 <style>
   .login-container .el-input {
-      display: inline-block;
+      /*display: inline-block;*/
       height: 47px;
       width: 82%;
     }
@@ -118,16 +118,11 @@
     -webkit-box-shadow: 0 0 0px 1000px #2d3a4b inset !important;
     -webkit-text-fill-color: #fff !important;
   }
-  /*.login-container .el-input input:-webkit-autofill*/
-  /*.login-container .el-input input:-webkit-autofill:hover,*/
-  /*.login-container .el-input input:-webkit-autofill:focus,*/
-  /*.login-container .el-input input:-webkit-autofill:active {*/
-  /*  transition-delay: 99999s;*/
-  /*  transition: color 99999s ease-out, background-color 99999s ease-out;*/
-  /*  -webkit-transition-delay: 99999s;*/
-  /*  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;*/
-  /*  -webkit-text-fill-color: #807c7c;*/
-  /*}*/
+
+  .login-form .el-input-group__append{
+      background: #2d3a4b;
+      border: 0px solid rgba(255, 255, 255, 0.1);
+  }
 
   .login-container .el-form-item {
       border: 1px solid rgba(255, 255, 255, 0.1);
@@ -139,13 +134,13 @@
 </style>
 
 <style scoped>
-  .login-container {
-    position: fixed;
-    height: 100%;
-    width: 100%;
-    background-color: #2d3a4b;
-  }
-  .login-container .login-form {
+    .login-container {
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        background-color: #2d3a4b;
+    }
+    .login-container .login-form {
       position: absolute;
       left: 0;
       right: 0;
@@ -154,17 +149,12 @@
       padding: 35px 35px 15px 35px;
       margin: 120px auto;
     }
-  .login-container .tips {
-    font-size: 14px;
-    color: #fff;
-    margin-bottom: 10px;
-  }
-  /*.login-container .tips    span {*/
-  /*      &:first-of-type {*/
-  /*        margin-right: 16px;*/
-  /*      }*/
-  /*    }*/
-  /*  }*/
+    .login-container .tips {
+        font-size: 14px;
+        color: #fff;
+        margin-bottom: 10px;
+    }
+
     .svg-container {
       padding: 6px 5px 6px 15px;
       color: #889aa4;
@@ -197,4 +187,5 @@
       cursor: pointer;
       user-select: none;
     }
+
 </style>

src/modules/report/index.vue

@@ -2,7 +2,9 @@
   <div class="height100">
     <div class="home-section-wrap">
       <div class="home-section-env">
-        <p>内容段1</p>
+        <el-input name="username" placeholder="邮箱前缀">
+          <template slot="append">@quantgroup.cn</template>
+        </el-input>
       </div>
     </div>
     <div class="home-section-wrap home-section-wrap-bottom">
@@ -12,3 +14,10 @@
     </div>
   </div>
 </template>
+
+<style>
+  .home-section-env .el-input-group__append{
+    background: #2d3a4b;
+    border: 0px solid rgba(255, 255, 255, 0.1);
+  }
+</style>