<script setup>
import { ref, reactive } from "vue";
import Navbar from "@/components/Navbar.vue";

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "工藝學群",
    disabled: false,
    href: "/ntcri/college-group/craft",
  },
  {
    title: "世代工藝",
    disabled: true,
  },
]);
</script>

<template>
  <div class="college-bg-img">
    <Navbar />
    <v-container fluid class="college-content pb-16 px-sm-0">
      <div class="college-banner">
        <img
          src="@/assets/img/college-group/generation/世代工藝 橫幅.png"
          alt=""
        />
        <h1>世代工藝</h1>
      </div>
      <div class="main-block">
        <v-breadcrumbs
          :items="breadcrumbs"
          divider="/"
          class="mt-10 p-0"
        ></v-breadcrumbs>

        <div class="title">
          <h2>人間國寶</h2>
        </div>

        <v-row>
          <v-col md="6" cols="12">
            <img
              src="@/assets/img/college-group/generation/世代工藝 素材-07.jpg"
              alt=""
            />
            <h3>2014 年工藝成就獎得主－施至輝</h3>
          </v-col>
          <v-col md="6" cols="12">
            <img
              src="@/assets/img/college-group/generation/世代工藝 素材-08.jpg"
              alt=""
            />
            <h3>在日昇之處的人間國寶－陳利友妹</h3>
          </v-col>
          <v-col md="5" cols="12">
            <img
              src="@/assets/img/college-group/generation/世代工藝 素材-09.jpg"
              alt=""
            />
            <h3>賽德克工藝文化體驗 人間國寶－張鳳英 賦予編織新風貌</h3>
          </v-col>
          <v-col md="7" cols="12">
            <img
              src="@/assets/img/college-group/generation/世代工藝 素材-10.jpg"
              alt=""
            />
            <h3>噶瑪蘭族香蕉絲織布－嚴玉英工藝師</h3>
          </v-col>
          <v-col md="7" cols="12">
            <img
              src="@/assets/img/college-group/generation/世代工藝 素材-11.jpg"
              alt=""
            />
            <h3>羅美玉－入選 2020 年「臺灣工藝之家」</h3>
          </v-col>
          <v-col md="5" cols="12">
            <img
              src="@/assets/img/college-group/generation/世代工藝 素材-12.jpg"
              alt=""
            />
            <h3>2020 年國家工藝成就獎得主－陳啟村</h3>
          </v-col>
        </v-row>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
.v-row {
  padding-bottom: 30px;
  border-bottom: 5px solid #e37bca;
}
h3 {
  padding: 15px 10px;
  color: #fff;
  background: #000;
  text-align: center;
  font-weight: 400;
  line-height: 24px;
}
</style>
