update

src/assets/css/style.css

@@ -51,6 +51,7 @@ a {
 :root {
   --main-color: #C39F68;
   --sub-color: #E9F1F4;
+  --brown: #3E3A39;
 }
 
 * {

src/assets/css/style.scss

@@ -54,6 +54,7 @@ a {
 :root {
   --main-color: #C39F68;
   --sub-color: #E9F1F4;
+  --brown: #3E3A39;
 }
 
 * {

src/components/Navbar.vue

@@ -45,7 +45,7 @@ const collegeList = reactive([
   },
   {
     title: "生活工藝",
-    url: "/college-group/craft",
+    url: "/college-group/life",
   },
   {
     title: "技藝工藝",

src/router/index.js

@@ -16,6 +16,7 @@ const Future = defineAsyncComponent(() => import('@/views/CollegeGroup/Future.vu
 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'));
@@ -112,6 +113,14 @@ const routes = [
         meta: {
           title: '跨域工藝',
         },
+      },
+      {
+        path: 'life',
+        name: 'Life',
+        component: Life,
+        meta: {
+          title: '生活工藝',
+        },
       }
     ],
   },

src/views/CollegeGroup/Life.vue

@@ -0,0 +1,423 @@
+<script setup>
+import { ref, reactive } from "vue";
+import axios from "axios";
+import { useMainStore } from "@/stores/store";
+
+const store = useMainStore();
+
+const breadcrumbs = reactive([
+  {
+    title: "首頁",
+    disabled: false,
+    href: "/",
+  },
+  {
+    title: "工藝學群",
+    disabled: false,
+    href: "/ntcri/college-group/craft",
+  },
+  {
+    title: "生活工藝",
+    disabled: true,
+  },
+]);
+
+const shopImgs = [
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-01.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-02.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-03.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-04.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-05.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-06.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-07.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-08.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-09.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-10.png"),
+  },
+  {
+    img: store.getImageUrl("college-group/life/shop/旅物shop-11.png"),
+  },
+  {
+    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>
+  <v-breadcrumbs
+    :items="breadcrumbs"
+    divider="/"
+    class="mt-10 pa-0"
+  ></v-breadcrumbs>
+
+  <h2 class="title">旅物 SHOP</h2>
+
+  <div class="px-md-8">
+    <v-slide-group center-active show-arrows>
+      <v-slide-group-item v-for="item in shopImgs" :key="item.img">
+        <div class="ma-3">
+          <v-img :src="item.img" height="200px" cover></v-img>
+        </div>
+      </v-slide-group-item>
+    </v-slide-group>
+
+    <v-row class="justify-space-around mt-10 mb-16 px-0 px-md-16 px-lg-8">
+      <v-col cols="12" md="8">
+        <p>
+          《旅物 •
+          SHOP》位於自然生態豐富的臺灣工藝文化園區，明亮穿透的空間設計，連結窗外工藝植物園，到室內的生活工藝選物，這是一間由土地孕育而生的工藝選品店，從採擷、手作，到用物於生活，是材料與手、物與物、人與物、人與人彼此流動交會，共度美好日常的店頭。包含崇尚自然循環，創造生活風格的臺灣在地「臺灣綠工藝」品牌、扶植青年創業的「青年孵化器」、工藝中心開發的周邊商品「品工藝」以及在地咖啡品牌「一日咖啡」等四個子品牌，推廣「自然、循環、平衡、寬容、生命力」的綠工藝精神，更是鼓勵青年實驗開店、青年工藝家的孵化平臺。
+        </p>
+      </v-col>
+      <v-col cols="12" md="4" lg="3" class="mt-auto d-flex justify-end">
+        <a
+          href="https://luwushop.ntcri.gov.tw/home/zh-tw"
+          class="link-btn"
+          target="_blank"
+        >
+          點我前往 <br />
+          「旅物 SHOP」官網
+        </a>
+      </v-col>
+    </v-row>
+  </div>
+
+  <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 travelImgs" :key="item.img">
+        <div class="ma-3 info">
+          <img :src="item.img" alt="" />
+          <section>
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.depiction }}</p>
+          </section>
+        </div>
+      </v-slide-group-item>
+    </v-slide-group>
+
+    <section class="mt-3 ps-sm-12 ps-md-16 w-100">
+      <h4>工藝文化深度旅遊，品味在地、標記生活</h4>
+      <p>
+        打造以工藝為核心的文化深度旅遊路徑，結合工藝體驗、自然風土、地方美食、在地物產、
+        <br />
+        建築等觀光資源，旅人緩步慢行，暫離喧囂、以手作沉澱自我，發現生命中的寧靜與感動。
+        <br />
+        現在一起出發，感受工藝行旅的魅力和樂趣！
+      </p>
+    </section>
+  </div>
+
+  <h2 class="title">臺灣綠工藝 希望工程</h2>
+
+  <v-row class="align-center justify-center px-md-8 hope-content">
+    <v-col cols="12" sm="10" md="5" class="d-flex">
+      <img
+        src="@/assets/img/college-group/life/生活工藝 素材-24.png"
+        alt=""
+        class="cover-img"
+      />
+    </v-col>
+    <v-col cols="12" sm="10" md="7">
+      <h4>
+        工藝做為一種社會處方箋 <br />
+        陪伴 x 療癒 x 認知
+      </h4>
+      <p>
+        以工藝為媒介，實踐社會價值功能。國立臺灣工藝研究發展中心啟動「臺灣綠工藝希望工程」，本於自然、循環、平衡、寬容、生命力等綠工藝精神，融合人文關懷，深化工藝與社會的互動連結，為所有人帶來「希望‧療癒‧陪伴」的力量。
+        <br />
+        <br />
+        「臺灣綠工藝希望工程」是公民互助精神的體現，以「One Community, One
+        Craft（OCOC）」一社群一工藝理念，凝聚社會力量，以工藝師、職能治療師提供核心支持服務，以社區、NGO團體、相關民間組織及政府單位為平台，在社福體系中的醫療機構、長照機構與社區照顧關懷據點等，向社會上包含樂齡長者、兒童、婦女、身心障礙者等所有人，傳達工藝手作的溫暖。以工藝投入社會服務，引領身心靈向上提升，也形成一股陪伴的安定力量，促進社會關係的融合與共好。
+      </p>
+    </v-col>
+    <v-col cols="12" class="d-flex">
+      <a
+        href="https://tgc.ntcri.gov.tw/home/zh-tw"
+        class="link-btn ms-auto"
+        target="_blank"
+      >
+        點我前往 <br />
+        「台灣綠工藝希望工程」官網
+      </a>
+    </v-col>
+    <v-col cols="12" class="mt-10">
+      <v-slide-group center-active show-arrows>
+        <v-slide-group-item v-for="item in hopeImgs" :key="item.img">
+          <div class="ma-3 info">
+            <img :src="item.img" alt="" />
+            <section>
+              <h3>{{ item.title }}</h3>
+              <p>{{ item.depiction }}</p>
+            </section>
+          </div>
+        </v-slide-group-item>
+      </v-slide-group>
+    </v-col>
+  </v-row>
+
+  <h2 class="title">一日學徒</h2>
+
+  <v-row class="justify-center px-md-8">
+    <v-col cols="12" sm="10" md="11">
+      <h4>
+        一日學徒，全民工藝教育倡議平台 <br />
+        生活 x 手作 x 體驗
+      </h4>
+      <p>
+        以「手做」，經歷生活中的一切美好！ <br />
+        用「一日」，體會過去師徒制三年四個月的工藝學習精神與態度！ <br />
+        由工藝家親自規畫各類手作工藝課程，隨時提供最新課程資訊，民眾依據喜好選擇課程，
+        <br />
+        體驗半天或一天的手作工藝學習，尋找就近的工藝家學習各種小物知識經驗與技藝。
+      </p>
+    </v-col>
+
+    <v-col cols="12" sm="10" md="11" class="mt-16">
+      <h4 class="mb-8">展覽活動</h4>
+    </v-col>
+
+    <v-col cols="12" md="11" class="exhibit-content">
+      <v-slide-group center-active show-arrows>
+        <v-slide-group-item v-for="item in exhibitImgs" :key="item.img">
+          <div class="ma-3 info">
+            <img :src="item.img" alt="" />
+            <section class="mt-4">
+              <h3>{{ item.title }}</h3>
+              <p v-html="item.depiction"></p>
+            </section>
+          </div>
+        </v-slide-group-item>
+      </v-slide-group>
+    </v-col>
+  </v-row>
+
+  <h2 class="title">校園扎根</h2>
+
+  <v-row class="justify-center px-md-8">
+    <v-col cols="12" sm="10" md="11">
+      <h4>
+        老師 x 工藝家 x 學生 <br />
+        講述 x 手作 <br />
+        價值 x 實踐 <br />
+        扎根 x 擴散
+      </h4>
+      <p class="mt-10">
+        工藝校園扎根計畫以工藝融入學校教育，媒合教師與工藝家，跨域合作開發具創造力、觀察力、美學素養、批判思考以及手作體驗的工藝教材教案，實踐工藝之於學習、生活的價值。符合教育部12年國教課綱的「核心素養」，以及STEAM教育的五大精神「跨領域、動手做、生活應用、解決問題及五感學習」，以「做中學，學中做」培育新世代的工藝人才。
+      </p>
+    </v-col>
+
+    <v-col cols="12" md="11" class="mt-16 campus-content">
+      <v-slide-group center-active show-arrows>
+        <v-slide-group-item v-for="item in campusImgs" :key="item.img">
+          <div class="ma-3 info">
+            <img :src="item.img" alt="" />
+            <section class="mt-4">
+              <h3>{{ item.title }}</h3>
+            </section>
+          </div>
+        </v-slide-group-item>
+      </v-slide-group>
+    </v-col>
+  </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;
+  }
+}
+
+.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;
+  }
+}
+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 0;
+        font-weight: 400;
+      }
+      p {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.trave-content,
+.hope-content {
+  .info {
+    position: relative;
+    section {
+      position: absolute;
+      right: 10px;
+      left: 10px;
+      bottom: 10px;
+    }
+  }
+}
+
+.hope-content {
+  .cover-img {
+    width: 100%;
+    max-width: 500px;
+    margin: auto;
+  }
+}
+
+.exhibit-content {
+  .info {
+    section {
+      justify-content: center;
+      height: 90px;
+    }
+    p {
+      line-height: 20px;
+    }
+  }
+}
+</style>

vite.config.js

@@ -3,7 +3,7 @@ import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
-  base: '/ntcri/',
+  base: '/',
   plugins: [vue()],
   resolve: {
     alias: {