0902 ui update

src/assets/base.css

@@ -3,6 +3,7 @@
   --main-color: #B78C5F;
   --sub-color: #231816;
   --bg-grey: #9A9FA3;
+  --btn-text-color:#8aa0ac;
 }
 
 *,

src/components/Language.vue

@@ -2,6 +2,7 @@
 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();
@@ -23,7 +24,7 @@ function chooseLang(lang) {
   console.log("選擇語言：", lang);
   locale.value = lang; // i18n locale
   localStorage.setItem("lang", lang);
-  router.push("/step1");
+  // router.push("/step1");s
 }
 
 let langList = reactive([
@@ -49,11 +50,13 @@ let langList = reactive([
 <template>
   <div class="lang-content">
     <div style="position: relative">
-      <section>
+      <section class="postcard-title">
         <h3>歡迎來到 AI 明信片</h3>
         <p>請選擇您的語言</p>
       </section>
-      <button
+      <Marquee />
+      <div class="btn-content">
+        <button
         v-for="(item, index) in langList"
         :key="index"
         @click="chooseLang(item.value)"
@@ -61,24 +64,29 @@ let langList = reactive([
       >
         {{ item.lang }}
       </button>
+      </div>
+   
     </div>
   </div>
 </template>
 
 <style lang="scss">
+
 .lang-content {
   width: 100%;
   height: 100vh;
   padding-top: 4rem;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  background-color: #231816;
+  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: 2.5rem auto;
+    margin: 4rem auto;
     color: white;
   }
 
@@ -102,5 +110,12 @@ let langList = reactive([
   .main-btn {
     margin: 0 auto 2.5rem;
   }
+
+  .btn-content{
+    position: absolute;
+    top: 70%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  }
 }
 </style>

src/plugins/vuetify.js

@@ -20,7 +20,7 @@ export default createVuetify({
       light: {
         dark: false,
         colors: {
-          primary: '#B78C5F',
+          primary: '#8aa0ac',
           brown: '#231816',
         },
       },

src/router/index.js

@@ -25,7 +25,7 @@ const router = createRouter({
       component: HomeView,
       children: [
         {
-          path: '/:lang?',
+          path: '',
           component: Language,
         },
         {

src/views/HomeView.vue

@@ -49,13 +49,13 @@ p {
 }
 
 .main-btn {
-  width: 14rem;
-  padding: 0.8rem;
+  width: 15rem;
+  padding: 1.2rem;
   display: block;
   font-size: 1.25rem;
   font-weight: 600;
   color: #fff;
-  background-image: url("../assets/img/button.png");
+  background-image: url("../assets/img/button2.png");
   background-position: center;
   background-size: cover;
   // border: 2px solid var(--main-color);

src/views/Step_2.vue

@@ -108,7 +108,7 @@ span {
     margin-bottom: 2rem;
     border-radius: 100px;
     border: 3px solid transparent;
-    background-image: url("../assets/img/button.png");
+    background-image: url("../assets/img/button2.png");
     background-position: center;
     background-size: cover;
     // background-color: var(--main-color);

src/views/Step_3.vue

@@ -163,7 +163,7 @@ function handleBgImg(race) {
         <img
           v-if="item.race === store.assignRace && store.assignRace !== ''"
           class="icon active"
-          src="../assets/img/confirm.png"
+          src="../assets/img/confirm3.png"
           alt=""
         />
         <img v-else class="icon" src="../assets/img/confirm-solid.png" alt="" />
@@ -216,11 +216,12 @@ function handleBgImg(race) {
   }
 
   .icon {
-    width: 4rem;
+    width: 3.9rem;
     position: absolute;
     top: -1rem;
     right: -2.5rem;
   }
+ 
 }
 
 .slider-btn {

src/views/Step_4.vue

@@ -367,7 +367,7 @@ function checkImg() {
         <img
           v-if="item.name === store.assignBgImg"
           class="icon active"
-          src="../assets/img/confirm.png"
+          src="../assets/img/confirm3.png"
           alt=""
         />
         <img v-else class="icon" src="../assets/img/confirm-solid.png" alt="" />

src/views/Step_6.vue

@@ -325,7 +325,7 @@ const openUploadInput = () => {
   padding: 10px 20px;
   font-size: 1rem;
   p {
-    color: var(--main-color);
+    color: var(--btn-text-color);
   }
 }