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

zhaoxing

2022-02-14 aaffd386a75e6bbdc30b515c4bd39a4198992164

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

 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,

 public/favicon.ico

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

@@ -51,6 +51,11 @@
                >登录</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>

 src/cool/modules/base/static/video/bg.mp4

Binary files differ