index width fit

src/views/index/components/login-form-banner.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="fx-column relative">
-    <el-image :src="require('@/assets/images/index/login/banner@2x.png')" class="width100" fit="contain"></el-image>
-    <div class="bg-white absolute" style="width:400px; padding:30px; top:110px; right:150px;">
+  <div class="fx-row fx-end-cen login-form-container" style="padding: 100px 0;">
+    <!--    <el-image :src="require('@/assets/images/index/login/banner@2x.png')" class="width100" fit="contain"></el-image>-->
+    <div class="bg-white" style="width:400px; padding:30px; margin-right: 150px;">
       <img style="width: 60%;margin-left:20%;" src="@/assets/images/login_logo.png"/>
       <div class="f-primary text-center mt20 mb40 bold f18" style="letter-spacing: 10px;">
         WELCOME
@@ -51,7 +51,7 @@
             <span>{{ currentUser.nickName }} {{ schoolName }}</span>
           </p>
         </div>
-        <div class="list-group-item" style="margin-top:20px;border:none">
+        <div class="list-group-item" style="margin-top:10px;border:none">
                                         <span style="display:inline-block;width:33%;text-align:center;cursor:pointer">
                                             <img style="width: 16px;position: relative;top: 2px;margin-right: 5px;"
                                                  src="@/assets/images/icon_jifen.png" alt/>
@@ -96,5 +96,8 @@ export default {
 </script>
 
 <style scoped>
-
+.login-form-container {
+  background: url('../../../assets/images/index/login/banner@2x.png') no-repeat;
+  background-size: cover;
+}
 </style>

src/views/index/login.vue

@@ -434,8 +434,17 @@ export default {
   width: 800px;
 }
 
-.index-block {
-  width: 1350px;
-  overflow: hidden;
+@media screen and (min-width: 1440px) {
+  .index-block {
+    width: 1350px;
+    overflow: hidden;
+  }
+}
+
+@media screen and (max-width: 1439px) {
+  .index-block {
+    width: calc(100vw - 80px);
+    overflow: hidden;
+  }
 }
 </style>