1.实现效果

2.Vue组件

<script setup>
import {onMounted} from "vue";onMounted(()=>{// getAllData()
})
</script><template><div class="login"><div class="form-cont"><div class="form-top"><div class="form-title"><img src="/img/logo.png" alt="xxxxx">警务管理系统</div></div><div class="form-input-box"><div class="user-logo"><img src="/img/user.jpg" alt=""></div><form class="form-horizontal" role="form"><div class="form-group"><label for="firstname"><i class="fa fa-user-o"></i></label><input type="text" class="form-control" id="firstname" placeholder="请输入账号"></div><div class="form-group"><label for="firstname"><i class="fa fa-key"></i></label><input type="password" class="form-control" id="firstname" placeholder="请输入密码"></div><button type="submit" class="btn btn-success btn-block btn-lg">登录</button></form></div></div><div class="login-foot">copy-forever</div></div>
</template>
<style scoped>
@import "/css/bootstrap.min.css";
@import "/css/font-awesome.min.css";
@import "/css/login.css";
</style>

3.样式 

请到我的资源下载