ntcri/src/views/CollegeGroup/Life.vue

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

const { t } = useI18n();
const store = useMainStore();

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

(async () => {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_article?group_id=3`
    );
    console.log("response", response);
    articles.list = response.data.articles;
  } catch (error) {
    console.error(error);
  }
})();

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.craft_groups",
    disabled: true,
  },
  {
    title: "college_group_6",
    disabled: true,
  },
]);
</script>

<template>
  <v-breadcrumbs :items="breadcrumbs" divider="/" class="mt-10 pa-0">
    <template v-slot:title="{ item }">
      {{ t(item.title) }}
    </template>
  </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/craft-journey">
      <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>
</template>

<style lang="scss" scoped>
.life-list {
  margin-top: 6.25em;

  @media (max-width: 600px) {
    margin-top: 0;
  }

  a {
    display: block;
    margin: 3.125em 0;
    border: 0.125em solid var(--purple);
    border-radius: 1.25em;
    overflow: hidden;
    &:hover {
      img {
        transform: scale(1.1);
      }
    }
  }

  h3 {
    font-size: 1.5em;
    font-weight: 500;
  }

  img {
    width: 100%;
    height: 20.625em;
    min-height: 100%;
    object-fit: cover;
    transition: all 0.5s;
    @media (max-width: 1280px) {
      height: 23.125em;
    }
    @media (max-width: 600px) {
      height: 12.5em;
    }
  }

  .content {
    padding: 2.1875em 3.75em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    @media (max-width: 1280px) {
      padding: 2.5em;
    }
  }
}

p {
  line-height: 1.75em;
  letter-spacing: 0.0625em;
}
</style>