vue纯静态登录页面

两个组件login组件和app组件

两张图片

第一个组件App

<template>
  <div class="background">
    <login class="a"/>
  </div>
</template>

<script>
import Login from './components/Login.vue'

export default {
  name: 'App',
  components:{
    Login
  }
}
</script>

<style>
*{
  margin: 0px;
  padding: 0px;
}
.background{
    width:100%;  
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    background-image: url('../src/assets/background.jpg') ;
    background-size:100% 100%;
    z-index:-1;
    position: absolute;
}
.a{
  margin-left: 35%;
  margin-top: 15%;
}
</style>

第二个组件login组件

<template>
  <div class="a">
      <input type="text" placeholder="用户名" :value="name"><br/>
      <input type="password" placeholder="密  码" :value="pwd"><br/>
      <button @click="denlu">登录</button>
  </div>
</template>

<script>
export default {
    name:'LogIn',
    data() {
        return {
            name:'',
            pwd:''
        }
    },
    methods:{
        denlu(){
            alert('登录成功')
        }
    }
}
</script>

<style>
.a{
    width: 500px;
    height: 250px;
    background-color: blueviolet;
    background: rgba(18, 37, 18, .5);
    text-align: center; /*可以让盒子内容（文字 行内元素 行内块元素）居中对齐*/
    border-radius:10px;
    
}
input{
   
    margin-top: 10%;
}
button{
    width: 100px;
    border-radius:5px;
    margin-top: 10%;
    background-color: rgb(149, 149, 208);
}
</style>

最终效果