以下是一些常见的登录页面布局：
1. 中心布局 - 登录表单位于页面的中心位置，通常包括用户名输入框、密码输入框、登录按钮等元素。页面背景简洁，以突出登录表单。 - 这种布局常见于大多数网站和应用，简洁明了，用户注意力容易集中在登录操作上。
2. 左右布局 - 将页面分为左右两部分，一侧放置登录表单，另一侧可能会展示一些相关的信息，如网站或应用的介绍、特色功能、安全提示等。 - 这种布局可以在用户登录的同时提供一些额外的有用信息。
3. 顶部导航栏布局 - 页面顶部有导航栏，包含登录、注册等链接，登录表单则在页面主体部分。 - 适合网站或应用具有多个页面和功能，用户可以方便地在登录和其他页面之间切换。
4. 卡片式布局 - 登录表单以卡片的形式呈现，具有明显的边框和阴影，与页面背景形成区分。 - 这种布局可以使登录表单看起来更加突出和独立。
5. 响应式布局 - 能够根据不同设备的屏幕尺寸自动调整布局，以提供最佳的用户体验。在小屏幕设备上，可能会采用单列布局，而在大屏幕设备上则可以采用更复杂的布局方式。
6. 社交媒体快捷登录布局 - 除了常规的用户名和密码登录方式，还提供通过社交媒体账号（如微信、QQ、微博等）快速登录的选项。 - 方便用户选择自己熟悉和便捷的登录方式。
7. 分步登录布局 - 将登录过程分为多个步骤，例如第一步输入用户名，第二步输入密码等，逐步引导用户完成登录。 - 有助于减少用户一次性输入大量信息的压力。
8. 全屏幕布局 - 登录表单占据整个屏幕，提供沉浸式的登录体验，减少干扰。 不同的布局方式各有特点，选择哪种布局取决于网站或应用的设计风格、目标用户群体以及功能需求等因素。
Login登录页面
<template>
<div class="login-container">
<div class="layer">
<div class="some-space">
<div class="form">
<h2>大数据可视化平台</h2>
<div class="item">
<i class="iconfont icon-user"></i>
<input autocomplete="off"
type="text"
class="input"
v-model="userName"
placeholder="请输入用户名" />
</div>
<div class="item">
<i class="iconfont icon-password"></i>
<input autocomplete="off"
type="password"
class="input"
v-model="userPwd"
maxlength="20"
@keyup.enter="login"
placeholder="请输入密码" />
</div>
<button class="loginBtn"
:disabled="isLoginAble"
@click.stop="login">
立即登录
</button>
<div class="tip">
默认用户名：admin ，默认密码：123456
</div>
</div>
</div>
</div>
<vue-particles color="#6495ED"
:particleOpacity="0.7"
:particlesNumber="80"
shapeType="circle"
:particleSize="4"
linesColor="#6495ED"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.6"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push">
</vue-particles>
<bgAnimation />
<modal title="提示"
:content="modalContent"
:visible.sync="visible"
@confirm="confirm">
</modal>
</div>
</template>
<script>
export default {
name: 'Login',
components: {},
data () {
return {
userName: 'admin',
userPwd: '123456',
visible: false,
modalContent: '这是一段自定义模态框消息'
}
},
computed: {
isLoginAble () {
return !(this.userName && this.userPwd);
}
},
created () { },
mounted () {
},
methods: {
login () {
if (this.userName == 'admin' && this.userPwd == '123456') {
this.$router.push({
path: '/traffic'
})
} else {
this.$Toast({
content: '请输入正确的用户名和密码',
type: 'error',
// hasClose: true
})
}
},
confirm () {
this.visible = false;
console.log('点击确定')
}
}
}
</script>
<style lang="scss" scoped>
.login-container {
.layer {
position: absolute;
height: 100%;
width: 100%;
position: absolute;
height: 100%;
width: 100%;
background-image: url('../assets/bg-4.jpg'); // 增加这一行设置背景图片
background-size: cover; // 调整背景图片的尺寸以适应容器
background-repeat: no-repeat; // 防止背景图片
}
#particles-js {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.some-space {
color: white;
font-weight: 100;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 50%;
z-index: 1001;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-ms-animation: cloud 2s 3s ease-in infinite alternate;
-moz-animation: cloud 2s 3s ease-in infinite alternate;
-webkit-animation: cloud 2s 3s ease-in infinite alternate;
-o-animation: cloud 2s 3s ease-in infinite alternate;
-webkit-animation: cloud 2s 3s ease-in infinite alternate;
animation: cloud 2s 3s ease-in infinite alternate;
.form {
width: 460px;
height: auto;
background: rgba(36, 36, 85, 0.5);
margin: 0 auto;
padding: 35px 30px 25px;
box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
border-radius: 10px;
.item {
display: flex;
align-items: center;
margin-bottom: 25px;
border-bottom: 1px solid #d3d7f7;
i {
color: #d3d7f7;
margin-right: 10px;
}
}
h2 {
text-align: center;
font-weight: normal;
font-size: 26px;
color: #d3d7f7;
padding-bottom: 35px;
}
.input {
font-size: 16px;
line-height: 30px;
width: 100%;
color: #d3d7f7;
outline: none;
border: none;
background-color: rgba(0, 0, 0, 0);
padding: 10px 0;
}
.loginBtn {
width: 100%;
padding: 12px 0;
border: 1px solid #d3d7f7;
font-size: 16px;
color: #d3d7f7;
cursor: pointer;
background: transparent;
border-radius: 4px;
margin-top: 10px;
&:hover {
color: #fff;
background: #0090ff;
border-color: #0090ff;
}
}
.tip {
font-size: 12px;
padding-top: 20px;
}
}
}
}
input::-webkit-input-placeholder {
color: #d3d7f7;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #d3d7f7;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #d3d7f7;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #d3d7f7;
}
@-ms-keyframes cloud {
0% {
-ms-transform: translate(-50%, -50%);
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
-ms-transform: translate(-50%, -40%);
}
}
@-moz-keyframes cloud {
0% {
-moz-transform: translate(-50%, -50%);
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
-moz-transform: translate(-50%, -40%);
}
}
@-o-keyframes cloud {
0% {
-o-transform: translate(-50%, -50%);
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
-o-transform: translate(-50%, -40%);
}
}
@-webkit-keyframes cloud {
0% {
-webkit-transform: translate(-50%, -50%);
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
-webkit-transform: translate(-50%, -40%);
}
}
@keyframes cloud {
0% {
transform: translate(-50%, -50%);
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
transform: translate(-50%, -40%);
}
}
</style>代码结构
修改一个初始化响应期
修改自己对应的响应文件index.js
