update ui

frontend/src/views/main/Main.vue

@@ -33,6 +33,12 @@ export default {
       );
     }
 
+    (function () {
+      if (window.innerWidth < 600) {
+        switchShowDrawer();
+      }
+    })();
+
     function logout() {
       mainStore.logOut();
     }
@@ -58,7 +64,7 @@ export default {
       logout,
       lang,
       setLang,
-      appName
+      appName,
     };
   },
   beforeRouteEnter(to, from, next) {
@@ -85,10 +91,16 @@ const routeGuardAdmin = async (
     <v-navigation-drawer persistent :rail="miniDrawer" v-model="showDrawer">
       <v-sheet class="d-flex flex-column fill-height">
         <v-sheet>
-          <a class="d-flex justify-center mt-3">
+          <!-- <a href="https://ai.choozmo.com/ai-presenter/info/" class="d-flex justify-center mt-3">
             <img src="@/assets/img/Choozmo-logo.png" alt="" class="logo-img" />
-          </a>
+          </a> -->
           <v-list>
+            <v-list-item
+              class="py-4"
+              @click="switchShowDrawer"
+              :prepend-icon="miniDrawer ? 'chevron_right' : 'chevron_left'"
+            >
+            </v-list-item>
             <!-- <v-list-subheader><span v-show="!miniDrawer">Main menu</span></v-list-subheader> -->
             <v-list-item to="/main/dashboard" prepend-icon="dashboard">
               <v-list-item-title>{{ t("dashboard") }}</v-list-item-title>
@@ -140,12 +152,23 @@ const routeGuardAdmin = async (
               <v-list-item-title>{{ t("logout") }}</v-list-item-title>
             </v-list-item>
             <v-divider></v-divider>
-            <v-list-item
+            <a
+              href="https://ai.choozmo.com/ai-presenter/info/"
+              class="d-flex justify-center mt-3"
+              target="_blank"
+            >
+              <img
+                src="@/assets/img/Choozmo-logo.png"
+                alt="Choozmo-logo"
+                class="logo-img"
+              />
+            </a>
+            <!-- <v-list-item
               @click="switchMiniDrawer"
               :prepend-icon="miniDrawer ? 'chevron_right' : 'chevron_left'"
             >
               <v-list-item-title>{{ t("collapse") }}</v-list-item-title>
-            </v-list-item>
+            </v-list-item> -->
           </v-list>
         </v-sheet>
       </v-sheet>
@@ -163,7 +186,7 @@ const routeGuardAdmin = async (
             <!-- <v-list-item to="/main/profile" append-icon="person">
               <v-list-item-title>{{ t("userProfile") }}</v-list-item-title>
             </v-list-item> -->
-            
+
             <!-- <v-list-item to="/main/profile" append-icon="language">
               <v-list-item-title>{{ t("language") }}</v-list-item-title>
             </v-list-item> -->
@@ -196,7 +219,7 @@ const routeGuardAdmin = async (
 
     <v-footer class="pa-3" app>
       <v-spacer></v-spacer>
-      <span>&copy; {{ appName }}</span>
+      <span>&copy; ChoozMo</span>
     </v-footer>
   </div>
 </template>
@@ -212,7 +235,7 @@ const routeGuardAdmin = async (
 }
 
 .logo-img {
-  max-width: 200px;
+  max-width: 150px;
 }
 
 .card-title {

frontend/src/views/main/Upload.vue

@@ -65,6 +65,65 @@ async function Submit() {
       </v-card-actions>
     </v-card>
 
+    <v-card class="ma-3 pa-3 mt-8">
+      <v-card-title primary-title>
+        <h3 class="text-center">使用教學</h3>
+      </v-card-title>
+      <v-card-text>
+        <ul class="mt-5 step-list">
+          <li>
+            <h4>1. 取得快速製作模板</h4>
+            <p class="excerpt">請點擊按鈕下載 excel 檔範例</p>
+            <div class="mb-5">
+              <a
+                href="https://video.choozmo.com/register.html"
+                class="link-btn"
+                target="_blank"
+                >點我下載</a
+              >
+            </div>
+          </li>
+          <li>
+            <h4>2. 準備影片內容</h4>
+            <p class="excerpt">
+              準備一個資料夾，裡面有一個 "素材資料夾" 跟 "EXCEL 檔"
+            </p>
+            <img src="@/assets/img/step/step-01.png" alt="" class="mb-4" />
+            <p class="excerpt">素材資料夾裡面放照片或影片</p>
+            <img src="@/assets/img/step/step-02.png" alt="" />
+            <small class="d-block ms-4"
+              >包含內容：圖片／影片（.jpg／.mp4）</small
+            >
+            <p class="mt-5 excerpt">
+              EXCEL 檔整理成這個格式－大標題、字幕、素材、音檔
+            </p>
+            <img src="@/assets/img/step/step-03.png" alt="" />
+            <ul class="point-list">
+              <li>1. 字幕之間的斷句 使用符號【¥】</li>
+              <li>2. 字幕每一句段落勿超過中文 25 字、英文 50 字</li>
+              <li>3. 大標題字數勿超過中文 15 字、英文 30 字</li>
+              <li>4. 音檔留空白</li>
+            </ul>
+            <p class="mt-5 excerpt">以下為顯示效果：</p>
+            <img src="@/assets/img/step/step-04.png" alt="" />
+            <p class="mt-5 excerpt">
+              接下來同時選素材資料夾跟 EXCEL 檔，壓縮成 ZIP 檔
+            </p>
+            <img src="@/assets/img/step/step-05.png" alt="" class="my-5" />
+          </li>
+          <li>
+            <h4>3. 上傳 ZIP 資料夾至 AI Spokesgirl 平台</h4>
+            <p class="excerpt">影片檔名請寫上影片名稱</p>
+            <img src="@/assets/img/step/step-06.png" alt="" />
+            <h4 class="my-5 caption">
+              點選“送出”之後需等待一段影片製作的時間 <br />
+              請您耐心等候，待製作完畢可於影片清單查看
+            </h4>
+          </li>
+        </ul>
+      </v-card-text>
+    </v-card>
+
     <template>
       <div class="text-center">
         <v-dialog v-model="dialog" width="auto">
@@ -90,3 +149,58 @@ async function Submit() {
     </template>
   </v-container>
 </template>
+
+<style lang="scss">
+.step-list {
+  list-style: none;
+  img {
+    width: 100%;
+    max-width: 800px;
+  }
+  li {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 16px;
+    h4 {
+      margin: 20px auto;
+      color: #ea5413;
+      font-weight: bold;
+      text-align: center;
+      line-height: 34px;
+      font-size: 20px;
+    }
+  }
+
+  .link-btn {
+    display: inline-block;
+    padding: 12px 20px;
+    margin-top: 25px;
+    border-radius: 100px;
+    text-decoration: none;
+    color: #fff;
+    background: #ea5413;
+    transition: all 0.3s;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .point-list {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    margin-left: 40px;
+  }
+
+  .excerpt::before {
+    content: "";
+    font-weight: bold;
+    display: inline-block;
+    border: 5px solid #ea5413;
+    border-radius: 20px;
+    margin-right: 10px;
+    margin-bottom: 2px;
+  }
+}
+</style>