update

src/components/Language.vue

@@ -1,121 +0,0 @@
-<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>

src/router/index.js

@@ -1,7 +1,6 @@
 import { useMainStore } from "@/stores/store";
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import Language from "../components/Language.vue";
 import Step_1 from "../views/Step_1.vue";
 import Step_2 from "../views/Step_2.vue";
 import Step_3 from "../views/Step_3.vue";
@@ -24,10 +23,6 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
       children: [
-        {
-          path: '',
-          component: Language,
-        },
         {
           path: 'step1',
           component: Step_1,

src/views/Step_1.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import "animate.css";
 import Marquee from "../components/Marquee.vue";
@@ -32,6 +32,17 @@ function chooseLang(lang) {
   locale.value = lang; // i18n locale
   localStorage.setItem("lang", lang);
 }
+
+// onMounted(() => {
+//   let lang = route.params.lang;
+
+//   if (lang && lang !== "") {
+//     chooseLang(lang);
+//   } else {
+//     let localStorageLang = localStorage.getItem("lang");
+//     chooseLang(localStorageLang);
+//   }
+// });
 </script>
 
 <template>
@@ -130,4 +141,58 @@ span {
     }
   }
 }
+
+#marquee {
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.lang-content {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  // background-color: #231816;
+  background-size: cover;
+  background-position: center center;
+  background-image: url("@/assets/img/background.webp");
+  background-blend-mode: multiply;
+
+  .postcard-title {
+    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;
+
+    &:last-child {
+      margin: auto;
+    }
+  }
+
+  .btn-content {
+    margin-top: 2rem;
+    position: relative;
+    z-index: 100;
+  }
+}
 </style>