login page

src/views/login/index.vue

 <template>
   <div class="login-container">
+    <div class="text">
+      <p style="color: white;font-size: 30px;text-align: center;">Birtronix漏缆及天馈线在线监测系统</p>
+    </div>
+    <div class="loginBox">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">欢迎登录</h3>
       </div>
 
       <el-form-item prop="username">
@@ -13,11 +17,12 @@
         <el-input
           ref="username"
           v-model="loginForm.username"
-          placeholder="Username"
+          placeholder="用户名"
           name="username"
           type="text"
           tabindex="1"
           auto-complete="on"
+          style="width:270px"
         />
       </el-form-item>
 
@@ -29,8 +34,9 @@
           :key="passwordType"
           ref="password"
           v-model="loginForm.password"
+          style="width:270px"
           :type="passwordType"
-          placeholder="Password"
+          placeholder="密码"
           name="password"
           tabindex="2"
           auto-complete="on"
@@ -41,14 +47,15 @@
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
 
       <div class="tips">
         <span style="margin-right:20px;">username: admin</span>
-        <span> password: any</span>
+        <span> password:任意6位</span>
       </div>
 
     </el-form>
+    </div>
   </div>
 </template>
 
@@ -60,14 +67,14 @@ export default {
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
+        callback(new Error('请输入正确的用户名'))
       } else {
         callback()
       }
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+        callback(new Error('密码不能少于6位'))
       } else {
         callback()
       }
@@ -166,7 +173,7 @@ $cursor: #fff;
   .el-form-item {
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
+    border-radius: 25px;
     color: #454545;
   }
 }
@@ -180,16 +187,54 @@ $light_gray:#eee;
 .login-container {
   min-height: 100%;
   width: 100%;
-  background-color: $bg;
+  // background-color: $bg;
+  background-image: url( "http://dapchina.bj.bcebos.com/nms/20220105153715.png?authorization=bce-auth-v1/5d787726a1b84b738cbac101c310a28c/2022-01-05T07%3A37%3A50Z/300/host/035d0be566820fec4b53e4c3a59407558e46a8bdf20dc77711df04b71ca7d8f3");
+  background-repeat:no-repeat;
+  background-size:100% 100%;
   overflow: hidden;
-
+ .text {
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    display: block;
+    width: 634px;
+    height: 122px;
+    line-height: 60px;
+    
+    transform: translateY(-82px);
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Source Sans Pro', sans-serif;
+    background-image: url('../../assets/img/loginTitleBg.png');
+    // ../../assets/img/
+  }
+   .loginBox {
+    position: absolute;
+    top: 50%;
+    left: 78%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    display: block;
+    width: 464px;
+    height: 407px;
+  background: rgba(0, 0, 0, 0.4);
+   
+    margin: 0;
+    padding: 33px 21px 67px;
+    box-sizing: border-box;
+  
+    border-radius: 20px;
+    font-family: 'Source Sans Pro', sans-serif;
+  }
   .login-form {
     position: relative;
-    width: 520px;
-    max-width: 100%;
-    padding: 160px 35px 0;
+    width: 80%;
+  
+
+    padding: 0px;
     margin: 0 auto;
     overflow: hidden;
+  
   }
 
   .tips {
@@ -234,4 +279,16 @@ $light_gray:#eee;
     user-select: none;
   }
 }
+.loginBox .el-input__inner {
+  border: 1px solid #0058FF!important;
+  background-color: transparent !important;
+  border-radius: 20px;
+  color: #C7C7C7 !important;
+}
+.loginBox .el-button--primary {
+    background-color: #0058FF;
+    border-color: #0058FF;
+    border-radius: 20px;
+    margin-top: 50px
+}
 </style>