这个样式太丑了、帮我加一个背景图片和登录按钮

好的，我可以帮您添加一个背景图片和美化登录按钮的样式。下面是修改后的示例代码：

<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="formData" label-width="80px" class="login-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="formData.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="login-button" type="primary" @click="handleSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 登录操作
          console.log('登录成功');
        } else {
          console.log('登录失败');
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.login-container {
  background-image: url('your-image-url');
  background-size: cover;
  background-position: center;
  height: 100vh;
}
.login-form {
  max-width: 400px;
  margin: 0 auto;
  margin-top: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 5px;
}
.login-button {
  width: 100%;
  margin-top: 20px;
}
</style>

在这个示例中，我们添加了一个名为 `login-container` 的容器，并将其设置为铺满整个屏幕，并使用 `background-image` 属性添加了一个背景图片。我们还修改了 `login-form` 的样式，使其具有半透明的白色背景、圆角边框和一些内边距。最后，我们美化了登录按钮的样式，使其具有完整的宽度和一些上方的间距。

您需要将 `your-image-url` 替换为您自己的图片链接，以使背景图片生效。希望这个修改后的示例可以满足您的需求。