From aaffd386a75e6bbdc30b515c4bd39a4198992164 Mon Sep 17 00:00:00 2001
From: zhaoxing <zhaoxing@shsening.com>
Date: 星期一, 14 二月 2022 16:35:00 +0800
Subject: [PATCH] 登录页更新，增加背景视频
---
src/cool/modules/base/pages/login/index.vue | 38 +++++++++++++++++++++++++++++++++++---
1 files changed, 35 insertions(+), 3 deletions(-)
diff --git a/src/cool/modules/base/pages/login/index.vue b/src/cool/modules/base/pages/login/index.vue
index ce094d0..71f98bc 100644
--- a/src/cool/modules/base/pages/login/index.vue
+++ b/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>
--
Gitblit v1.9.1