登录页更新，增加背景视频

zhaoxing

2022-02-14 aaffd386a75e6bbdc30b515c4bd39a4198992164

 src/cool/modules/base/pages/login/index.vue

@@ -3,7 +3,7 @@
      <div class="box">
         <img class="logo" src="../../static/images/logo.png" alt="" />
         <!-- <p class="desc">{{ app.name }}-华能二厂料场煤堆实时三维建模</p> -->
         <p class="desc">{{ app.name }}-华能二厂料场煤堆实时三维建模</p>			
         <p class="desc">{{ app.name }}-华能二厂料场煤堆实时三维建模</p>

         <el-form label-position="top" class="form" size="medium" :disabled="saving">
            <el-form-item label="用户名">
@@ -50,6 +50,11 @@
         <el-button round size="small" class="submit-btn" :loading="saving" @click="toLogin"
            >登录</el-button
         >
      </div>
      <div class="video">
         <video class="bgvideo" id="bgvideo" autoplay muted loop>
            <source src="../../static/video/bg.mp4" type="video/mp4" />
         </video>
      </div>
   </div>
</template>
@@ -143,7 +148,7 @@
   height: 100vh;
   width: 100vw;
   position: relative;
   background-color: #2f3447;
   background-color: rgba($color: #000000, $alpha: 0.4);

   .box {
      display: flex;
@@ -152,9 +157,14 @@
      align-items: center;
      height: 500px;
      width: 500px;
      padding: 80px 0;
      position: absolute;
      z-index: 9;
      left: calc(50% - 250px);
      top: calc(50% - 250px);
      top: calc(50% - 330px);
      background-color: rgba(47, 52, 71, 0.93);
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba($color: #000000, $alpha: 0.15);

      .logo {
         height: 50px;
@@ -221,5 +231,27 @@
         color: #000;
      }
   }

   .bgvideo {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -9999;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      -webkit-transition: 1s opacity;
      transition: 1s opacity;
   }
   .video {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -10000;
   }
}
</style>