<!--
|
* @Description: 登录页面
|
* @Author: 王旭
|
* @Date: 2022-03-07 17:47:27
|
* @LastEditTime: 2023-05-13 13:15:57
|
* @LastEditors: LuLu
|
-->
|
<template>
|
<div class="box">
|
<div class="left">
|
<div class="outer_ring">
|
<div class="loop">
|
<div class="logo"></div>
|
</div>
|
</div>
|
<meteor-shower class="meteor_box"></meteor-shower>
|
</div>
|
<div class="right">
|
<div class="logo_box">
|
<!-- <img src="../../assets/img/login/logo.png" alt="" /> -->
|
</div>
|
<div class="title">{{ APP_NAME }}</div>
|
<forms-box></forms-box>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import meteorShower from "../../components/meteorShower.vue";
|
import formsBox from "./modules/forms.vue";
|
export default {
|
name: "Login",
|
components: {
|
meteorShower,
|
formsBox,
|
},
|
data() {
|
return {
|
APP_NAME:APP_NAME
|
};
|
},
|
methods: {},
|
mounted() {},
|
computed: {},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.box {
|
width: 100%;
|
height: 100%;
|
background: url("../../assets/img/login/bg.png") no-repeat;
|
background-position: center;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
box-sizing: border-box;
|
padding: 40px 0;
|
.left {
|
width: 49%;
|
height: 100%;
|
background: url("../../assets/img/login/dz.png") no-repeat;
|
background-position: center;
|
background-size: 100% 100%;
|
position: relative;
|
.outer_ring {
|
margin: 0 auto;
|
width: 76%;
|
height: 76%;
|
background: url("../../assets/img/login/tuoyuan.png") no-repeat;
|
background-size: contain;
|
background-position: center center;
|
position: relative;
|
.loop {
|
width: 70%;
|
height: 70%;
|
background: url("../../assets/img/login/waihuan.png") no-repeat;
|
background-size: contain;
|
background-position: center center;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-43%, -43%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.logo {
|
width: 58%;
|
height: 58%;
|
background: url("../../assets/img/firstpage/logo.png") no-repeat;
|
background-size: contain;
|
background-position: center center;
|
}
|
}
|
}
|
.meteor_box {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
// width: 100%;
|
height: 40%;
|
}
|
}
|
.right {
|
width: 30%;
|
height: 100%;
|
background: url("../../assets/img/login/juxin.png") no-repeat;
|
background-position: center;
|
background-size: 100% 100%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
.logo_box {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding-bottom: 10px;
|
img {
|
width: 50%;
|
}
|
}
|
.title {
|
text-align: center;
|
font-size: 46px;
|
font-weight: bold;
|
color: #f0fafe;
|
text-shadow: 0px 0px 79px #00a6e2;
|
background: linear-gradient(0deg, #46aef7 0%, #1dd5e6 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
margin-bottom: 40px;
|
}
|
}
|
}
|
|
/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/
|
@keyframes changeright {
|
0% {
|
-webkit-transform: rotate(0deg);
|
}
|
|
50% {
|
-webkit-transform: rotate(180deg);
|
}
|
|
100% {
|
-webkit-transform: rotate(360deg);
|
}
|
}
|
@keyframes changeleft {
|
0% {
|
-webkit-transform: rotate(0deg);
|
}
|
|
50% {
|
-webkit-transform: rotate(-180deg);
|
}
|
|
100% {
|
-webkit-transform: rotate(-360deg);
|
}
|
}
|
</style>
|
