1. 實現登錄頁布局 - 設置背景顏色 ~~~ ?App.vue頁面 ?? ?<template> ? ?<div id="app"> ? ? ?<router-view /> ? ?</div> ?</template> ?? ?<style> ?html,body,#app{ ? height : 100%; ?} ?</style> ~~~ ~~~ ?login.vue頁面 ?? ?<template> ? <div class="login-wrapper bg-dark"> ? ? </div> ?</template> ?? ?<script> ?</script> ?? ?<style scoped="scoped"> ?.login-wrapper{ ? height : 100%; ?} ?</style> ~~~ - 實現中間登錄框的布局以及居中效果 ~~~ ?<template> ? <div class="login-wrapper d-flex justify-content-center"> ? <div class=" bg-white login-box rounded p-3"> ? <div class="d-flex flex-column align-items-center justify-content-center"> ? <div class="d-flex align-items-center"> ? <Icon type="md-briefcase" size="55" color="#2db7f5" /> ? <h3 class="text-muted ml-2">企業網盤</h3> ? </div> ? <span class="text-muted small mt-3">企業級網盤解決方案</span> ? </div> ? </div> ? </div> ?</template> ?? ?<script> ?</script> ?? ?<style scoped="scoped"> ?.login-wrapper{ ? height : 100%; ? background-color: #515a56; ?} ?.login-box{ ? width: 380px; ? margin-top: 50px; ? height: max-content; ?} ?</style> ~~~