From aaffd386a75e6bbdc30b515c4bd39a4198992164 Mon Sep 17 00:00:00 2001
From: zhaoxing <zhaoxing@shsening.com>
Date: 星期一, 14 二月 2022 16:35:00 +0800
Subject: [PATCH] 登录页更新，增加背景视频
---
index.html | 2 +-
src/cool/modules/base/pages/login/index.vue | 38 +++++++++++++++++++++++++++++++++++---
public/favicon.ico | 0
src/cool/modules/base/static/video/bg.mp4 | 0
4 files changed, 36 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 4cb4eb1..b5a68ee 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
/>
- <title>绗簩鐢靛巶鏂欏満涓夌淮閲嶅缓</title>
+ <title>鍗庤兘涓婃捣鐭虫礊鍙ｇ浜岀數鍘傛枡鍦轰笁缁撮噸寤�</title>
<link rel="icon" href="favicon.ico" />
<style>
html,
diff --git a/public/favicon.ico b/public/favicon.ico
index 0b823a3..8622d10 100644
--- a/public/favicon.ico
+++ b/public/favicon.ico
Binary files differ
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>
diff --git a/src/cool/modules/base/static/video/bg.mp4 b/src/cool/modules/base/static/video/bg.mp4
new file mode 100644
index 0000000..298db3b
--- /dev/null
+++ b/src/cool/modules/base/static/video/bg.mp4
Binary files differ
--
Gitblit v1.9.1