update

src/App.vue

@@ -1,10 +1,46 @@
 <script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import { RouterView } from "vue-router";
+import Footer from "@/components/Footer.vue";
+
+const showGoTop = ref(false);
+
+const checkScrollPosition = () => {
+  showGoTop.value = window.scrollY > 100;
+};
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", checkScrollPosition);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", checkScrollPosition);
+});
 </script>
 
 <template>
   <RouterView />
+  <Transition>
+    <v-btn
+      v-if="showGoTop"
+      @click="scrollToTop"
+      color="purple"
+      icon="mdi-arrow-up-bold"
+      class="top-btn"
+    ></v-btn>
+  </Transition>
+  <Footer />
 </template>
 
 <style lang="scss">
+.top-btn {
+  position: fixed !important;
+  right: 20px;
+  bottom: 20px;
+  z-index: 100;
+}
 </style>

src/assets/css/style.css

@@ -52,6 +52,9 @@ a {
   --main-color: #C39F68;
   --sub-color: #E9F1F4;
   --brown: #3E3A39;
+  --blue: #A7C1CC;
+  --purple: #BCA2B5;
+  --yellow: #E4B662;
 }
 
 * {
@@ -62,10 +65,24 @@ html {
   scroll-behavior: smooth;
 }
 
+h2 {
+  font-weight: 500;
+}
+
 input:focus-visible {
   outline: 2px solid var(--sub-color);
 }
 
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
 @media (min-width: 1920px) {
   .v-container {
     max-width: 1300px !important;
@@ -93,7 +110,9 @@ input:focus-visible {
   }
 }
 .search input {
+  max-width: 250px;
   padding: 5px 15px;
+  font-size: 16px;
   border-radius: 100px;
   border: 1px solid #ccc;
   background-color: #fff;
@@ -197,29 +216,22 @@ input:focus-visible {
     padding: 50px 20px;
   }
 }
-.college-content .main-block h2 {
+.college-content .main-block .title {
+  padding: 80px 0;
+  margin-left: 10px;
   font-size: 30px;
-  font-weight: 500;
   line-height: 32px;
-  margin-left: 10px;
+  letter-spacing: 1px;
 }
 @media (max-width: 960px) {
-  .college-content .main-block h2 {
+  .college-content .main-block .title {
+    padding: 50px 0;
     font-size: 24px;
   }
 }
 @media (max-width: 600px) {
-  .college-content .main-block h2 {
-    margin-left: 0;
-    margin-bottom: 50px;
-  }
-}
-.college-content .main-block .title {
-  padding: 80px 0;
-}
-@media (max-width: 960px) {
   .college-content .main-block .title {
-    padding: 50px 0;
+    margin-left: 0;
   }
 }
 .college-content .main-block .v-breadcrumbs {
@@ -241,7 +253,7 @@ input:focus-visible {
   background-color: var(--sub-color);
 }
 .main-card .card-title {
-  height: 70px;
+  height: 15%;
   padding: 15px;
   display: flex;
   justify-content: center;
@@ -269,6 +281,7 @@ input:focus-visible {
   -webkit-line-clamp: 3;
 }
 .main-card .card-info {
+  height: 85%;
   padding: 15px;
   display: flex;
   flex-direction: column;
@@ -331,4 +344,170 @@ input:focus-visible {
 .tag-btn .item a {
   width: 100%;
   display: block;
+}
+
+.trave-content .info,
+.hope-content .info {
+  position: relative;
+}
+.trave-content .info a,
+.hope-content .info a {
+  position: relative;
+}
+.trave-content .info section,
+.hope-content .info section {
+  margin: auto;
+  position: absolute;
+  bottom: 15px;
+  right: 0;
+  left: 0;
+}
+
+.trave-content .info section,
+.hope-content .info section,
+.exhibit-content .info section {
+  width: 90%;
+  justify-content: center;
+}
+.trave-content .info h3,
+.trave-content .info p,
+.hope-content .info h3,
+.hope-content .info p,
+.exhibit-content .info h3,
+.exhibit-content .info p {
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+}
+.trave-content .info h3,
+.hope-content .info h3,
+.exhibit-content .info h3 {
+  -webkit-line-clamp: 1;
+}
+.trave-content .info p,
+.hope-content .info p,
+.exhibit-content .info p {
+  max-width: 220px;
+  margin-top: 5px;
+  -webkit-line-clamp: 2;
+}
+
+.trave-content h4,
+.hope-content h4,
+.exhibit-content h4,
+.campus-content h4 {
+  margin-bottom: 20px;
+  font-weight: 400;
+  font-size: 20px;
+  letter-spacing: 1px;
+  line-height: 32px;
+}
+.trave-content p,
+.hope-content p,
+.exhibit-content p,
+.campus-content p {
+  line-height: 28px;
+  letter-spacing: 1px;
+}
+.trave-content .info section,
+.hope-content .info section,
+.exhibit-content .info section,
+.campus-content .info section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  border-radius: 5px;
+  background: rgba(218, 182, 214, 0.8);
+}
+.trave-content .info section h3,
+.hope-content .info section h3,
+.exhibit-content .info section h3,
+.campus-content .info section h3 {
+  margin: 5px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: 1px;
+}
+.trave-content .info section p,
+.hope-content .info section p,
+.exhibit-content .info section p,
+.campus-content .info section p {
+  font-size: 12px;
+}
+
+.link-btn {
+  margin-top: auto;
+  margin-left: auto;
+  display: inline-block;
+  padding: 8px 20px;
+  border-radius: 100px;
+  line-height: 24px;
+  text-align: center;
+  color: #fff;
+  background-color: var(--brown);
+  border: 2px solid transparent;
+  transition: all 0.5s;
+}
+.link-btn:hover {
+  color: var(--brown);
+  border: 2px solid var(--brown);
+  background-color: #fff;
+}
+
+.download-link {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  font-size: 14px;
+  letter-spacing: 1px;
+  color: #fff;
+  border-radius: 100px;
+  background-color: var(--brown);
+  transition: all 0.3s;
+}
+.download-link:hover {
+  opacity: 0.8;
+}
+
+.v-chip {
+  letter-spacing: 1px;
+}
+
+.dp__input {
+  padding: 15px 40px;
+  background-color: #f5f5f5;
+}
+
+.dp__action_row {
+  width: 100%;
+}
+
+.dp__calendar_item {
+  padding: 5px;
+}
+
+.dp__calendar_header_item {
+  font-size: 14px;
+}
+
+.dp__action_button {
+  height: auto;
+  display: flex;
+  align-items: center;
+  padding: 10px !important;
+  margin: 0 5px;
+  font-size: 14px;
+  letter-spacing: 1px;
+}
+
+.v-breadcrumbs-item--link {
+  transition: all 0.3s;
+}
+.v-breadcrumbs-item--link:hover {
+  opacity: 0.7;
+  text-decoration: none !important;
 }/*# sourceMappingURL=style.css.map */

src/assets/css/style.scss

@@ -55,6 +55,9 @@ a {
   --main-color: #C39F68;
   --sub-color: #E9F1F4;
   --brown: #3E3A39;
+  --blue: #A7C1CC; // 霧藍
+  --purple: #BCA2B5; // 粉紫
+  --yellow: #E4B662; // 大地黃
 }
 
 * {
@@ -65,10 +68,25 @@ html {
   scroll-behavior: smooth;
 }
 
+h2 {
+  font-weight: 500;
+}
+
 input:focus-visible {
   outline: 2px solid (var(--sub-color));
 }
 
+// Vue Transition
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
 .v-container {
   @media (min-width: 1920px) {
     max-width: 1300px !important;
@@ -95,11 +113,12 @@ input:focus-visible {
   }
 
   input {
+    max-width: 250px;
     padding: 5px 15px;
+    font-size: 16px;
     border-radius: 100px;
     border: 1px solid #ccc;
     background-color: #fff;
-    // box-shadow: 1px 1px 3px #ccc;
   }
 
   button {
@@ -201,27 +220,20 @@ input:focus-visible {
       padding: 50px 20px;
     }
 
-    h2 {
+    .title {
+      padding: 80px 0;
+      margin-left: 10px;
       font-size: 30px;
-      font-weight: 500;
       line-height: 32px;
-      margin-left: 10px;
+      letter-spacing: 1px;
 
       @media (max-width: 960px) {
+        padding: 50px 0;
         font-size: 24px;
       }
 
       @media (max-width: 600px) {
         margin-left: 0;
-        margin-bottom: 50px;
-      }
-    }
-
-    .title {
-      padding: 80px 0;
-
-      @media (max-width: 960px) {
-        padding: 50px 0;
       }
     }
 
@@ -245,7 +257,7 @@ input:focus-visible {
   background-color: var(--sub-color);
 
   .card-title {
-    height: 70px;
+    height: 15%;
     padding: 15px;
     display: flex;
     justify-content: center;
@@ -279,7 +291,7 @@ input:focus-visible {
   }
 
   .card-info {
-    // height: 85%;
+    height: 85%;
     padding: 15px;
     display: flex;
     flex-direction: column;
@@ -351,4 +363,179 @@ input:focus-visible {
       display: block;
     }
   }
-}
+}
+
+// 生活工藝
+.trave-content,
+.hope-content {
+  .info {
+    position: relative;
+
+    a {
+      position: relative;
+    }
+
+    section {
+      margin: auto;
+      position: absolute;
+      bottom: 15px;
+      right: 0;
+      left: 0;
+    }
+  }
+}
+
+.trave-content,
+.hope-content,
+.exhibit-content {
+  .info {
+    section {
+      // max-width: 300px;
+      width: 90%;
+      justify-content: center;
+    }
+
+    h3,
+    p {
+      line-height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      line-break: after-white-space;
+    }
+
+    h3 {
+      -webkit-line-clamp: 1;
+    }
+
+    p {
+      max-width: 220px;
+      margin-top: 5px;
+      -webkit-line-clamp: 2;
+    }
+  }
+}
+
+.trave-content,
+.hope-content,
+.exhibit-content,
+.campus-content {
+  h4 {
+    margin-bottom: 20px;
+    font-weight: 400;
+    font-size: 20px;
+    letter-spacing: 1px;
+    line-height: 32px;
+  }
+
+  p {
+    line-height: 28px;
+    letter-spacing: 1px;
+  }
+
+  .info {
+    section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 10px;
+      border-radius: 5px;
+      background: rgba(218, 182, 214, 0.8);
+
+      h3 {
+        margin: 5px;
+        font-weight: 400;
+        line-height: 22px;
+        letter-spacing: 1px;
+      }
+
+      p {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.link-btn {
+  margin-top: auto;
+  margin-left: auto;
+  display: inline-block;
+  padding: 8px 20px;
+  border-radius: 100px;
+  line-height: 24px;
+  text-align: center;
+  color: #fff;
+  background-color: var(--brown);
+  border: 2px solid transparent;
+  transition: all 0.5s;
+  &:hover {
+    color: var(--brown);
+    border: 2px solid var(--brown);
+    background-color: #fff;
+  }
+}
+
+.download-link {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  font-size: 14px;
+  letter-spacing: 1px;
+  color: #fff;
+  border-radius: 100px;
+  background-color: var(--brown);
+  transition: all .3s;
+  &:hover {
+    opacity: .8;
+  }
+}
+
+.v-chip {
+  letter-spacing: 1px;
+}
+
+// Vue DatePicker
+.dp__input {
+  padding: 15px 40px;
+  background-color: #f5f5f5;
+}
+
+.dp__action_row {
+  width: 100%;
+}
+
+.dp__calendar_item {
+  padding: 5px;
+}
+
+.dp__calendar_header_item {
+  font-size: 14px;
+}
+
+.dp__action_button {
+  height: auto;
+  display: flex;
+  align-items: center;
+  padding: 10px !important;
+  margin: 0 5px;
+  font-size: 14px;
+  letter-spacing: 1px;
+}
+
+.v-breadcrumbs-item--link {
+  transition: all .3s;
+
+  &:hover {
+    opacity: .7;
+    text-decoration: none !important;
+  }
+}
+
+// 移除表單自動填充默認樣式
+// input:-webkit-autofill,
+// input:-webkit-autofill:hover,
+// input:-webkit-autofill:focus,
+// input:-webkit-autofill:active {
+//   transition: background-color 0s 50000s, color 0s 50000s !important;
+// }

src/components/ArticleCard.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { useMainStore } from "@/stores/store";
+import moment from "moment";
+
+const store = useMainStore();
+const props = defineProps({
+  type: {
+    type: String,
+  },
+  data: {
+    type: Object,
+  },
+});
+</script>
+
+<template>
+  <section class="d-flex mb-5 category">
+    <span></span>
+    <p v-show="data.category" class="me-5">
+      {{ data.category }}
+    </p>
+    <p>
+      {{ moment(`${data.create_time}`).format("YYYY-MM-DD") }}
+    </p>
+  </section>
+  <v-card
+    variant="outlined"
+    class="d-flex flex-md-row flex-column align-center pa-5"
+  >
+    <v-row class="align-center">
+      <v-col cols="4" v-if="type === 'article'">
+        <router-link :to="`/article-detail/article/${data.article_id}`">
+          <v-img
+            cover
+            class="mx-auto cover-img"
+            :lazy-src="`https://ntcri.org/${data.cover_img}`"
+            :src="`https://ntcri.org/${data.cover_img}`"
+          >
+            <template v-slot:placeholder>
+              <div class="d-flex align-center justify-center fill-height">
+                <v-progress-circular
+                  color="grey-lighten-4"
+                  indeterminate
+                ></v-progress-circular>
+              </div>
+            </template>
+          </v-img>
+        </router-link>
+      </v-col>
+      <v-col :cols="type === 'article' ? 8 : 12">
+        <router-link
+          :to="
+            type === 'article'
+              ? `/article-detail/article/${data.article_id}`
+              : `/news/${data.news_id}`
+          "
+        >
+          <h3>{{ data.title }}</h3>
+        </router-link>
+
+        <router-link
+          :to="
+            type === 'article'
+              ? `/article-detail/article/${data.article_id}`
+              : `/news/${data.news_id}`
+          "
+          class="d-block pa-3"
+        >
+          <section v-html="store.removeHtmlImages(data.content)"></section>
+        </router-link>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<style lang="scss">
+.v-card {
+  border-radius: 10px;
+  padding: 15px;
+
+  h3 {
+    padding: 15px;
+    font-size: 22px;
+    font-weight: 500;
+    line-height: 32px;
+    letter-spacing: 1px;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  h3,
+  section {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    line-break: after-white-space;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  h3 {
+    -webkit-line-clamp: 2;
+  }
+
+  section {
+    -webkit-line-clamp: 4;
+    line-height: 28px;
+  letter-spacing: 1px;
+  }
+
+  .cover-img {
+    height: 235px;
+    border-radius: 5px;
+  }
+}
+
+.category {
+  display: flex;
+  align-items: center;
+
+  span {
+    display: block;
+    width: 8px;
+    height: 8px;
+    margin-right: 10px;
+    border-radius: 10px;
+    background-color: #000;
+  }
+}
+</style>

src/components/CourseCard.vue

@@ -85,15 +85,19 @@ function isClassFavorite(classId) {
           <v-img
             class="mx-auto cover-img"
             :lazy-src="
-              data.group_sort === 'pinkoi'
+              data.is_inner === 0
                 ? data.cover_img
+                : data.special_class_list_name=== 'one_day_class'
+                ? 'src/assets/img/一日學徒.png'
                 : `https://ntcri.org/${data.cover_img}`
             "
             height="200px"
             cover
             :src="
-              data.group_sort === 'pinkoi'
+              data.is_inner === 0
                 ? data.cover_img
+                : data.special_class_list_name=== 'one_day_class'
+                ? 'src/assets/img/一日學徒.png'
                 : `https://ntcri.org/${data.cover_img}`
             "
           >

src/components/Footer.vue

@@ -0,0 +1,64 @@
+<template>
+  <footer>
+    <!-- <h1>
+      臺灣工藝學校全球學習共享平台 International Craft Learning Platform co-ops.
+    </h1> -->
+
+    <router-link to="/">
+      <img src="@/assets/img/logo.png" alt="" class="logo mt-3" />
+    </router-link>
+
+    <ul class="ms-sm-13">
+      <li>
+        <a href="tel:(049)233-4141#275">Tel&ensp;(049)233-4141#275</a>
+      </li>
+      <li>
+        <a href="fax:(049)235-6593">Fax&ensp;(049)235-6593</a>
+      </li>
+      <li>
+        <a href="mailto:craftology@ntcri.gov.tw"
+          >Email&ensp;craftology@ntcri.gov.tw</a
+        >
+      </li>
+      <li>
+        <a href="https://goo.gl/maps/Wg6gwmYpVgUPQHJh9" target="_blank">
+          542021 南投縣草屯鎮中正路573號</a
+        >
+      </li>
+      <li>
+        <small
+          >© 2023 International Craft Learning Platform co-ops. All rights
+          reserved.</small
+        >
+      </li>
+    </ul>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+footer {
+  padding: 20px 40px;
+  background-color: #fff;
+  border-top: 25px solid var(--purple);
+  h1 {
+    margin: 20px 0;
+    font-size: 18px;
+    font-weight: 500;
+  }
+  ul {
+    li {
+      margin: 15px 0;
+      letter-spacing: 1px;
+      a {
+        transition: all 0.3s;
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+  .logo {
+    width: 350px;
+  }
+}
+</style>

src/components/Navbar.vue

@@ -8,6 +8,7 @@ const router = useRouter();
 const store = useMainStore();
 let menuShow = ref(false);
 let collegeMenuShow = ref(false);
+let otherMenuShow = ref(false);
 
 function toggleMenu() {
   collegeMenuShow.value = false;
@@ -18,10 +19,14 @@ function handleClose() {
   store.loginDialog = false;
 }
 
-function handleMouseEvents(event) {
+function handleMouseEvents(name, event) {
   const screenWidth = window.innerWidth;
   if (screenWidth >= 1280) {
-    collegeMenuShow.value = event;
+    if (name === "college") {
+      collegeMenuShow.value = event;
+    } else {
+      otherMenuShow.value = event;
+    }
   } else {
     return;
   }
@@ -30,42 +35,58 @@ function handleMouseEvents(event) {
 function handleClick(url) {
   menuShow.value = false;
   collegeMenuShow.value = false;
+  otherMenuShow.value = false;
   router.push(url);
 }
 
 const collegeList = reactive([
-  {
-    title: "世代工藝",
-    url: "/college-group/generation",
-  },
   {
     title: "未來工藝",
     url: "/college-group/future",
   },
-  {
-    title: "生活工藝",
-    url: "/college-group/life",
-  },
   {
     title: "技藝工藝",
     url: "/college-group/craft",
   },
-  {
-    title: "青年工藝",
-    url: "/college-group/teenager",
-  },
   {
     title: "修護工藝",
     url: "/college-group/repair",
   },
   {
-    title: "跨域工藝",
+    title: "跨域增能",
     url: "/college-group/cross",
   },
   {
     title: "線上工藝",
     url: "/college-group/craft",
   },
+  {
+    title: "希望工程",
+    url: "/college-group/craft",
+  },
+  {
+    title: "生活工藝",
+    url: "/college-group/life",
+  },
+  // {
+  //   title: "世代工藝",
+  //   url: "/college-group/generation",
+  // },
+  {
+    title: "青年工藝",
+    url: "/college-group/teenager",
+  },
+]);
+
+const otherList = reactive([
+  {
+    title: "我要開課",
+    url: "/",
+  },
+  {
+    title: "網站架構",
+    url: "/",
+  },
 ]);
 </script>
 
@@ -76,10 +97,7 @@ const collegeList = reactive([
     </router-link>
     <ul class="menu align-center" :class="{ slider: menuShow }">
       <li>
-        <router-link :to="'/news'">重要訊息</router-link>
-      </li>
-      <li>
-        <router-link :to="'/course-list'">探索課程</router-link>
+        <router-link :to="'/crafts'">工藝學</router-link>
       </li>
       <li class="position-relative">
         <a
@@ -103,8 +121,8 @@ const collegeList = reactive([
         <div
           class="college-slider"
           :class="{ slider: collegeMenuShow }"
-          @mouseover="handleMouseEvents(true)"
-          @mouseleave="handleMouseEvents(false)"
+          @mouseover="handleMouseEvents('college', true)"
+          @mouseleave="handleMouseEvents('college', false)"
         >
           <ul>
             <li v-for="(item, index) in collegeList" :key="index">
@@ -118,12 +136,15 @@ const collegeList = reactive([
         </div>
       </li>
       <li>
-        <router-link :to="'/article'">知識文章</router-link>
+        <router-link :to="'/news'">重要訊息</router-link>
+      </li>
+      <li>
+        <router-link :to="'/course-list'">探索課程</router-link>
       </li>
+      <!-- <li>
+        <router-link :to="'/article'">知識文章</router-link>
+      </li> -->
       <li>
-        <!-- <router-link :to="'/login'">
-          學員登入
-        </router-link> -->
         <v-dialog
           v-model="store.loginDialog"
           max-width="450"
@@ -140,8 +161,39 @@ const collegeList = reactive([
       <li class="d-none d-lg-block">
         <v-icon icon="mdi-magnify"></v-icon>
       </li>
-      <li class="d-none d-lg-block">
-        <v-icon icon="mdi-menu"></v-icon>
+      <li class="d-none d-lg-block position-relative">
+        <a
+          href="javascript:;"
+          @mouseover="otherMenuShow = true"
+          @mouseleave="otherMenuShow = false"
+          class="d-none d-lg-block"
+        >
+          <v-icon icon="mdi-menu"></v-icon
+        ></a>
+        <div
+          class="college-slider"
+          :class="{ slider: otherMenuShow }"
+          @mouseover="handleMouseEvents('other', true)"
+          @mouseleave="handleMouseEvents('other', false)"
+        >
+          <ul>
+            <li v-for="(item, index) in otherList" :key="index">
+              <a href="javascript:;" @click="handleClick(item.url)">{{
+                item.title
+              }}</a>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <li
+        v-for="(item, index) in otherList"
+        :key="index"
+        class="d-block d-lg-none"
+      >
+        <a href="javascript:;" @click="handleClick(item.url)">{{
+          item.title
+        }}</a>
+        <!-- <router-link :to="item.url">{{ item.title }}</router-link> -->
       </li>
     </ul>
 

src/components/PDFViewer.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, onMounted, watch } from "vue";
+import { useMainStore } from "@/stores/store";
 
+const store = useMainStore();
 let pdfIframe = ref(null);
 let pdfUrl = ref(null);
 
@@ -14,7 +16,6 @@ watch(
   () => props.file,
   (name) => {
     setPDFUrl(name);
-    // getPDFUrl(name);
   }
 );
 
@@ -29,40 +30,10 @@ function setPDFUrl(name) {
     pdfUrl.value = url;
   }
 }
-
-// function getPDFUrl(name) {
-//   let url;
-
-//   if (import.meta.env.VITE_BASE_URL) {
-//     if (name === "re_ceramic") {
-//       url = `/pdfjs-dist/web/viewer.html?file=${
-//         import.meta.env.VITE_BASE_URL
-//       }/${reCeramic}`;
-//     } else if (name === "hammer") {
-//       url = `/pdfjs-dist/web/viewer.html?file=${
-//         import.meta.env.VITE_BASE_URL
-//       }/${hammer}`;
-//     }
-//   } else {
-//     if (name === "re_ceramic") {
-//       url = `/pdfjs-dist/web/viewer.html?file=${reCeramic}`;
-//     } else if (name === "hammer") {
-//       url = `/pdfjs-dist/web/viewer.html?file=${hammer}`;
-//     }
-//   }
-
-//   if (pdfIframe.value) {
-//     pdfIframe.value.src = url;
-//   } else {
-//     pdfUrl.value = url;
-//   }
-// }
-
-// getPDFUrl(props.file);
 </script>
 
 <template>
-  <div class="mt-16">
+  <div class="pt-16" v-if="!store.isMobile">
     <iframe
       ref="pdfIframe"
       src="https://ntcri.org/pdf/Re_Ceramic.pdf"
@@ -72,30 +43,6 @@ function setPDFUrl(name) {
       border="0"
       cellspacing="0"
     ></iframe>
-
-    <!-- 手機版隱藏 iframe -->
-    <!-- <div v-if="!store.isMobile">
-      <iframe
-        v-if="isIOS"
-        :src="reCeramic"
-        width="100%"
-        height="700px"
-        frameborder="0"
-        border="0"
-        cellspacing="0"
-      ></iframe>
-
-      <iframe
-        v-else
-        ref="pdfIframe"
-        :src="pdfUrl"
-        width="100%"
-        height="700px"
-        frameborder="0"
-        border="0"
-        cellspacing="0"
-      ></iframe>
-    </div> -->
   </div>
 </template>
 

src/components/SignUpCard.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, reactive, computed } from "vue";
+let step = ref(1);
+
+let currentTitle = computed(() => {
+  switch (this.step) {
+    case 1:
+      return "Sign-up";
+    case 2:
+      return "Create a password";
+    default:
+      return "Account created";
+  }
+});
+</script>
+
+<template>
+  <v-card class="mx-auto" max-width="500">
+    <v-card-title class="text-h6 font-weight-regular justify-space-between">
+      <span>{{ currentTitle }}</span>
+      <v-avatar color="primary" size="24" v-text="step"></v-avatar>
+    </v-card-title>
+
+    <v-window v-model="step">
+      <v-window-item :value="1">
+        <v-card-text>
+          <v-text-field
+            label="Email"
+            placeholder="john@google.com"
+          ></v-text-field>
+          <span class="text-caption text-grey-darken-1">
+            This is the email you will use to login to your Vuetify account
+          </span>
+        </v-card-text>
+      </v-window-item>
+
+      <v-window-item :value="2">
+        <v-card-text>
+          <v-text-field label="Password" type="password"></v-text-field>
+          <v-text-field label="Confirm Password" type="password"></v-text-field>
+          <span class="text-caption text-grey-darken-1">
+            Please enter a password for your account
+          </span>
+        </v-card-text>
+      </v-window-item>
+
+      <v-window-item :value="3">
+        <div class="pa-4 text-center">
+          <v-img
+            class="mb-4"
+            contain
+            height="128"
+            src="https://cdn.vuetifyjs.com/images/logos/v.svg"
+          ></v-img>
+          <h3 class="text-h6 font-weight-light mb-2">Welcome to Vuetify</h3>
+          <span class="text-caption text-grey">Thanks for signing up!</span>
+        </div>
+      </v-window-item>
+    </v-window>
+
+    <v-divider></v-divider>
+
+    <v-card-actions>
+      <v-btn v-if="step > 1" variant="text" @click="step--"> Back </v-btn>
+      <v-spacer></v-spacer>
+      <v-btn v-if="step < 3" color="primary" variant="flat" @click="step++">
+        Next
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>

src/plugins/vuetify.js

@@ -21,6 +21,9 @@ export default createVuetify({
         dark: false,
         colors: {
           primary: '#C39F68',
+          blue: '#A7C1CC', // 霧藍
+          purple: '#BCA2B5', // 粉紫
+          yellow: '#E4B662', // 大地黃
           gray: '#888888',
           brown: '#3E3A39',
         },

src/router/index copy.js

@@ -1,217 +0,0 @@
-import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
-import { defineAsyncComponent } from 'vue';
-import { useMainStore } from "@/stores/store";
-
-// const Home = defineAsyncComponent(() => import('@/views/Home.vue'));
-// const Login = defineAsyncComponent(() => import('@/views/Login.vue'));
-// const News = defineAsyncComponent(() => import('@/views/News.vue'));
-// const NewsDetail = defineAsyncComponent(() => import('@/views/NewsDetail.vue'));
-// const Article = defineAsyncComponent(() => import('@/views/Article.vue'));
-// const ArticleDetail = defineAsyncComponent(() => import('@/views/ArticleDetail.vue'));
-// const CourseList = defineAsyncComponent(() => import('@/views/CourseList.vue'));
-// const CourseDetail = defineAsyncComponent(() => import('@/views/CourseDetail.vue'));
-// // 八大學群
-// const CollegeGroup = defineAsyncComponent(() => import('@/views/CollegeGroup/Main.vue'));
-// const Craft = defineAsyncComponent(() => import('@/views/CollegeGroup/Craft.vue'));
-// const Generation = defineAsyncComponent(() => import('@/views/CollegeGroup/Generation.vue'));
-// const Future = defineAsyncComponent(() => import('@/views/CollegeGroup/Future.vue'));
-// const Repair = defineAsyncComponent(() => import('@/views/CollegeGroup/Repair.vue'));
-// const Teenager = defineAsyncComponent(() => import('@/views/CollegeGroup/Teenager.vue'));
-// const Cross = defineAsyncComponent(() => import('@/views/CollegeGroup/Cross.vue'));
-// const Life = defineAsyncComponent(() => import('@/views/CollegeGroup/Life.vue'));
-// // 學員頁面
-// const Dashboard = defineAsyncComponent(() => import('@/views/User/Dashboard.vue'));
-// const Profile = defineAsyncComponent(() => import('@/views/User/Profile.vue'));
-// const Passport = defineAsyncComponent(() => import('@/views/User/Passport.vue'));
-// const FavoriteClass = defineAsyncComponent(() => import('@/views/User/FavoriteClass.vue'));
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: () => import('@/views/Home.vue'),
-  },
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('@/views/Login.vue'),
-  },
-  // {
-  //   path: '/user/profile',
-  //   name: 'UserProfile',
-  //   component: UserProfile,
-  // },
-  {
-    path: '/user',
-    component: () => import('@/views/User/Dashboard.vue'),
-    meta: { requiresAuth: true }, // 需驗證登入權限
-    children: [
-      {
-        path: 'profile',
-        name: 'Profile',
-        component: () => import('@/views/User/Profile.vue'),
-      },
-      {
-        path: 'passport',
-        name: 'Passport',
-        component: () => import('@/views/User/Passport.vue'),
-      },
-      {
-        path: 'favorite-class',
-        name: 'FavoriteClass',
-        component: () => import('@/views/User/FavoriteClass.vue'),
-      },
-    ],
-  },
-  {
-    path: '/college-group',
-    component: () => import('@/views/CollegeGroup/Main.vue'),
-    redirect: '/college-group/craft',
-    children: [
-      {
-        path: 'craft',
-        name: 'Craft',
-        component: () => import('@/views/CollegeGroup/Craft.vue'),
-        meta: {
-          title: '技藝工藝',
-        },
-      },
-      {
-        path: 'generation',
-        name: 'Generation',
-        component: () => import('@/views/CollegeGroup/Generation.vue'),
-        meta: {
-          title: '世代工藝',
-        },
-      },
-      {
-        path: 'future',
-        name: 'Future',
-        component: () => import('@/views/CollegeGroup/Future.vue'),
-        meta: {
-          title: '未來工藝',
-        },
-      },
-      {
-        path: 'repair',
-        name: 'Repair',
-        component: () => import('@/views/CollegeGroup/Repair.vue'),
-        meta: {
-          title: '修護工藝',
-        },
-      },
-      {
-        path: 'teenager',
-        name: 'Teenager',
-        component: () => import('@/views/CollegeGroup/Teenager.vue'),
-        meta: {
-          title: '青年工藝',
-        },
-      },
-      {
-        path: 'cross',
-        name: 'Cross',
-        component: () => import('@/views/CollegeGroup/Cross.vue'),
-        meta: {
-          title: '跨域工藝',
-        },
-      },
-      {
-        path: 'life',
-        name: 'Life',
-        component: () => import('@/views/CollegeGroup/Life.vue'),
-        meta: {
-          title: '生活工藝',
-        },
-      }
-    ],
-  },
-  {
-    path: '/news',
-    name: 'News',
-    component: () => import('@/views/News.vue'),
-  },
-  {
-    path: '/news/:id',
-    name: 'NewsDetail',
-    component: () => import('@/views/NewsDetail.vue')
-  },
-  {
-    path: '/article',
-    name: 'Article',
-    component: () => import('@/views/Article.vue'),
-  },
-  {
-    path: '/article/:id',
-    name: 'ArticleDetail',
-    component: () => import('@/views/ArticleDetail.vue')
-  },
-  {
-    path: '/course-list',
-    name: 'CourseList',
-    component: () => import('@/views/CourseList.vue')
-  },
-  {
-    path: '/course-detail/:id',
-    name: 'CourseDetail',
-    component: () => import('@/views/CourseDetail.vue')
-  },
-  // {
-  //   path: '/college-group/craft',
-  //   name: 'Craft',
-  //   component: Craft
-  // },
-  // {
-  //   path: '/college-group/generation',
-  //   name: 'Generation',
-  //   component: Generation
-  // },
-  // {
-  //   path: '/college-group/future',
-  //   name: 'Future',
-  //   component: Future
-  // },
-  // {
-  //   path: '/college-group/repair',
-  //   name: 'Repair',
-  //   component: Repair
-  // },
-  // {
-  //   path: '/college-group/teenager',
-  //   name: 'Teenager',
-  //   component: Teenager
-  // },
-  // {
-  //   path: '/college-group/cross',
-  //   name: 'Cross',
-  //   component: Cross
-  // },
-];
-
-const router = createRouter({
-  // history: createWebHashHistory(),
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-});
-
-// 檢查登入狀態
-router.beforeEach((to, from, next) => {
-  const store = useMainStore();
-  store.checkToken();
-
-  // 檢查目標路由是否需要驗證權限
-  if (to.meta.requiresAuth) {
-    const haveToken = store.loginState;
-    if (haveToken) {
-      next(); // 允許使用者訪問目標頁面
-    } else {
-      store.loginDialog = true; // 開啟登入視窗
-      next('/'); // 若無 token 直接輸入網址前往時，將重定向至首頁
-    }
-  } else {
-    // 如果目標路由不需要驗證權限，直接允許使用者訪問
-    next();
-  }
-});
-
-export default router;

src/router/index.js

@@ -4,6 +4,7 @@ import { useMainStore } from "@/stores/store";
 
 const Home = defineAsyncComponent(() => import('@/views/Home.vue'));
 const Login = defineAsyncComponent(() => import('@/views/Login.vue'));
+const Crafts = defineAsyncComponent(() => import('@/views/Crafts.vue'));
 const News = defineAsyncComponent(() => import('@/views/News.vue'));
 const NewsDetail = defineAsyncComponent(() => import('@/views/NewsDetail.vue'));
 const Article = defineAsyncComponent(() => import('@/views/Article.vue'));
@@ -19,6 +20,19 @@ const Repair = defineAsyncComponent(() => import('@/views/CollegeGroup/Repair.vu
 const Teenager = defineAsyncComponent(() => import('@/views/CollegeGroup/Teenager.vue'));
 const Cross = defineAsyncComponent(() => import('@/views/CollegeGroup/Cross.vue'));
 const Life = defineAsyncComponent(() => import('@/views/CollegeGroup/Life.vue'));
+// 一日學徒
+const Apprentice = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/Main.vue'));
+const ApprenticeAbout = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/About.vue'));
+const ApprenticeCourse = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/Course.vue'));
+const ApprenticeNews = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/News.vue'));
+const ApprenticeContact = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/Contact.vue'));
+const ApprenticeFAQ = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/FAQ.vue'));
+const ApprenticeTerms = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/Terms.vue'));
+
+const Campus = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Campus.vue')); // 校園扎根
+const CraftJourney = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/CraftJourney.vue')); // 工藝行旅
+const Shop = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Shop.vue')); // 旅物 Shop
+
 // 學員頁面
 const Dashboard = defineAsyncComponent(() => import('@/views/User/Dashboard.vue'));
 const Profile = defineAsyncComponent(() => import('@/views/User/Profile.vue'));
@@ -63,6 +77,11 @@ const routes = [
       },
     ],
   },
+  {
+    path: '/crafts/:id?',
+    name: 'Crafts',
+    component: Crafts,
+  },
   {
     path: '/college-group',
     component: CollegeGroup,
@@ -113,7 +132,7 @@ const routes = [
         name: 'Cross',
         component: Cross,
         meta: {
-          title: '跨域工藝',
+          title: '跨域增能',
         },
       },
       {
@@ -123,7 +142,72 @@ const routes = [
         meta: {
           title: '生活工藝',
         },
-      }
+      },
+      {
+        path: 'life/apprentice',
+        name: 'Apprentice',
+        redirect: 'life/apprentice/about',
+        component: Apprentice,
+        meta: {
+          title: '生活工藝',
+        },
+        children: [
+          {
+            path: 'about',
+            name: 'ApprenticeAbout',
+            component: ApprenticeAbout,
+          },
+          {
+            path: 'course',
+            name: 'ApprenticeCourse',
+            component: ApprenticeCourse,
+          },
+          {
+            path: 'news',
+            name: 'ApprenticeNews',
+            component: ApprenticeNews,
+          },
+          {
+            path: 'contact',
+            name: 'ApprenticeContact',
+            component: ApprenticeContact,
+          },
+          {
+            path: 'faq',
+            name: 'ApprenticeFAQ',
+            component: ApprenticeFAQ,
+          },
+          {
+            path: 'terms',
+            name: 'ApprenticeTerms',
+            component: ApprenticeTerms,
+          },
+        ],
+      },
+      {
+        path: 'life/campus',
+        name: 'Campus',
+        component: Campus,
+        meta: {
+          title: '生活工藝',
+        },
+      },
+      {
+        path: 'life/craftJourney',
+        name: 'CraftJourney',
+        component: CraftJourney,
+        meta: {
+          title: '生活工藝',
+        },
+      },
+      {
+        path: 'life/shop',
+        name: 'Shop',
+        component: Shop,
+        meta: {
+          title: '生活工藝',
+        },
+      },
     ],
   },
   {
@@ -137,12 +221,12 @@ const routes = [
     component: NewsDetail,
   },
   {
-    path: '/article',
+    path: '/article/:id?',
     name: 'Article',
     component: Article,
   },
   {
-    path: '/article/:id',
+    path: '/article-detail/:category/:id',
     name: 'ArticleDetail',
     component: ArticleDetail,
   },
@@ -196,6 +280,7 @@ const router = createRouter({
 
 // 檢查登入狀態
 router.beforeEach((to, from, next) => {
+  window.scrollTo({ top: 0, behavior: "smooth" });
   const store = useMainStore();
   store.checkToken();
 

src/stores/store.js

@@ -44,5 +44,34 @@ export const useMainStore = defineStore('mainStore', {
     setProfile(data) {
       this.profile = data;
     },
+    // 將日期格式轉成純字串
+    formatDate(date) {
+      const isTimestamp = !isNaN(date) && Number(date) >= 0; // 判斷是否為時間戳記
+      if (!date) return ""; // 若選取的日期為空，回傳空字串
+      if (!isTimestamp) {
+        return date;
+      } else {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const day = String(date.getDate()).padStart(2, "0");
+        // 組成 YYYY-MM-DD
+        return `${year}-${month}-${day}`;
+      }
+    },
+    // DatePicker
+    datePickerFormat(date) {
+      const day = date.getDate();
+      const month = date.getMonth() + 1;
+      const year = date.getFullYear();
+
+      return `${year}-${month}-${day}`;
+    },
+    getPDF(name) {
+      return `https://ntcri.org/pdf/${name}.pdf`;
+    },
+    // 過濾圖片標籤
+    removeHtmlImages(value) {
+      return value.replace(/<img\b[^>]*>/gi, "");
+    }
   },
 })

src/utils/useBookList.js

@@ -0,0 +1,49 @@
+import { useMainStore } from "@/stores/store";
+
+const store = useMainStore();
+const bookList = [
+  {
+    title: "《生活工藝誌》2月號",
+    category: "文章",
+    content:
+      "《生活工藝誌》2月號 <br>「雨水」過後，趁著陽光微露臉的閒暇， <br> 帶上《生活工藝誌》，找一片綠蔭， <br> 坐下來，迎著春光， <br> 好好地與自己對話：最珍視的是什麼？ <br>《生活工藝誌》2月號上市！",
+    img: store.getImageUrl("crafts/知識文章-05.png"),
+  },
+  {
+    title: "全民竹起來",
+    category: "文章｜影音",
+    content:
+      "全民竹起來 <br> 內容呈現「全民竹起來」系列工作坊主題，以多元趣味、輕鬆且生活化的主題引導大眾將與竹交會的良好經驗帶入自身生活，共創並延展全民對竹文化、竹產業的想像與可能，一系列精彩活動內容收入於此竹書內。",
+    img: store.getImageUrl("crafts/知識文章-06.png"),
+  },
+  {
+    title: "職人之器－臺灣細木作手工具概覽",
+    category: "文章",
+    content:
+      "職人之器-臺灣細木作手工具概覽職，是一種專業的態度 <br> 人，是人文的溫度，手作所注入之靈魂  <br> 器，是百善之先的概念 <br> 所有的作品、創作、設計都必須透過「器」對利與「人」之用",
+    img: store.getImageUrl("crafts/知識文章-07.png"),
+  },
+  {
+    title: "纖維實踐－月桃",
+    category: "文章",
+    content:
+      "纖維實踐─月桃 <br> 植物可以是一則故事，一個表徵。 <br> 植物可以是一種文化，也可以是一種生命或孕育生命的所在。 <br> 臺灣作為一座古老的生物島，生態種類豐富，尤其對於當地與自然資源交融的族群",
+    img: store.getImageUrl("crafts/知識文章-08.png"),
+  },
+  {
+    title: "職人之器－臺灣細木作手工具概覽",
+    category: "文章",
+    content:
+      "職人之器-臺灣細木作手工具概覽職，是一種專業的態度 <br> 人，是人文的溫度，手作所注入之靈魂  <br> 器，是百善之先的概念 <br> 所有的作品、創作、設計都必須透過「器」對利與「人」之用",
+    img: store.getImageUrl("crafts/知識文章-09.png"),
+  },
+  {
+    title: "旅讀臺灣農村／社區工藝記",
+    category: "文章",
+    content:
+      "旅讀臺灣農村／社區工藝記 <br> 繞一圈臺灣，在日常中探索在地工藝 <br> 生活風景、時光故事 <br> 人情溫度、社區事物 <br> 感受臺灣土地力量，遇見工藝笑顏 <br> 刻劃15個工藝社區",
+    img: store.getImageUrl("crafts/知識文章-10.png"),
+  }
+];
+
+export default bookList

src/utils/useReadList.js

@@ -0,0 +1,65 @@
+import { useMainStore } from "@/stores/store";
+
+const store = useMainStore();
+const readList = [
+  {
+    title: "陶廢X重生 <br> 永續設計如何翻轉陶廢",
+    caption: "",
+    depiction:
+      "How Sustainable Design Provides a New Perspective for Ceramic Scrap",
+    img: store.getImageUrl("crafts/知識文章-23.png"),
+    fileName: "Re_Ceramic",
+    content: ""
+  },
+  {
+    title: "工藝製造現場 <br> 擾動，臺灣工藝、設計、工業與數位製造",
+    caption: "",
+    depiction:
+      "Taiwan crafts, design, and industrial and digital manufacturing",
+    img: store.getImageUrl("crafts/知識文章-24.png"),
+    fileName: "Hammer",
+    content: ""
+  },
+  {
+    title: "新纖事 <br> 台灣在地媒材 X 工藝探索與創作實錄",
+    caption: "在地工藝新纖事X構樹與檳榔的創新運用 <br> （以檳榔及構樹纖維進行天然材料創新應用之設計示範）",
+    depiction:
+      "The New Fiber World",
+    img: store.getImageUrl("crafts/知識文章-25.png"),
+    fileName: "Fiber_With_Crafts",
+    content:
+      "繼 2018 年工藝中心邀請荷蘭 MDD (Material Driven Design)計畫主持教授 Elvin Karana 以台灣東部花蓮新社葛瑪蘭族香蕉絲纖維工藝作為 CAMEL.實驗室示範先導工作化並出版《新纖維》一書後，2019 年隨即由 CAMEL.實驗室再次策畫為期 8 天協同設計工作坊,邀請法國巴黎布勒學院 École Boulle Antoine FERMEY 教授並帶領 14 位法國的設計系學生來台，與臺灣資深纖維工藝家邱秀蓮、王梅容老師、檳榔工藝推廣劉大衛老師以及徵選的 14 位臺灣工藝家，共同以跨國界分組的方式，從工藝技術與設計方法並行來探索臺灣構樹與檳榔材料的在地文化與價值轉化。不同於2018年《新纖維》計畫在材質修補 (Material tinkering) 的階段性，這一次的協同設計工作坊，以更完整的材料性質瞭解來展開工藝技術性的可能發展...",
+  },
+  {
+    title: "循絲 <br> 臺灣蠶絲材料探究及新用",
+    caption: "循絲：臺灣蠶絲材料探究及新用",
+    depiction:
+      "Research and New Application of Taiwan Silk",
+    img: store.getImageUrl("crafts/知識文章-26.png"),
+    fileName: "Through_The_Silk",
+    content:
+      "本書講述臺灣蠶業的歷史與場域及材料的取得、處理與加工，透過材料化性分析與工藝應用的驗證，結合國際工作坊以作進一步的材質探索，也尋找不同工藝材質整合創作的可能性。此次設計方法提供經驗分享及透過藝術家和設計師引導來執行材料試驗，協助建立發展材料的可能性與創造產品概念。",
+  },
+  {
+    title: "拾鱗 <br> 在地漁業廢棄物之創新應用",
+    caption: "在地材質x工藝創作x永續循環，拾鱗計畫翻轉臺南在地漁業廢棄物",
+    depiction:
+      "Innovative application of local fishery waste",
+    img: store.getImageUrl("crafts/知識文章-27.png"),
+    fileName: "Local_Fishery_Waste",
+    content:
+      "由國立臺灣工藝研究發展中心主辦、物嶼哲概念有限公司執行以及荷蘭 Material Experience Lab 合作之「國際材質試驗研究室交流合作計畫－「拾鱗計畫 Project FS」，目的在轉化臺南在地漁業的第一批廢棄物－「魚鱗」，尋找更多的創作應用機會點，使得魚鱗能夠透過材質試驗、工藝創作應用，以不同的視野進入文化層面，開啟新的生命循環。臺南可說是全臺公認的美食及文化之都，其小吃的豐富性及多樣化使各地饕客趨之若鶩，而其中「虱目魚」相關的品項，不論是魚皮、魚肚、魚肉等…，更深受大家的喜愛，在美食文化之中具有舉足輕重的地位，臺南也是虱目魚最重要的養殖區域，其在地性及與當地文化的聯結非常密切...",
+  },
+  {
+    title: "新絲維",
+    caption: "老工藝新思維／香蕉絲纖維的創新運用",
+    depiction:
+      "The New Fiber World",
+    img: store.getImageUrl("crafts/知識文章-28.png"),
+    fileName: "Live_Co_Fiber",
+    content:
+      "本書為以材料試驗紀錄工作坊創作過程作為香蕉絲工藝創作技術推廣書籍參與「工藝材質創新國際交流工作坊」的創作者們從認識台灣花蓮的在地材料開始，到學習材料體驗設計的研究方法，以不斷地試驗、製作、試驗、製作各種材質修補 (Material tinkering) 的機會與可能，透過文字敘述的方式，將各種創作的可能進行紀錄，成了本次工作坊最珍貴的產出，是以本書作為完整收錄，更期待 CAMEL.實驗室的後續能量與未來...",
+  }
+];
+
+export default readList

src/views/Article.vue

@@ -1,14 +1,26 @@
 <script setup>
-import { ref, reactive, watch, computed } from "vue";
+import { ref, reactive, watch, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { useMainStore } from "@/stores/store";
 import axios from "axios";
 import moment from "moment";
 import Navbar from "@/components/Navbar.vue";
 import PDFViewer from "@/components/PDFViewer.vue";
-// import hammer from "/pdfjs-dist/pdf/hammer.pdf";
-// import reCeramic from "/pdfjs-dist/pdf/re_ceramic.pdf";
+import bookList from "@/utils/useBookList";
+import readList from "@/utils/useReadList";
 
+const route = useRoute();
+const router = useRouter();
 const store = useMainStore();
+const bookName = route.params.id; // 網址參數(pdf書名)
+console.log("bookName", bookName);
+
+onMounted(() => {
+  if (bookName) {
+    updatePDF(bookName);
+  }
+});
+
 let searchInput = ref("");
 let searchError = ref(false);
 let currentPage = ref(1); // 當前頁數(預設第一頁)
@@ -156,97 +168,25 @@ const articleList = reactive([
   },
 ]);
 
-function getPDF(name) {
-  return `https://ntcri.org/pdf/${name}.pdf`;
-}
-
 // function getPDF(name) {
-//   let url;
-
-//   if (import.meta.env.VITE_BASE_URL) {
-//     // 設定環境變數
-//     if (name === "re_ceramic") {
-//       url = `/pdfjs-dist/web/viewer.html?file=${
-//         import.meta.env.VITE_BASE_URL
-//       }/${reCeramic}`;
-//     } else if (name === "hammer") {
-//       url = `/pdfjs-dist/web/viewer.html?file=${
-//         import.meta.env.VITE_BASE_URL
-//       }/${hammer}`;
-//     }
-//   } else {
-//     if (name === "re_ceramic") {
-//       url = `/pdfjs-dist/web/viewer.html?file=${reCeramic}`;
-//     } else if (name === "hammer") {
-//       url = `/pdfjs-dist/web/viewer.html?file=${hammer}`;
-//     }
-//   }
-
-//   return url;
+//   return `https://ntcri.org/pdf/${name}.pdf`;
 // }
 
 let fileName = ref(""); // PDFViewer Props
+const read = ref(null);
+const viewer = ref(null);
 
 function updatePDF(name) {
+  // 更新 pdf 後移除網址參數
+  router.replace({ path: "/article" });
   fileName.value = name;
+  if (!store.isMobile) {
+    setTimeout(() => {
+      viewer.value.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 300);
+  }
 }
 
-const readList = reactive([
-  {
-    title: "陶廢X重生 <br> 永續設計如何翻轉陶廢",
-    depiction:
-      "How Sustainable Design Provides a New Perspective for Ceramic Scrap",
-    img: store.getImageUrl("article/知識文章-23.png"),
-    fileName: "Re_Ceramic",
-  },
-  {
-    title: "工藝製造現場 <br> 擾動，臺灣工藝、設計、工業與數位製造",
-    depiction:
-      "Taiwan crafts, design, and industrial and digital manufacturing",
-    img: store.getImageUrl("article/知識文章-24.png"),
-    fileName: "Hammer",
-  },
-]);
-
-const bookList = reactive([
-  {
-    tag: "文章",
-    depiction:
-      "《生活工藝誌》2月號 <br>「雨水」過後，趁著陽光微露臉的閒暇， <br> 帶上《生活工藝誌》，找一片綠蔭， <br> 坐下來，迎著春光， <br> 好好地與自己對話：最珍視的是什麼？ <br>《生活工藝誌》2月號上市！",
-    img: store.getImageUrl("article/知識文章-05.png"),
-  },
-  {
-    tag: "文章｜影音",
-    depiction:
-      "全民竹起來 <br> 內容呈現「全民竹起來」系列工作坊主題，以多元趣味、輕鬆且生活化的主題引導大眾將與竹交會的良好經驗帶入自身生活，共創並延展全民對竹文化、竹產業的想像與可能，一系列精彩活動內容收入於此竹書內。",
-    img: store.getImageUrl("article/知識文章-06.png"),
-  },
-  {
-    tag: "文章",
-    depiction:
-      "職人之器-臺灣細木作手工具概覽職，是一種專業的態度 <br> 人，是人文的溫度，手作所注入之靈魂  <br> 器，是百善之先的概念 <br> 所有的作品、創作、設計都必須透過「器」對利與「人」之用",
-    img: store.getImageUrl("article/知識文章-07.png"),
-  },
-  {
-    tag: "文章",
-    depiction:
-      "纖維實踐─月桃 <br> 植物可以是一則故事，一個表徵。 <br> 植物可以是一種文化，也可以是一種生命或孕育生命的所在。 <br> 臺灣作為一座古老的生物島，生態種類豐富，尤其對於當地與自然資源交融的族群",
-    img: store.getImageUrl("article/知識文章-08.png"),
-  },
-  {
-    tag: "文章",
-    depiction:
-      "職人之器-臺灣細木作手工具概覽職，是一種專業的態度 <br> 人，是人文的溫度，手作所注入之靈魂  <br> 器，是百善之先的概念 <br> 所有的作品、創作、設計都必須透過「器」對利與「人」之用",
-    img: store.getImageUrl("article/知識文章-09.png"),
-  },
-  {
-    tag: "文章",
-    depiction:
-      "旅讀臺灣農村/社區工藝記 <br> 繞一圈臺灣，在日常中探索在地工藝 <br> 生活風景、時光故事 <br> 人情溫度、社區事物 <br> 感受臺灣土地力量，遇見工藝笑顏 <br> 刻劃15個工藝社區",
-    img: store.getImageUrl("article/知識文章-10.png"),
-  },
-]);
-
 function isAnchorLink(url) {
   console.log("url", url, url.startsWith("#"));
   // 檢查 URL 是否為錨點
@@ -258,7 +198,6 @@ function isAnchorLink(url) {
   <Navbar />
   <div class="bg-img">
     <v-container class="position-relative">
-      <!-- <img src="@/assets/img/article/background.png" alt="" class="bg-img" /> -->
       <div class="article-content">
         <v-breadcrumbs
           :items="breadcrumbs"
@@ -327,19 +266,20 @@ function isAnchorLink(url) {
           </v-col>
         </v-row>
 
-        <h2 id="readList">線上閱讀</h2>
+        <h2 ref="read">線上閱讀</h2>
 
-        <v-row class="align-center justify-center mt-16 read-list">
+        <v-row class="justify-center mt-16 read-list">
           <v-col
             cols="12"
             sm="6"
+            md="4"
             v-for="(item, index) in readList"
             :key="index"
-            class="d-flex flex-column align-center px-3"
+            class="d-flex flex-column align-center px-10"
           >
             <a
               v-if="store.isMobile"
-              :href="getPDF(item.fileName)"
+              :href="store.getPDF(item.fileName)"
               target="_blank"
             >
               <img :src="item.img" alt="" />
@@ -362,7 +302,9 @@ function isAnchorLink(url) {
           </v-col>
         </v-row>
 
-        <PDFViewer :file="fileName" />
+        <div ref="viewer">
+          <PDFViewer :file="fileName" />
+        </div>
 
         <h2 id="bookList">工藝書單</h2>
 
@@ -396,12 +338,32 @@ function isAnchorLink(url) {
             :key="index"
             class="position-relative mt-10 mb-16 pb-16"
           >
-            <a :href="item.url" target="_blank">
-              <img :src="item.img" alt="" />
+            <a :href="$router.resolve(`/article-detail/book/${index}`).href">
+              <div class="overflow-hidden">
+                <v-img
+                  class="mx-auto cover-img"
+                  :lazy-src="item.img"
+                  :src="item.img"
+                  cover
+                >
+                  <template v-slot:placeholder>
+                    <div class="d-flex align-center justify-center fill-height">
+                      <v-progress-circular
+                        color="grey-lighten-4"
+                        indeterminate
+                      ></v-progress-circular>
+                    </div>
+                  </template>
+                </v-img>
+              </div>
             </a>
+
+            <!-- <a :href="item.url" target="_blank">
+              <img :src="item.img" alt="" />
+            </a> -->
             <section class="info">
-              <p v-html="item.depiction"></p>
-              <span>{{ item.tag }}</span>
+              <p v-html="item.content"></p>
+              <span>{{ item.category }}</span>
             </section>
           </v-col>
         </v-row>
@@ -425,7 +387,7 @@ h2 {
 }
 
 .bg-img {
-  background-image: url("@/assets/img/article/background.png");
+  background-image: url("@/assets/img/crafts/background.png");
   background-size: cover;
   background-position: top;
   @media (max-width: 960px) {
@@ -442,7 +404,7 @@ h2 {
   }
   h3,
   p {
-    font-weight: 400;
+    font-weight: 500;
     text-align: center;
     line-height: 30px;
   }
@@ -451,10 +413,13 @@ h2 {
 .read-list {
   img {
     width: 100%;
-    height: 500px;
-    max-width: 400px;
+    height: 450px;
     object-fit: cover;
     cursor: pointer;
+
+    @media (max-width: 1280px) {
+      height: 300px;
+    }
     @media (max-width: 960px) {
       height: auto;
       max-width: 300px;

src/views/ArticleDetail.vue

@@ -1,95 +1,167 @@
 <script setup>
-import { reactive } from "vue";
-import { useRoute } from "vue-router";
+import { ref, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useMainStore } from "@/stores/store";
 import axios from "axios";
 import moment from "moment";
+import bookList from "@/utils/useBookList";
 import Navbar from "@/components/Navbar.vue";
 
 const route = useRoute();
-const articleId = route.params.id; // 網址參數
-const news = reactive({
-  data: [],
+const router = useRouter();
+const store = useMainStore();
+
+// 網址參數
+const articleId = route.params.id;
+const articleCategory = route.params.category;
+
+console.log("articleId", articleId);
+console.log("articleCategory", articleCategory);
+
+let list = reactive({
+  data: {},
+});
+
+if (articleCategory === "book") {
+  list.data = bookList[articleId];
+} else if (articleCategory === "article") {
+  getArticle();
+}
+
+let filePath = ref("");
+let file = reactive({
+  list: [],
 });
 
-(async function getData() {
+async function getArticle() {
   try {
     const response = await axios.get(
-      `https://cmm.ai:8088/api/get_article?article_id=${articleId}&group_id=${newsId}`
+      `https://cmm.ai:8088/api/get_article?article_id=${articleId}`
     );
-    // news.data = response.data.news[0];
-    console.log("article.data", response);
+
+    console.log("response", response.data.articles[0]);
+    list.data = response.data.articles[0];
+
+    const fileData = response.data.articles[0].files;
+    // 字符串轉物件
+    const fileObject = JSON.parse(fileData.replace(/'/g, '"'));
+
+    // 遍歷物件後將值存進陣列
+    file.list = Object.keys(fileObject).map((key) => ({
+      name: fileObject[key].split("/").pop(),
+      url: fileObject[key],
+    }));
+
+    console.log("fileList", file.list);
+    console.log("data", list.data);
   } catch (error) {
     console.error(error);
   }
-})();
+}
 </script>
 
 <template>
   <Navbar />
-  <div class="position-relative">
+  <div class="position-relative mb-16">
     <img src="@/assets/img/news/news-01.png" alt="" class="material-img" />
     <v-container class="pa-0 pt-16 position-relative">
-      <!-- <img
-        src="@/assets/img/news/news-detail-banner.png"
-        alt=""
-        class="bg-img"
-      /> -->
-
       <div class="content">
         <div class="article">
           <v-row>
             <v-col cols="12">
               <div class="d-flex align-center mb-5">
                 <v-chip size="large" variant="elevated" class="px-8 me-3">
-                  {{ news.data.category }}
+                  {{
+                    articleCategory === "book"
+                      ? list.data.category
+                      : list.data.group_sort
+                  }}
                 </v-chip>
-                <p>
-                  {{ moment(`${news.data.create_time}`).format("YYYY.MM.DD") }}
-                </p>
+                <!-- <p>
+                  {{ moment(`${list.data.create_time}`).format("YYYY.MM.DD") }}
+                </p> -->
               </div>
-              <h2>【{{ news.data.title }}】</h2>
-              <img src="@/assets/img/img-04.jpg" alt="" class="cover-img" />
-              <!-- <img :src="`https://cmm.ai/ntcri/${news.data.cover_img}`" alt="" /> -->
+              <h2 class="text-center">{{ list.data.title }}</h2>
+              <v-img
+                class="cover-img my-10"
+                :lazy-src="
+                  articleCategory === 'book'
+                    ? list.data.img
+                    : `https://ntcri.org/${list.data.cover_img}`
+                "
+                :src="
+                  articleCategory === 'book'
+                    ? list.data.img
+                    : `https://ntcri.org/${list.data.cover_img}`
+                "
+              >
+                <template v-slot:placeholder>
+                  <div class="d-flex align-center justify-center fill-height">
+                    <v-progress-circular
+                      color="grey-lighten-4"
+                      indeterminate
+                    ></v-progress-circular>
+                  </div>
+                </template>
+              </v-img>
             </v-col>
             <v-col cols="12">
               <section class="d-flex flex-column pa-0">
-                <p v-html="news.data.content"></p>
-
-                <div class="btn-block mt-10">
-                <v-btn rounded="xl" color="grey-darken-2" class="px-7">
-                  檔案下載
-                </v-btn>
-                <v-btn rounded="xl" color="grey-darken-2" class="px-7 ms-3">
-                  前往連結
-                </v-btn>
-              </div>
+                <p v-html="list.data.content"></p>
               </section>
             </v-col>
+            <v-col cols="12" class="mt-10" v-if="file.list.length">
+              <p>附件下載：</p>
+              <ul class="mt-7">
+                <li
+                  v-for="(item, index) in file.list"
+                  :key="index"
+                  class="d-flex align-center mb-2"
+                >
+                  <v-icon
+                    icon="mdi-file-download"
+                    color="brown"
+                    size="large"
+                    class="me-2"
+                  ></v-icon>
+                  <a :href="`https://ntcri.org/${item.url}`" download>{{
+                    item.name
+                  }}</a>
+                </li>
+              </ul>
+              <!-- <a :href="`https://ntcri.org/${filePath}`" download class="download-link">附件下載</a> -->
+            </v-col>
           </v-row>
         </div>
       </div>
     </v-container>
-    <router-link to="/news" class="mt-16 back-link"
-      >＜ 返回重要訊息</router-link
+    <router-link
+      v-if="articleCategory === 'book'"
+      to="/crafts"
+      class="mt-16 back-link"
+      >＜ 返回知識文章</router-link
+    >
+    <a href="javascript:;" v-else @click="router.go(-1)" class="back-link"
+      >＜ 回到上一頁</a
     >
     <img src="@/assets/img/news/news-01.png" alt="" class="material-img" />
   </div>
 </template>
 
 <style lang="scss" scoped>
+ul {
+  a {
+    line-height: 24px;
+    letter-spacing: 1px;
+    transition: all 0.3s;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
 .btn-block {
   display: flex;
   justify-content: end;
-  // position: absolute;
-  // bottom: 80px;
-  // right: 180px;
-  // @media (max-width: 600px) {
-  //   bottom: 65px;
-  //   right: unset;
-  //   width: 100%;
-  //   display: flex;
-  //   justify-content: center;
-  // }
 }
 
 .content {
@@ -98,15 +170,12 @@ const news = reactive({
   background-position: center;
   background-size: cover;
   border-radius: 50px;
+  @media (max-width: 960px) {
+    width: 90%;
+    margin: auto;
+  }
 }
 .article {
-  // position: absolute;
-  // right: 0;
-  // left: 0;
-  // top: 75px;
-  // height: 780px;
-  // overflow-y: scroll;
-  // overflow-x: hidden;
   margin: auto;
   padding: 80px 50px;
   display: flex;
@@ -114,18 +183,13 @@ const news = reactive({
   border: 1px solid #d4d6d8;
   border-radius: 50px;
 
-  // background-image: url('@/assets/img/news/news-detail-banner.png');
-  // background-position: center;
-  // background-size: cover;
-
-  @media (max-width: 960px) {
-    width: 80%;
-  }
+  // @media (max-width: 960px) {
+  //   width: 80%;
+  // }
 
   @media (max-width: 600px) {
-    top: 55px;
-    height: 470px;
-    padding-top: 10px;
+    padding: 50px 0;
+    border: none;
   }
 
   h2 {
@@ -139,19 +203,17 @@ const news = reactive({
     height: 100%;
     padding: 30px;
     p {
-      // padding: 20px;
-      // margin-bottom: 20px;
       font-size: 18px;
       font-weight: 400;
       line-height: 32px;
       letter-spacing: 1px;
+      white-space: pre-line;
     }
   }
 
   .cover-img {
     width: 100%;
-    height: 500px;
-    object-fit: cover;
+    max-height: 500px;
     @media (max-width: 600px) {
       height: auto;
     }
@@ -167,6 +229,7 @@ const news = reactive({
 }
 
 .back-link {
+  margin-top: 50px;
   display: block;
   text-align: center;
   transition: all 0.3s;
@@ -184,7 +247,7 @@ const news = reactive({
   }
 
   &:last-child {
-    bottom: -150px;
+    bottom: -130px;
     z-index: -5;
     transform: scaleX(-1);
 

src/views/CollegeGroup/Cross.vue

@@ -17,7 +17,7 @@ const breadcrumbs = reactive([
     disabled: true,
   },
   {
-    title: "跨域工藝",
+    title: "跨域增能",
     disabled: true,
   },
 ]);
@@ -60,6 +60,45 @@ const testData = [
     class="mt-10 pa-0"
   ></v-breadcrumbs>
 
+  <div class="list">
+    <section>
+      <h3>跨域增能</h3>
+      <p>
+        培育能承接文化生產者的內涵與工藝知識，並轉化成一般人能同理感受並更進一步在生活中學習應用的人才。
+        <br />
+        主要專業並非工藝而是更偏向社會傳播，或其他八大藝術專業或民俗文化專業。但能進一步了解文化生產者。
+        <br />
+        不管是傳統工藝的延伸，或是有形、無形文化資產的保護與創意化，都鼓勵跨領域的合作與創作，並在最後達到永續經營，成為國家升級的重要推動力量。以因應本土化、國際化、多元化的環境銳變與社會趨勢。
+      </p>
+    </section>
+
+    <section>
+      <h3>提供多元領域專業課程</h3>
+      <p>
+        法務知識、財務稅務、資金籌措、藝術行政、市場分析、產品開發、消費者管理、藝術藏家、
+        品牌設計、市場通路、行銷策略、展覽企劃、文案撰寫、公關溝通、其他類及，策略課程
+      </p>
+    </section>
+
+    <section>
+      <h3>教學型態</h3>
+      <div class="d-flex flex-column flex-sm-row justify-center">
+        <p>
+          素養型 <br />
+          （講述核心素養）
+        </p>
+        <p>
+          知識型 <br />
+          （講述基本能力）
+        </p>
+        <p>
+          技術型 <br />
+          （實作、討論）
+        </p>
+      </div>
+    </section>
+  </div>
+
   <div
     class="d-flex flex-column flex-sm-row align-center justify-space-between title"
   >
@@ -245,53 +284,45 @@ const testData = [
 </template>
 
 <style lang="scss" scoped>
-.content {
-  padding: 0;
-  width: 90%;
-
-  @media (max-width: 600px) {
-    width: 85%;
-  }
-  .main-block {
-    padding: 100px 80px;
-    margin-top: -30%;
-    background-color: #fff;
-
-    @media (max-width: 960px) {
-      padding: 100px 50px;
-    }
-
+.main-block {
+  h2 {
     @media (max-width: 600px) {
-      padding: 100px 20px;
+      margin-bottom: 30px;
     }
+  }
+}
 
-    h2 {
-      font-size: 30px;
+.list {
+  max-width: 850px;
+  margin: 100px auto 50px;
+  @media (max-width: 600px) {
+    margin: 50px auto;
+  }
+  section {
+    margin-bottom: 50px;
+    text-align: center;
+    h3 {
+      margin-left: -20px;
+      margin-bottom: 25px;
+      list-style: disc;
+      font-size: 28px;
       font-weight: 500;
-      line-height: 32px;
-      margin-left: 10px;
-
-      @media (max-width: 960px) {
-        font-size: 24px;
-      }
-
       @media (max-width: 600px) {
-        margin-left: 0;
-        margin-bottom: 50px;
+        font-size: 22px;
       }
-    }
-    .title {
-      margin: 80px 0;
-      @media (max-width: 600px) {
-        margin: 50px 0;
+      &::before {
+        content: "\2022"; /* Unicode 編碼 */
+        font-size: 1.2em;
+        color: #bca2b5;
+        position: relative;
+        top: 3px;
       }
     }
-    .v-breadcrumbs {
-      position: relative;
-      z-index: 100;
-      justify-content: flex-start;
+    p {
+      line-height: 28px;
+      letter-spacing: 1px;
       @media (max-width: 600px) {
-        justify-content: center;
+        font-size: 14px;
       }
     }
   }

src/views/CollegeGroup/Future.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { ref, reactive } from "vue";
-import moment from "moment";
-import Navbar from "@/components/Navbar.vue";
 import { useMainStore } from "@/stores/store";
+import moment from "moment";
+import readList from "@/utils/useReadList";
 
 const store = useMainStore();
 
@@ -22,22 +22,7 @@ const breadcrumbs = reactive([
   },
 ]);
 
-const testData = [
-  {
-    title: "工藝跨域研創補助計畫【徵件至9月28日止】",
-    start_time: "2023/06/15",
-    end_time: "2023/09/28",
-    address: "國立台灣工藝研究發展中心",
-    img: store.getImageUrl("college-group/img.jpg"),
-  },
-  {
-    title: "積極性藝文紓困補助方案",
-    start_time: "2023/06/15",
-    end_time: "2023/09/28",
-    address: "國立台灣工藝研究發展中心",
-    img: store.getImageUrl("college-group/img.jpg"),
-  },
-];
+const bookList = readList.slice().splice(2, 4);
 </script>
 
 <template>
@@ -48,61 +33,201 @@ const testData = [
   ></v-breadcrumbs>
 
   <div class="title">
-    <h2>研發補助</h2>
+    <h2 class="mb-0">研發補助</h2>
   </div>
 
-  <ul>
-    <li v-for="(item, index) in testData" :key="index" class="mb-10">
-      <v-card
-        variant="outlined"
-        class="d-flex flex-md-row flex-column align-center pa-5"
-      >
-        <v-row class="align-center">
-          <v-col sm="4" cols="12">
-            <img src="@/assets/img/img-04.jpg" alt="" />
-          </v-col>
-          <v-col sm="8" cols="12">
-            <section class="d-flex flex-column px-5 px-sm-10 py-5 py-md-0">
-              <h2 class="ms-0 mb-16">{{ item.title }}</h2>
-              <span class="d-flex align-center">
-                <v-icon
-                  color="gray"
-                  icon="mdi-calendar-range"
-                  class="me-2"
-                ></v-icon>
-                <p>
-                  {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }}
-                  ～ {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
-                </p>
-              </span>
-              <span class="d-flex align-center mt-3">
-                <v-icon
-                  color="gray"
-                  icon="mdi-map-marker"
-                  class="me-2"
-                ></v-icon>
-                <p>
-                  {{ item.address }}
-                </p>
-              </span>
-            </section>
-          </v-col>
-        </v-row>
-      </v-card>
-    </li>
-  </ul>
+  <v-container class="pa-0 pa-sm-3">
+    <div class="content">
+      <img src="@/assets/img/college-group/future/素材-07.png" alt="" />
+      <section>
+        <h3 class="mb-10">工藝跨域研創補助計畫【徵件至9月28日止】</h3>
+        <span class="d-flex align-center mb-2">
+          <v-icon color="gray" icon="mdi-calendar-range" class="me-2"></v-icon>
+          2023/05/18 09:00 ~ 2023/09/28 17:00
+        </span>
+        <span class="d-flex align-center">
+          <v-icon color="gray" icon="mdi-map-marker" class="me-2"></v-icon>
+          國立臺灣工藝研究發展中心
+        </span>
+        <p class="mt-8">
+          國立臺灣工藝研究發展中心為實踐從總體經濟觀上思考整體工藝文化產業價值，及厚實臺灣工藝產業未來發展之國際文化競爭力，徵求類型含物件型研創、新材料研創、技術性研創、社會與環境議題研創等，申請團隊可提出相關實績說明或規畫構想，最高獲得
+          #新臺幣50萬元
+          補助，歡迎國內相關機構、產業、公司等法人或團體以及個人創作者等單位踴躍提案申請！
+        </p>
+      </section>
+
+      <section>
+        <p class="sub-title mb-5">附件下載</p>
+        <ul>
+          <li class="dot">
+            <span class="dot"></span>
+            <a href="">工藝跨域研創補助須知.pdf</a>
+          </li>
+          <li class="dot py-2 py-sm-0">
+            <a href="">工藝跨域研創補助計畫申請書.docx</a>
+          </li>
+          <li class="dot">
+            <a href="">工藝跨域研創補助計畫申請書.odt</a>
+          </li>
+        </ul>
+      </section>
+
+      <p class="text-end mt-5">
+        聯絡資訊 : 049-2334141 分機134 王小姐、分機136 張小姐
+      </p>
+
+      <img
+        class="mt-16"
+        src="@/assets/img/college-group/future/素材-08.png"
+        alt=""
+      />
+    </div>
+  </v-container>
+
+  <div class="title">
+    <h2>研究計畫</h2>
+  </div>
+
+  <v-container class="book-block">
+    <v-row
+      v-for="(item, index) in bookList"
+      :key="index"
+      class="align-center mb-16"
+    >
+      <v-col cols="12" md="4" class="d-flex flex-column align-center">
+        <a
+          v-if="store.isMobile"
+          :href="store.getPDF(item.fileName)"
+          target="_blank"
+          class="cover-img"
+        >
+          <img :src="item.img" alt="" />
+          <button class="read-btn">點我閱讀</button>
+        </a>
+
+        <router-link v-else :to="`/crafts/${item.fileName}`" class="cover-img">
+          <img :src="item.img" alt="" />
+          <button class="read-btn">點我閱讀</button>
+        </router-link>
+        <h3 v-html="item.title"></h3>
+        <h3>{{ item.depiction }}</h3>
+      </v-col>
+      <v-col cols="12" md="8" class="px-md-16 pb-md-16 mb-md-10">
+        <h4 v-html="item.caption"></h4>
+        <p class="mt-10">{{ item.content }}</p>
+      </v-col>
+    </v-row>
+  </v-container>
+
+  <!-- <button class="sloped-btn">點我閱讀</button> -->
 </template>
 
 <style lang="scss" scoped>
-.main-block {
-  img {
-    width: 100%;
-    height: 250px;
-    object-fit: cover;
+.content {
+  margin: auto;
+  max-width: 800px;
+  letter-spacing: 1px;
+
+  p {
+    line-height: 28px;
   }
 
-  span {
-    line-height: 24px;
+  section {
+    padding: 50px;
+    margin-top: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+
+    @media (max-width: 600px) {
+      padding: 25px;
+    }
+
+    h3 {
+      font-weight: 500;
+      font-size: 28px;
+      line-height: 36px;
+
+      @media (max-width: 600px) {
+        font-size: 22px;
+      }
+    }
+
+    a,
+    span {
+      line-height: 22px;
+    }
+
+    .sub-title {
+      font-size: 18px;
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      &::before {
+        content: "•";
+        font-size: 2em;
+        color: #bca2b5;
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.book-block {
+  line-height: 30px;
+  letter-spacing: 1px;
+
+  @media (max-width: 600px) {
+    padding: 0 !important;
+  }
+
+  h3 {
+    text-align: center;
+    font-weight: 500;
+  }
+  h4 {
+    font-size: 18px;
+    font-weight: 400;
+  }
+  .cover-img {
+    position: relative;
+    cursor: pointer;
+
+    img {
+      @media (max-width: 960px) {
+        max-height: 500px;
+      }
+    }
+
+    &:hover {
+      .read-btn {
+        background-color: #99b1bb;
+      }
+    }
+    .read-btn {
+      padding: 8px 50px;
+      position: absolute;
+      right: -50px;
+      bottom: 45px;
+      font-size: 18px;
+      letter-spacing: 2px;
+      text-shadow: 1px 1px 3px #939393;
+      background-color: #a7c2cd;
+      color: white;
+      cursor: pointer;
+      clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
+      transition: all 0.3s;
+      &:hover {
+        background-color: #99b1bb;
+      }
+
+      @media (max-width: 600px) {
+        padding: 8px 35px;
+        right: -15px;
+        font-size: 16px;
+      }
+    }
   }
 }
 </style>

src/views/CollegeGroup/Life.vue

@@ -10,7 +10,7 @@ let travel = reactive({
   list: [],
 });
 
- // 希望工程
+// 希望工程
 let hope = reactive({
   list: [],
 });
@@ -52,7 +52,6 @@ let articles = reactive({
     campus.list = response.data.articles.filter(
       (e) => e.group_sort === "校園扎根"
     );
-    
 
     console.log("一日學徒 - 展覽", exhibit.list);
     console.log("希望工程", hope.list);
@@ -119,86 +118,6 @@ const shopImgs = [
     img: store.getImageUrl("college-group/life/shop/旅物shop-12.png"),
   },
 ];
-
-const travelImgs = [
-  {
-    title: "新埔柿染坊",
-    depiction: "型版刷染體驗、柿染體驗",
-    img: store.getImageUrl("college-group/life/生活工藝素材-20.png"),
-  },
-  {
-    title: "高雄市寶來人文協會",
-    depiction: "賞陶、植物染體驗、品茶",
-    img: store.getImageUrl("college-group/life/生活工藝素材-21.png"),
-  },
-  {
-    title: "新埔柿染坊",
-    depiction: "型版刷染體驗、柿染體驗",
-    img: store.getImageUrl("college-group/life/生活工藝素材-22.png"),
-  },
-  {
-    title: "新埔柿染坊",
-    depiction: "型版刷染體驗、柿染體驗",
-    img: store.getImageUrl("college-group/life/生活工藝素材-20.png"),
-  },
-];
-
-const hopeImgs = [
-  {
-    title: "竹編手作體驗，療癒長輩身心靈",
-    depiction: "東湖感恩堂社區關懷據點",
-    img: store.getImageUrl("college-group/life/生活工藝素材-25.png"),
-  },
-  {
-    title: "樂齡長者共創馬賽克工藝",
-    depiction: "財團法人新故鄉文教基金會",
-    img: store.getImageUrl("college-group/life/生活工藝素材-26.png"),
-  },
-  {
-    title: "海廢彩繪撲滿課程，陪伴長者手作",
-    depiction: "臺東縣橄欖社區關懷服務協會－和平文健站",
-    img: store.getImageUrl("college-group/life/生活工藝素材-27.png"),
-  },
-  {
-    title: "竹編手作體驗，療癒長輩身心靈",
-    depiction: "東湖感恩堂社區關懷據點",
-    img: store.getImageUrl("college-group/life/生活工藝素材-25.png"),
-  },
-];
-
-const exhibitImgs = [
-  {
-    title: "我們的家：臺灣綠工藝關係美學",
-    depiction:
-      "第一站 「華盛頓巡迴展」 112年5月12日至31日 <br> 第二站 「紐約巡迴展」112年6月7日至30日",
-    img: store.getImageUrl("college-group/life/生活工藝素材-30.png"),
-  },
-  {
-    title: "「自然•至燃—筆墨云 林文嶽創作展」",
-    depiction: "2023/03/29 09:30 ~ 2023/09/03 17:30",
-    img: store.getImageUrl("college-group/life/生活工藝素材-31.png"),
-  },
-  {
-    title: "「自然•至燃—筆墨云 林文嶽創作展」",
-    depiction: "2022/12/04 00:01 ~ 2023/06/30 23:59",
-    img: store.getImageUrl("college-group/life/生活工藝素材-32.png"),
-  },
-];
-
-const campusImgs = [
-  {
-    title: "羊毛氈手作體驗坊",
-    img: store.getImageUrl("college-group/life/生活工藝素材-33.png"),
-  },
-  {
-    title: "工藝輕手作，開啟學童多元學習視野",
-    img: store.getImageUrl("college-group/life/生活工藝素材-34.png"),
-  },
-  {
-    title: "工藝校園扎根教案輔導計畫",
-    img: store.getImageUrl("college-group/life/生活工藝素材-35.png"),
-  },
-];
 </script>
 
 <template>
@@ -208,7 +127,75 @@ const campusImgs = [
     class="mt-10 pa-0"
   ></v-breadcrumbs>
 
-  <h2 class="title">旅物 SHOP</h2>
+  <v-container class="pa-0 life-list">
+    <router-link to="/college-group/life/shop">
+      <v-row>
+        <v-col cols="12" md="4" lg="5" class="pa-0 overflow-hidden">
+          <img src="@/assets/img/college-group/life/cover-01.png" alt="" />
+        </v-col>
+        <v-col cols="12" md="8" lg="7" class="content">
+          <h3 class="mb-5">旅物 SHOP</h3>
+          <p>
+            《旅物 •
+            SHOP》位於自然生態豐富的臺灣工藝文化園區，明亮穿透的空間設計，連結窗外工藝植物園，到室內的生活工藝選物，這是一間由土地孕育而生的工藝選品店，從採擷、手作，到用物於生活，是材料與手、物與物、人與物、人與人彼此流動交會，共度美好日常的店頭。包含崇尚自然循環，創造生活風格的臺灣在地「臺灣綠工藝」品牌、扶植青年創業的「青年孵化器」、工藝中心開發的周邊商品「品工藝」以及在地咖啡品牌「一日咖啡」等四個子品牌，推廣「自然、循環、平衡、寬容、生命力」的綠工藝精神，更是鼓勵青年實驗開店、青年工藝家的孵化平臺。
+          </p>
+        </v-col>
+      </v-row>
+    </router-link>
+
+    <router-link to="/college-group/life/craftJourney">
+      <v-row>
+        <v-col cols="12" md="8" lg="7" class="content">
+          <h3 class="mb-10">工藝行旅</h3>
+          <p>
+            工藝文化深度旅遊，品味在地、標記生活 <br />
+            打造以工藝為核心的文化深度旅遊路徑，結合工藝體驗、自然風土、地方美食、在地物產、
+            建築等觀光資源，旅人緩步慢行，暫離喧囂、以手作沉澱自我，發現生命中的寧靜與感動。
+            現在一起出發，感受工藝行旅的魅力和樂趣！
+          </p>
+        </v-col>
+        <v-col cols="12" md="4" lg="5" class="pa-0 overflow-hidden">
+          <img src="@/assets/img/college-group/life/cover-02.png" alt="" />
+        </v-col>
+      </v-row>
+    </router-link>
+
+    <router-link to="/college-group/life/apprentice">
+      <v-row>
+        <v-col cols="12" md="8" lg="7" class="content">
+          <h3 class="mb-10">一日學徒</h3>
+          <p>
+            全民工藝教育倡議平台｜生活 x 手作 x 體驗 <br />
+            以「手做」，經歷生活中的一切美好！ <br />
+            用「一日」，體會過去師徒制三年四個月的工藝學習精神與態度！ <br />
+            由工藝家親自規畫各類手作工藝課程，隨時提供最新課程資訊，民眾依據喜好選擇課程，
+            體驗半天或一天的手作工藝學習，尋找就近的工藝家學習各種小物知識經驗與技藝。
+          </p>
+        </v-col>
+        <v-col cols="12" md="4" lg="5" class="pa-0 overflow-hidden">
+          <img src="@/assets/img/college-group/life/cover-03.png" alt="" />
+        </v-col>
+      </v-row>
+    </router-link>
+
+    <router-link to="/college-group/life/campus">
+      <v-row>
+        <v-col cols="12" md="4" lg="5" class="pa-0 overflow-hidden">
+          <img src="@/assets/img/college-group/life/cover-04.png" alt="" />
+        </v-col>
+        <v-col cols="12" md="8" lg="7" class="content">
+          <h3 class="mb-10">校園扎根</h3>
+          <p>
+            工藝校園扎根計畫以工藝融入學校教育，媒合教師與工藝家，跨域合作開發具創造力、觀察力、美學素養、批判思考以及手作體驗的工藝教材教案，實踐工藝之於學習、生活的價值。符合教育部
+            12 年國教課綱的「核心素養」，以及 STEAM
+            教育的五大精神「跨領域、動手做、生活應用、解決問題及五感學習」，以「做中學，學中做」培育新世代的工藝人才。
+          </p>
+        </v-col>
+      </v-row>
+    </router-link>
+  </v-container>
+
+  <!-- <h2 class="title">旅物 SHOP</h2>
 
   <div class="px-md-8">
     <v-slide-group center-active show-arrows>
@@ -237,15 +224,21 @@ const campusImgs = [
         </a>
       </v-col>
     </v-row>
-  </div>
+  </div> -->
 
-  <h2 class="title">工藝行旅</h2>
+  <!-- <h2 class="title">工藝行旅</h2>
 
   <div class="px-md-8 trave-content">
     <v-slide-group center-active show-arrows>
       <v-slide-group-item v-for="item in travel.list" :key="item">
         <div class="ma-3 info">
-          <img :src="item.cover_img" alt="" />
+          <a
+            :href="
+              $router.resolve(`/article-detail/article/${item.article_id}`).href
+            "
+          >
+            <img :src="`https://ntcri.org/${item.cover_img}`" alt="" />
+          </a>
           <section>
             <h3>{{ item.title }}</h3>
             <p>{{ item.depiction }}</p>
@@ -303,7 +296,14 @@ const campusImgs = [
       <v-slide-group center-active show-arrows>
         <v-slide-group-item v-for="item in hope.list" :key="item">
           <div class="ma-3 info">
-            <img :src="item.cover_img" alt="" />
+            <a
+              :href="
+                $router.resolve(`/article-detail/article/${item.article_id}`)
+                  .href
+              "
+            >
+              <img :src="`https://ntcri.org/${item.cover_img}`" alt="" />
+            </a>
             <section>
               <h3>{{ item.title }}</h3>
               <p>{{ item.depiction }}</p>
@@ -345,17 +345,17 @@ const campusImgs = [
 
             <router-link :to="`/course-detail/${item.class_name_id}`">
               <section class="mt-4">
-              <h3>{{ item.name }}</h3>
-              <p v-html="item.introduction"></p>
-            </section>
+                <h3>{{ item.name }}</h3>
+                <p v-html="item.introduction"></p>
+              </section>
             </router-link>
           </div>
         </v-slide-group-item>
       </v-slide-group>
     </v-col>
-  </v-row>
+  </v-row> -->
 
-  <h2 class="title">校園扎根</h2>
+  <!-- <h2 class="title">校園扎根</h2>
 
   <v-row class="justify-center px-md-8">
     <v-col cols="12" sm="10" md="11">
@@ -374,7 +374,14 @@ const campusImgs = [
       <v-slide-group center-active show-arrows>
         <v-slide-group-item v-for="item in campus.list" :key="item">
           <div class="ma-3 info">
-            <img :src="item.cover_img" alt="" />
+            <a
+              :href="
+                $router.resolve(`/article-detail/article/${item.article_id}`)
+                  .href
+              "
+            >
+              <img :src="`https://ntcri.org/${item.cover_img}`" alt="" />
+            </a>
             <section class="mt-4">
               <h3>{{ item.title }}</h3>
             </section>
@@ -382,122 +389,60 @@ const campusImgs = [
         </v-slide-group-item>
       </v-slide-group>
     </v-col>
-  </v-row>
+  </v-row> -->
 </template>
 
 <style lang="scss" scoped>
-.college-content .main-block h2 {
-  @media (max-width: 600px) {
-    margin-bottom: 0;
-  }
-}
-
-h4 {
-  margin-bottom: 20px;
-  font-weight: 400;
-  font-size: 20px;
-  letter-spacing: 1px;
-  line-height: 32px;
-}
-
-.info {
-  img {
-    width: 300px;
-    height: 200px;
-    object-fit: cover;
+.life-list {
+  margin-top: 150px;
+  @media (max-width: 960px) {
+    margin-top: 100px;
   }
-}
-
-.link-btn {
-  display: inline-block;
-  padding: 10px 20px;
-  border-radius: 100px;
-  line-height: 24px;
-  text-align: center;
-  color: #fff;
-  background-color: var(--brown);
-  border: 2px solid transparent;
-  transition: all 0.5s;
-  &:hover {
-    color: var(--brown);
-    border: 2px solid var(--brown);
-    background-color: #fff;
+  @media (max-width: 600px) {
+    margin-top: 0;
   }
-}
-p {
-  line-height: 28px;
-  letter-spacing: 1px;
-}
-
-.trave-content,
-.hope-content,
-.exhibit-content,
-.campus-content {
-  .info {
-    section {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 10px;
-      border-radius: 5px;
-      background: rgba(218, 182, 214, 0.7);
-      h3 {
-        margin: 5px;
-        font-weight: 400;
-      }
-      p {
-        font-size: 12px;
+  a {
+    display: block;
+    margin: 50px 0;
+    border: 2px solid var(--purple);
+    border-radius: 20px;
+    overflow: hidden;
+    &:hover {
+      img {
+        transform: scale(1.1);
       }
     }
   }
-}
-
-.trave-content,
-.hope-content {
-  .info {
-    position: relative;
-    section {
-      position: absolute;
-      right: 10px;
-      left: 10px;
-      bottom: 10px;
-    }
+  h3 {
+    font-size: 24px;
+    font-weight: 500;
   }
-}
-
-.hope-content {
-  .cover-img {
+  img {
     width: 100%;
-    max-width: 500px;
-    margin: auto;
-  }
-}
-
-.trave-content,
-.hope-content,
-.exhibit-content {
-  .info {
-    section {
-      max-width: 300px;
-      justify-content: center;
-    }
-    h3,
-    p {
-      line-height: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      line-break: after-white-space;
+    height: 330px;
+    min-height: 100%;
+    object-fit: cover;
+    transition: all 0.5s;
+    @media (max-width: 1280px) {
+      height: 370px;
     }
-    h3 {
-      -webkit-line-clamp: 1;
+    @media (max-width: 600px) {
+      height: 200px;
     }
-    p {
-      max-width: 220px;
-      margin-top: 5px;
-      -webkit-line-clamp: 2;
+  }
+  .content {
+    padding: 35px 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    @media (max-width: 1280px) {
+      padding: 40px;
     }
   }
 }
+
+p {
+  line-height: 28px;
+  letter-spacing: 1px;
+}
 </style>

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

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <h3 class="sub-title">關於一日學徒</h3>
+    <img
+      src="@/assets/img/college-group/life/apprentice/about.jpg"
+      alt=""
+      class="mb-10"
+    />
+    <p class="mb-10">「一日學徒」，一個推廣全民工藝教育概念之倡議平台。</p>
+    <p>
+      每天早晨，手裡端著自己手做陶杯，啜飲一口帶有果酸風味的咖啡，搭配以天然漆製作而成的變塗筷叉，將盛放在桂竹盤上的濃郁起司蛋糕放入口中；
+      <br />
+      或是在春寒料峭的時節裡，親手為自己最重視的家人製作溫暖的藍染圍巾，戴上用溫暖羊毛氈編製而成的貝蕾帽…。
+      <br />
+      用「手做」，來經歷生活中一切的美好！ <br />
+      用「一日」，來體會傳統師徒制三年四個月的工藝學習精神與態度！ <br />
+      透過「一日學徒」網站，由工藝家親自規畫各類手作工藝課程，並隨時提供最新課程資訊，民眾可以依據喜好選擇課程，體驗半天或一天的手作工藝學習，尋找就近的工藝家學習各種小物知識經驗與技藝。
+      「一日學徒」不僅提供工藝社群持續創作，也希望讓一般民眾隨時隨地擁有學習手作工藝的愉悅體驗及感動，以積極推廣全民工藝教育的理念，達成
+      Craft For All 的目標。
+    </p>
+    <p class="mt-10 mb-5">
+      Apprentice for a Day: A platform advocating “Craft for All”.
+    </p>
+    <p>
+      Every morning, I have a sip of fruity coffee from my own hand-made ceramic
+      mug, and take in a piece of rich, tangy cheesecake from the bamboo plate
+      with lacquered chopsticks; <br />
+      Or, against those cold winds in early Spring, I make an indigo dye scarf
+      for the beloved in my family, and wear a wool felt beret... <br />
+      Let us experience the joy in life through working with our own hands!
+      <br />
+      In the time of one day, come to experience and learn about the spirit of
+      craftsmanship that normally takes 3 years and 4 months! <br />
+      Through the "Apprentice for a Day” website, artisans design their own
+      courses for various types of handicraft; they can offer you the latest
+      course information at any time. Individuals can select courses according
+      to their interest, experience a half-day or one-day handicraft learning
+      about all kinds of craft knowledge and skills from craftsmen near your
+      neighborhood. <br />
+      "Apprentice for a Day” supports the pursuit of creativity in the community
+      of craftsmen and artists, and also offers a platform for everyone to enjoy
+      the joy of craft and be inspired by the learning of crafts, ultimately
+      achieving “Craft for All” through active promotion.
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <h3 class="sub-title">聯絡我們</h3>
+    <p>
+      非常感謝您使用一日學徒平台，如有任何相關問題， <br />
+      請您於週一至週五 09:00-17:00
+      撥打以下電話，將有專人為您服務（若遇國定假日或忙線，請留言）
+    </p>
+    <h4 class="my-8">Call Center 藝速通 0800-222-800（請用市內電話撥打）</h4>
+    <p>或利用其他諮詢方式，我們將儘速為您服務：</p>
+    <ul class="mt-5">
+      <li>
+        <v-icon icon="mdi-email-outline" class="me-2"></v-icon>
+        <a href="mailto:yfyang@ntcri.gov.tw">yfyang@ntcri.gov.tw</a>
+      </li>
+      <li>
+        <v-icon icon="mdi-facebook" class="me-2"></v-icon>
+        <a href="https://www.facebook.com/NTCRI" target="_blank"
+          >https://www.facebook.com/NTCRI</a
+        >
+      </li>
+      <li>
+        <v-icon icon="mdi-instagram" class="me-2"></v-icon>
+        <a href="https://www.instagram.com/ntcri_ntcri/" target="_blank"
+          >https://www.instagram.com/ntcri_ntcri/</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+a {
+  transition: all 0.3s;
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+h4 {
+  font-size: 24px;
+  font-weight: 500;
+  color: var(--purple);
+}
+
+li {
+  margin: 15px 0;
+  display: flex;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        選課資訊
+    </div>
+</template>

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

@@ -0,0 +1,76 @@
+<script setup>
+import { ref, reactive } from "vue";
+
+const faqList = [
+  {
+    q: "工藝中心創立「一日學徒｣平台的主要用意是什麼？",
+    a: "為了提供工藝家 (課程供應端) 全國統一招生平台，擴大招生對象，讓工藝家可以持續創作且簡易上傳課程訊息。也提供一般民眾 (學習需求端) 隨時查詢課程資訊，就地選擇有興趣的課程，推廣工藝學習教育。透過工藝輕體驗過程，來體會傳統師徒制三年四個月的工藝學習精神與態度，也為工坊帶來人流，促進文化與經濟之加成效益。",
+  },
+  {
+    q: "工藝家開課需要具備什麼資格或條件嗎？",
+    a: "工藝家所上傳之課程內容應符合手作工藝之範疇，所訂定之價格應屬合理之範圍，並須確保上傳內容未侵害第三人之智慧財產權或營業秘密等相關法律問題。",
+  },
+  {
+    q: "使用「一日學徒｣平台開設課程需要收費嗎？",
+    a: "在「一日學徒｣平台開設手作工藝課程是完全不需要付費，工藝中心也不會向工藝家及報名學員收取任何費用。上課細節及收費方式，也完全由工藝家與學員自行聯繫溝通。",
+  },
+  {
+    q: "工藝家該如何上傳自己的課程呢？",
+    a: "工藝家只要用 Google 或臉書(FB)帳號登入「一日學徒｣平台，就可以在「工藝家開課｣的欄位處，按照網站的指示步驟輸入內容資訊，就可以輕鬆上傳自己的課程。未來課程報名截止後，也只要用開課時所登錄的帳號，即可查詢學員名單，主動聯繫學員上課細節。",
+  },
+  {
+    q: "工藝家開課的授課計畫表時間應如何設定？",
+    a: "在授課計畫表裡會有(1)授課日期的起迄日(2)報名截止日(3)授課時間。工藝家可先設定要上課的起始與結束日期(月曆選單)；然後選擇報名截止日期(為了方便工藝家們準備耗材及課程，我們建議報名截止日期設定在開課前7天)；最後，選擇您上課的時段(時間選單)，即可完成授課日期與時間設定。如果工藝家規劃的是週期性課程，我們則建議您在備註欄位增加說明(例如:本課程為每周六上午 9:00-12:00 等補充說明)",
+  },
+  {
+    q: "民眾報名課程應如何收費？",
+    a: "在授課計畫表裡工藝家應標明課程所需費用(新台幣)及繳費方式。本平台目前僅提供工藝家現場收費方式，工藝家如需請學員事先匯款或收取保證金等要求，請於課程費用欄位中備註說明須繳交之金額並提供帳戶，俾便學員匯款。",
+  },
+  {
+    q: "工藝家上傳課程後，要如何知道該課程是否上傳成功？",
+    a: "工藝家按照步驟指示依序填寫課程資料並確認送出後，系統將主動寄送 E-mail 通知您課程審核中的訊息，本中心也將儘快審核工藝家課程並協助上架。待課程通過審核上架後，系統將再次寄送 E-mail 通知工藝家課程上架是否成功。",
+  },
+  {
+    q: "工藝家該如何知道報名學員的人數或聯絡資訊呢？",
+    a: "報名期限截止後，系統將會寄送 E-mail 通知報名學員的名單給您。您也可以利用開課時所登錄的帳號(臉書 Facebook 或 Google 帳號)進到課程中，即可檢視該課程學員名單，也請您主動聯繫學員並說明上課細節及應注意事項。 <br> 報名期間內如您需要了解當下有多少學員報名，也可至藝文活動平台→活動分類→一日學徒區塊中，找到您所開立的課程，即可檢視該課程當下報名人數(因個資因素，藝文平台僅提供人數及學員姓名)。 <br> 藝文活動平台網址：<a href='https://event.culture.tw/NTCRI/portal/Index/IndexAction' target='_blank'>https://event.culture.tw/NTCRI/portal/Index/IndexAction</a>",
+  },
+  {
+    q: "授課計畫表內的課程類別是否需要勾選？",
+    a: "工藝家可以根據您教學的課程內容勾選課程類別，方便學員在使用搜尋功能時可立即找到想要學習的媒材項目，如不勾選，也可按下一步送出資訊。",
+  },
+  {
+    q: "授課計畫表內的完成圖片是否一定要上傳？",
+    a: "不一定要放照片。不過建議如果工藝家可以提供精采作品照片(或是創作過程照片)，將讓學員更加了解課程實際完成的成果或工藝家創作工序，尤其是拍攝精美的照片，更容易達到推廣與招生的效果。",
+  },
+  {
+    q: "民眾要如何選擇課程呢？",
+    a: "民眾可在一日學徒平台瀏覽各類型的手作工藝課程，也可以利用關鍵字、地區或材質類型搜尋有興趣的課程。當您選定課程後，只要按下課程下方的「我要報名｣鍵，系統將立即引導您連結至報名網站，您只要按系統指引的報名步驟，就可以輕鬆完成課程報名。如果對於課程內容想要了解更多，也可在課程資訊中找到工藝家的聯絡方式，主動聯絡工藝家以了解更多相關內容。",
+  },
+  {
+    q: "操作平台過程中如有任何問題，該如何處理？",
+    a: "一日學徒平台網站提供 Call center 藝速通服務(0800-222-800)，另外也提供平台使用操作手冊，如有任何問題，都歡迎您來電洽詢。",
+  },
+];
+</script>
+
+<template>
+  <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-text v-html="item.a"> </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<style scoped>
+.v-expansion-panel-title {
+  letter-spacing: 1px;
+}
+.v-expansion-panel-text {
+  padding: 20px;
+  font-size: 16px;
+  line-height: 30px;
+  letter-spacing: 1px;
+}
+</style>

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

@@ -0,0 +1,111 @@
+<script setup>
+import { ref, reactive } from "vue";
+import moment from "moment";
+
+const breadcrumbs = reactive([
+  {
+    title: "首頁",
+    disabled: false,
+    href: "/",
+  },
+  {
+    title: "生活工藝",
+    href: "/college-group/life",
+    disabled: false,
+  },
+  {
+    title: "一日學徒",
+    disabled: true,
+  },
+]);
+
+const categoryList = reactive([
+  {
+    title: "關於一日學徒",
+    path: "/college-group/life/apprentice/about",
+  },
+  {
+    title: "學徒選課資訊",
+    path: "/college-group/life/apprentice/course",
+  },
+  {
+    title: "最新訊息",
+    path: "/college-group/life/apprentice/news",
+  },
+  {
+    title: "聯絡我們",
+    path: "/college-group/life/apprentice/contact",
+  },
+  {
+    title: "FAQ",
+    path: "/college-group/life/apprentice/faq",
+  },
+  {
+    title: "服務條款",
+    path: "/college-group/life/apprentice/terms",
+  },
+]);
+</script>
+
+<template>
+  <v-breadcrumbs
+    :items="breadcrumbs"
+    divider="/"
+    class="mt-10 p-0"
+  ></v-breadcrumbs>
+
+  <h2 class="title">一日學徒</h2>
+
+  <v-row class="apprentice-content">
+    <v-col md="2" cols="12" class="px-0">
+      <ul class="category-list">
+        <li v-for="(item, index) in categoryList" :key="index" class="mx-3">
+          <router-link :to="item.path">
+            {{ item.title }}
+          </router-link>
+        </li>
+      </ul>
+    </v-col>
+    <v-col md="10" cols="12">
+      <router-view></router-view>
+    </v-col>
+  </v-row>
+</template>
+
+<style lang="scss">
+.apprentice-content {
+  p,
+  .sub-title {
+    line-height: 30px;
+    letter-spacing: 1px;
+  }
+  .sub-title {
+    margin-bottom: 30px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+  .category-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(145px, max-content));
+    justify-content: center;
+    padding: initial;
+    li {
+      list-style-type: none;
+      a {
+        display: block;
+        padding: 8px 20px;
+        margin-bottom: 20px;
+        border: 1px solid #b8b8b8;
+        border-radius: 5px;
+        letter-spacing: 1px;
+        line-height: 22px;
+        text-align: center;
+        transition: all 0.3s;
+        &:hover {
+          background-color: #f3f3f3;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        最新訊息
+    </div>
+</template>

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

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <h3 class="sub-title">網站服務條款</h3>
+    <ul>
+      <li>
+        <h4>一、認知與接受條款</h4>
+        <p>
+          「一日學徒平台(簡稱本網站)」係由國立台灣工藝研究發展中心(以下稱本中心)建置之工藝相關課程、體驗活動等資訊媒合網站，並依據本服務條款提供服務（以下稱「本服務」）。當您使用本服務時，即表示您已
+          閱讀、瞭解並同意接受本服務條款之所有內容。本中心有權依據本網站提供服務之需求，於任何時間修改或變更本服務條款之內容，建議您隨時注意該等修改或變更。您於任何修改或變更後繼續使用本服務，視為您
+          已閱讀、瞭解並同意接受該等修改或變更。如果您不同意本服務條款的內容，或者您所屬的國家或地域排除本服務條款內容之全部或一部時，您應立即停止使用本服務。
+        </p>
+      </li>
+      <li>
+        <h4>二、帳號登入與本服務使用</h4>
+        <ul>
+          <li>
+            (一)
+            使用者得透過第三方平台帳戶（如：FB、Google等，以本網站當時支援之第三方平台為準）登入使用本網站。本中心將儲存各該第三方平台所允許儲存作為識別使用者帳戶之資訊。
+          </li>
+          <li>
+            (二)
+            若您為工藝家，擬透過本網站刊登工藝相關課程或體驗活動等資訊，您須另行同意「工藝家上傳課程同意規範」，始得上傳課程；若您擬透過本網站報名相關課程，您須另行同意「民眾報名須知」，始得報名課程。
+          </li>
+          <li>
+            (三)
+            無論是工藝家或是報名的學員，皆應依據其刊登或報名之課程或活動資訊履約，如有未依約履行經查證屬實，本中心得終止或暫停本服務之提供。如有更改課程或活動舉辦或參加之需求，應由工藝家與報名的學
+            員自行聯繫處理，並保留相關證據資料，以避免爭議。
+          </li>
+        </ul>
+      </li>
+      <li>
+        <h4>三、使用者的守法義務及承諾</h4>
+        <p>
+          使用者同意並保證不得利用本服務從事侵害他人權益或違法之行為，包括但不限於：
+        </p>
+        <ul>
+          <li>
+            (一)
+            上載、張貼、公布或傳送任何不實、詐欺、誹謗、侮辱、具威脅性、攻擊性、不雅、猥褻、不實、違反公共秩序或善良風俗或其他不法之文字、圖片、影音或任何形式的檔案於本服務上。
+          </li>
+          <li>
+            (二)
+            侵害他人名譽、隱私權、營業秘密、商標權、著作權、專利權、其他智慧財產權及其他權利。
+          </li>
+          <li>(三) 違反依法律或契約所應負之保密義務。</li>
+          <li>(四) 冒用他人名義或以匿名方式使用本服務。</li>
+          <li>
+            (五)
+            上載、張貼、傳輸或散佈任何含有電腦病毒或任何對電腦軟、硬體產生中斷、破壞或限制功能之程式碼之資料。
+          </li>
+          <li>(六) 上載、張貼、傳輸或散布有關廣告、贊助、促銷、銷售之訊息。</li>
+          <li>(七) 從事不法交易行為或張貼虛假不實、引人犯罪之訊息。</li>
+          <li>(八) 提供槍枝、毒品、禁藥、盜版軟體或其他違禁物之訊息。</li>
+          <li>(九) 提供賭博資訊或以任何方式引誘他人參與賭博。</li>
+          <li>(十) 以任何方法傷害未成年人。</li>
+          <li>(十一) 偽造訊息來源或以任何方式干擾傳輸來源之認定。</li>
+          <li>
+            (十二)
+            干擾或中斷本服務或伺服器或連結本服務之網路，或不遵守連結至本服務之相關需求、程序、政策或規則等。
+          </li>
+          <li>
+            (十三) 追蹤他人或其他干擾他人或為前述目前蒐集或儲存他人之個人資訊。
+          </li>
+          <li>(十四) 本中心有正當理由認為不適當之行為。</li>
+        </ul>
+      </li>
+      <li>
+        <h4>四、授權條款</h4>
+        <ul>
+          <li>
+            (一)
+            您同意在本網站刊登之課程或體驗活動等相關資訊（包含與課程有關之回饋或建議等），授權本中心得為推廣本網站或該等課程之目的，刊登於本中心經營之其他網站或行動應用軟體系統（APP），提供予他人
+            瀏覽，並得作為廣告素材使用。您須擔保您有權授權本中心為前開利用，如您無授權之完整權利者，請勿將該等資訊上傳或刊登於本網站。
+          </li>
+          <li>
+            (二)
+            非屬於課程或體驗活動等其他資訊，例如：本網站另外舉辦之其他活動或您與本網站間各種公開的互動、往來資訊，您同意授權本中心得為經營本網站之目的使用。
+          </li>
+        </ul>
+      </li>
+      <li>
+        <h4>五、隱私權政策</h4>
+        <ul>
+          <li>
+            (一)
+            隱私權政策適用範圍：以下的隱私權政策，適用於您在本網站活動時，所涉及的個人資料蒐集、運用與保護，但不適用於與本網站功能連結之各政府機關網站或其他網站。您認知並了解凡經由本網站連結之網
+            站，各網站均有其專屬之隱私權政策，並由各該網站之經營者獨立向您負責，本網站或它的成員、管理者、組織者或其他用戶對您於該等網站上之個資事宜，不會與該等網站負任何連帶責任。
+          </li>
+          <li>(二) 個人資料之蒐集及運用</li>
+          <ul>
+            <li>
+              1.
+              利用本服務刊登相關課程或活動資訊時，為確保使用者得透過本網站所提供的資訊聯絡報名事宜，工藝家同意將其姓名、電話、電子郵件等正確資料對外公開；使用者透過本服務報名相關課程或活動時，依報名表單所填寫之個人資料，僅作為本網站提供服務及各該工藝家提供課程相關服務及各項聯絡使用。
+            </li>
+            <li>
+              2.
+              為確保課程或活動之順利履行，本服務將於平台上保留使用者報名相關資料至各該課程或活動開始後6個月。前開期間屆滿後，本服務將依系統設計繼續保留課程報名資料一定期間，惟使用者隨時可透過電子郵件通知本網站將其特定課程之報名資料自平台刪除。刪除後您將無法自您的帳戶查詢您的報名資料。【註：為避免工藝家透過本服務濫用個人資料，建議一定期間後可以刪除。】
+            </li>
+            <li>
+              3.
+              工藝家同意透過本服務所取得使用者報名課程或活動之個人資料，僅得作為課程或活動相關目的之使用，課程或活動結束後，除經當事人同意外，不得另行利用該等資料對使用者為行銷或其他不當利用；工藝家並同意遵守個人資料保護法之規範，善盡保護個人資料之責任。
+            </li>
+            <li>
+              4.
+              本中心除依法或取得當事人同意者外，絕不會任意提供出售、交換、或出租任何您的個人資料給其他團體、個人或私人企業。但有下列情形者除外：
+              <ul>
+                <li>（1）配合司法單位合法的調查。</li>
+                <li>
+                  （2）基於善意相信揭露為法律需要，或為維護和改進網站服務而用於管理。
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>六、責任限制</h4>
+              <ul>
+                <li>
+                  (一)
+                  本網站為工藝相關課程或體驗活動之資訊媒合平台，提供工藝家刊登課程資訊，並由工藝家自行處理學員報名事宜。本網站不對工藝家開設該等課程之合法性或其課程服務之品質為任何保證或承諾，並不擔保該
+                  等課程之順利舉辦，僅單純提供課程資訊之媒合，未對課程為任何收費或管理，不對課程之履約負任何法律上之責任。
+                </li>
+                <li>
+                  (二)
+                  本中心係以本服務之「現狀」提供服務，不保證所提供之服務完全符合使用者的需要，亦不擔保本服務無瑕疵，包括但不限於本服務穩定不中斷、準時、安全、不具病毒或沒有錯誤等。
+                </li>
+                <li>
+                  (三)
+                  使用者所傳輸或張貼於本服務之文字、圖片及其它資料，應自行備份；本中心對於任何原因導致前述資料全部或一部之滅失、毀損，不負任何責任。
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>七、服務終止及違約終止</h4>
+              <ul>
+                <li>
+                  (一)
+                  如本中心因故須終止提供本服務，本中心將於終止前三個月於本網站公告，並將以電子郵件寄送至您註冊或登入時所留存之電子郵件信箱。
+                </li>
+                <li>
+                  (二)
+                  若因您使用本服務之任何行為，導致本中心或本中心相關人員遭第三人主張或請求時，本中心有權向您請求因此所生之損害賠償，包括但不限於訴訟費用及律師費等。
+                </li>
+                <li>
+                  (三)
+                  除另有約定者外，若您有任何違法或違反本服務條款或本服務其他約定時，本中心得不經通知暫時或永久終止您使用本服務全部或部分之權利。
+                </li>
+                <li>
+                  (四)
+                  本服務之終止（無論本中心或使用者所為之終止），不影響使用者於本服務使用期間所進行相關行為之效力，使用者仍須依其原刊登或報名之課程履行。終止後本網站將保留資料3個月，3個月後將刪除該等資
+                  料，若使用者有備份相關資料之需求，應自行於前開期間內處理。
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>八、其他</h4>
+              <ul>
+                <li>(一) 本服務其他規範，亦構成本服務條款之一部分。</li>
+                <li>(二) 因本服務所生之爭議，依中華民國法律解釋適用之。</li>
+              </ul>
+            </li>
+          </ul>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+p,
+li {
+  text-indent: 2em; // 縮排
+}
+h4 {
+  margin: 50px 0 20px;
+  font-size: 18px;
+  font-weight: 500;
+}
+li {
+  margin: 10px 0;
+  line-height: 30px;
+  letter-spacing: 1px;
+}
+</style>