样式调整

 <template>
   <div id="login">
-    <div class="login-logo"><img src="./images/logo-login.svg" /></div>
-    <div class="login-con">
-      <div class="login-img">
-        <div class="content"></div>
-      </div>
-      <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 class="login-content-wrap">
+      <div class="login-logo"><img src="./images/logo-login.svg" /></div>
+      <div class="login-con">
+        <div class="login-img">
+          <div class="content"></div>
         </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 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 id="loginBtn" class="login-btn" @click="goHome">登录</div>
       </div>
     </div>
   </div>
@@ -211,6 +213,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;
@@ -218,17 +225,24 @@ export default {
   background-size: 100%;
   overflow: hidden;
   position: relative;
+  .login-content-wrap{
+    position: absolute;
+    left: 50%;
+    top: calc(50% + 10px);
+    transform: translate(-50%, -50%);
+  }
   .login-logo {
-    margin-top: 18vh;
     height: 70px;
     width: 100%;
     text-align: center;
+    position: absolute;
+    top: -140px;
   }
   .login-logo img {
     height: 100%;
   }
   .login-con {
-    margin: 70px auto;
+    margin: 0 auto;
     width: 936px;
     height: 450px;
     .login-img{
@@ -287,7 +301,7 @@ export default {
     height: 40px;
     border: 1px solid #E5E5E5;
     box-sizing: border-box;
-    margin-top: 30px;
+    margin-top: 34px;
     border-radius: 2px;
     position: relative;
     .user-icon {