update:更改登录页面样式

src/views/login/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
+    <el-form ref="loginForm"
+             :model="loginForm"
+             :rules="loginRules"
+             class="login-form"
+             autocomplete="on"
+             label-position="left">
       <div class="title-container">
         <h3 class="title">LAPP管理平台</h3>
       </div>
@@ -8,53 +13,58 @@
         <span class="svg-container">
           <svg-icon icon-class="login-project" />
         </span>
-        <el-select v-model="loginForm.workshop" style="width: 92%;" filterable placeholder="请选择车间">
-          <el-option
-            v-for="item in options"
-            :key="item.pid"
-            :label="item.descr"
-            :value="item.pid"
-          />
+        <el-select v-model="loginForm.workshop"
+                   style="width: calc(100% - 56px);"
+                   filterable
+                   placeholder="请选择车间">
+          <el-option v-for="item in options"
+                     :key="item.pid"
+                     :label="item.descr"
+                     :value="item.pid" />
         </el-select>
       </el-form-item>
       <el-form-item prop="userid">
         <span class="svg-container">
           <svg-icon icon-class="login-user" />
         </span>
-        <el-input
-          ref="userid"
-          v-model="loginForm.userid"
-          placeholder="用户名"
-          name="userid"
-          type="text"
-          tabindex="1"
-        />
+        <el-input ref="userid"
+                  v-model="loginForm.userid"
+                  placeholder="用户名"
+                  name="userid"
+                  type="text"
+                  tabindex="1" />
       </el-form-item>
 
-      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+      <el-tooltip v-model="capsTooltip"
+                  content="Caps lock is On"
+                  placement="right"
+                  manual>
         <el-form-item prop="password">
           <span class="svg-container">
             <svg-icon icon-class="login-password" />
           </span>
-          <el-input
-            :key="passwordType"
-            ref="password"
-            v-model="loginForm.password"
-            :type="passwordType"
-            placeholder="密码"
-            name="password"
-            tabindex="2"
-            autocomplete="on"
-            @keyup.native="checkCapslock"
-            @blur="capsTooltip = false"
-            @keyup.enter.native="handleLogin"
-          />
-          <span class="show-pwd" @click="showPwd">
-            <svg-icon :icon-class="passwordType === 'password' ? 'login-eye' : 'login-eye-open'" style="font-color:#ffffff" />
+          <el-input :key="passwordType"
+                    ref="password"
+                    v-model="loginForm.password"
+                    :type="passwordType"
+                    placeholder="密码"
+                    name="password"
+                    tabindex="2"
+                    autocomplete="on"
+                    @keyup.native="checkCapslock"
+                    @blur="capsTooltip = false"
+                    @keyup.enter.native="handleLogin" />
+          <span class="show-pwd"
+                @click="showPwd">
+            <svg-icon :icon-class="passwordType === 'password' ? 'login-eye' : 'login-eye-open'"
+                      style="font-color:#ffffff" />
           </span>
         </el-form-item>
       </el-tooltip>
-      <el-button :loading="loading" type="primary" class="login-button" @click.native.prevent="handleLogin">
+      <el-button :loading="loading"
+                 type="primary"
+                 class="login-button"
+                 @click.native.prevent="handleLogin">
         <span v-if="!loading">登 录</span>
         <span v-else>登 录 中...</span>
       </el-button>
@@ -63,7 +73,6 @@
 </template>
 
 <script>
-
 import { getWorkshop } from '@/api/login'
 import { getAllField } from '@/api/system/field'
 
@@ -84,9 +93,7 @@ export default {
         userid: [
           { required: true, trigger: 'blur', message: '用户名不能为空' }
         ],
-        password: [
-          { required: true, trigger: 'blur', message: '密码不能为空' }
-        ]
+        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
       },
       passwordType: 'password',
       capsTooltip: false,
@@ -98,7 +105,7 @@ export default {
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         const query = route.query
         if (query) {
           this.redirect = query.redirect
@@ -120,7 +127,7 @@ export default {
   },
   methods: {
     getPlants() {
-      getWorkshop().then(res => {
+      getWorkshop().then((res) => {
         if (res.code === 200) {
           this.options = res.data
           localStorage.setItem('workshop', JSON.stringify(this.options))
@@ -129,7 +136,10 @@ export default {
     },
     checkCapslock({ shiftKey, key } = {}) {
       if (key && key.length === 1) {
-        if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
+        if (
+          (shiftKey && key >= 'a' && key <= 'z') ||
+          (!shiftKey && key >= 'A' && key <= 'Z')
+        ) {
           this.capsTooltip = true
         } else {
           this.capsTooltip = false
@@ -150,14 +160,15 @@ export default {
       })
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true
           localStorage.removeItem('routerIndex')
-          this.$store.dispatch('user/login', this.loginForm)
+          this.$store
+            .dispatch('user/login', this.loginForm)
             .then(() => {
               this.$router.push({ path: '/' })
-              getAllField().then(res => {
+              getAllField().then((res) => {
                 localStorage.removeItem('allField')
                 localStorage.setItem('allField', JSON.stringify(res.data))
               })
@@ -196,19 +207,40 @@ $cursor: #fff;
 
 /* reset element-ui css */
 .login-container {
+  .svg-container {
+    width: 54px;
+    height: 54px;
+    background: rgba($color: #fff, $alpha: 0.23);
+    border-radius: 3px 0px 0px 3px;
+    display: inline-block;
+    text-align: center;
+    line-height: 60px;
+    .svg-icon {
+      width: 1.5em;
+      height: 1.5em;
+    }
+  }
+  .el-form-item__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid rgba($color: #fff, $alpha: 0.39);
+    border-radius: 4px;
+  }
   .el-input {
     display: inline-block;
     height: 47px;
-    width: 85%;
+    width: calc(100% - 56px);
     input {
       background: transparent;
       border: 0px;
       -webkit-appearance: none;
       border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: #FFFFFF;
-      height: 47px;
-      caret-color: #FFFFFF;
+      padding: 12px 5px 19px 20px;
+      color: #ffffff;
+      height: 56px;
+      caret-color: #ffffff;
+      border-radius: 4px;
 
       // &:-webkit-autofill {
       //   box-shadow: 0 0 0 1000px  rgba(0,76,99,0.9) inset !important;
@@ -218,43 +250,53 @@ $cursor: #fff;
       &:-webkit-autofill:hover,
       &:-webkit-autofill:focus,
       &:-webkit-autofill:active {
-          transition-delay: 111111s;
-          transition: color 11111s ease-out, background-color 111111s ease-out;
+        transition-delay: 111111s;
+        transition: color 11111s ease-out, background-color 111111s ease-out;
       }
     }
   }
   .el-input--suffix {
     width: 104%;
+    right: 5%;
+  }
+
+  .el-select {
+    input {
+      padding: 12px 5px 19px 36px;
+    }
   }
 
   .el-form-item {
-    border-bottom: 1px solid rgba(231,250,255, 0.32);
-    color: #FFFFFF;
+    // border-bottom: 1px solid rgba(231, 250, 255, 0.32);
+    color: #ffffff;
   }
 }
 </style>
 
 <style lang="scss" scoped>
-
 .login-container {
   min-height: 100%;
   width: 100%;
   overflow: hidden;
-  background-image: url('../../assets/imgs/bg_login1.png');
-  background-size: cover;
+  background-image: url('../../assets/imgs/bg_login2.png');
+  // background-size: cover;
+  background-size: 100% 100%;
   background-repeat: no-repeat;
   .login-form {
     position: relative;
-    width: 400px;
     max-width: 100%;
-    padding: 0 5%;
+    padding: 0 4%;
     margin: 0 auto;
     overflow: hidden;
-    margin-right: 6%;
-    width:40%;
-    height:calc(60vh);
-    margin-top:calc(20vh);
-    background: rgba(0,76,99, 0.73);
+    margin-right: 4.5%;
+    // width: 40%;
+    // height: calc(60vh);
+    margin-top: calc(15vh);
+    background: rgba(255, 255, 255, 0.12);
+    width: 30%;
+    height: 65vh;
+    border-radius: 8px;
+    border: 1px solid rgba($color: #ffffff, $alpha: 0.39);
   }
   .tips {
     font-size: 16px;
@@ -272,22 +314,30 @@ $cursor: #fff;
     position: relative;
     .title {
       font-size: 26px;
-      color: #FFFFFF;
-      margin: 10% auto 9% auto;
+      color: #ffffff;
+      margin: 16% auto 9% auto;
       text-align: center;
       font-weight: 700;
     }
   }
-.login-button {
-  width:100%;
-  height: 12%;
-  color:#369bb9;
-  font-weight: 550;
-  background: #FFFFFF;
-  border-radius: 36px;
-  margin-top: 4%;
-  border:0;
-}
+  .login-button {
+    // width: 100%;
+    // height: 12%;
+    // color: #369bb9;
+    // font-weight: 550;
+    // background: #ffffff;
+    // border-radius: 36px;
+    // margin-top: 4%;
+    // border: 0;
+    width: 380px;
+    height: 72px;
+    background: rgba($color: #fff, $alpha: 0.8);
+    box-shadow: 2px 12px 20px 0px rgba(2, 10, 25, 0.16);
+    border-radius: 8px;
+    color: #1467ff;
+    font-size: 1.1em;
+    margin-top: 20px;
+  }
   .show-pwd {
     position: absolute;
     right: 10px;
@@ -303,9 +353,9 @@ $cursor: #fff;
     right: 0;
     bottom: 6px;
   }
-/deep/ .el-select .el-input .el-select__caret {
-  color: #FFFFFF;
-}
+  /deep/ .el-select .el-input .el-select__caret {
+    color: #ffffff;
+  }
   @media only screen and (max-width: 470px) {
     .thirdparty-button {
       display: none;