Skip to content

A
antaile-web
Commit 7a61c4cd by wangyalan-git
Options

登录页/页脚

parent e1caac1a
Showing with 516 additions and 322 deletions
public/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<style>
body::-webkit-scrollbar {
display: none; /*ChromeSafari*/
}
</style>
</head> </head>
<body> <body class="body">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
......
src/components/Footer.vue
<template> <template>
<div class="footer"> <div class="footer">
<div>安泰乐官网 ｜ 福建福鼎姿国寺 ｜ 江苏沭阳圆觉禅林</div> <el-row :gutter="20" type="flex" justify="space-between">
<div class="tip"> <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-company">
安泰乐集团有限公司 ｜ Copyright ATL All Rights Reserved <img src="@/assets/images/antail.png" alt="" />
闽ICP备16020886号-3 <p class="show-name">安泰乐（厦门）集团有限公司</p>
</div> <p class="show-intro">
安泰乐集团成立于2012年，中国总部位于厦门是
一家专注于中国生命关怀产业，为生命纪念馆提
供设计、装修、管理、服务，一站式解决方案的 专业化管理服务公司。
</p>
<p class="show-tip">©️2021ATL Group.All rights reserved</p>
<p class="show-tip">闽ICP备16020886号-3</p>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-memorials">
<p class="show-name">安泰乐生命纪念馆</p>
<el-row :gutter="10">
<el-col :span="12" v-for="(item, index) in memorials" :key="index">
<div class="show-item">
<img src="@/assets/images/hallw.png" alt="" />
<div>
<p class="show-tip">{{ item.address }}</p>
<p>{{ item.name }}</p>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4" class="show-app">
<div>
<img
src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/whcbqhn.png"
alt=""
/>
<p>
<img src="@/assets/images/WeChat (2).png" alt="" />
关注公众号
</p>
</div>
<div>
<img
src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/app.png"
alt=""
/>
<p>
<img src="@/assets/images/app.png" alt="" />
安泰乐app下载
</p>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-address">
<div class="address">
<img src="@/assets/images/clouds.png" alt="" />
<div>
<p>地址：中国福建省厦门市湖里区同安 商务大厦1号楼9层</p>
<p>电话：0592-5539618</p>
<p>邮件：mail@atlgroup-asia.com</p>
<p>技术支持：云中祠信息科技</p>
</div>
</div>
<div class="show-num">
<img src="@/assets/images/embassy.png" alt="" />
<div>
<p>999,069,35</p>
<p class="show-tip">已建馆人数</p>
</div>
</div>
</el-col>
</el-row>
</div> </div>
</template> </template>
...@@ -12,20 +74,118 @@ ...@@ -12,20 +74,118 @@
export default { export default {
name: "footer", name: "footer",
props: {}, props: {},
data() {
return {
memorials: [
{ name: "天竺生命纪念馆", address: "福建晋江" },
{ name: "南宝生命纪念馆", address: "江西南昌" },
{ name: "天王生命纪念馆", address: "福建古田" },
{ name: "圆觉生命纪念馆", address: "福建晋江" },
{ name: "安泰乐生命纪念馆", address: "福建晋江" },
{ name: "天竺生命纪念馆", address: "湖北孝感" },
],
};
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.footer { .footer {
background: #f3f3f3; background: #f3f3f3;
text-align: center; text-align: left;
padding: 35px calc((100% - 1200px) / 2); padding: 40px 50px 90px;
color: #A9A9A9; color: #999;
font-size: 16px;
>div{
flex-wrap: wrap;
}
}
.show-company {
img {
width: 92px;
height: 68px;
}
.show-intro {
color: #999;
font-size: 16px;
margin-bottom: 20px;
}
}
.show-memorials {
margin-top: 68px;
flex: 1;
.show-item {
display: flex;
align-items: center;
margin-bottom: 5px;
p:last-child {
color: #caa774;
font-size: 16px;
}
img {
width: 55px;
height: 55px;
object-fit: contain;
margin-right: 10px;
}
}
}
.show-app {
margin-top: 60px;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 106px;
height: 106px;
}
p {
color: #020202;
font-size: 12px;
display: flex;
align-items: center;
img {
width: 23px;
height: 27px;
margin-right: 5px;
object-fit: contain;
}
}
}
.show-address {
.address {
display: flex;
line-height: 30px;
img {
width: 134px;
height: 102px;
margin-right: 15px;
}
}
.show-num {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
color: #333;
font-size: 20px;
img {
width: 80px;
height: 58px;
margin-right: 20px;
}
}
}
.show-name {
color: #333;
font-size: 20px; font-size: 20px;
margin: 5px 0 10px 0;
// font-weight: bold;
} }
.tip{ .show-tip {
font-size: 16px; font-size: 16px;
margin-top: 10px; color: #999;
} }
</style> </style>
src/views/Home/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="root"> <div class="root">
<custom-header></custom-header> <custom-header></custom-header>
<!-- 第一屏 --> <!-- 第一屏 -->
<div class="page bg-image" id="page1" @mousewheel="scrollFun"> <div class="page bg-image" id="page1" @mousewheel="scrollFun" :style="'height:' + screenHeight + 'px'">
<!-- 首屏文字 --> <!-- 首屏文字 -->
<transition leave-active-class="titleHidden"> <transition leave-active-class="titleHidden">
<img <img
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
v-if="screenIndex == 1" v-if="screenIndex == 1"
/> />
</transition> </transition>
<!-- 视频 -->
<transition <transition
:enter-active-class="screenIndex == 2 ? 'fallVideo' : ''" :enter-active-class="screenIndex == 2 ? 'fallVideo' : ''"
leave-active-class="screenIndex == 1" leave-active-class="screenIndex == 1"
...@@ -20,10 +21,7 @@ ...@@ -20,10 +21,7 @@
:class="[ :class="[
{ {
'animate-video': 'animate-video':
screenIndex == 2 || screenIndex == 2 || screenIndex == 3 || screenIndex == 4,
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
}, },
'show-video', 'show-video',
]" ]"
...@@ -35,10 +33,7 @@ ...@@ -35,10 +33,7 @@
:class="[ :class="[
{ {
'animate-video': 'animate-video':
screenIndex == 2 || screenIndex == 2 || screenIndex == 3 || screenIndex == 4,
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
}, },
'video', 'video',
]" ]"
...@@ -71,7 +66,10 @@ ...@@ -71,7 +66,10 @@
</div> </div>
</transition> </transition>
<!-- 视频过渡第二屏 --> <!-- 视频过渡第二屏 -->
<transition leave-active-class="animated bounceOutDown"> <transition
enter-active-class="animated opacityShow"
leave-active-class="animated opacityHidden"
>
<div <div
class="show-mask" class="show-mask"
v-if="screenIndex == 2 || screenIndex == 4" v-if="screenIndex == 2 || screenIndex == 4"
...@@ -104,40 +102,13 @@ ...@@ -104,40 +102,13 @@
</div> </div>
<div class="page" id="page2"> <div class="page" id="page2">
<div class="show-tab"> <div class="show-tab">
<video <span v-html="videoSource"></span>
v-if="checkedTab == 1"
autoplay
loop
v-on:canplay="canplay"
muted
ref="video"
>
<source src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/homeTemplate.mp4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</video>
<video
v-if="checkedTab == 2"
autoplay
loop
v-on:canplay="canplay"
muted
ref="video"
>
<source :src="PATH_TO_MP4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</video>
<img <img
v-if="checkedTab == 3" v-if="checkedTab == 3"
src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/show.png" src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/show.png"
alt="" alt=""
class="small" class="small"
/> />
<div class="tab-mask"></div> <div class="tab-mask"></div>
<div class="my-tab"> <div class="my-tab">
<ul> <ul>
...@@ -299,11 +270,11 @@ export default { ...@@ -299,11 +270,11 @@ export default {
this.screenHeight = document.documentElement.clientHeight; this.screenHeight = document.documentElement.clientHeight;
this.main = document.getElementById("main"); this.main = document.getElementById("main");
this.obj = document.getElementsByTagName("div"); this.obj = document.getElementsByTagName("div");
for (let i = 0; i < this.obj.length; i++) { // for (let i = 0; i < this.obj.length; i++) {
if (this.obj[i].className.indexOf("page") != -1) { // if (this.obj[i].className.indexOf("page") != -1) {
this.obj[i].style.height = this.screenHeight + "px"; // this.obj[i].style.height = this.screenHeight + "px";
} // }
} // }
}, },
methods: { methods: {
scrollFun(event) { scrollFun(event) {
...@@ -351,6 +322,18 @@ export default { ...@@ -351,6 +322,18 @@ export default {
limitMoveNum: 1, limitMoveNum: 1,
}; };
}, },
// 计算属性的 getter
videoSource: function () {
// `this` 指向 vm 实例
let url = "";
if (this.checkedTab == 1) {
url =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/homeTemplate.mp4";
} else if (this.checkedTab == 2) {
url = this.PATH_TO_MP4;
}
return `<video autoplay loop muted width="100%" height="100%"><source src="${url}" type="video/mp4"></video>`;
},
}, },
}; };
</script> </script>
...@@ -564,8 +547,9 @@ export default { ...@@ -564,8 +547,9 @@ export default {
height: 100%; height: 100%;
position: relative; position: relative;
// background: no-repeat center bottom / 100% 100%; // background: no-repeat center bottom / 100% 100%;
video{ video {
width: 100%; width: 100%;
height: 100%;
} }
.small { .small {
width: 100%; width: 100%;
...@@ -660,6 +644,18 @@ export default { ...@@ -660,6 +644,18 @@ export default {
-webkit-animation-name: scaleLeftHidden; -webkit-animation-name: scaleLeftHidden;
animation-name: scaleLeftHidden; animation-name: scaleLeftHidden;
} }
.opacityShow {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: opacityShow;
animation-name: opacityShow;
}
.opacityHidden {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: opacityHidden;
animation-name: opacityHidden;
}
.scaleRightHidden { .scaleRightHidden {
-webkit-animation-duration: 0.5s; -webkit-animation-duration: 0.5s;
animation-duration: 0.5s; animation-duration: 0.5s;
...@@ -716,6 +712,30 @@ export default { ...@@ -716,6 +712,30 @@ export default {
transform: translate3d(0px, 93.7356px, 0px); transform: translate3d(0px, 93.7356px, 0px);
} }
} }
@keyframes opacityShow {
from {
opacity: 0;
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
opacity: 1;
}
}
@keyframes opacityHidden {
from {
opacity: 1;
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
opacity: 0;
}
}
@keyframes titleHidden { @keyframes titleHidden {
from { from {
-webkit-transform: translate3d(0px, 93.7356px, 0px); -webkit-transform: translate3d(0px, 93.7356px, 0px);
...@@ -825,7 +845,7 @@ export default { ...@@ -825,7 +845,7 @@ export default {
} }
.show-moretitle { .show-moretitle {
padding-bottom: 50px; padding: 50px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
......
src/views/Login/index.vue
<template> <template>
<div class="homepage-hero-module"> <div class="homepage-hero-module">
<custom-header></custom-header>
<div class="login-container"> <div class="login-container">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" <el-form
label-position="left"> ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-position="left"
>
<div class="title-container"> <div class="title-container">
<h3 class="title">管理员登录</h3> <h3 class="title" :class="checkedTab == 1 ? 'checked' : ''">
账号管理
</h3>
<h3 class="title" :class="checkedTab == 2 ? 'checked' : ''">
管理员登录
</h3>
</div> </div>
<el-form-item prop="username"> <el-form-item prop="username" >
<span class="svg-container svg-container_login"> <div class="form-item">
<svg-icon icon-class="user"/> <div class="svg-container svg-container_login">
</span> <img src="@/assets/images/user.png" alt="" />
<el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="username"/> </div>
<el-input
v-model="loginForm.username"
name="username"
type="text"
auto-complete="on"
placeholder="username"
/>
</div>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<span class="svg-container"> <div class="form-item">
<svg-icon icon-class="password"/> <span class="svg-container">
</span> <img src="@/assets/images/Password.png" alt="" />
<el-input :type="passwordType" v-model="loginForm.password" name="password" auto-complete="on" </span>
placeholder="password" @keyup.enter.native="handleLogin"/> <el-input
:type="passwordType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="password"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd"> <span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye"/> <svg-icon icon-class="eye" />
</span> </span>
</div>
</el-form-item> </el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" <el-button
@click.native.prevent="handleLogin">登录 :loading="loading"
type="primary"
style="width: 100%; margin-bottom: 30px"
@click.native.prevent="handleLogin"
>登录
</el-button> </el-button>
<div style="position:relative">
<div class="tips">
<span> 超级管理员用户名: admin123</span>
<span> 超级管理员用户名：admin123</span>
</div>
<div class="tips">
<span> 商城管理员用户名: mall123</span>
<span> 商城管理员用户名：mall123</span>
</div>
<div class="tips">
<span> 推广管理员用户名: promotion123</span>
<span> 推广管理员用户名：promotion123</span>
</div>
</div>
</el-form> </el-form>
</div> </div>
<div class="video-container">
<div :style="fixStyle" class="filter"></div>
<video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay" muted>
<source :src="PATH_TO_MP4" type="video/mp4"/>
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</video>
<div class="poster hidden" v-if="!vedioCanPlay">
<img :style="fixStyle" :src="PATH_TO_JPEG" alt="背景">
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import jpegPath from "../../assets/images/Computerframe.png" import CustomHeader from "@/components/Header";
import jpegPath from "../../assets/images/Computerframe.png";
export default {
name: 'login',
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('管理员密码长度应大于6'))
} else {
callback()
}
}
return {
vedioCanPlay: false,
fixStyle: '',
PATH_TO_MP4: 'https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4',
PATH_TO_WEBM: '',
PATH_TO_JPEG: '',
loginForm: {
username: 'admin123',
password: 'admin123'
},
loginRules: {
username: [{required: true, message: '管理员账户不允许为空', trigger: 'blur'}],
password: [
{required: true, message: '管理员密码不允许为空', trigger: 'blur'},
{validator: validatePassword, trigger: 'blur'}
]
},
passwordType: 'password',
loading: false
}
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
}, export default {
created() { name: "login",
window.addEventListener('hashchange', this.afterQRScan) components: {
CustomHeader,
this.PATH_TO_JPEG = jpegPath },
this.PATH_TO_MP4 = "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4" data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error("管理员密码长度应大于6"));
} else {
callback();
}
};
return {
checkedTab: 1,
vedioCanPlay: false,
fixStyle: "",
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
PATH_TO_WEBM: "",
PATH_TO_JPEG: "",
loginForm: {
username: "admin123",
password: "admin123",
},
loginRules: {
username: [
{ required: true, message: "管理员账户不允许为空", trigger: "blur" },
],
password: [
{ required: true, message: "管理员密码不允许为空", trigger: "blur" },
{ validator: validatePassword, trigger: "blur" },
],
},
passwordType: "password",
loading: false,
};
},
watch: {
$route: {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true,
},
},
created() {
window.addEventListener("hashchange", this.afterQRScan);
}, this.PATH_TO_JPEG = jpegPath;
destroyed() { this.PATH_TO_MP4 =
window.removeEventListener('hashchange', this.afterQRScan) "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4";
}, },
methods: { destroyed() {
canplay() { window.removeEventListener("hashchange", this.afterQRScan);
this.vedioCanPlay = true },
console.log(this.vedioCanPlay); methods: {
}, canplay() {
showPwd() { this.vedioCanPlay = true;
if (this.passwordType === 'password') { console.log(this.vedioCanPlay);
this.passwordType = '' },
} else { showPwd() {
this.passwordType = 'password' if (this.passwordType === "password") {
} this.passwordType = "";
}, } else {
handleLogin() { this.passwordType = "password";
this.$refs.loginForm.validate(valid => { }
if (valid && !this.loading) { },
this.loading = true handleLogin() {
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => { this.$refs.loginForm.validate((valid) => {
this.loading = false if (valid && !this.loading) {
this.$router.push({path: this.redirect || '/'}) this.loading = true;
}).catch(response => { this.$store
this.$notify.error({ .dispatch("LoginByUsername", this.loginForm)
title: '失败', .then(() => {
message: response.data.errmsg this.loading = false;
}) this.$router.push({ path: this.redirect || "/" });
this.loading = false })
}) .catch((response) => {
} else { this.$notify.error({
return false title: "失败",
} message: response.data.errmsg,
}) });
} this.loading = false;
}, });
mounted: function () { } else {
window.onresize = () => { return false;
const windowWidth = document.body.clientWidth
const windowHeight = document.body.clientHeight
const windowAspectRatio = windowHeight / windowWidth
let videoWidth
let videoHeight
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth
videoHeight = videoWidth * 0.5625
this.fixStyle = {
height: windowWidth * 0.5625 + 'px',
width: windowWidth + 'px',
'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
'margin-left': 'initial'
}
} else {
videoHeight = windowHeight
videoWidth = videoHeight / 0.5625
this.fixStyle = {
height: windowHeight + 'px',
width: windowHeight / 0.5625 + 'px',
'margin-left': (windowWidth - videoWidth) / 2 + 'px',
'margin-bottom': 'initial'
}
}
}
window.onresize()
} }
} });
},
},
mounted: function () {
window.onresize = () => {
const windowWidth = document.body.clientWidth;
const windowHeight = document.body.clientHeight;
const windowAspectRatio = windowHeight / windowWidth;
let videoWidth;
let videoHeight;
if (windowAspectRatio < 0.5625) {
videoWidth = windowWidth;
videoHeight = videoWidth * 0.5625;
this.fixStyle = {
height: windowWidth * 0.5625 + "px",
width: windowWidth + "px",
"margin-bottom": (windowHeight - videoHeight) / 2 + "px",
"margin-left": "initial",
};
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / 0.5625;
this.fixStyle = {
height: windowHeight + "px",
width: windowHeight / 0.5625 + "px",
"margin-left": (windowWidth - videoWidth) / 2 + "px",
"margin-bottom": "initial",
};
}
};
window.onresize();
},
};
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style lang="scss">
$bg: #2d3a4b; $bg: #2d3a4b;
$light_gray: #eee; $light_gray: #eee;
/* reset element-ui css */ /* reset element-ui css */
.login-container { .login-container {
.el-input { .el-input {
display: inline-block; display: inline-block;
height: 47px; height: 47px;
width: 85%; // width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
input { &:-webkit-autofill {
background: transparent; box-shadow: 0 0 0px 1000px $bg inset !important;
border: 0px; -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-appearance: none; -webkit-text-fill-color: #fff !important;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
&:-webkit-autofill {
box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: #fff !important;
}
} }
} }
}
.el-form-item { .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 5px; border-radius: 5px;
color: #454545; color: #454545;
}
} }
}
</style> </style>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b; $bg: #fdb64f;
$dark_gray: #889aa4; $dark_gray: #889aa4;
$light_gray: #eee; $light_gray: #eee;
.login-container { .login-container {
position: fixed; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 9999; background: url("~@/assets/images/denglu.png") no-repeat;
background-size: 100% 100%;
.login-form {
position: absolute;
top: 24%;
right: 12%;
width: 32%;
}
.login-form { .form-item {
position: absolute; display: flex;
left: 0; justify-content: space-between;
right: 0; align-items: center;
width: 520px; }
padding: 35px 35px 15px 35px;
margin: 120px auto;
z-index: 9999;
}
.tips { .svg-container {
font-size: 14px; padding: 6px 5px 6px 15px;
color: #fff; color: $dark_gray;
margin-bottom: 10px; vertical-align: middle;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
span { &_login {
&:first-of-type { font-size: 20px;
margin-right: 16px;
}
}
} }
}
.svg-container { .title-container {
padding: 6px 5px 6px 15px; position: relative;
color: $dark_gray; display: flex;
vertical-align: middle; align-items: center;
width: 30px; justify-content: space-between;
display: inline-block; .title {
font-size: 30px;
font-weight: 400;
color: #888585;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
&_login { &.checked {
font-size: 20px; color: $bg;
} }
} &.checked::after {
width: 40px;
.title-container { height: 3px;
position: relative; content: "";
position: absolute;
.title { left: 50%;
font-size: 26px; bottom: -10px;
font-weight: 400; margin-left: 20px;
color: $light_gray; z-index: 1;
margin: 0px auto 40px auto; background: $bg;
text-align: center;
font-weight: bold;
} }
} }
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
.homepage-hero-module,
.video-container {
position: relative;
height: 100vh;
overflow: hidden;
} }
.video-container .poster img, .show-pwd {
.video-container video {
z-index: 0;
position: absolute; position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
} }
}
.video-container .filter { .homepage-hero-module {
z-index: 1; position: relative;
position: absolute; height: 100vh;
background: rgba(0, 0, 0, 0.4); overflow: hidden;
} }
</style> </style>
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