帮我用vue框架写两个页面，一个登录，一个注册，要有背景图片

由于您没有提供详细的需求和设计，以下是一个简单示例，您可以根据需要进行修改：

登录页面：

<template>
  <div class="login">
    <img src="./login-bg.jpg" alt="login background" class="background">
    <div class="content">
      <h2>Login</h2>
      <form>
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="text" id="username" v-model="username" required>
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" id="password" v-model="password" required>
        </div>
        <button type="submit" class="btn-login" @click.prevent="login">Log In</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // TODO: 实现登录逻辑
    },
  },
};
</script>

<style>
.login {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 20px;
  background-color: rgba(255, 255, 255, .7);
  border-radius: 5px;
}

h2 {
  margin-top: 0;
  margin-bottom: 20px;
}

form {
  display: flex;
  flex-direction: column;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  padding: 5px;
  border: none;
  border-radius: 3px;
  font-size: 16px;
}

button.btn-login {
  margin-top: 20px;
  padding: 10px;
  background-color: #42b983;
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
</style>

注册页面：

<template>
  <div class="register">
    <img src="./register-bg.jpg" alt="register background" class="background">
    <div class="content">
      <h2>Register</h2>
      <form>
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="text" id="username" v-model="username" required>
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input type="password" id="password" v-model="password" required>
        </div>
        <div class="form-group">
          <label for="confirmPassword">Confirm Password:</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" required>
        </div>
        <button type="submit" class="btn-register" @click.prevent="register">Register</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
    };
  },
  methods: {
    register() {
      // TODO: 实现注册逻辑
    },
  },
};
</script>

<style>
.register {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 20px;
  background-color: rgba(255, 255, 255, .7);
  border-radius: 5px;
}

h2 {
  margin-top: 0;
  margin-bottom: 20px;
}

form {
  display: flex;
  flex-direction: column;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  padding: 5px;
  border: none;
  border-radius: 3px;
  font-size: 16px;
}

button.btn-register {
  margin-top: 20px;
  padding: 10px;
  background-color: #42b983;
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
</style>

注意：示例中使用了两个背景图片，需要提前准备好。背景图片应该放在页面的公共文件夹下，例如 `public` 文件夹，以便正确引用图片。也可以将图片放在组件对应的文件夹下，并使用相对路径引用，具体请根据实际情况进行调整。