Skip to content

F
founder_vue
Commit e1ebd57c by 林永鑫
Options

登录页修改

parent 1cafc35c
Showing with 109 additions and 96 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -27,6 +27,7 @@
"sass-resources-loader": "^2.1.1",
"serve": "^12.0.0",
"tui-image-editor": "^3.15.0",
"video.js": "^7.0.3",
"vue": "^2.6.11",
"vue-awesome-swiper": "^3.1.3",
"vue-bus": "^1.2.1",
......
src/main.js
/*
* @Author: your name
* @Date: 2021-09-07 14:39:52
* @LastEditTime: 2021-11-15 11:13:36
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-11-19 15:30:03
* @LastEditors: 林永鑫
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\main.js
* @FilePath: \founder_vue\src\main.js
*/
import Vue from "vue";
import "./plugins/axios";
......@@ -16,14 +16,15 @@ import Util from "./utils/util";
import VueWechatTitle from "vue-wechat-title";
import Watermark from "./utils/watermark.js";
import Driver from "driver.js";
import Video from "video.js";
import "video.js/dist/video-js.css";
import "driver.js/dist/driver.min.css";
import "./assets/css/global.css";
import "./assets/css/el-table-style.css";
import VueClipboard from "vue-clipboard2";
import VueBus from "vue-bus";
// import "lib-flexible";
import './utils/rem'
import "./utils/rem";
//引入svg组件
import IconSvg from "./utils/IconSvg.vue";
......@@ -47,6 +48,8 @@ Vue.prototype.$driver = new Driver({
prevBtnText: "上一步" // Previous button text for this step
});
Vue.prototype.$video = Video;
import Nsloading from "./components/Loading.vue";
Vue.prototype.$store = store;
......
src/views/login/Login1.vue
<template>
<el-container class="manage-page" direction="vertical">
<!-- <div id="homepage_hero_module" class="homepage_hero_module">-->
<!-- <div class="video_container">-->
<!-- <div :style="fixStyle" class="filter"></div>-->
<!-- autoplay 自动播放 loop 循环播放 muted 静音播放-->
<!-- <video autoplay loop muted class="fillWidth" v-on:canplay="canplay">-->
<!-- <source :src="barcgroundUrl" type="video/mp4" />-->
<!-- 浏览器不支持 video 标签，建议升级浏览器。-->
<!-- </video>-->
<!-- &lt;!&ndash; todo 视频加载切换为图片加载 &ndash;&gt;-->
<!-- &lt;!&ndash; 考虑视频加载失败 图片背景效果 &ndash;&gt;-->
<!-- <div class="poster hidden" v-if="!vedioCanPlay">-->
<!-- <img :style="fixStyle" :src="barcgroundImgUrl" alt="" />-->
<!-- </div>-->
<!-- </div>-->
<!-- <img class="bg" src="@/assets/img/login/login.gif" />-->
<div id="homepage_hero_module" class="homepage_hero_module">
<div class="video_container">
<video
id="myVideo"
width="100wh"
height="100vh"
class="fillWidth video-js video"
style="object-fit: fill;"
>
<source :src="barcgroundUrl" type="video/mp4" />
<img :style="fixStyle" :src="barcgroundImgUrl" alt="" />
</video>
</div>
</div>
<!-- <img class="bg" src="@/assets/img/login/login.gif" />-->
<!-- <transition name="slide_fade">-->
<div :style="drawerStyle" class="login_main_layer" v-if="isShow">
<!-- <transition name="login_fade">-->
<div>
<div class=" login_top_layer middle">
<el-image class="login_emblem middle" :src="emblemUrl"></el-image>
<br />
<el-image class="login_system middle" :src="systemUrl"></el-image>
</div>
<div class=" middle margin_top25_bottom10">
<el-button
class="magin_left_right30"
:class="{ active: loginType.accountStatus }"
:autofocus="true"
type="text"
@click="changeLoginType(1)"
>帐号密码登录
</el-button>
<span class="font_color">|</span>
<el-button
class="magin_left_right30"
type="text"
:class="{ active: loginType.keyStatus }"
@click="changeLoginType(2)"
>KEY登录
</el-button>
</div>
<transition name="right-slide">
<div :style="drawerStyle" class="login_main_layer" v-if="loginShow">
<!-- <transition name="login_fade">-->
<div>
<accountsLogin :login-type="loginType.accountStatus"></accountsLogin>
<div class=" login_top_layer middle">
<el-image class="login_emblem middle" :src="emblemUrl"></el-image>
<br />
<el-image class="login_system middle" :src="systemUrl"></el-image>
</div>
<div class=" middle margin_top25_bottom10">
<el-button
class="magin_left_right30"
:class="{ active: loginType.accountStatus }"
:autofocus="true"
type="text"
@click="changeLoginType(1)"
>帐号密码登录
</el-button>
<span class="font_color">|</span>
<el-button
class="magin_left_right30"
type="text"
:class="{ active: loginType.keyStatus }"
@click="changeLoginType(2)"
>KEY登录
</el-button>
</div>
<div>
<accountsLogin
:login-type="loginType.accountStatus"
></accountsLogin>
</div>
<div>
<keyLogin :login-type="loginType.keyStatus"></keyLogin>
</div>
</div>
<div>
<keyLogin :login-type="loginType.keyStatus"></keyLogin>
<!-- </transition>-->
<div class="login_bottom_layer ">
<span class=" font_color"
>Copyright&nbsp;©&nbsp;2021&nbsp;Founder</span
>
</div>
</div>
<!-- </transition>-->
<div class="login_bottom_layer ">
<span class=" font_color">Copyright&nbsp;©&nbsp;2021&nbsp;Founder</span>
</div>
</div>
<!-- </transition>-->
</transition>
</el-container>
</template>
......@@ -72,7 +76,6 @@ export default {
data() {
return {
isShow: false,
loginShow: false,
// drawerHeight: null,
barcgroundUrl: require("../../assets/video/login.mp4"),
......@@ -104,23 +107,41 @@ export default {
},
//初始化方法调用
init() {}
},
created() {
var me = this;
// 动画加载时间
setTimeout(() => {
me.isShow = true;
}, 1000);
// setTimeout(() => {
// me.loginShow = true;
// }, 3000);
init() {},
/**
* @description: 初始化视频方法
* @author: 林永鑫
*/
initVideo() {
this.$video(
"myVideo",
{
//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: false,
loop: true,
//自动播放属性,muted:静音播放
autoplay: true,
muted: true,
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto"
//设置视频播放器的显示宽度（以像素为单位）
},
() => {
setTimeout(() => {
this.loginShow = true;
}, 1000);
}
);
}
},
created() {},
mounted() {
this.loginType.accountStatus = true;
if (localStorage.getItem("token") !== null) {
this.$router.push("/Home/Home");
}
this.initVideo();
// todo 初始登录 帐号密码登录选中状态
// this.init();
// 视频自动适应高度
......@@ -175,7 +196,7 @@ export default {
width: 100vw;
height: 100vh;
overflow: hidden;
background-image: url("../../assets/img/login/login.gif");
/* background-image: url("../../assets/img/login/login.gif"); */
background-repeat: no-repeat;
background-size: 100% 100%;
}
......@@ -225,6 +246,14 @@ div {
.video_container video {
z-index: 0;
position: absolute;
height: 100vh;
width: 100vw;
}
.video_container video source {
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
.video_container .filter {
......@@ -235,34 +264,14 @@ div {
}
/*滑动进入*/
/* 可以设置不同的进入和离开动画 */
/* 设置动画持续时间和动画函数 */
.slide_fade-enter-active {
transition: all 2s ease;
}
.slide_fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
.right-slide-enter,
.right-slide-leave-active {
transform: translateX(430px);
}
.slide_fade-enter, .slide_fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */
{
transform: translateX(1000px);
opacity: 0;
}
/*淡入淡出*/
.login_fade-enter-active,
.login_-leave-active {
/* opacity 透明度 */
transition: opacity 2s;
}
/* .fade-leave-active, 2.1.8 版本以下 */
.login_fade-enter,
.login_fade-leave-to {
opacity: 0;
.right-slide-leave-active,
.right-slide-enter-active {
transition: all 0.8s;
}
@keyframes fade-in {
......@@ -302,7 +311,7 @@ div {
.login_main_layer {
height: 100%;
width: 600px;
position: absolute;
position: fixed;
right: 0;
top: 0;
z-index: 4;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment