update

src/views/HomeView.vue

@@ -85,6 +85,7 @@ p {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  position: relative;
   background-blend-mode: multiply;
   background-image: url("@/assets/img/tandan.webp");
   background-size: cover;

src/views/InteractStep_1.vue

@@ -20,7 +20,8 @@ import Footer from "../components/Footer.vue";
     <section>
       <h3>環保天燈</h3>
       <p>
-        天燈是鐵絲或竹子，紙、油紙組成。當天燈的燃料燒完後，會掉落附近地面，餘火會燒到附近住家的屋頂或菜園、甚至引發森林大火，並且材料會殘留重金屬，可能對生態鏈造成嚴重危害。於是2018年起台灣研 發出了能在空中徹底燃燒成灰的 <br />
+        天燈是鐵絲或竹子，紙、油紙組成。當天燈的燃料燒完後，會掉落附近地面，餘火會燒到附近住家的屋頂或菜園、甚至引發森林大火，並且材料會殘留重金屬，可能對生態鏈造成嚴重危害。於是2018年起台灣研
+        發出了能在空中徹底燃燒成灰的 <br />
         [全紙環保天燈] <br />
         當然，在101放天燈，也非常環保
       </p>
@@ -29,16 +30,21 @@ import Footer from "../components/Footer.vue";
     <router-link to="/interact_step2" class="main-btn mt-10">
       下一步
     </router-link>
-  </div>
 
-  <Footer url="/interact" back="/interacthome" />
+    <Footer url="/interact" back="/interacthome" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .lartern-content {
+  height: 100%;
   padding: 4rem 10vw 0;
   background-image: url("@/assets/img/background.webp");
 
+  @media (max-width: 600px) {
+    padding: 7rem 1rem 0;
+  }
+
   h3 {
     margin-bottom: 10px;
     font-size: 24px;
@@ -47,5 +53,9 @@ import Footer from "../components/Footer.vue";
     color: #fff;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
   }
+
+  .main-btn {
+    margin-bottom: 100px;
+  }
 }
 </style>

src/views/InteractStep_2.vue

@@ -1,19 +1,26 @@
 <script setup>
 import { ref } from "vue";
+import { useRouter } from "vue-router";
 import axios from "axios";
 import Footer from "../components/Footer.vue";
 
+let router = useRouter();
 let loading = ref(false);
 let inputValue = ref("");
 let skyImageUrl = ref("");
 
-function getValue() {
+function getValue(state) {
   loading.value = true;
   axios
     .post(`https://cmm.ai:9101/tendentest?client_message=${inputValue.value}`)
     .then((response) => {
       loading.value = false;
-      skyImageUrl.value = response.data.url;
+
+      if (state) {
+        skyImageUrl.value = response.data.url;
+      } else {
+        window.location = "https://cmm.ai/skylantern/";
+      }
     })
     .catch((error) => {
       loading.value = false;
@@ -51,17 +58,21 @@ function getValue() {
 
     <h3 class="title">寫下你的願望</h3>
     <input v-model="inputValue" type="text" />
-    <div class="d-flex flex-column align-center mt-15">
-      <button @click="getValue()" class="main-btn mb-5">預覽</button>
-      <button class="main-btn">送出</button>
+
+    <div class="d-flex flex-column align-center my-15">
+      <button @click="getValue(true)" class="main-btn mb-5">預覽</button>
+      <button @click="getValue(false)" class="main-btn mb-5">送出</button>
     </div>
-  </div>
 
-  <Footer url="/interact_step1" back="/interacthome" />
+    <Footer url="/interact_step1" back="/interacthome" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .lartern-content {
+  height: 100%;
+  padding-top: 8rem;
+
   input {
     padding: 10px;
     background-color: transparent;
@@ -78,6 +89,10 @@ function getValue() {
     img {
       max-width: 300px;
       height: auto;
+
+      @media (max-width: 600px) {
+        max-width: 250px;
+      }
     }
   }
 }