ai-postcard/src/components/Language.vue

<script setup>
import { reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import Marquee from "../components/Marquee.vue";

const route = useRoute();
const router = useRouter();
const { t, locale } = useI18n();

onMounted(() => {
  let lang = route.params.lang;

  if (lang && lang !== "") {
    chooseLang(lang);
  } else {
    let localStorageLang = localStorage.getItem("lang");
    chooseLang(localStorageLang);
  }
});

function chooseLang(lang) {
  console.log("選擇語言：", lang);
  locale.value = lang; // i18n locale
  localStorage.setItem("lang", lang);
  // router.push("/step1");
}

let langList = reactive([
  {
    lang: "中文",
    value: "zh-tw",
  },
  {
    lang: "English",
    value: "en-us",
  },
  {
    lang: "日本語",
    value: "ja-jp",
  },
  {
    lang: "한국어",
    value: "ko-kr",
  },
]);
</script>

<template>
  <div class="lang-content">
    <div style="position: relative">
      <section class="postcard-title">
        <h3>歡迎來到 AI 明信片</h3>
        <p>請選擇您的語言</p>

        <div class="btn-content">
        <button
          v-for="(item, index) in langList"
          :key="index"
          @click="chooseLang(item.value)"
          class="main-btn"
        >
          {{ item.lang }}
        </button>
      </div>
      </section>

      <Marquee />
    </div>
  </div>
</template>

<style lang="scss">
.lang-content {
  width: 100%;
  height: 100vh;
  padding-top: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  // background-color: #231816;
  background-size: cover;
  background-position: center center;
  background-image: url("@/assets/img/background.webp");
  background-blend-mode: multiply;

  section {
    margin: 2rem auto;
    color: white;
  }

  h3 {
    font-size: 2rem;
    margin-bottom: 1rem;

    @media (max-width: 600px) {
      font-size: 1.6rem;
    }
  }

  p {
    font-size: 1.625rem;

    @media (max-width: 600px) {
      font-size: 1.5rem;
    }
  }

  .main-btn {
    margin: 0 auto 2.5rem;
  }

  .btn-content {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-top: 2rem;
    z-index: 100;
  }
}
</style>