* 使用iview的表單組件實現登錄頁的登錄框 ~~~ ?<template> ? <div class="login-wrapper d-flex justify-content-center"> ? <div class=" bg-white login-header rounded p-3 pt-3"> ? <div class="mb-4 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> ? <Form :label-width="0"> ? <FormItem> ? ? ?<Input v-model="formItem.username" placeholder="請輸入用戶名..."></Input> ? </FormItem> ? <FormItem> ? ? ?<Input type="password" v-model="formItem.password" placeholder="請輸入密碼..."></Input> ? </FormItem> ? <div class="d-flex align-items-center mb-2"> ? <Checkbox v-model="formItem.remember">自動登錄</Checkbox> ? <a href="#" class="ml-auto small">忘記密碼?</a> ? <span class="mx-1">|</span> ? <a href="#" class="small">注冊賬戶</a> ? </div> ? <FormItem> ? ? ?<Button type="primary" long>登錄</Button> ? </FormItem> ? </Form> ? </div> ? </div> ?</template> ?? ?<script> ?export default { ? data(){ ? return { ? formItem : { ? username : "", ? password : "", ? remember : false ? } ? } ? } ?} ?</script> ?? ?<style scoped="scoped"> ?.login-wrapper{ ? height : 100%; ? background-color: #515a56; ?} ?.login-header{ ? width: 380px; ? margin-top: 50px; ? height: max-content; ?} ?</style> ?? ~~~