gami-web/app/pages/index.vue

<script setup lang="ts">
import LanguageSvg from '~/assets/icons/language.svg'
import ProfileSvg from '~/assets/icons/profile.svg'

definePageMeta({
  auth: false,
})
</script>

<template>
  <div class="min-h-screen bg-bg-primary text-text-primary">
    <div class="relative mx-auto flex flex-col px-4 pt-6 pb-8">
      <div class="header-background absolute left-0 right-0 top-0" />

      <header class="z-10 flex items-center justify-between">
        <div class="bg-white/80 px-4 py-2 text-sm font-semibold shadow-[0_12px_30px_rgba(110,110,110,0.2)] backdrop-blur">
          logo占位
        </div>
        <div class="flex items-center gap-2">
          <LanguageSvg />
          <ProfileSvg />
        </div>
      </header>

      <div class="relative z-10 flex flex-col">
        <HomeNavTabs class="mt-2" />
        <HomeSortSection class="sticky top-0 py-2" />
        <HomePlaymateCards />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-background {
  @include size(100%, 173px);
  @include bg('~/assets/images/home/header-bg.png');
}
</style>