|
|
@@ -4,10 +4,12 @@ import { useRoute, useRouter } from "vue-router";
|
|
|
import { useMainStore } from "@/stores/store";
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
import axios from "axios";
|
|
|
+import moment from "moment";
|
|
|
import Navbar from "@/components/Navbar.vue";
|
|
|
import PDFViewer from "@/components/PDFViewer.vue";
|
|
|
import craftsPdfList from "@/utils/useCraftsPdf";
|
|
|
import ArticleCard from "@/components/ArticleCard.vue";
|
|
|
+import CourseCard from "@/components/CourseCard.vue";
|
|
|
import CraftsArticle from "@/components/CraftsArticle.vue";
|
|
|
|
|
|
const { t } = useI18n();
|
|
|
@@ -33,6 +35,8 @@ onMounted(() => {
|
|
|
updatePDF(book[0].files);
|
|
|
}, 1000);
|
|
|
}
|
|
|
+
|
|
|
+ store.getFavoriteClass();
|
|
|
});
|
|
|
|
|
|
let searchInput = ref("");
|
|
|
@@ -184,6 +188,23 @@ let read = reactive({
|
|
|
}
|
|
|
})();
|
|
|
|
|
|
+let plan = reactive({
|
|
|
+ list: [],
|
|
|
+});
|
|
|
+
|
|
|
+// 研究計畫
|
|
|
+(async () => {
|
|
|
+ try {
|
|
|
+ const response = await axios.get(
|
|
|
+ `${store.apiUrl}/api/get_article?category=研究計畫`
|
|
|
+ );
|
|
|
+ plan.list = response.data.articles;
|
|
|
+ console.log("線上閱讀", plan.list);
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+})();
|
|
|
+
|
|
|
let book = reactive({
|
|
|
list: [],
|
|
|
});
|
|
|
@@ -213,6 +234,186 @@ function handlePdfUrl(pdf) {
|
|
|
let url = file.file1;
|
|
|
return url;
|
|
|
}
|
|
|
+
|
|
|
+/* 線上工藝 Start */
|
|
|
+let loadingOnline = ref(false);
|
|
|
+let pageNumOnline = ref(1); // 頁數(預設第一頁)
|
|
|
+let pageAmountOnline = ref(9); // 每頁顯示筆數
|
|
|
+let totalPagesOnline = ref(1); // 總頁數
|
|
|
+let selectOnlineCategory = ref([]); // 選擇類別
|
|
|
+let isOnlineFilter = ref(false); // 篩選狀態
|
|
|
+let searchOnlineList = reactive([]); // 篩選條件
|
|
|
+let totalNumOnline = ref(0); // 資料總筆數
|
|
|
+
|
|
|
+const onlineCourese = reactive({
|
|
|
+ list: [],
|
|
|
+});
|
|
|
+
|
|
|
+async function getOnlineClass() {
|
|
|
+ loadingOnline.value = true;
|
|
|
+ let url = `${store.apiUrl}/api/get_online_courese?org=udemy&page_num=${pageNumOnline.value}&page_amount=${pageAmountOnline.value}`;
|
|
|
+
|
|
|
+ // 判斷篩選
|
|
|
+ if (isOnlineFilter.value) {
|
|
|
+ searchOnlineList.map((item) => {
|
|
|
+ url += item;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await axios.get(url);
|
|
|
+ onlineCourese.list = response.data.online_coures;
|
|
|
+ totalPagesOnline.value = store.getTotalPages(response.data.total_num, 9);
|
|
|
+ loadingOnline.value = false;
|
|
|
+ totalNumOnline.value = response.data.total_num;
|
|
|
+ console.log("onlineCourese.list", onlineCourese.list);
|
|
|
+ } catch (error) {
|
|
|
+ loadingOnline.value = false;
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+getOnlineClass();
|
|
|
+
|
|
|
+const listLocation = ref(null);
|
|
|
+
|
|
|
+watch(pageNumOnline, () => {
|
|
|
+ getOnlineClass();
|
|
|
+ listLocation.value.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
|
+});
|
|
|
+
|
|
|
+watch(selectOnlineCategory, (val) => {
|
|
|
+ if (val.includes("全部")) {
|
|
|
+ selectOnlineCategory.value = [];
|
|
|
+ isOnlineFilter.value = false;
|
|
|
+ pageNumOnline.value = 1;
|
|
|
+ getOnlineClass();
|
|
|
+ } else {
|
|
|
+ selectFilter("category", val);
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 篩選課程
|
|
|
+async function selectFilter(type, val) {
|
|
|
+ isOnlineFilter.value = true;
|
|
|
+ pageNumOnline.value = 1; // 篩選時返回第一頁
|
|
|
+ searchOnlineList.splice(0, searchOnlineList.length); // 清空陣列
|
|
|
+
|
|
|
+ if (type === "category") {
|
|
|
+ searchOnlineList.push(`&category=${val}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ getOnlineClass();
|
|
|
+}
|
|
|
+
|
|
|
+let activeCategory = ref(1256);
|
|
|
+
|
|
|
+function setOnlineCategory(id) {
|
|
|
+ activeCategory.value = id;
|
|
|
+ // 移除 active
|
|
|
+ // categoryList.map((item) => {
|
|
|
+ // if (item.active) {
|
|
|
+ // item.active = false;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // categoryList[index].active = true;
|
|
|
+ console.log("activeCategory.value", activeCategory.value);
|
|
|
+ getImediaVideo();
|
|
|
+}
|
|
|
+
|
|
|
+const searchOnlineLocation = ref(null);
|
|
|
+let imedia = reactive({
|
|
|
+ list: [],
|
|
|
+});
|
|
|
+let imediaCurrentPage = ref(1); // 當前頁數(預設第一頁)
|
|
|
+let imediatotalPagesOnline = ref(1); // 總頁數
|
|
|
+
|
|
|
+// 切換分頁時回到列表上方
|
|
|
+watch(imediaCurrentPage, () => {
|
|
|
+ getImediaVideo();
|
|
|
+ searchOnlineLocation.value.scrollIntoView({
|
|
|
+ behavior: "smooth",
|
|
|
+ block: "start",
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+let videoLoading = ref(false);
|
|
|
+let categoryList = ref([]);
|
|
|
+
|
|
|
+async function getImediaVideo() {
|
|
|
+ videoLoading.value = true;
|
|
|
+
|
|
|
+ let url = `${store.apiUrl}/api/get_media_data?page=${imediaCurrentPage.value}&page_size=8`;
|
|
|
+
|
|
|
+ if (activeCategory.value) {
|
|
|
+ url += `&media_categories_id=${activeCategory.value}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ imedia.list = [];
|
|
|
+ const response = await axios.post(url);
|
|
|
+ const list = JSON.parse(response.data.data);
|
|
|
+ list.data.map((item) => {
|
|
|
+ if (item.video_link) {
|
|
|
+ imedia.list.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log("Imedia data", response.data);
|
|
|
+ console.log("list", list);
|
|
|
+ console.log("list category", list.category[0]);
|
|
|
+ categoryList.value = [];
|
|
|
+ list.category[0].categories.map((item) => {
|
|
|
+ // console.log('item',item);
|
|
|
+ // media_category_id
|
|
|
+ let data = {
|
|
|
+ id: item.media_category_id,
|
|
|
+ title: item.name[1].zh_TW,
|
|
|
+ };
|
|
|
+ categoryList.value.push(data);
|
|
|
+ });
|
|
|
+ console.log("categoryList.value", categoryList.value);
|
|
|
+
|
|
|
+ imediatotalPagesOnline.value = store.getTotalPages(imedia.list.length, 8); // 計算頁數
|
|
|
+ console.log("imediatotalPagesOnline", imediatotalPagesOnline.value);
|
|
|
+ console.log("imedia list", imedia.list);
|
|
|
+
|
|
|
+ videoLoading.value = false;
|
|
|
+ } catch (error) {
|
|
|
+ loadingOnline.value = false;
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+getImediaVideo();
|
|
|
+
|
|
|
+let videoCategory = ref(null);
|
|
|
+
|
|
|
+watch(videoCategory, (val) => {
|
|
|
+ console.log("videoCategory", val);
|
|
|
+ setOnlineCategory(val);
|
|
|
+});
|
|
|
+/* 線上工藝 End */
|
|
|
+
|
|
|
+/* 修護故事 Start */
|
|
|
+const restorationArticles = reactive({
|
|
|
+ list: [],
|
|
|
+});
|
|
|
+
|
|
|
+(async () => {
|
|
|
+ // let url = `${store.apiUrl}/api/get_group_classes_and_articles?group_id=6`;
|
|
|
+ // let classUrl = `${store.apiUrl}/api/get_class_name?group_id=6`;
|
|
|
+ let articlesUrl = `${store.apiUrl}/api/get_article?group_id=6`;
|
|
|
+
|
|
|
+ try {
|
|
|
+ // const classData = await axios.get(classUrl);
|
|
|
+ const articlesData = await axios.get(articlesUrl);
|
|
|
+ // classes.list = classData.data.classes;
|
|
|
+ restorationArticles.list = articlesData.data.articles;
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+})();
|
|
|
+/* 修護故事 End */
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -249,6 +450,331 @@ function handlePdfUrl(pdf) {
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
|
|
|
+ <!-- 線上工藝 -->
|
|
|
+ <h2 class="mb-16 pb-5">{{ t("college_group_4") }}</h2>
|
|
|
+
|
|
|
+ <v-row class="mt-16">
|
|
|
+ <v-col md="2" cols="12">
|
|
|
+ <v-label class="d-block filter-list">
|
|
|
+ <p class="pb-5 pe-3 mb-5 mb-sm-0">
|
|
|
+ {{ t("form.craft_category") }}<span class="mark">*</span>
|
|
|
+ </p>
|
|
|
+ <v-select
|
|
|
+ v-model="videoCategory"
|
|
|
+ placeholder="請選擇類別"
|
|
|
+ :items="categoryList"
|
|
|
+ item-title="title"
|
|
|
+ item-value="id"
|
|
|
+ :rules="[requiredRule]"
|
|
|
+ density="compact"
|
|
|
+ variant="outlined"
|
|
|
+ ></v-select>
|
|
|
+ </v-label>
|
|
|
+
|
|
|
+ <!-- <ul class="btn-list">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in categoryList"
|
|
|
+ :key="index"
|
|
|
+ class="mx-3"
|
|
|
+ >
|
|
|
+ <v-btn
|
|
|
+ @click="setOnlineCategory(item.id, index)"
|
|
|
+ class="mb-5"
|
|
|
+ :class="{ active: item.active }"
|
|
|
+ variant="outlined"
|
|
|
+ >
|
|
|
+ {{ item.title }}
|
|
|
+ </v-btn>
|
|
|
+ </li>
|
|
|
+ </ul> -->
|
|
|
+ </v-col>
|
|
|
+ <v-col md="10" cols="12">
|
|
|
+ <div class="d-flex justify-center mb-10" v-if="videoLoading">
|
|
|
+ <v-progress-circular
|
|
|
+ color="grey-lighten-4"
|
|
|
+ indeterminate
|
|
|
+ ></v-progress-circular>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <v-row class="video-list">
|
|
|
+ <v-col
|
|
|
+ cols="12"
|
|
|
+ md="6"
|
|
|
+ v-for="(item, index) in imedia.list"
|
|
|
+ :key="index"
|
|
|
+ class="mb-5 mb-md-0"
|
|
|
+ >
|
|
|
+ <v-dialog
|
|
|
+ transition="dialog-top-transition"
|
|
|
+ width="853"
|
|
|
+ class="video-dialog"
|
|
|
+ >
|
|
|
+ <template v-slot:activator="{ props }">
|
|
|
+ <div class="img-box">
|
|
|
+ <v-img
|
|
|
+ v-bind="props"
|
|
|
+ class="mx-auto cover-img"
|
|
|
+ :lazy-src="item.image_m"
|
|
|
+ cover
|
|
|
+ :src="item.image_m"
|
|
|
+ >
|
|
|
+ <template v-slot:placeholder>
|
|
|
+ <div
|
|
|
+ class="d-flex align-center justify-center fill-height"
|
|
|
+ >
|
|
|
+ <v-progress-circular
|
|
|
+ color="grey-lighten-4"
|
|
|
+ indeterminate
|
|
|
+ ></v-progress-circular>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </v-img>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="img-box">
|
|
|
+ <img v-bind="props" :src="item.image_m" alt="" />
|
|
|
+ </div> -->
|
|
|
+ </template>
|
|
|
+ <template v-slot:default="{ isActive }">
|
|
|
+ <v-card>
|
|
|
+ <v-toolbar color="blue" class="ps-5 pe-7">
|
|
|
+ <div
|
|
|
+ class="w-100 d-flex justify-space-between align-center"
|
|
|
+ >
|
|
|
+ <h3>{{ item.metadata[1].name }}</h3>
|
|
|
+ <div class="close-btn">
|
|
|
+ <v-icon
|
|
|
+ @click="isActive.value = false"
|
|
|
+ icon="mdi-close"
|
|
|
+ ></v-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </v-toolbar>
|
|
|
+ <v-card-text class="pa-10">
|
|
|
+ <div class="video-box">
|
|
|
+ <video controls>
|
|
|
+ <source
|
|
|
+ :src="`${
|
|
|
+ item.video_link.video_source.mp4[3]
|
|
|
+ ? item.video_link.video_source.mp4[3]
|
|
|
+ : item.video_link.video_source.mp4[2]
|
|
|
+ }?api_access_key=08c9cdf9-a1d6-4997-943c-4f08f34ed2f7`"
|
|
|
+ type="video/mp4"
|
|
|
+ />
|
|
|
+ Your browser does not support the video tag.
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ </v-card-text>
|
|
|
+ <!-- <v-card-actions class="justify-end">
|
|
|
+ <v-btn variant="text" @click="isActive.value = false"
|
|
|
+ >Close</v-btn
|
|
|
+ >
|
|
|
+ </v-card-actions> -->
|
|
|
+ </v-card>
|
|
|
+ </template>
|
|
|
+ </v-dialog>
|
|
|
+
|
|
|
+ <!-- <img :src="item.image_m" alt="" /> -->
|
|
|
+ <h3>{{ item.metadata[1].name }}</h3>
|
|
|
+ <p>{{ item.metadata[1].desc }}</p>
|
|
|
+ <div class="d-flex justify-end mt-3">
|
|
|
+ <span class="text-gray"
|
|
|
+ >{{
|
|
|
+ moment(`${item.create_time}`).format("YYYY-MM-DD")
|
|
|
+ }}｜點閱次數：{{ item.use_count }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <v-pagination
|
|
|
+ v-model="imediaCurrentPage"
|
|
|
+ class="mt-16"
|
|
|
+ :length="imediatotalPagesOnline"
|
|
|
+ ></v-pagination>
|
|
|
+ </v-col>
|
|
|
+ <!-- <v-col sm="10" cols="12">
|
|
|
+ <v-row class="video-list">
|
|
|
+ <v-col
|
|
|
+ cols="12"
|
|
|
+ md="6"
|
|
|
+ v-for="(item, index) in videoData"
|
|
|
+ :key="index"
|
|
|
+ class="mb-5 mb-md-0"
|
|
|
+ >
|
|
|
+ <video controls class="w-100">
|
|
|
+ <source :src="item.video" type="video/mp4" />
|
|
|
+ <a :href="item.video"></a>
|
|
|
+ </video>
|
|
|
+ <h3>{{ item.title }}</h3>
|
|
|
+ <p>{{ item.introduction }}</p>
|
|
|
+ <div class="d-flex justify-end mt-3">
|
|
|
+ <span class="text-gray"
|
|
|
+ >{{ item.date }}｜點閱次數：{{ item.ctr }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </v-col> -->
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- 線上體驗課程 -->
|
|
|
+ <h2 class="mb-16 pb-5">
|
|
|
+ {{ t("online_experience_courses") }}
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ <v-row class="mt-5 mt-sm-0">
|
|
|
+ <v-col
|
|
|
+ cols="12"
|
|
|
+ md="6"
|
|
|
+ lg="4"
|
|
|
+ v-for="(item, index) in onlineCourese.list"
|
|
|
+ :key="index"
|
|
|
+ class="pa-5"
|
|
|
+ >
|
|
|
+ <CourseCard :data="item" />
|
|
|
+ </v-col>
|
|
|
+
|
|
|
+ <div class="mx-auto d-flex flex-column">
|
|
|
+ <v-pagination
|
|
|
+ v-model="pageNumOnline"
|
|
|
+ :length="totalPagesOnline"
|
|
|
+ rounded="circle"
|
|
|
+ class="mt-16"
|
|
|
+ ></v-pagination>
|
|
|
+
|
|
|
+ <span class="text-gray total-item"
|
|
|
+ >{{ t("total_count") }}：{{ totalNumOnline }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- 修護工藝 -->
|
|
|
+ <div class="restoration-content">
|
|
|
+ <h2 class="mb-16 pb-5">
|
|
|
+ {{ t("craft_restoration") }}
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ <v-row>
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- 工藝修護師 -->
|
|
|
+ <h2 class="mb-16 pb-5">
|
|
|
+ {{ t("craft_restorer") }}
|
|
|
+ </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.webp"
|
|
|
+ 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.webp"
|
|
|
+ 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 id="bookList" class="mb-16">{{ t("restoration_story") }}</h2>
|
|
|
+
|
|
|
+ <ul class="story-list">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in restorationArticles.list"
|
|
|
+ :key="index"
|
|
|
+ class="mb-16"
|
|
|
+ >
|
|
|
+ <ArticleCard :data="item" type="article" />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 國際專欄 -->
|
|
|
<h2 id="articleList" class="mb-16 pb-5">{{ t("crafts.title_1") }}</h2>
|
|
|
|
|
|
<!-- <div class="search pt-5 my-10 me-sm-16" ref="searchLocation">
|
|
|
@@ -260,7 +786,10 @@ function handlePdfUrl(pdf) {
|
|
|
placeholder="關鍵字搜尋"
|
|
|
/>
|
|
|
<button @click="search()">
|
|
|
- <img src="@/assets/img/news/news-search-icon.png" alt="臺灣工藝學習平台" />
|
|
|
+ <img
|
|
|
+ src="@/assets/img/news/news-search-icon.png"
|
|
|
+ alt="臺灣工藝學習平台"
|
|
|
+ />
|
|
|
</button>
|
|
|
</span>
|
|
|
<div
|
|
|
@@ -274,6 +803,7 @@ function handlePdfUrl(pdf) {
|
|
|
|
|
|
<CraftsArticle />
|
|
|
|
|
|
+ <!-- 線上閱讀 -->
|
|
|
<h2 ref="readRef" id="readList">{{ t("crafts.title_2") }}</h2>
|
|
|
|
|
|
<v-row class="justify-center align-start mt-16 read-list">
|
|
|
@@ -347,6 +877,7 @@ function handlePdfUrl(pdf) {
|
|
|
<PDFViewer :file="fileName" />
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 工藝書單 -->
|
|
|
<h2 id="bookList" class="mb-16">{{ t("crafts.title_3") }}</h2>
|
|
|
|
|
|
<!-- <div class="search pt-5 my-10 me-sm-16" ref="searchLocation ">
|
|
|
@@ -358,7 +889,10 @@ function handlePdfUrl(pdf) {
|
|
|
placeholder="關鍵字搜尋"
|
|
|
/>
|
|
|
<button @click="search()">
|
|
|
- <img src="@/assets/img/news/news-search-icon.png" alt="臺灣工藝學習平台" />
|
|
|
+ <img
|
|
|
+ src="@/assets/img/news/news-search-icon.png"
|
|
|
+ alt="臺灣工藝學習平台"
|
|
|
+ />
|
|
|
</button>
|
|
|
</span>
|
|
|
<div
|
|
|
@@ -418,6 +952,7 @@ function handlePdfUrl(pdf) {
|
|
|
:length="totalPages"
|
|
|
></v-pagination> -->
|
|
|
|
|
|
+ <!-- 工藝學刊 -->
|
|
|
<h2 id="journal">{{ t("crafts.title_4") }}</h2>
|
|
|
|
|
|
<div class="journal-content">
|
|
|
@@ -479,6 +1014,7 @@ function handlePdfUrl(pdf) {
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 碩博士論文補助 -->
|
|
|
<h2 id="thesisGrant">{{ t("crafts.title_5") }}</h2>
|
|
|
|
|
|
<ul class="mt-10">
|
|
|
@@ -491,271 +1027,971 @@ function handlePdfUrl(pdf) {
|
|
|
<ArticleCard :data="item" type="article" />
|
|
|
</li>
|
|
|
</ul>
|
|
|
+
|
|
|
+ <!-- 研發補助 -->
|
|
|
+ <h2 id="thesisGrant" class="mb-16">
|
|
|
+ {{ t("research_and_development_subsidy") }}
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ <v-container class="pa-0 pa-sm-3">
|
|
|
+ <div class="research-content">
|
|
|
+ <img
|
|
|
+ src="@/assets/img/college-group/future/素材-07.png"
|
|
|
+ alt="臺灣工藝學習平台"
|
|
|
+ />
|
|
|
+ <section>
|
|
|
+ <h3 class="mb-10">工藝跨域研創補助計畫【徵件至9月28日止】</h3>
|
|
|
+ <span class="d-flex align-center mb-2">
|
|
|
+ <v-icon
|
|
|
+ color="gray"
|
|
|
+ icon="mdi-calendar-range"
|
|
|
+ class="me-2"
|
|
|
+ ></v-icon>
|
|
|
+ 2023/05/18 09:00 ~ 2023/09/28 17:00
|
|
|
+ </span>
|
|
|
+ <span class="d-flex align-center">
|
|
|
+ <v-icon
|
|
|
+ color="gray"
|
|
|
+ icon="mdi-map-marker"
|
|
|
+ class="me-2"
|
|
|
+ ></v-icon>
|
|
|
+ 臺灣工藝學習平台
|
|
|
+ </span>
|
|
|
+ <p class="mt-8">
|
|
|
+ 臺灣工藝學習平台為實踐從總體經濟觀上思考整體工藝文化產業價值，及厚實臺灣工藝產業未來發展之國際文化競爭力，徵求類型含物件型研創、新材料研創、技術性研創、社會與環境議題研創等，申請團隊可提出相關實績說明或規畫構想，最高獲得
|
|
|
+ #新臺幣50萬元
|
|
|
+ 補助，歡迎國內相關機構、產業、公司等法人或團體以及個人創作者等單位踴躍提案申請！
|
|
|
+ </p>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section>
|
|
|
+ <p class="sub-title mb-5">附件下載</p>
|
|
|
+ <ul>
|
|
|
+ <li class="dot">
|
|
|
+ <span class="dot"></span>
|
|
|
+ <a
|
|
|
+ href="https://event.culture.tw/userFiles/NTCRI/DownloadFile/01/30166/01/30166_00_825471.pdf"
|
|
|
+ target="_blank"
|
|
|
+ >工藝跨域研創補助須知.pdf</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <!-- <li class="dot py-2 py-sm-0">
|
|
|
+ <a href="">工藝跨域研創補助計畫申請書.docx</a>
|
|
|
+ </li>
|
|
|
+ <li class="dot">
|
|
|
+ <a href="">工藝跨域研創補助計畫申請書.odt</a>
|
|
|
+ </li> -->
|
|
|
+ </ul>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <p class="text-end mt-5">
|
|
|
+ 聯絡資訊 : 049-2334141 分機134 王小姐、分機136 張小姐
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <img
|
|
|
+ class="mt-16"
|
|
|
+ src="@/assets/img/college-group/future/素材-08.png"
|
|
|
+ alt="臺灣工藝學習平台"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </v-container>
|
|
|
+
|
|
|
+ <!-- 研究計畫 -->
|
|
|
+ <h2 id="thesisGrant" class="mb-16">
|
|
|
+ {{ t("research_plan") }}
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ <v-container class="book-block">
|
|
|
+ <v-row
|
|
|
+ v-for="(item, index) in plan.list"
|
|
|
+ :key="index"
|
|
|
+ class="align-center mb-16"
|
|
|
+ >
|
|
|
+ <v-col cols="12" md="4" class="d-flex flex-column align-center">
|
|
|
+ <a
|
|
|
+ v-if="store.isMobile"
|
|
|
+ :href="store.getPDF(item.fileName)"
|
|
|
+ target="_blank"
|
|
|
+ class="cover-img"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="`${store.imgUrl}/${item.cover_img}`"
|
|
|
+ alt="臺灣工藝學習平台"
|
|
|
+ />
|
|
|
+ <button class="read-btn">點我閱讀</button>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- <router-link v-else :to="`/crafts/${item.fileName}`" class="cover-img"> -->
|
|
|
+ <router-link
|
|
|
+ v-else
|
|
|
+ :to="`/college-group/future/proposal/${item.article_id}`"
|
|
|
+ class="cover-img"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="`${store.imgUrl}/${item.cover_img}`"
|
|
|
+ alt="臺灣工藝學習平台"
|
|
|
+ />
|
|
|
+ <button class="read-btn">點我閱讀</button>
|
|
|
+ </router-link>
|
|
|
+ <h3 v-html="item.title"></h3>
|
|
|
+ </v-col>
|
|
|
+ <v-col cols="12" md="8" class="px-md-16 pb-md-16 mb-md-10">
|
|
|
+ <p class="mt-10 content" v-html="item.depiction"></p>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </v-container>
|
|
|
</div>
|
|
|
</v-container>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style lang="scss">
|
|
|
.article-content {
|
|
|
margin-bottom: 9.375em;
|
|
|
-}
|
|
|
-
|
|
|
-h2 {
|
|
|
- padding-top: 6.25em;
|
|
|
- font-size: 1.875em;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
|
|
|
-.bg-img {
|
|
|
- background-image: url("@/assets/img/crafts/background.png");
|
|
|
- background-size: cover;
|
|
|
- background-position: top;
|
|
|
- @media (max-width: 960px) {
|
|
|
- background-size: contain;
|
|
|
- background-repeat: repeat;
|
|
|
+ // 線上工藝 Start
|
|
|
+ .filter-list .v-select .v-field__input {
|
|
|
+ padding-top: 0.55em !important;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.read-list,
|
|
|
-.book-list {
|
|
|
- p {
|
|
|
- margin-bottom: 0.625em;
|
|
|
+ .video-list {
|
|
|
+ h3 {
|
|
|
+ margin: 0.5em 0 0.3em;
|
|
|
+ font-size: 1.125em;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ // 超過兩行則省略
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ line-break: after-white-space;
|
|
|
+ }
|
|
|
+ h3,
|
|
|
+ p,
|
|
|
+ span {
|
|
|
+ line-height: 1.5em;
|
|
|
+ letter-spacing: 0.0625em;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 0.875em;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 20px;
|
|
|
+ .v-img {
|
|
|
+ height: 225px;
|
|
|
+ width: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 20px;
|
|
|
+ transition: all 0.5s;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ @media (max-width: 1200px) {
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 960px) {
|
|
|
+ height: 32vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ height: 37vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- h3,
|
|
|
- p {
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- line-height: 1.875em;
|
|
|
+
|
|
|
+ video {
|
|
|
+ border-radius: 1.25em;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.read-list {
|
|
|
- .v-img {
|
|
|
- width: 100%;
|
|
|
- // height: 100%;
|
|
|
- max-height: 25em;
|
|
|
- object-fit: cover;
|
|
|
- cursor: pointer;
|
|
|
+ // 線上工藝 End
|
|
|
|
|
|
+ h2 {
|
|
|
+ padding-top: 5em;
|
|
|
+ font-size: 1.875em;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
@media (max-width: 600px) {
|
|
|
- width: 50%;
|
|
|
+ padding-top: 3em;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- @media (max-width: 600px) {
|
|
|
- section {
|
|
|
- width: 50%;
|
|
|
- padding: 0 0.625em;
|
|
|
- font-size: 0.875em;
|
|
|
+ .bg-img {
|
|
|
+ background-image: url("@/assets/img/crafts/background.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: top;
|
|
|
+ @media (max-width: 960px) {
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: repeat;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- p {
|
|
|
- width: 18.125em;
|
|
|
-
|
|
|
- @media (max-width: 600px) {
|
|
|
- width: auto;
|
|
|
+ .read-list,
|
|
|
+ .book-list {
|
|
|
+ p {
|
|
|
+ margin-bottom: 0.625em;
|
|
|
+ }
|
|
|
+ h3,
|
|
|
+ p {
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.875em;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.book-list {
|
|
|
- margin-bottom: 6.25em;
|
|
|
- .info {
|
|
|
- width: 26.875em;
|
|
|
- padding: 0.625em 1.25em;
|
|
|
- position: absolute;
|
|
|
- right: -2.5em;
|
|
|
- bottom: -3.75em;
|
|
|
- z-index: 1;
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
- border: 0.125em solid #c8cbcc;
|
|
|
+ .read-list {
|
|
|
+ .v-img {
|
|
|
+ width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ max-height: 25em;
|
|
|
+ object-fit: cover;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- @media (max-width: 1280px) {
|
|
|
- width: 25em;
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
- width: 20.625em;
|
|
|
- right: -0.1875em;
|
|
|
- bottom: -5em;
|
|
|
+ section {
|
|
|
+ width: 50%;
|
|
|
+ padding: 0 0.625em;
|
|
|
+ font-size: 0.875em;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
- width: 18.75em;
|
|
|
- margin-bottom: 0;
|
|
|
- text-align: start;
|
|
|
+ width: 18.125em;
|
|
|
+
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
}
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- margin-top: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .book-list {
|
|
|
+ margin-bottom: 6.25em;
|
|
|
+ .info {
|
|
|
+ width: 26.875em;
|
|
|
+ padding: 0.625em 1.25em;
|
|
|
position: absolute;
|
|
|
- bottom: 0.9375em;
|
|
|
- right: 0.9375em;
|
|
|
+ right: -2.5em;
|
|
|
+ bottom: -3.75em;
|
|
|
+ z-index: 1;
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ border: 0.125em solid #c8cbcc;
|
|
|
+
|
|
|
+ @media (max-width: 1280px) {
|
|
|
+ width: 25em;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ width: 20.625em;
|
|
|
+ right: -0.1875em;
|
|
|
+ bottom: -5em;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ width: 18.75em;
|
|
|
+ margin-bottom: 0;
|
|
|
+ text-align: start;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ margin-top: auto;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0.9375em;
|
|
|
+ right: 0.9375em;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.pdf-list {
|
|
|
- display: flex;
|
|
|
- margin: 6.25em 0;
|
|
|
- .side-title {
|
|
|
- padding: 4.375em 0 4.375em 0.625em;
|
|
|
+ .pdf-list {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- border-radius: 0.3125em;
|
|
|
- background-color: var(--purple);
|
|
|
- h5 {
|
|
|
- padding: 1.25em 0.625em;
|
|
|
- position: relative;
|
|
|
- font-size: 1.625em;
|
|
|
- font-weight: 400;
|
|
|
- writing-mode: vertical-rl; // 垂直
|
|
|
- color: var(--purple);
|
|
|
- letter-spacing: 0.125em;
|
|
|
+ margin: 6.25em 0;
|
|
|
+ .side-title {
|
|
|
+ padding: 4.375em 0 4.375em 0.625em;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 0.3125em;
|
|
|
+ background-color: var(--purple);
|
|
|
+ h5 {
|
|
|
+ padding: 1.25em 0.625em;
|
|
|
+ position: relative;
|
|
|
+ font-size: 1.625em;
|
|
|
+ font-weight: 400;
|
|
|
+ writing-mode: vertical-rl; // 垂直
|
|
|
+ color: var(--purple);
|
|
|
+ letter-spacing: 0.125em;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ font-size: 1.25em;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after,
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ height: 0.9375em;
|
|
|
+ width: 105%;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ top: -0.4em;
|
|
|
+ right: -0.2em;
|
|
|
+ transform: rotate(-15deg);
|
|
|
+
|
|
|
+ @media (max-width: 1200px) {
|
|
|
+ top: -0.5em;
|
|
|
+ right: -0.1875em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ bottom: -0.4em;
|
|
|
+ right: -0.2em;
|
|
|
+ transform: rotate(15deg);
|
|
|
+
|
|
|
+ @media (max-width: 1200px) {
|
|
|
+ bottom: -0.5em;
|
|
|
+ right: -0.1875em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul {
|
|
|
background-color: #fff;
|
|
|
+ padding: 3.125em 3.125em 0 3.125em;
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
- font-size: 1.25em;
|
|
|
+ padding: 1.5em 1.5em 0 1.5em;
|
|
|
}
|
|
|
|
|
|
- &::after,
|
|
|
- &::before {
|
|
|
- content: "";
|
|
|
- display: block;
|
|
|
- height: 0.9375em;
|
|
|
- width: 105%;
|
|
|
- background: #fff;
|
|
|
- position: absolute;
|
|
|
+ li {
|
|
|
+ margin-bottom: 1.5em;
|
|
|
+ padding-bottom: 1.5em;
|
|
|
+ border-bottom: 0.0625em dashed #ccc;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ // padding-bottom: 0;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ font-size: 1.375em;
|
|
|
+ line-height: 1.875em;
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ font-size: 1.125em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ margin: 0.9375em 0;
|
|
|
+ font-size: 1.125em;
|
|
|
+ line-height: 1.625em;
|
|
|
+ color: var(--gray);
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ font-size: 1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h3,
|
|
|
+ h4 {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ h3,
|
|
|
+ h4,
|
|
|
+ p {
|
|
|
+ letter-spacing: 0.0625em;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 0.875em;
|
|
|
+ color: var(--gray);
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0.3125em 0.625em;
|
|
|
+ margin-top: 1.25em;
|
|
|
+ font-size: 0.875em;
|
|
|
+ border-radius: 0.3125em;
|
|
|
+ border: 0.125em solid var(--gray);
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &::after {
|
|
|
- top: -0.4em;
|
|
|
- right: -0.2em;
|
|
|
- transform: rotate(-15deg);
|
|
|
+ .journal-content {
|
|
|
+ margin-top: 5em;
|
|
|
+ p {
|
|
|
+ line-height: 1.75em;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ letter-spacing: 0.0625em;
|
|
|
+ .title {
|
|
|
+ margin-top: 6.25em;
|
|
|
+ padding-bottom: 1.25em;
|
|
|
+ font-size: 1.25em;
|
|
|
+ border-bottom: 0.125em solid var(--purple);
|
|
|
+ }
|
|
|
|
|
|
- @media (max-width: 1200px) {
|
|
|
- top: -0.5em;
|
|
|
- right: -0.1875em;
|
|
|
- }
|
|
|
+ .title,
|
|
|
+ ul li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
- &::before {
|
|
|
- bottom: -0.4em;
|
|
|
- right: -0.2em;
|
|
|
- transform: rotate(15deg);
|
|
|
|
|
|
- @media (max-width: 1200px) {
|
|
|
- bottom: -0.5em;
|
|
|
- right: -0.1875em;
|
|
|
+ ul {
|
|
|
+ margin-top: 1.25em;
|
|
|
+ li {
|
|
|
+ margin-top: 0.625em;
|
|
|
+ padding-bottom: 0.625em;
|
|
|
+ border-bottom: 0.125em dashed #dddddd;
|
|
|
+ // &:first-child {
|
|
|
+ // border-bottom: 0.125em dashed #ccc;
|
|
|
+ // }
|
|
|
+ p {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- ul {
|
|
|
- background-color: #fff;
|
|
|
- padding: 3.125em 3.125em 0 3.125em;
|
|
|
+}
|
|
|
+
|
|
|
+.video-dialog {
|
|
|
+ h3 {
|
|
|
+ font-size: 1.25em;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ .v-icon {
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.5 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .v-card {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-box {
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 56.5%;
|
|
|
+ overflow: hidden;
|
|
|
+ video {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 研發補助
|
|
|
+.research-content {
|
|
|
+ margin: auto;
|
|
|
+ // max-width: 50em;
|
|
|
+ letter-spacing: 0.0625em;
|
|
|
+
|
|
|
+ p {
|
|
|
+ line-height: 1.75em;
|
|
|
+ }
|
|
|
+
|
|
|
+ section {
|
|
|
+ padding: 3.125em;
|
|
|
+ margin-top: 1.25em;
|
|
|
+ border: 0.0625em solid #ccc;
|
|
|
+ border-radius: 0.3125em;
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
- padding: 1.5em 1.5em 0 1.5em;
|
|
|
+ padding: 1.5em;
|
|
|
}
|
|
|
|
|
|
- li {
|
|
|
- margin-bottom: 1.5em;
|
|
|
- padding-bottom: 1.5em;
|
|
|
- border-bottom: 0.0625em dashed #ccc;
|
|
|
+ h3 {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 1.75em;
|
|
|
+ line-height: 2.25em;
|
|
|
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- // padding-bottom: 0;
|
|
|
- }
|
|
|
- h3 {
|
|
|
+ @media (max-width: 600px) {
|
|
|
font-size: 1.375em;
|
|
|
- line-height: 1.875em;
|
|
|
- @media (max-width: 600px) {
|
|
|
- font-size: 1.125em;
|
|
|
- }
|
|
|
}
|
|
|
- h4 {
|
|
|
- margin: 0.9375em 0;
|
|
|
- font-size: 1.125em;
|
|
|
- line-height: 1.625em;
|
|
|
- color: var(--gray);
|
|
|
- @media (max-width: 600px) {
|
|
|
- font-size: 1em;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ a,
|
|
|
+ span {
|
|
|
+ line-height: 1.375em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title {
|
|
|
+ font-size: 1.125em;
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &::before {
|
|
|
+ content: "•";
|
|
|
+ font-size: 2em;
|
|
|
+ color: #bca2b5;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
- h3,
|
|
|
- h4 {
|
|
|
- font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 研究計畫
|
|
|
+.book-block {
|
|
|
+ line-height: 1.875em;
|
|
|
+ letter-spacing: 0.0625em;
|
|
|
+
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ font-size: 1.125em;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .cover-img {
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ img {
|
|
|
+ @media (max-width: 960px) {
|
|
|
+ max-height: 31.25em;
|
|
|
}
|
|
|
- h3,
|
|
|
- h4,
|
|
|
- p {
|
|
|
- letter-spacing: 0.0625em;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .read-btn {
|
|
|
+ background-color: #99b1bb;
|
|
|
}
|
|
|
- p {
|
|
|
- font-size: 0.875em;
|
|
|
- color: var(--gray);
|
|
|
+ }
|
|
|
+ .read-btn {
|
|
|
+ padding: 0.5em 3.125em;
|
|
|
+ position: absolute;
|
|
|
+ right: -3.125em;
|
|
|
+ bottom: 2.8125em;
|
|
|
+ font-size: 1.125em;
|
|
|
+ letter-spacing: 0.125em;
|
|
|
+ text-shadow: 0.0625em 0.0625em 0.1875em #939393;
|
|
|
+ background-color: #a7c2cd;
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+ clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
|
|
|
+ transition: all 0.3s;
|
|
|
+ &:hover {
|
|
|
+ background-color: #99b1bb;
|
|
|
}
|
|
|
- a {
|
|
|
- display: inline-block;
|
|
|
- padding: 0.3125em 0.625em;
|
|
|
- margin-top: 1.25em;
|
|
|
- font-size: 0.875em;
|
|
|
- border-radius: 0.3125em;
|
|
|
- border: 0.125em solid var(--gray);
|
|
|
- transition: all 0.3s;
|
|
|
|
|
|
- &:hover {
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ padding: 0.5em 2.1875em;
|
|
|
+ right: -0.9375em;
|
|
|
+ font-size: 1em;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .content {
|
|
|
+ // 超過兩行則省略
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 5;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ line-break: after-white-space;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.journal-content {
|
|
|
- margin-top: 5em;
|
|
|
+// 修護工藝
|
|
|
+.restoration-content {
|
|
|
+ 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: 0.0625em;
|
|
|
line-height: 1.75em;
|
|
|
}
|
|
|
- .list {
|
|
|
- letter-spacing: 0.0625em;
|
|
|
- .title {
|
|
|
- margin-top: 6.25em;
|
|
|
- padding-bottom: 1.25em;
|
|
|
- font-size: 1.25em;
|
|
|
- border-bottom: 0.125em solid var(--purple);
|
|
|
+
|
|
|
+ .article-block {
|
|
|
+ h4 {
|
|
|
+ font-size: 1.625em;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 2.5em;
|
|
|
}
|
|
|
|
|
|
- .title,
|
|
|
- ul li {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .v-btn {
|
|
|
+ height: 4.375em;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ border-radius: 6.25em;
|
|
|
+ background-color: var(--brown);
|
|
|
+ @media (max-width: 960px) {
|
|
|
+ font-size: 0.875em;
|
|
|
+ }
|
|
|
+ @media (max-width: 600px) {
|
|
|
+ font-size: 1em;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- ul {
|
|
|
- margin-top: 1.25em;
|
|
|
+ // 工藝修護師
|
|
|
+ .master-list {
|
|
|
+ img {
|
|
|
+ width: 15.625em;
|
|
|
+ height: 15.625em;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ font-size: 1.25em;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ section {
|
|
|
+ text-align: center;
|
|
|
+ color: #606064;
|
|
|
li {
|
|
|
- margin-top: 0.625em;
|
|
|
- padding-bottom: 0.625em;
|
|
|
- border-bottom: 0.125em dashed #dddddd;
|
|
|
- // &:first-child {
|
|
|
- // border-bottom: 0.125em dashed #ccc;
|
|
|
- // }
|
|
|
- p {
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
+ line-height: 1.75em;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 修護故事
|
|
|
+ .story-list {
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 18.75em;
|
|
|
+ object-fit: cover;
|
|
|
+ @media (max-width: 960px) {
|
|
|
+ max-width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ font-size: 1.5em;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1.875em;
|
|
|
+ letter-spacing: 0.0625em;
|
|
|
+ }
|
|
|
+ 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: 1.25em;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+// h2 {
|
|
|
+// padding-top: 6.25em;
|
|
|
+// font-size: 1.875em;
|
|
|
+// font-weight: 500;
|
|
|
+// text-align: center;
|
|
|
+// }
|
|
|
+
|
|
|
+// .bg-img {
|
|
|
+// background-image: url("@/assets/img/crafts/background.png");
|
|
|
+// background-size: cover;
|
|
|
+// background-position: top;
|
|
|
+// @media (max-width: 960px) {
|
|
|
+// background-size: contain;
|
|
|
+// background-repeat: repeat;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .read-list,
|
|
|
+// .book-list {
|
|
|
+// p {
|
|
|
+// margin-bottom: 0.625em;
|
|
|
+// }
|
|
|
+// h3,
|
|
|
+// p {
|
|
|
+// font-weight: 500;
|
|
|
+// text-align: center;
|
|
|
+// line-height: 1.875em;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .read-list {
|
|
|
+// .v-img {
|
|
|
+// width: 100%;
|
|
|
+// // height: 100%;
|
|
|
+// max-height: 25em;
|
|
|
+// object-fit: cover;
|
|
|
+// cursor: pointer;
|
|
|
+
|
|
|
+// @media (max-width: 600px) {
|
|
|
+// width: 50%;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// @media (max-width: 600px) {
|
|
|
+// section {
|
|
|
+// width: 50%;
|
|
|
+// padding: 0 0.625em;
|
|
|
+// font-size: 0.875em;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// p {
|
|
|
+// width: 18.125em;
|
|
|
+
|
|
|
+// @media (max-width: 600px) {
|
|
|
+// width: auto;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .book-list {
|
|
|
+// margin-bottom: 6.25em;
|
|
|
+// .info {
|
|
|
+// width: 26.875em;
|
|
|
+// padding: 0.625em 1.25em;
|
|
|
+// position: absolute;
|
|
|
+// right: -2.5em;
|
|
|
+// bottom: -3.75em;
|
|
|
+// z-index: 1;
|
|
|
+// background: rgba(255, 255, 255, 0.8);
|
|
|
+// border: 0.125em solid #c8cbcc;
|
|
|
+
|
|
|
+// @media (max-width: 1280px) {
|
|
|
+// width: 25em;
|
|
|
+// }
|
|
|
+
|
|
|
+// @media (max-width: 600px) {
|
|
|
+// width: 20.625em;
|
|
|
+// right: -0.1875em;
|
|
|
+// bottom: -5em;
|
|
|
+// }
|
|
|
+
|
|
|
+// p {
|
|
|
+// width: 18.75em;
|
|
|
+// margin-bottom: 0;
|
|
|
+// text-align: start;
|
|
|
+// }
|
|
|
+// span {
|
|
|
+// display: block;
|
|
|
+// margin-top: auto;
|
|
|
+// position: absolute;
|
|
|
+// bottom: 0.9375em;
|
|
|
+// right: 0.9375em;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .pdf-list {
|
|
|
+// display: flex;
|
|
|
+// margin: 6.25em 0;
|
|
|
+// .side-title {
|
|
|
+// padding: 4.375em 0 4.375em 0.625em;
|
|
|
+// display: flex;
|
|
|
+// flex-direction: column;
|
|
|
+// justify-content: space-between;
|
|
|
+// border-radius: 0.3125em;
|
|
|
+// background-color: var(--purple);
|
|
|
+// h5 {
|
|
|
+// padding: 1.25em 0.625em;
|
|
|
+// position: relative;
|
|
|
+// font-size: 1.625em;
|
|
|
+// font-weight: 400;
|
|
|
+// writing-mode: vertical-rl; // 垂直
|
|
|
+// color: var(--purple);
|
|
|
+// letter-spacing: 0.125em;
|
|
|
+// background-color: #fff;
|
|
|
+
|
|
|
+// @media (max-width: 600px) {
|
|
|
+// font-size: 1.25em;
|
|
|
+// }
|
|
|
+
|
|
|
+// &::after,
|
|
|
+// &::before {
|
|
|
+// content: "";
|
|
|
+// display: block;
|
|
|
+// height: 0.9375em;
|
|
|
+// width: 105%;
|
|
|
+// background: #fff;
|
|
|
+// position: absolute;
|
|
|
+// }
|
|
|
+
|
|
|
+// &::after {
|
|
|
+// top: -0.4em;
|
|
|
+// right: -0.2em;
|
|
|
+// transform: rotate(-15deg);
|
|
|
+
|
|
|
+// @media (max-width: 1200px) {
|
|
|
+// top: -0.5em;
|
|
|
+// right: -0.1875em;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// &::before {
|
|
|
+// bottom: -0.4em;
|
|
|
+// right: -0.2em;
|
|
|
+// transform: rotate(15deg);
|
|
|
+
|
|
|
+// @media (max-width: 1200px) {
|
|
|
+// bottom: -0.5em;
|
|
|
+// right: -0.1875em;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// ul {
|
|
|
+// background-color: #fff;
|
|
|
+// padding: 3.125em 3.125em 0 3.125em;
|
|
|
+
|
|
|
+// @media (max-width: 600px) {
|
|
|
+// padding: 1.5em 1.5em 0 1.5em;
|
|
|
+// }
|
|
|
+
|
|
|
+// li {
|
|
|
+// margin-bottom: 1.5em;
|
|
|
+// padding-bottom: 1.5em;
|
|
|
+// border-bottom: 0.0625em dashed #ccc;
|
|
|
+
|
|
|
+// &:last-child {
|
|
|
+// margin-bottom: 0;
|
|
|
+// // padding-bottom: 0;
|
|
|
+// }
|
|
|
+// h3 {
|
|
|
+// font-size: 1.375em;
|
|
|
+// line-height: 1.875em;
|
|
|
+// @media (max-width: 600px) {
|
|
|
+// font-size: 1.125em;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// h4 {
|
|
|
+// margin: 0.9375em 0;
|
|
|
+// font-size: 1.125em;
|
|
|
+// line-height: 1.625em;
|
|
|
+// color: var(--gray);
|
|
|
+// @media (max-width: 600px) {
|
|
|
+// font-size: 1em;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// h3,
|
|
|
+// h4 {
|
|
|
+// font-weight: 500;
|
|
|
+// }
|
|
|
+// h3,
|
|
|
+// h4,
|
|
|
+// p {
|
|
|
+// letter-spacing: 0.0625em;
|
|
|
+// }
|
|
|
+// p {
|
|
|
+// font-size: 0.875em;
|
|
|
+// color: var(--gray);
|
|
|
+// }
|
|
|
+// a {
|
|
|
+// display: inline-block;
|
|
|
+// padding: 0.3125em 0.625em;
|
|
|
+// margin-top: 1.25em;
|
|
|
+// font-size: 0.875em;
|
|
|
+// border-radius: 0.3125em;
|
|
|
+// border: 0.125em solid var(--gray);
|
|
|
+// transition: all 0.3s;
|
|
|
+
|
|
|
+// &:hover {
|
|
|
+// opacity: 0.7;
|
|
|
+// }
|
|
|
+
|
|
|
+// span {
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .journal-content {
|
|
|
+// margin-top: 5em;
|
|
|
+// p {
|
|
|
+// line-height: 1.75em;
|
|
|
+// }
|
|
|
+// .list {
|
|
|
+// letter-spacing: 0.0625em;
|
|
|
+// .title {
|
|
|
+// margin-top: 6.25em;
|
|
|
+// padding-bottom: 1.25em;
|
|
|
+// font-size: 1.25em;
|
|
|
+// border-bottom: 0.125em solid var(--purple);
|
|
|
+// }
|
|
|
+
|
|
|
+// .title,
|
|
|
+// ul li {
|
|
|
+// display: flex;
|
|
|
+// justify-content: space-between;
|
|
|
+// }
|
|
|
+
|
|
|
+// ul {
|
|
|
+// margin-top: 1.25em;
|
|
|
+// li {
|
|
|
+// margin-top: 0.625em;
|
|
|
+// padding-bottom: 0.625em;
|
|
|
+// border-bottom: 0.125em dashed #dddddd;
|
|
|
+// // &:first-child {
|
|
|
+// // border-bottom: 0.125em dashed #ccc;
|
|
|
+// // }
|
|
|
+// p {
|
|
|
+// font-weight: 400;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
</style>
|
