Skip to content

F
founder_vue
Commit e1ebd57c by 林永鑫
Options

登录页修改

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