ntcri/src/views/CollegeGroup/Repair.vue

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

const store = useMainStore();

const articles = reactive({
  list: [],
});

let searchInput = ref("");
let searchError = ref(false);

(async () => {
  let url = `https://cmm.ai:8088/api/get_group_classes_and_articles?group_id=6`;

  try {
    const response = await axios.get(url);
    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 testData = [
  {
    title: "臺灣工藝聯合醫院－草鞋墩分院 112 年 6-8 月工藝修復推廣課程",
    describe:
      "「臺灣工藝聯合醫院-草鞋墩分院」辦理工藝修護各類推廣課程，目標對象群擴及幼童、學生及社會人士等，課程種類包含「臺灣工藝聯合醫院-草鞋墩分院」5位工藝修護師共同授課的「工藝修護技法培訓課程」、個別工藝修護師辦理的「個別工藝修護技法課程」、「工藝修護體驗」等，民眾能依照自身興趣及學習需求，選擇自己適合且需要的工藝修護課程。",
    start_time: "2023/06/01",
    end_time: "2023/08/22",
    address: "國立台灣工藝研究發展中心",
    img: store.getImageUrl("college-group/img.jpg"),
  },
];
</script>

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

  <v-row class="mt-16">
    <v-col cols="12" md="6">
      <h3 class="text-center mb-5">國家工藝檢測修護平臺</h3>
      <div class="video">
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/eIOkU2q9WHA"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen
        ></iframe>
      </div>
    </v-col>
    <v-col cols="12" md="6">
      <h3 class="text-center mb-5">臺灣工藝聯合醫院－草鞋墩分院</h3>
      <div class="video">
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/Rb318IkMo80"
          title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen
        ></iframe>
      </div>
    </v-col>
  </v-row>

  <v-row class="mt-16 article-block">
    <v-col cols="12" sm="7" md="8">
      <h4 class="mb-5">首創工藝聯合醫院，診斷修復再現舊物新生命</h4>
      <p>
        工藝中心在愛物惜物、自然永續的綠工藝精神下，成立「臺灣工藝檢測修護聯盟」，串聯專業學術單位、團體或個人工作室等成為一個工藝的照護聯合網，就像一所工藝的聯合醫院，為博物館、常民工藝或是生活收藏等需求者，提供檢測、維護及修復的服務，猶如醫院的體檢、衛教保健到診斷治療，全臺分區各有據點，提供大眾就近在地的友善服務。
        「臺灣工藝聯合醫院－草鞋墩分院」就是照護聯合網絡的一個據點，由廖偉淇、蔣昆原、張璽元、葉璨榮、陳宜妙5位修復師進駐，服務項目有陶瓷、金屬、漆及複合媒材等修復，歡迎大家隨時來問診交流、學習工藝保養維護，親自體驗舊物新生的感動。
        <br />
        「國家工藝檢測修護平臺」開始受理申請，有檢測、修復及維護需求者，皆可透過「國家工藝檢測修護平臺」網站提出申請，或電話撥打0800-222-800洽詢。
      </p>
    </v-col>
    <v-col
      cols="12"
      sm="5"
      md="4"
      class="d-flex flex-column align-center align-md-end justify-space-around"
    >
      <section>
        <h4>檢測x修復x維護</h4>
        <h4>保存x循環x再生</h4>
      </section>
      <span class="btn mt-10 mt-sm-0">
        <v-btn block size="large"
          >點我前往 <br />
          「國家工藝檢測修護平臺」</v-btn
        >
      </span>
    </v-col>
  </v-row>

  <div
    class="d-flex flex-column flex-sm-row align-center justify-space-between"
  >
    <h2 class="title">修護課程</h2>
    <div class="search">
      <span>
        <input
          v-model="searchInput"
          type="text"
          @keyup.enter="search()"
          placeholder="關鍵字搜尋"
        />
        <button @click="search()">
          <img src="@/assets/img/news/news-search-icon.png" alt="" />
        </button>
      </span>
      <div
        v-if="searchError"
        class="d-flex justify-center align-center error me-4"
      >
        <v-icon color="primary" icon="mdi-alert" class="me-2"></v-icon>
        沒有符合搜尋條件的項目
      </div>
    </div>
  </div>

  <ul class="course-list mt-16 mt-sm-0">
    <li v-for="(item, index) in testData" :key="index" class="mb-10">
      <v-card variant="outlined" class="d-flex flex-column align-center pa-0">
        <h2 class="text-center ma-0 pa-3">{{ item.title }}</h2>

        <div class="d-flex flex-column flex-sm-row align-center content">
          <img src="@/assets/img/img-04.jpg" alt="" />
          <section
            class="d-flex flex-column justify-space-between px-0 px-sm-10 pt-5 pt-md-0"
          >
            <p>{{ item.describe }}</p>
            <div class="mt-10">
              <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-1">
                <v-icon
                  color="gray"
                  icon="mdi-map-marker"
                  class="me-2"
                ></v-icon>
                <p>
                  {{ item.address }}
                </p>
              </span>
            </div>
          </section>
        </div>
      </v-card>
    </li>
  </ul>

  <!-- <div class="d-flex justify-end">
    <button class="past-btn">觀看已過期課程</button>
  </div> -->

  <h2 class="title">工藝修護師</h2>

  <v-row class="master-list">
    <v-col
      cols="12"
      md="6"
      class="v-col-md-6 v-col-12 d-flex flex-column flex-md-row align-center justify-md-center"
    >
      <img src="@/assets/img/college-group/repair/修護-12.png" alt="" />
      <section class="mt-5 mt-md-0 ms-md-5">
        <h3>廖偉淇</h3>
        <span class="d-block mt-3 mb-5">金工木印工作室</span>
        <ul>
          <li>主要修護媒材</li>
          <li>金屬：金/銀首飾、銀/銅茶具、餐具。</li>
          <li>陶瓷：花器、餐具、茶道具、香道具。</li>
          <li>主要修復技法：鋦瓷、漆繕、金工鍛造、脫腊鑄造。</li>
        </ul>
      </section>
    </v-col>
    <v-col
      cols="12"
      md="6"
      class="v-col-md-6 v-col-12 d-flex flex-column flex-md-row align-center justify-md-center"
    >
      <img src="@/assets/img/college-group/repair/修護-13.png" alt="" />
      <section class="mt-5 mt-md-0 ms-md-5">
        <h3>陳高登</h3>
        <span class="d-block mt-3 mb-5">金工木印工作室</span>
        <ul>
          <li>主要修護媒材</li>
          <li>陶瓷器物</li>
        </ul>
      </section>
    </v-col>
  </v-row>

  <h2 class="title">修護故事</h2>

  <ul class="story-list">
    <li v-for="(item, index) in articles.list" :key="index" class="mb-16">
      <ArticleCard :data="item" type="article" />
    </li>
  </ul>
</template>

<style lang="scss" scoped>
h3 {
  font-weight: 400;
}

.video {
  position: relative;
  padding-bottom: 56%;
  overflow: hidden;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

p {
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 28px;
}

.article-block {
  h4 {
    font-size: 26px;
    font-weight: 400;
    line-height: 40px;
  }

  .v-btn {
    height: 65px;
    color: #fff;
    font-weight: 400;
    border-radius: 100px;
    background-color: #569f33;
    @media (max-width: 960px) {
      font-size: 14px;
    }
    @media (max-width: 600px) {
      font-size: 16px;
    }
  }
}

.course-list {
  .v-card {
    border: none;
    border-radius: 20px;
    background-color: #e9f1f4;
    h2 {
      width: 100%;
      font-size: 24px;
      line-height: 30px;
      letter-spacing: 1px;
      border-bottom: 3px solid #fff;
      @media (max-width: 600px) {
        font-size: 22px;
      }
    }
    .content {
      padding: 20px;
      p:first-child {
        font-weight: 400;
        line-height: 28px;
        color: #606064;
      }
    }
  }
}

.course-list,
.story-list {
  img {
    width: 100%;
    max-width: 300px;
    height: 220px;
    object-fit: cover;
    @media (max-width: 600px) {
      max-width: 100%;
    }
  }
  h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 1px;
  }
  p {
    // 超過兩行則省略
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-break: after-white-space;
  }

  .date {
    font-size: 20px;
    font-weight: 400;
  }
}

.master-list {
  img {
    width: 250px;
    height: 250px;
    object-fit: cover;
  }
  h3 {
    font-size: 20px;
    color: #000;
  }
  section {
    text-align: center;
    color: #606064;
    li {
      line-height: 28px;
    }
  }
}

.past-btn {
  padding: 15px 40px;
  color: #606064;
  border-radius: 100px;
  border: 2px solid #569f33;
}
</style>