CSS上下左右居中设置

最新推荐文章于 2025-01-11 22:06:52 发布

猿陆柒

最新推荐文章于 2025-01-11 22:06:52 发布

阅读量675

点赞数

分类专栏：前端文章标签： css vue web

本文链接：https://blog.youkuaiyun.com/qq_42426937/article/details/107160749

版权

前端专栏收录该内容

5 篇文章

订阅专栏

代码

<template>
     <div class="login">
          <a-card title="登   录" :bordered="true" class="containers">
               <a-form-model layout="vertical" :model="loginForm" @submit="handleSubmit" @submit.native.prevent>
                    <a-form-model-item>
                         <a-input v-model="loginForm.username" placeholder="用户名" style="width:300px">
                              <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
                         </a-input>
                    </a-form-model-item>
                    <a-form-model-item>
                         <a-input v-model="loginForm.password" type="password" placeholder="密 码" style="width:300px">
                              <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                         </a-input>
                    </a-form-model-item>
                    <a-form-model-item>
                         <a-button type="primary" html-type="submit" :disabled="loginForm.username === '' || loginForm.password === ''" style="width:300px">
                              登 录
                         </a-button>
                    </a-form-model-item>
               </a-form-model>
          </a-card>
     </div>
</template>
<script>
export default {
     data() {
          return {
               loginForm:{
                    username: '',
                    password: '',
               },
          };
     },
     methods: {
          handleSubmit() {
               console.log(this.loginForm);
          },
     },
};
</script>
<style scoped>
.login{/*重点 重点  重点  重点  重点  重点  重点  重点*/
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
</style>