当前位置：首页 > news >正文

基于vue的引入登录界面

news 来源：原创 2024/9/19 0:37:26

以下是一些常见的登录页面布局：

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>

代码结构