样式调整

 <template>
   <div id="login">
-    <div class="login-logo"><img src="./images/logo-login.svg" /></div>
-    <div class="login-con">
-      <div class="login-wrap">
-        <p>用户登录</p>
-        <div class="login-user" :class="{ 'select-border': change.user }">
-          <img class="user-icon" src="./images/user.svg" />
-          <input
-            type="text"
-            class="user-input"
-            placeholder="请输入账号"
-            v-model="userInfo.username"
-            @focus="reduceBorder('user')"
-            @blur="addBorder('user')"
-          />
-          <span class="warning" v-show="warning.user">账号不能为空</span>
+    <div class="login-content-wrap">
+      <div class="login-logo"><img src="./images/logo-login.svg" /></div>
+      <div class="login-con">
+        <div class="login-wrap">
+          <p>用户登录</p>
+          <div class="login-user" :class="{ 'select-border': change.user }">
+            <img class="user-icon" src="./images/user.svg" />
+            <input
+              type="text"
+              class="user-input"
+              placeholder="请输入账号"
+              v-model="userInfo.username"
+              @focus="reduceBorder('user')"
+              @blur="addBorder('user')"
+            />
+            <span class="warning" v-show="warning.user">账号不能为空</span>
+          </div>
+          <div class="login-user user-mt" :class="{ 'select-border': change.pass }">
+            <img class="user-icon" src="./images/password.svg" />
+            <input
+              type="password"
+              class="user-input"
+              placeholder="请输入密码"
+              v-model="userInfo.password"
+              v-show="!selectEye"
+              @focus="reduceBorder('pass')"
+              @blur="addBorder('pass')"
+            />
+            <input
+              type="text"
+              class="user-input"
+              placeholder="请输入密码"
+              v-model="userInfo.password"
+              v-show="selectEye"
+              @focus="reduceBorder('pass')"
+              @blur="addBorder('pass')"
+            />
+            <img
+              class="password-eye"
+              src="./images/open.svg"
+              @click="selectEyes"
+              v-show="selectEye"
+            />
+            <img
+              class="password-eye"
+              src="./images/close.svg"
+              @click="selectEyes"
+              v-show="!selectEye"
+            />
+            <span class="warning" v-show="warning.pass">密码不能为空</span>
+          </div>
+          <div class="login-user login-valid" :class="{ 'select-border': change.valid }">
+            <img class="user-icon" src="./images/valid.svg" />
+            <input
+              type="text"
+              class="user-input"
+              placeholder="请输入验证码"
+              v-model="userInfo.captchaCode"
+              @focus="reduceBorder('valid')"
+              @blur="addBorder('valid')"
+            />
+            <img class="valid-img" :src="codeSrc" alt="暂无验证码" @click="reloadCaptcha">
+            <span class="warning" v-show="warning.valid">验证码不能为空</span>
+          </div>
+          <div id="loginBtn" class="login-btn" @click="goHome">登录</div>
         </div>
-        <div class="login-user user-mt" :class="{ 'select-border': change.pass }">
-          <img class="user-icon" src="./images/password.svg" />
-          <input
-            type="password"
-            class="user-input"
-            placeholder="请输入密码"
-            v-model="userInfo.password"
-            v-show="!selectEye"
-            @focus="reduceBorder('pass')"
-            @blur="addBorder('pass')"
-          />
-          <input
-            type="text"
-            class="user-input"
-            placeholder="请输入密码"
-            v-model="userInfo.password"
-            v-show="selectEye"
-            @focus="reduceBorder('pass')"
-            @blur="addBorder('pass')"
-          />
-          <img
-            class="password-eye"
-            src="./images/open.svg"
-            @click="selectEyes"
-            v-show="selectEye"
-          />
-          <img
-            class="password-eye"
-            src="./images/close.svg"
-            @click="selectEyes"
-            v-show="!selectEye"
-          />
-          <span class="warning" v-show="warning.pass">密码不能为空</span>
-        </div>
-        <div class="login-user login-valid" :class="{ 'select-border': change.valid }">
-          <img class="user-icon" src="./images/valid.svg" />
-          <input
-            type="text"
-            class="user-input"
-            placeholder="请输入验证码"
-            v-model="userInfo.captchaCode"
-            @focus="reduceBorder('valid')"
-            @blur="addBorder('valid')"
-          />
-          <img class="valid-img" :src="codeSrc" alt="暂无验证码" @click="reloadCaptcha">
-          <span class="warning" v-show="warning.valid">验证码不能为空</span>
-        </div>
-        <div id="loginBtn" class="login-btn" @click="goHome">登录</div>
       </div>
     </div>
   </div>
@@ -198,6 +200,11 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+input::placeholder{
+  color: #878787;
+  font-size: 14px;
+  font-family:Arial, Helvetica, sans-serif
+}
 #login {
   width: 100vw;
   height: 100vh;
@@ -205,11 +212,18 @@ export default {
   background-size: 100% 100%;
   overflow: hidden;
   position: relative;
+  .login-content-wrap{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
   .login-logo {
-    margin-top: 18vh;
     height: 70px;
     width: 100%;
     text-align: center;
+    position: absolute;
+    top: -70px;
   }
   .login-logo img {
     height: 100%;