登陆页面修改

pages/account/login/index.vue

 <template>
-  <div class="page-account">
+  <div class="account">
+    <Carousel v-model="value1" autoplay autoplay-speed="5000" loop class="zmd">
+      <CarouselItem>
+        <div class="bg bg0">1</div>
+      </CarouselItem>
+      <CarouselItem>
+        <div class="bg bg1">1</div>
+      </CarouselItem>
+      <CarouselItem>
+        <div class="bg bg2">1</div>
+      </CarouselItem>
+      <CarouselItem>
+        <div class="bg bg3">1</div>
+      </CarouselItem>
+    </Carousel>
     <div v-if="showI18n" class="page-account-header">
       <i-header-i18n />
     </div>
-    <div class="page-account-container">
+    <div class="main">
+      <div class="ad">
+        <img src="@/assets/images/login/ad.png" />
+      </div>
+      <div class="login">
         <div class="page-account-top">
-        <div class="page-account-top-logo">
+          <div class="page-account-top-logo tc">
             <img src="@/assets/images/logo.png" alt="logo" />
           </div>
-        <div class="page-account-top-desc">SaaS MES 制造执行系统</div>
+          <div class="page-account-top-desc tc">SaaS MES 制造执行系统</div>
         </div>
+        <h3 class="mb10">用户登陆</h3>
         <Login @on-submit="oidc">
           <UserName name="username" value="admin" />
           <Password name="password" value="admin" enter-to-submit />
@@ -19,15 +38,8 @@
           </div>
           <Submit>{{ $t('page.login.submit') }}</Submit>
         </Login>
-      <div class="page-account-other">
-        <!-- <span>{{ $t('page.login.other') }}</span>
-        <img src="@/assets/svg/icon-social-wechat.svg" alt="wechat" />
-        <img src="@/assets/svg/icon-social-qq.svg" alt="qq" />
-        <img src="@/assets/svg/icon-social-weibo.svg" alt="weibo" /> -->
-        <!-- <router-link class="page-account-register" to="./register">{{ $t('page.login.signup') }}</router-link> -->
       </div>
     </div>
-    <!-- <i-copyright /> -->
   </div>
 </template>
 <script>
@@ -106,3 +118,56 @@ export default {
   }
 };
 </script>
+<style lang="less">
+@jianju:50px;
+.account {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  .zmd {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+  }
+  .bg {
+    width: 100%;
+    height: 100vh;
+    background-size: 100% auto;
+  }
+  .bg0 {
+    background-image: url("../../../assets/images/login/bg0.png");
+  }
+  .bg1 {
+    background-image: url("../../../assets/images/login/bg1.png");
+  }
+  .bg2 {
+    background-image: url("../../../assets/images/login/bg2.jpg");
+  }
+  .bg3 {
+    background-image: url("../../../assets/images/login/bg3.png");
+  }
+  .main {
+    position: absolute;
+    z-index: 55;
+    top: @jianju;
+    left: @jianju;
+    right: @jianju;
+    bottom: @jianju;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    .ad{
+      flex: 1;
+      text-align: center;
+      img{margin-top: 400px;}
+    }
+    .login {
+      background-color: white;
+      width: 600px;
+      padding: 100px 50px;     
+    }
+  }
+}
+</style>
\ No newline at end of file