登录页样式修改

src/views/login/index.vue

@@ -2,65 +2,82 @@
   <div
     class="login-container"
     :style="{ backgroundImage: 'url(' + backdropUrl + ')' }"
-
   >
-    <a-row>
-      <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></a-col>
-      <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
-        <div class="login-container-form">
-          <!-- <div class="login-container-hello">hello!</div> -->
-          <div class="login-container-title">{{ companyName}}</div>
-          <a-form :model="form" @submit="handleSubmit" @submit.prevent>
-            <a-form-item>
-              <a-input v-model:value="form.username" placeholder="Username">
-                <template v-slot:prefix>
-                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
-                </template>
-              </a-input>
-            </a-form-item>
-            <a-form-item>
-              <a-input
-                v-model:value="form.password"
-                type="password"
-                placeholder="Password"
-              >
-                <template v-slot:prefix>
-                  <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
-                </template>
-              </a-input>
-            </a-form-item>
+    <div
+      class="container-inbox"
+      style="width: 800px; background: rgba(0, 0, 0, 0.35)"
+    >
+      <a-row>
+        <a-col
+          :xs="10"
+          :md="10"
+          :sm="10"
+          :lg="10"
+          :xl="10"
+          class="row-left-box"
+          style="display: flex; justify-content: center; align-items: center"
+        >
+          <div>
+            <img :src="`${loginLogo}`" alt="" style="width: 193px" />
+            <div class="login-container-title">{{ companyName }}</div>
+            <div class="row-left-after"></div>
+          </div>
+        </a-col>
+        <a-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
+          <div class="login-container-form">
+            <a-form :model="form" @submit="handleSubmit" @submit.prevent>
+              <a-form-item>
+                <a-input v-model:value="form.username" placeholder="请输入账号">
+                  <template v-slot:prefix>
+                    <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
+                  </template>
+                </a-input>
+              </a-form-item>
+              <a-form-item>
+                <a-input
+                  v-model:value="form.password"
+                  type="password"
+                  placeholder="请输入密码"
+                >
+                  <template v-slot:prefix>
+                    <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
+                  </template>
+                </a-input>
+              </a-form-item>
+
+              <a-form-item>
+                <JcRange
+                  :status="status"
+                  @successFun="onSuccess()"
+                  @errorFun="onError()"
+                ></JcRange>
+              </a-form-item>
 
-            <a-form-item>
-              <JcRange
-                :status="status"
-                @successFun="onSuccess()"
-                @errorFun="onError()"
-              ></JcRange>
-            </a-form-item>
+              <a-form-item>
+                <a-button
+                  type="primary"
+                  html-type="submit"
+                  :disabled="
+                    form.username === '' ||
+                    form.password === '' ||
+                    status == false
+                  "
+                >
+                  登录
+                </a-button>
+              </a-form-item>
+            </a-form>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
 
-            <a-form-item>
-              <a-button
-                type="primary"
-                html-type="submit"
-                :disabled="
-                  form.username === '' ||
-                  form.password === '' ||
-                  status == false
-                "
-              >
-                登录
-              </a-button>
-            </a-form-item>
-          </a-form>
-        </div>
-      </a-col>
-    </a-row>
     <div class="login-container-tips">
       <!-- 基于vue{{ dependencies['vue'] }}
       + ant-design-vue
       {{ dependencies['ant-design-vue'] }}开发 -->
       <!-- 上海永天科技股份有限公司 -->
-      {{loginFooter}}
+      {{ loginFooter }}
     </div>
   </div>
 </template>
@@ -94,7 +111,8 @@ export default {
 
       companyName: '永天智慧电力平台',
       backdropUrl: require('@/assets/login_images/login_background.png'),
-      loginFooter:'上海永天科技股份有限公司'
+      loginFooter: '上海永天科技股份有限公司',
+      loginLogo: require('@/assets/logo2.png'),
     }
   },
   computed: {
@@ -112,7 +130,6 @@ export default {
     },
   },
   mounted() {
-
     this.form.username = '' //admin
     this.form.password = '' //admin123
 
@@ -128,29 +145,27 @@ export default {
     // this.loginFooter='上海永天科技股份有限公司'
   },
   methods: {
-
-  //根据不同的域名，显示不同的title和背景图
+    //根据不同的域名，显示不同的title和背景图
     getLoginStyle() {
       api
         .getLoginStyle({
-          url:window.location.host.indexOf('localhost') != -1 ?'dianli.usky.cn:13201':window.location.host
+          url:
+            window.location.host.indexOf('localhost') != -1
+              ? 'dianli.usky.cn:13201'
+              : window.location.host,
         })
         .then((requset) => {
           if (requset.status === 'SUCCESS') {
-
             this.backdropUrl = requset.data[0].loginBackUrl
             this.companyName = requset.data[0].loginTitle
             this.loginFooter = requset.data[0].loginFooter
-            // this.backdropUrl = requset.data[0].loginBackUrl?requset.data[0].loginBackUrl:require('@/assets/login_images/login_background.png')
-            // this.companyName = requset.data[0].loginTitle?requset.data[0].loginTitle:'永天智慧电力平台'
-            // this.loginFooter = requset.data[0].loginFooter?requset.data[0].loginFooter:'上海永天科技股份有限公司'
+            this.loginLogo = requset.data[0].loginLogo
           } else {
             alert(requset.msg)
           }
         })
     },
 
-
     ...mapActions({
       login: 'user/login',
     }),
@@ -175,21 +190,44 @@ export default {
   },
 }
 </script>
+<style scoped>
+.row-left-box {
+  position: relative;
+}
+.row-left-after{
+  position: absolute;
+  width: 1.5px;
+  height: 76%;
+  position: absolute;
+  right: 0;
+  top: 12%;
+  background:-webkit-linear-gradient(top,  rgba(0, 0, 0, .1) -4%,#1F91EC 50%, rgba(0, 0, 0, .1) 100%);
+
+}
+</style>
 <style lang="less">
+
+
 .login-container {
   width: 100%;
   height: 100vh;
   // background: url('~@/assets/login_images/login_background.png');
   background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   &-form {
-    width: calc(100% - 40px);
-    min-width: 360px;
-    height: 440px;
-    padding: 4vh;
-    margin-top: calc((100vh - 380px) / 2);
-    margin-right: 20px;
-    margin-left: 20px;
-    background: url('~@/assets/login_images/login_form.png');
+    // width: calc(100% - 40px);
+    padding-top: 40px;
+    padding-bottom: 40px;
+    // min-width: 360px;
+    // height: 440px;
+    // padding: 4vh;
+    // margin-top: calc((100vh - 380px) / 2);
+    // margin-right: 20px;
+    // margin-left: 20px;
+    // background: url('~@/assets/login_images/login_form.png');
     background-size: 100% 100%;
     border-radius: 10px;
     box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
@@ -199,10 +237,12 @@ export default {
     color: #fff;
   }
   &-title {
-    margin-bottom: 30px;
-    font-size: 20px;
+    // margin-bottom: 30px;
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 46px;
     color: #fff;
-    text-align:center
+    // text-align: center;
   }
   &-tips {
     position: fixed;
@@ -213,7 +253,8 @@ export default {
     text-align: center;
   }
   .ant-col {
-    width: 100%;
+    width: 360px;
+    margin: 0 auto;
     padding: 0 10px 0 10px;
   }
   .ant-input {