帮画一个QQ一样的账号密码前端验证界面用ElementUI+vue2

好的，以下是一个简单的QQ账号密码前端验证界面的示例代码，使用了ElementUI和Vue2：

<template>
  <div class="login">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
      <h2>QQ账号登录</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 验证通过，执行登录逻辑
          // ...
        } else {
          // 验证不通过，提示错误
          this.$message.error('请填写完整登录信息')
        }
      })
    }
  }
}
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-form {
  width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
</style>

你可以根据自己的需求调整样式和验证规则。