网页实现出现问题，代码功能没实现

在写一个简单的登录页面，实现却有问题（如下）

用户名和密码输入框不见了且博客与登陆两字为同一格式在一行
其中login.html文件如下


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 登录页面</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="css/base.css">
</head>
<body>


<div id="app">

<div id="main">
<el-container>
<el-header>博客</el-header>
<el-main>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item prop="username">
<el-input v-model="form.username" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="form.password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login(form)">登录</el-button>
</el-form-item>
</el-form>
</el-main>
</el-container>

</div>

</div>


<script>
const vue=new Vue({
el:"#app",
data(){
return{
form:{
username:"",
password:"",
},
rules:{
username: [
{required:true,message:'请输入用户名',trigger:'blur',type:'string'},
{max:10,message:'用户名过长'}
],
password: [
{required: true,message:'密码不符合要求，应为6-16位',trigger: 'blur',min:6,max: 16}
]
}
}
},
methods:{
login(form){
this.$ref.form.validate((valid)=>{
if(valid){

}else{
console.log('error message')
return false;
}
})
}

},
})

</script>

</body>
</html>

base.css文件如下


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
i{
    font-style: normal
}

li{
    list-style: none
}

img{
    border: 0;
    vertical-align: middle
}

button{
    cursor: pointer
}

a{
    color: #666;
    text-decoration: none
}

a:hover{
    color: #c81623;
}

button,
input{
    font-family: Microsoft YaHei ,Heiti SC,Tahoma,Arial,Hiragine Sans GB,"\5B8B\4F53",sans-serif;
    border: 0;
    outline: none;
}

body{
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei,Heiti SC,Tahoma,Arial,Hiragine Sans GB,"\5B8B\4F53",sans-serif;
    color: #666
}

.hide,
.none{
    display: none
}

.clearfix:after {
    visibility:hidden;
    clear: both;
    display:block;
    content: ".";
    height: 0
}

.clearfix{
    *zoom:1
}

想知道实现的时候为什么与想象中的不符，想知道问题出现在哪以及如何修改修改之后的样子，谢谢啦

你自己都不知道哪里出了问题，怎么让别人帮忙解决问题

【以下回答由 GPT 生成】

您好！根据您提供的信息，问题可能是由于缺少登录功能的实现代码导致的。在您的代码中，虽然有一个登录按钮，但是没有为按钮添加点击事件，并且没有在点击事件中执行任何登录逻辑。

要解决这个问题，您需要按照以下步骤添加登录功能的实现：

首先，在<el-button>标签上添加@click事件，将其绑定到一个具体的方法上。例如，我们可以将其绑定到一个名为login的方法上。修改代码如下：

<el-button type="primary" @click="login">登录</el-button>

接下来，需要在Vue实例中定义form和rules对象，以及一个名为login的方法。您可以在Vue实例的data选项中添加相应的属性，并在methods选项中添加相应的方法。修改代码如下：

new Vue({
  el: '#app',
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      // 在这里执行登录逻辑，可以使用axios发送异步请求进行登录验证等操作
      // 示例代码，可以根据实际需求进行修改
      if (this.$refs.form.validate()) {
        axios.post('/login', this.form)
          .then(response => {
            // 登录成功的处理
            console.log(response.data);
          })
          .catch(error => {
            // 登录失败的处理
            console.error(error);
          });
      }
    }
  }
});

在上述代码中，login方法将被触发，并且在该方法中，您可以执行登录逻辑。这里示例代码使用了axios库发送异步请求到/login接口，您可以根据实际需求进行修改。

请注意，示例中的登录逻辑并不完整，您需要根据实际情况进行详细的实现和错误处理。

希望这个解决方案对您有所帮助！如果您还有其他问题，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^