excel做网站二维码,网站开发的完整流程,做便民网站都需要哪些模块,wordpress仿站以下是一些常见的登录页面布局#xff1a;
1. 中心布局 - 登录表单位于页面的中心位置#xff0c;通常包括用户名输入框、密码输入框、登录按钮等元素。页面背景简洁#xff0c;以突出登录表单。 - 这种布局常见于大多数网站和应用#xff0c;简洁明了#xff0c;用户注意… 以下是一些常见的登录页面布局
1. 中心布局 - 登录表单位于页面的中心位置通常包括用户名输入框、密码输入框、登录按钮等元素。页面背景简洁以突出登录表单。 - 这种布局常见于大多数网站和应用简洁明了用户注意力容易集中在登录操作上。
2. 左右布局 - 将页面分为左右两部分一侧放置登录表单另一侧可能会展示一些相关的信息如网站或应用的介绍、特色功能、安全提示等。 - 这种布局可以在用户登录的同时提供一些额外的有用信息。
3. 顶部导航栏布局 - 页面顶部有导航栏包含登录、注册等链接登录表单则在页面主体部分。 - 适合网站或应用具有多个页面和功能用户可以方便地在登录和其他页面之间切换。
4. 卡片式布局 - 登录表单以卡片的形式呈现具有明显的边框和阴影与页面背景形成区分。 - 这种布局可以使登录表单看起来更加突出和独立。
5. 响应式布局 - 能够根据不同设备的屏幕尺寸自动调整布局以提供最佳的用户体验。在小屏幕设备上可能会采用单列布局而在大屏幕设备上则可以采用更复杂的布局方式。
6. 社交媒体快捷登录布局 - 除了常规的用户名和密码登录方式还提供通过社交媒体账号如微信、QQ、微博等快速登录的选项。 - 方便用户选择自己熟悉和便捷的登录方式。
7. 分步登录布局 - 将登录过程分为多个步骤例如第一步输入用户名第二步输入密码等逐步引导用户完成登录。 - 有助于减少用户一次性输入大量信息的压力。
8. 全屏幕布局 - 登录表单占据整个屏幕提供沉浸式的登录体验减少干扰。 不同的布局方式各有特点选择哪种布局取决于网站或应用的设计风格、目标用户群体以及功能需求等因素。 Login登录页面
templatediv classlogin-containerdiv classlayerdiv classsome-spacediv classformh2大数据可视化平台/h2div classitemi classiconfont icon-user/iinput autocompleteofftypetextclassinputv-modeluserNameplaceholder请输入用户名 //divdiv classitemi classiconfont icon-password/iinput autocompleteofftypepasswordclassinputv-modeluserPwdmaxlength20keyup.enterloginplaceholder请输入密码 //divbutton classloginBtn:disabledisLoginAbleclick.stoplogin立即登录/buttondiv classtip默认用户名admin 默认密码123456/div/div/div/divvue-particles color#6495ED:particleOpacity0.7:particlesNumber80shapeTypecircle:particleSize4linesColor#6495ED:linesWidth1:lineLinkedtrue:lineOpacity0.6:linesDistance150:moveSpeed3:hoverEffecttruehoverModegrab:clickEffecttrueclickModepush/vue-particlesbgAnimation /modal title提示:contentmodalContent:visible.syncvisibleconfirmconfirm/modal/div
/templatescriptexport 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(点击确定)}}
}
/scriptstyle langscss 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
