1

src/views/Login.vue

@@ -13,7 +13,7 @@
             <el-input
               v-model="loginForm.username"
               id="userInp"
-              placeholder="输入你的用户名"
+              placeholder="输入用户名"
               @focus="showkey('username')"
             ></el-input>
           </el-form-item>
@@ -25,7 +25,7 @@
               type="password"
               v-model="loginForm.password"
               id="passWordInp"
-              placeholder="输入你的密码"
+              placeholder="输入密码"
               @focus="showkey('password')"
             ></el-input>
           </el-form-item>
@@ -166,24 +166,127 @@ export default {
 </script>
 
 <style>
-* {
-  margin: 0;
-  padding: 0;
-}
-.keyboardStyle{
+@media screen and (max-width:901px) {
+  .backGround {
+    padding-top: 2vh;
+    box-sizing: border-box;
+    height: 100vh;
+    width: 100vw;
+    background-image: url("../assets/imgs/bg.png");
+  }
+  .projectName{
+    text-align: center;
+    font-size: 40px;
+    font-weight: 600;
+    background-image:-webkit-linear-gradient(bottom,rgb(36,162,254),rgb(255,255,255)); 
+    background-clip:text; 
+    -webkit-text-fill-color:transparent; 
+    letter-spacing: 3px;
+  }
+  .loginBody{
+    position: relative;
+    padding-top: 9vh;
+    box-sizing: border-box;
+    margin: 0 auto;
+    width: 70%;
+    height: 90%;
+    background-image: url("../assets/imgs/kuang.png");
+    background-size: 100% 110%;
+    margin-top: -5vh;
+  }
+  .loginTitle{
+    margin-left: 4vw;
+    text-align: center;
+    font-size: 19px;
+    color:rgb(47,213,255);
+    letter-spacing: 6px;
+  }
+  .loginText{
+    margin-top: 20px;
+    margin-left: 50px;
+    text-align: center;
+    font-size: 30px;
+    color:rgb(151,227,244);
+    letter-spacing: 6px;
+    margin-bottom: 10px;
+  }
+  .loginInoputs{
+    margin-top: 8vh;
     position: absolute;
-  top:0;
-  left: 0;
-  z-index: 100;
+    right: 6vw;
+  }
+  .userInpBody{
+    padding: 2px;
+    border: 1px solid rgb(18,70,113);
+    margin-bottom: 20px;
+  }
+  .el-form-item__content{
+    display: flex;
+    width: 25vw;
+  }
+  .userIcon{
+    padding: 11px;
+    box-sizing: border-box;
+    width: 50px;
+    height: 50px;
+    background-color: rgb(18,70,113);
+  }
+  #userInp{
+    height: 100%;
+    width: 100%;
+    background: none;
+    outline: none;
+    border: none;
+    font-size: 20px;
+    color: rgb(47,213,255);
+  }
+  /* .el-input input::-webkit-input-placeholder {
+    color:rgb(47,213,255);
+  } */
+  .passWordInpBody{
+    display: flex;
+    padding: 2px;
+    border: 1px solid rgb(18,70,113);
+    margin-bottom: 50px;
+  }
+  .passWordIcon{
+    padding: 11px;
+    box-sizing: border-box;
+    width: 50px;
+    height: 50px;
+    background-color: rgb(18,70,113);
+  }
+  #passWordInp{
+    height: 100%;
+    width: 80%;
+    background: none;
+    outline: none;
+    border: none;
+    font-size: 20px;
+    color: rgb(47,213,255);
+    letter-spacing: 2px;
+  }
+  .loginBtn{
+    width: 100%;
+    height: 10vh;
+    font-size: 17px;
+    background-color:rgb(24,180,255);
+    border: 0px;
+    color: white;
+    letter-spacing: 10px;
+    cursor: pointer;
+  }
 }
-.backGround {
+
+@media screen and (min-width:901px) {
+  .backGround {
     padding-top: 50px;
     box-sizing: border-box;
     height: 100vh;
     width: 100vw;
     background-image: url("../assets/imgs/bg.png");
-}
-.projectName{
+  }
+  .projectName{
     text-align: center;
     font-size: 70px;
     font-weight: 600;
@@ -191,25 +294,25 @@ export default {
     background-clip:text; 
     -webkit-text-fill-color:transparent; 
     letter-spacing: 3px;
-}
-.loginBody{
+  }
+  .loginBody{
     position: relative;
-  padding-top: 60px;
+    padding-top: 9vh;
     box-sizing: border-box;
     margin: 0 auto;
     width: 75%;
     height: 90%;
     background-image: url("../assets/imgs/kuang.png");
     background-size: 100% 100%;
-}
-.loginTitle{
+  }
+  .loginTitle{
     margin-left: 50px;
     text-align: center;
     font-size: 25px;
     color:rgb(47,213,255);
     letter-spacing: 6px;
-}
-.loginText{
+  }
+  .loginText{
     margin-top: 20px;
     margin-left: 50px;
     text-align: center;
@@ -217,30 +320,28 @@ export default {
     color:rgb(151,227,244);
     letter-spacing: 6px;
     margin-bottom: 10px;
-}
-.loginInoputs{
-  margin-top: 80px;
+  }
+  .loginInoputs{
+    margin-top: 15vh;
     position: absolute;
-  right: 100px;
-  width: 340px;
-  height: 300px;
-}
-.userInpBody{
+    right: 13vh;
+  }
+  .userInpBody{
     padding: 2px;
     border: 1px solid rgb(18,70,113);
     margin-bottom: 20px;
-}
-.el-form-item__content{
+  }
+  .el-form-item__content{
     display: flex;
-}
-.userIcon{
+  }
+  .userIcon{
     padding: 11px;
     box-sizing: border-box;
     width: 50px;
     height: 50px;
     background-color: rgb(18,70,113);
-}
-#userInp{
+  }
+  #userInp{
     height: 100%;
     width: 100%;
     background: none;
@@ -249,24 +350,24 @@ export default {
     font-size: 20px;
     color: rgb(47,213,255);
     letter-spacing: 2px;
-}
-/* .el-input input::-webkit-input-placeholder {
+  }
+  /* .el-input input::-webkit-input-placeholder {
     color:rgb(47,213,255);
-} */
-.passWordInpBody{
+  } */
+  .passWordInpBody{
     display: flex;
     padding: 2px;
     border: 1px solid rgb(18,70,113);
     margin-bottom: 50px;
-}
-.passWordIcon{
+  }
+  .passWordIcon{
     padding: 11px;
     box-sizing: border-box;
     width: 50px;
     height: 50px;
     background-color: rgb(18,70,113);
-}
-#passWordInp{
+  }
+  #passWordInp{
     height: 100%;
     width: 80%;
     background: none;
@@ -275,8 +376,8 @@ export default {
     font-size: 20px;
     color: rgb(47,213,255);
     letter-spacing: 2px;
-}
-.loginBtn{
+  }
+  .loginBtn{
     width: 100%;
     height: 60px;
     font-size: 26px;
@@ -285,5 +386,18 @@ export default {
     color: white;
     letter-spacing: 10px;
     cursor: pointer;
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
 }
+.keyboardStyle{
+  position: absolute;
+  top:0;
+  left: 0;
+  z-index: 100;
+}
+
 </style>
\ No newline at end of file