?以下是一些常見(jiàn)的登錄頁(yè)面布局：

1. 中心布局 - 登錄表單位于頁(yè)面的中心位置，通常包括用戶名輸入框、密碼輸入框、登錄按鈕等元素。頁(yè)面背景簡(jiǎn)潔，以突出登錄表單。 - 這種布局常見(jiàn)于大多數(shù)網(wǎng)站和應(yīng)用，簡(jiǎn)潔明了，用戶注意力容易集中在登錄操作上。

2. 左右布局 - 將頁(yè)面分為左右兩部分，一側(cè)放置登錄表單，另一側(cè)可能會(huì)展示一些相關(guān)的信息，如網(wǎng)站或應(yīng)用的介紹、特色功能、安全提示等。 - 這種布局可以在用戶登錄的同時(shí)提供一些額外的有用信息。

3. 頂部導(dǎo)航欄布局 - 頁(yè)面頂部有導(dǎo)航欄，包含登錄、注冊(cè)等鏈接，登錄表單則在頁(yè)面主體部分。 - 適合網(wǎng)站或應(yīng)用具有多個(gè)頁(yè)面和功能，用戶可以方便地在登錄和其他頁(yè)面之間切換。

4. 卡片式布局 - 登錄表單以卡片的形式呈現(xiàn)，具有明顯的邊框和陰影，與頁(yè)面背景形成區(qū)分。 - 這種布局可以使登錄表單看起來(lái)更加突出和獨(dú)立。

5. 響應(yīng)式布局 - 能夠根據(jù)不同設(shè)備的屏幕尺寸自動(dòng)調(diào)整布局，以提供最佳的用戶體驗(yàn)。在小屏幕設(shè)備上，可能會(huì)采用單列布局，而在大屏幕設(shè)備上則可以采用更復(fù)雜的布局方式。

6. 社交媒體快捷登錄布局 - 除了常規(guī)的用戶名和密碼登錄方式，還提供通過(guò)社交媒體賬號(hào)（如微信、QQ、微博等）快速登錄的選項(xiàng)。 - 方便用戶選擇自己熟悉和便捷的登錄方式。

7. 分步登錄布局 - 將登錄過(guò)程分為多個(gè)步驟，例如第一步輸入用戶名，第二步輸入密碼等，逐步引導(dǎo)用戶完成登錄。 - 有助于減少用戶一次性輸入大量信息的壓力。

8. 全屏幕布局 - 登錄表單占據(jù)整個(gè)屏幕，提供沉浸式的登錄體驗(yàn)，減少干擾。 不同的布局方式各有特點(diǎn)，選擇哪種布局取決于網(wǎng)站或應(yīng)用的設(shè)計(jì)風(fēng)格、目標(biāo)用戶群體以及功能需求等因素。

?Login登錄頁(yè)面

<template><div class="login-container"><div class="layer"><div class="some-space"><div class="form"><h2>大數(shù)據(jù)可視化平臺(tái)</h2><div class="item"><i class="iconfont icon-user"></i><input autocomplete="off"type="text"class="input"v-model="userName"placeholder="請(qǐng)輸入用戶名" /></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="請(qǐng)輸入密碼" /></div><button class="loginBtn":disabled="isLoginAble"@click.stop="login">立即登錄</button><div class="tip">默認(rèn)用戶名：admin ，默認(rèn)密碼：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: '這是一段自定義模態(tài)框消息'}},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: '請(qǐng)輸入正確的用戶名和密碼',type: 'error',// hasClose: true})}},confirm () {this.visible = false;console.log('點(diǎn)擊確定')}}
}
</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');  // 增加這一行設(shè)置背景圖片background-size: cover;  // 調(diào)整背景圖片的尺寸以適應(yīng)容器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>

?代碼結(jié)構(gòu)

修改一個(gè)初始化響應(yīng)期

修改自己對(duì)應(yīng)的響應(yīng)文件index.js