update

src/assets/css/style.css

@@ -163,7 +163,7 @@ input:focus-visible {
 }
 .search input {
   max-width: 15.625em;
-  padding: 0.3125em 0.9375em;
+  padding: 0.6em 1em;
   font-size: 1em;
   border-radius: 6.25em;
   border: 0.0625em solid #ccc;
@@ -173,12 +173,12 @@ input:focus-visible {
   position: absolute;
   right: 0.625em;
   left: 0;
-  top: 0.1875em;
+  top: 0.4em;
 }
 .search button img {
   width: 1.5625em;
   position: absolute;
-  top: 0.1em;
+  top: 0.2em;
   right: 0;
 }
 .search .error {
@@ -340,6 +340,11 @@ input:focus-visible {
   background-color: #fff;
   border-radius: 1.25em;
 }
+@media (max-width: 600px) {
+  .college-content .main-block.life {
+    padding: 3.125em 1.25em;
+  }
+}
 .college-content .main-block .title {
   padding: 3em 0;
   font-size: 1.875em;
@@ -355,6 +360,7 @@ input:focus-visible {
 @media (max-width: 600px) {
   .college-content .main-block .title {
     margin-left: 0;
+    text-align: center;
   }
 }
 .college-content .main-block .v-breadcrumbs {

src/assets/css/style.scss

@@ -170,7 +170,7 @@ input:focus-visible {
 
   input {
     max-width: 15.625em;
-    padding: 0.3125em 0.9375em;
+    padding: 0.6em 1em;
     font-size: 1em;
     border-radius: 6.25em;
     border: 0.0625em solid #ccc;
@@ -181,12 +181,12 @@ input:focus-visible {
     position: absolute;
     right: 0.625em;
     left: 0;
-    top: 0.1875em;
+    top: 0.4em;
 
     img {
       width: 1.5625em;
       position: absolute;
-      top: 0.1em;
+      top: 0.2em;
       right: 0;
     }
   }
@@ -340,6 +340,10 @@ input:focus-visible {
       background-image: none;
       background-color: #fff;
       border-radius: 1.25em;
+
+      @media (max-width: 600px) {
+        padding: 3.125em 1.25em;
+      }
     }
 
     .title {
@@ -355,6 +359,7 @@ input:focus-visible {
 
       @media (max-width: 600px) {
         margin-left: 0;
+        text-align: center;
       }
     }
 

src/components/CourseCard.vue

@@ -138,7 +138,7 @@ async function deleteFavoriteClass(classId) {
         </div>
       </a>
 
-      <div class="d-flex justify-end mt-3">
+      <div v-if="data.encode" class="d-flex justify-end mt-3">
         <small class="text-gray">編號：{{ data.encode }}</small>
       </div>
       <!-- </router-link> -->

src/views/CollegeGroup/Craft.vue

@@ -175,7 +175,7 @@ const articles = reactive({
   </v-breadcrumbs>
 
   <div
-    class="d-flex flex-column flex-sm-row align-center justify-space-between"
+    class="d-flex flex-column flex-sm-row align-center justify-space-between mb-10 mb-sm-0"
     id="lightCraft"
   >
     <h2 class="title">{{ t("professional_craft_courses") }}</h2>
@@ -258,7 +258,7 @@ const articles = reactive({
     </div> -->
   </div>
 
-  <ul class="course-list mt-16 mt-sm-0">
+  <ul class="course-list">
     <li v-for="(item, index) in classes.list" :key="index" class="mb-10">
       <v-card variant="outlined" class="d-flex flex-column align-center pa-0">
         <h2 class="text-center ma-0 pa-3">{{ item.name }}</h2>

src/views/CollegeGroup/Cross.vue

@@ -200,9 +200,9 @@ async function handleSearch() {
     </div>
   </div>
 
-  <v-row>
+  <v-row class="mt-5 mt-sm-0">
     <v-col cols="12" md="3" lg="2">
-      <v-row class="filter-list">
+      <v-row class="filter-list mt-sm-2">
         <v-col cols="12" sm="6" md="12">
           <v-select
             v-model="selectCategory"
@@ -246,7 +246,7 @@ async function handleSearch() {
       </v-row>
     </v-col>
     <v-col cols="12" md="9" lg="10">
-      <v-row class="cross-courese">
+      <v-row class="cross-courese mt-1 mt-sm-0">
         <v-col
           cols="12"
           md="6"
@@ -461,14 +461,6 @@ async function handleSearch() {
 </template>
 
 <style lang="scss" scoped>
-.main-block {
-  h2 {
-    @media (max-width: 600px) {
-      margin-bottom: 1.875em;
-    }
-  }
-}
-
 .v-input {
   @media (max-width: 600px) {
     max-width: 15.625em;
@@ -511,11 +503,16 @@ async function handleSearch() {
   max-width: 53.125em;
   margin: 6.25em auto 3.125em;
   @media (max-width: 600px) {
-    margin: 3.125em auto;
+    margin: 3.125em auto 0;
   }
   section {
     margin-bottom: 3.125em;
     text-align: center;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     h3 {
       margin-left: -1.25em;
       margin-bottom: 1.5625em;

src/views/CollegeGroup/Life/Apprentice/Contact.vue

@@ -40,13 +40,17 @@ a {
 h4 {
   font-size: 1.5em;
   font-weight: 500;
+  line-height: 1.5em;
   color: var(--purple);
 }
 
-li {
-  margin: 0.9375em 0;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.1em;
+ul {
+  overflow-x: auto;
+  li {
+    margin: 0.9375em 0;
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.1em;
+  }
 }
 </style>

src/views/CollegeGroup/Life/Apprentice/FAQ.vue

@@ -57,7 +57,9 @@ const faqList = [
   <h3 class="sub-title">常見問題</h3>
   <v-expansion-panels>
     <v-expansion-panel v-for="item in faqList" :key="item">
-      <v-expansion-panel-title>{{ item.q }}</v-expansion-panel-title>
+      <v-expansion-panel-title>
+        <p>{{ item.q }}</p>
+      </v-expansion-panel-title>
       <v-expansion-panel-text v-html="item.a"> </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>

src/views/CollegeGroup/Online.vue

@@ -124,8 +124,15 @@ async function selectFilter(type, val) {
 
 let activeCategory = ref(1256);
 
-function setCategory(id) {
+function setCategory(id, index) {
   activeCategory.value = id;
+  // 移除 active
+  categoryList.map((item) => {
+    if (item.active) {
+      item.active = false;
+    }
+  });
+  categoryList[index].active = true;
   console.log("activeCategory.value", activeCategory.value);
   getImediaVideo();
 }
@@ -154,10 +161,14 @@ async function getImediaVideo() {
     imedia.list = [];
     const response = await axios.post(url);
     const list = JSON.parse(response.data.data);
-    list.data.map((item) => imedia.list.push(item));
+    list.data.map((item) => {
+      if (item.video_link) {
+        imedia.list.push(item);
+      }
+    });
     console.log("Imedia data", response.data);
 
-    imediaTotalPages.value = store.getTotalPages(list.sum, 8); // 計算頁數
+    imediaTotalPages.value = store.getTotalPages(imedia.list.length, 8); // 計算頁數
     console.log("imediaTotalPages", imediaTotalPages.value);
     console.log("imedia list", imedia.list);
 
@@ -212,7 +223,7 @@ getImediaVideo();
       <ul class="btn-list">
         <li v-for="(item, index) in categoryList" :key="index" class="mx-3">
           <v-btn
-            @click="setCategory(item.id)"
+            @click="setCategory(item.id, index)"
             class="mb-5"
             :class="{ active: item.active }"
             variant="outlined"
@@ -283,7 +294,11 @@ getImediaVideo();
                   <div class="video-box">
                     <video controls>
                       <source
-                        :src="`${item.video_link.video_source.mp4[3]}?api_access_key=08c9cdf9-a1d6-4997-943c-4f08f34ed2f7`"
+                        :src="`${
+                          item.video_link.video_source.mp4[3]
+                            ? item.video_link.video_source.mp4[3]
+                            : item.video_link.video_source.mp4[2]
+                        }?api_access_key=08c9cdf9-a1d6-4997-943c-4f08f34ed2f7`"
                         type="video/mp4"
                       />
                       Your browser does not support the video tag.
@@ -374,7 +389,7 @@ getImediaVideo();
     </div>
   </div>
 
-  <v-row>
+  <v-row class="mt-5 mt-sm-0">
     <v-col cols="12">
       <v-row>
         <v-col
@@ -425,14 +440,6 @@ getImediaVideo();
 </template>
 
 <style lang="scss" scoped>
-.main-block {
-  h2 {
-    @media (max-width: 600px) {
-      margin-bottom: 1.875em;
-    }
-  }
-}
-
 .v-input {
   @media (max-width: 600px) {
     max-width: 15.625em;

src/views/Courses/Create.vue

@@ -2080,7 +2080,9 @@ function deleteEvent(index) {
                                           <table class="mt-5 event-table">
                                             <tbody>
                                               <tr>
-                                                <td>{{ t("session_date") }}</td>
+                                                <td>
+                                                  {{ t("form.session_date") }}
+                                                </td>
                                                 <td>
                                                   {{
                                                     item.start_time.split(
@@ -2178,10 +2180,10 @@ function deleteEvent(index) {
                                                 <td>{{ item.ATM_address }}</td>
                                               </tr>
 
-                                              <tr>
+                                              <!-- <tr>
                                                 <td>聯絡資訊</td>
                                                 <td>{{ item.contact }}</td>
-                                              </tr>
+                                              </tr> -->
 
                                               <tr>
                                                 <td>

src/views/User/Passport.vue

@@ -157,7 +157,7 @@ function getBankCode(string, type) {
           </p>
         </div>
       </v-col>
-      <v-col cols="12" class="mt-16">
+      <v-col cols="12">
         <div class="d-flex flex-column flex-sm-row justify-center tab-btn mt-5">
           <v-btn
             variant="text"