<template>
  <q-page class="flex flex-center bg-grey-2">
    <div class="text-center">
      <h1 class="text-h3 q-mb-md">注册</h1>
      <p class="text-body1">创建新账户，加入我们的游戏社区</p>
    </div>

    <div class="relative-position"></div>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'RegisterPage'
})
</script>

<style scoped>
.relative-position {
  width: 100%;
  height: 900px;
  position: absolute;
  top: 0;
  z-index: 1;
  background-image: linear-gradient(180deg, var(--background-color-mask-a50, rgba(255 255 255 / 0)) min(50%, 360px), var(--body-background-color, hsl(0 0% 97%))), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTkyMCAxMDgwIiB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDgwIj4KPGcgZmlsbD0iIzQzYTU0NyI+Cgk8cGF0aCBmaWxsLW9wYWNpdHk9Ii4xNSIgZD0iTTExMTEuOSAwYy0xNjkuMyAyMDMuMS0xNTQuNyAzNDQuNSAxMjAuNiAzOTguMiAzMzIuNSA2MC42IDI4Ni45IDI3Ni45IDgwLjEgNDg5LjktNjMuNSA1Ni43LTE1MC40IDEyMS41LTI1NC4yIDE5MS45aDQ2LjVjMTE1LjktNzcuNiAyMTIuNi0xNDguNyAyODEuNi0yMTAuNCAyMDYuOS0yMTMgMjUyLjUtNDI5LjMtODAuMS00ODkuOS0yNjYuOS01Mi0yODguOC0xODYuNi0xMzUuNi0zNzkuN2gtNTguOXoiLz48cGF0aCBmaWxsLW9wYWNpdHk9Ii4xMiIgZD0iTTExMTEuOSAwYy0xNjkuMyAyMDMuMS0xNTQuOCAzNDQuNSAxMjAuNiAzOTguMiAzMzIuNSA2MC42IDI4Ni45IDI3Ni45IDgwLjEgNDg5LjktNjMuNSA1Ni43LTE1MC40IDEyMS41LTI1NC4yIDE5MS45aDkyLjZjMTI4LjMtODQuOCAyMzQuOS0xNjIuMyAzMDkuNC0yMjguOCAyMDYuOS0yMTMgMjUyLjUtNDI5LjMtODAuMS00ODkuOS0yNTguNS01MC40LTI4Ny4zLTE3OC0xNTAtMzYxLjNoLTExOC40eiIvPjxwYXRoIGZpbGwtb3BhY2l0eT0iLjEiIGQ9Ik0xMTExLjkgMGMtMTY5LjMgMjAzLjEtMTU0LjcgMzQ0LjUgMTIwLjYgMzk4LjIgMzMyLjUgNjAuNiAyODYuOSAyNzYuOSA4MC4xIDQ4OS45LTYzLjUgNTYuNy0xNTAuNSAxMjEuNS0yNTQuMiAxOTEuOWgxMzguM2MxNDAuOC05MiAyNTcuNi0xNzYgMzM3LjQtMjQ3LjMgMjA2LjktMjEzIDI1Mi41LTQyOS4zLTgwLjEtNDg5LjktMjQ5LjYtNDguNi0yODQuOS0xNjkuNC0xNjMuMi0zNDIuOGgtMTc4Ljl6Ii8+PHBhdGggZmlsbC1vcGFjaXR5PSIuMDgiIGQ9Ik0xMTExLjkgMGMtMTY5LjMgMjAzLjEtMTU0LjcgMzQ0LjUgMTIwLjYgMzk4LjIgMzMyLjUgNjAuNiAyODYuOSAyNzYuOSA4MC4xIDQ4OS45LTYzLjUgNTYuNy0xNTAuNSAxMjEuNS0yNTQuMiAxOTEuOWgxODMuOGMxNTMuNS05OS4zIDI4MC43LTE4OS43IDM2NS44LTI2NS43IDIwNi45LTIxMyAyNTIuNS00MjkuMy04MC4xLTQ4OS45LTI0MC43LTQ3LTI4Mi4xLTE2MC45LTE3NS44LTMyNC40aC0yNDAuMnoiLz48cGF0aCBmaWxsLW9wYWNpdHk9Ii4wNiIgZD0iTTExMTEuOSAwYy0xNjkuMyAyMDMuMS0xNTQuOCAzNDQuNSAxMjAuNiAzOTguMiAzMzIuNSA2MC42IDI4Ni45IDI3Ni45IDgwLjEgNDg5LjktNjMuNSA1Ni43LTE1MC41IDEyMS41LTI1NC4yIDE5MS45aDIyOWMxNjYuMy0xMDYuNiAzMDQuMS0yMDMuNSAzOTQuNS0yODQuMiAyMDYuOS0yMTMgMjUyLjUtNDI5LjMtODAuMS00ODkuOS0yMzEuNi00NS4xLTI3OC43LTE1Mi4zLTE4Ny4zLTMwNS45aC0zMDIuNnoiLz48cGF0aCBmaWxsLW9wYWNpdHk9Ii4xIiBkPSJNNzM5LjQgMGgtMjQyQzI2My4xIDE1Ni40IDk5LjQgMzI3LjkgNzMuMSA1MjguOWMtMzAuNiAyNTUuOCAzODcgMTQ3LjQgMzg3IDMxMi41LTIuOSA3OC0zMS41IDE1Ny4zLTc5LjcgMjM4LjZoMzA3LjJjODUuMi0xMTQuMiAxMzcuOC0yMjMuNyAxNDEuOC0zMzAuOSAwLTE2NS4yLTQxNy42LTU2LjctMzg3LTMxMi41QzQ2My42IDI3NC40IDU3NC4zIDEzMS40IDczOS40IDB6Ii8+PHBhdGggZmlsbC1vcGFjaXR5PSIuMDgiIGQ9Ik03MzkuNCAwaC0xOTVDMzI0LjQgMTUxLjQgMTcyLjIgMzE3LjMgMTQ2LjkgNTEwLjRjLTMwLjYgMjU1LjggMzg3IDE0Ny40IDM4NyAzMTIuNS0zLjEgODMuOS0zNiAxNjkuMi05MSAyNTcuMWgyNDQuNmM4NS4yLTExNC4yIDEzNy44LTIyMy43IDE0MS44LTMzMC45IDAtMTY1LjItNDE3LjYtNTYuNy0zODctMzEyLjVDNDYzLjYgMjc0LjQgNTc0LjMgMTMxLjQgNzM5LjQgMHoiLz48cGF0aCBmaWxsLW9wYWNpdHk9Ii4wNiIgZD0iTTczOS40IDBoLTE0OEMzODYuMSAxNDYuNCAyNDUuMSAzMDYuNyAyMjAuOCA0OTJjLTMwLjYgMjU1LjggMzg3IDE0Ny40IDM4NyAzMTIuNUM2MDQuNSA4OTQuMyA1NjcgOTg1LjcgNTA1IDEwODBoMTgyLjZjODUuMi0xMTQuMiAxMzcuOC0yMjMuNyAxNDEuOC0zMzAuOSAwLTE2NS4yLTQxNy42LTU2LjctMzg3LTMxMi41QzQ2My42IDI3NC40IDU3NC4zIDEzMS40IDczOS40IDB6Ii8+PHBhdGggZmlsbC1vcGFjaXR5PSIuMDQiIGQ9Ik03MzkuNCAwaC05OS41Yy0xOTEuNSAxNDEuNC0zMjIgMjk2LTM0NS4zIDQ3My41LTMwLjYgMjU1LjggMzg3IDE0Ny40IDM4NyAzMTIuNS0zLjUgOTUuNi00NS44IDE5My4xLTExNS4zIDI5NGgxMjEuMmM4NS4yLTExNC4yIDEzNy44LTIyMy43IDE0MS44LTMzMC45IDAtMTY1LjItNDE3LjYtNTYuNy0zODctMzEyLjVDNDYzLjYgMjc0LjQgNTc0LjMgMTMxLjQgNzM5LjQgMHoiLz48cGF0aCBmaWxsLW9wYWNpdHk9Ii4wMiIgZD0iTTczOS40IDBoLTUwLjJDNTExLjEgMTM2LjQgMzkwLjcgMjg1LjIgMzY4LjUgNDU1Yy0zMC42IDI1NS44IDM4NyAxNDcuNCAzODcgMzEyLjUtMy44IDEwMS41LTUxLjEgMjA1LTEyOC4zIDMxMi41aDYwLjNjODUuMi0xMTQuMiAxMzcuOC0yMjMuNyAxNDEuOC0zMzAuOSAwLTE2NS4yLTQxNy42LTU2LjctMzg3LTMxMi41QzQ2My42IDI3NC40IDU3NC4zIDEzMS40IDczOS40IDB6Ii8+CjwvZz4KPC9zdmc+), linear-gradient(135deg, hsl(var(--background-hue) 15% 50% / 75%), hsl(calc(var(--background-hue) + 20) 15% 90% / 50%));
  --background-hue: calc(25 * 6);
  background-position: top center;
  background-size: 100%, auto, cover;
  background-repeat: no-repeat;
}
</style>