ntcri/src/views/CollegeGroup/Life.vue

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
import { useMainStore } from "@/stores/store";

const store = useMainStore();

// 工藝行旅
let travel = reactive({
  list: [],
});

// 希望工程
let hope = reactive({
  list: [],
});

// 一日學徒
let exhibit = reactive({
  list: [],
});

// 校園扎根
let campus = reactive({
  list: [],
});

// 所有文章
let articles = reactive({
  list: [],
});

(async () => {
  try {
    const response = await axios.get(
      "https://cmm.ai:8088/api/get_group_classes_and_articles?group_id=3"
    );
    console.log("response", response);

    travel.list = response.data.articles.filter(
      (e) => e.group_sort === "工藝行旅"
    );

    hope.list = response.data.articles.filter(
      (e) => e.group_sort === "希望工程"
    );

    exhibit.list = response.data.classes.filter(
      (e) => e.group_sort === "一日學徒 - 展覽"
    );

    campus.list = response.data.articles.filter(
      (e) => e.group_sort === "校園扎根"
    );

    console.log("一日學徒 - 展覽", exhibit.list);
    console.log("希望工程", hope.list);
    console.log("工藝行旅", travel.list);

    articles.list = response.data.articles;
    console.log("articles.list", articles.list);
  } catch (error) {
    console.error(error);
  }
})();

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "工藝學群",
    disabled: true,
  },
  {
    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"),
  },
];
</script>

<template>
  <v-breadcrumbs
    :items="breadcrumbs"
    divider="/"
    class="mt-10 pa-0"
  ></v-breadcrumbs>

  <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>
      <v-slide-group-item v-for="item in shopImgs" :key="item">
        <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 travel.list" :key="item">
        <div class="ma-3 info">
          <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>
          </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 hope.list" :key="item">
          <div class="ma-3 info">
            <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>
            </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 exhibit.list" :key="item">
          <div class="ma-3 info">
            <router-link :to="`/course-detail/${item.class_name_id}`">
              <img :src="`https://ntcri.org/${item.cover_img}`" alt="" />
            </router-link>

            <router-link :to="`/course-detail/${item.class_name_id}`">
              <section class="mt-4">
                <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> -->

  <!-- <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 campus.list" :key="item">
          <div class="ma-3 info">
            <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>
          </div>
        </v-slide-group-item>
      </v-slide-group>
    </v-col>
  </v-row> -->
</template>

<style lang="scss" scoped>
.life-list {
  margin-top: 150px;
  @media (max-width: 960px) {
    margin-top: 100px;
  }
  @media (max-width: 600px) {
    margin-top: 0;
  }
  a {
    display: block;
    margin: 50px 0;
    border: 2px solid var(--purple);
    border-radius: 20px;
    overflow: hidden;
    &:hover {
      img {
        transform: scale(1.1);
      }
    }
  }
  h3 {
    font-size: 24px;
    font-weight: 500;
  }
  img {
    width: 100%;
    height: 330px;
    min-height: 100%;
    object-fit: cover;
    transition: all 0.5s;
    @media (max-width: 1280px) {
      height: 370px;
    }
    @media (max-width: 600px) {
      height: 200px;
    }
  }
  .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>