|
|
@@ -10,6 +10,7 @@ import HomeList from "@/components/HomeList.vue";
|
|
|
import TermsList from "@/components/TermsList.vue";
|
|
|
import CourseCard from "@/components/CourseCard.vue";
|
|
|
import CraftsArticle from "@/components/CraftsArticle.vue";
|
|
|
+import CoursesTutorial from "@/components/CoursesTutorial.vue";
|
|
|
|
|
|
const store = useMainStore();
|
|
|
const { t } = useI18n();
|
|
|
@@ -305,6 +306,66 @@ onMounted(() => {
|
|
|
});
|
|
|
|
|
|
let closeBanner = ref(false);
|
|
|
+
|
|
|
+// 0909 測試資料
|
|
|
+let recommendListData = [
|
|
|
+ {
|
|
|
+ name: "9月療癒補給站｜蓼藍生葉染長絲巾",
|
|
|
+ introduction:
|
|
|
+ "蓼藍的天然色澤，透過細緻的染製過程，展現出柔和而優雅的藍調，為絲巾增添一份獨特的自然韻味。這條絲巾不僅是您的穿搭點綴，更是將傳統工藝融入日常的溫暖陪伴。為秋日增添一抹清新與柔美。",
|
|
|
+ location: "臺灣工藝文化園區 生活工藝館3F 藍染工坊",
|
|
|
+ cover_img:
|
|
|
+ "https://event.culture.tw/userFiles/NTCRI/JpgFile/01/40219/AD/40219_0_0_81934_276_175.png?20240909",
|
|
|
+ url: "https://event.culture.tw/mocweb/reg/NTCRI/Detail.init.ctr?actId=40229&utm_source=moc&utm_medium=queryReg&utm_campaign=40229",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "9月療癒補給站｜木紋質感開口銀戒",
|
|
|
+ introduction:
|
|
|
+ "讓銀器上的細膩木紋如同時光的刻痕，將生活中的點滴記錄其中。每一道紋路都蘊藏著歲月的故事，讓這枚戒指不僅是裝飾，更是隨身的時光印記。無論日常或特殊時刻，它都將陪伴您，見證生命中的每一個起伏與轉折。",
|
|
|
+ location: "臺灣工藝文化園區 生活工藝館3F 藍染工坊",
|
|
|
+ cover_img:
|
|
|
+ "https://event.culture.tw/userFiles/NTCRI/JpgFile/01/40089/AD/40089_0_0_82596_276_175.jpg?20240909",
|
|
|
+ url: "https://event.culture.tw/mocweb/reg/NTCRI/Detail.init.ctr?actId=40230&utm_source=moc&utm_medium=queryReg&utm_campaign=40230",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "9月療癒補給站｜搧涼一夏",
|
|
|
+ introduction:
|
|
|
+ "在這個悶熱的季節，何不親手編織一把具有傳統美感的八方涼扇？運用天然竹材，學習簡單的編織技巧，讓竹絲縱橫交織，製作出既實用又美觀的涼扇。讓我們一起在編織的過程中享受手作的樂趣，感受清涼的夏日微風，為這個夏天增添一份手作的清爽體驗。",
|
|
|
+ location: "臺灣工藝文化園區 生活工藝館2F 竹藝工坊",
|
|
|
+ cover_img:
|
|
|
+ "https://event.culture.tw/userFiles/NTCRI/JpgFile/01/40213/AD/40213_0_0_831401_276_175.png?20240909",
|
|
|
+ url: "https://event.culture.tw/mocweb/reg/NTCRI/Detail.init.ctr?actId=40231&utm_source=moc&utm_medium=queryReg&utm_campaign=40231",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "9月療癒補給站｜長久筷樂漆筷",
|
|
|
+ introduction:
|
|
|
+ "高雅的漆筷不僅是用餐的工具，更是一種生活美學的展現，為您的每一頓飯增添一份文青氣息與工藝情調。讓傳統與現代在餐桌上交融，品味手作的細膩質感，讓日常用餐成為一場充滿藝術氛圍的享受。",
|
|
|
+ location: "臺灣工藝文化園區 生活工藝館2F 漆藝工坊",
|
|
|
+ cover_img:
|
|
|
+ "https://event.culture.tw/userFiles/NTCRI/JpgFile/01/40232/AD/40232_0_0_808672_276_175.jpg?20240909",
|
|
|
+ url: "https://event.culture.tw/mocweb/reg/NTCRI/Detail.init.ctr?actId=40232&utm_source=moc&utm_medium=queryReg&utm_campaign=40232",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "9月療癒補給站｜皮革吊飾-小木馬",
|
|
|
+ introduction:
|
|
|
+ "從平面到立體，培養空間概念，透過眼手的互動在色彩、造型和空間感能延伸更寬闊的包容度。『搖啊搖，搖到外婆家』可愛的搖搖木馬用皮革組合縫製而成，縫出我們記憶中暖暖的回憶和成就感。",
|
|
|
+ location: "臺灣工藝文化園區 地方工藝館1F 大廳",
|
|
|
+ cover_img:
|
|
|
+ "https://event.culture.tw/userFiles/NTCRI/JpgFile/01/40233/AD/40233_0_0_69915_276_175.jpg?20240909",
|
|
|
+ url: "https://event.culture.tw/mocweb/reg/NTCRI/Detail.init.ctr?actId=40233&utm_source=moc&utm_medium=queryReg&utm_campaign=40233",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "9月療癒補給站｜原礦磨石體驗",
|
|
|
+ introduction:
|
|
|
+ "生活中的忙碌、緊張，偶爾放空腦袋，讓寶玉原礦來安定身心靈，將一顆顆原礦隨自己心意磨成自己想要的樣子，療癒一下內心深處受傷的部分！一起來體驗吧！",
|
|
|
+ location: "臺灣工藝文化園區 地方工藝館1F 大廳",
|
|
|
+ cover_img:
|
|
|
+ "https://event.culture.tw/userFiles/NTCRI/JpgFile/01/40234/AD/40234_0_0_759825_276_175.png?20240909",
|
|
|
+ url: "https://event.culture.tw/mocweb/reg/NTCRI/Detail.init.ctr?actId=40234&utm_source=moc&utm_medium=queryReg&utm_campaign=40234",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+console.log("測試資料", recommendListData);
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -338,7 +399,7 @@ let closeBanner = ref(false);
|
|
|
<v-icon icon="mdi-close"></v-icon>
|
|
|
</button>
|
|
|
<Navbar />
|
|
|
- <v-container class="px-md-0 pb-16 mb-16">
|
|
|
+ <v-container class="px-md-0">
|
|
|
<section class="text-center intro">
|
|
|
<h2 class="title">{{ t("home.title_1") }}</h2>
|
|
|
<p class="my-10">
|
|
|
@@ -377,7 +438,7 @@ let closeBanner = ref(false);
|
|
|
</v-carousel-item>
|
|
|
</v-carousel>
|
|
|
|
|
|
- <div class="news-content">
|
|
|
+ <!-- <div class="news-content">
|
|
|
<div class="d-flex tab-btn mb-16">
|
|
|
<v-btn
|
|
|
variant="text"
|
|
|
@@ -400,30 +461,6 @@ let closeBanner = ref(false);
|
|
|
<ul v-if="assignTag === 'news'">
|
|
|
<li v-for="(item, index) in news.list" :key="index" class="mb-16 list">
|
|
|
<HomeList :data="item" />
|
|
|
- <!-- <section class="d-flex">
|
|
|
- <p class="category mb-5">
|
|
|
- <span></span>
|
|
|
- {{ item.category }}
|
|
|
- </p>
|
|
|
- <p class="ms-5">
|
|
|
- {{ moment(`${item.create_time}`).format("YYYY-MM-DD") }}
|
|
|
- </p>
|
|
|
- </section>
|
|
|
- <v-card
|
|
|
- variant="outlined"
|
|
|
- class="d-flex flex-md-row flex-column align-center pa-3 pa-md-5"
|
|
|
- >
|
|
|
- <v-row class="align-center">
|
|
|
- <v-col cols="12">
|
|
|
- <router-link :to="`/news/${item.news_id}`" class="cover-img">
|
|
|
- <section class="d-flex flex-column pa-3">
|
|
|
- <h3>{{ item.title }}</h3>
|
|
|
- <p v-html="item.content"></p>
|
|
|
- </section>
|
|
|
- </router-link>
|
|
|
- </v-col>
|
|
|
- </v-row>
|
|
|
- </v-card> -->
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
@@ -436,21 +473,10 @@ let closeBanner = ref(false);
|
|
|
<HomeList :data="item" />
|
|
|
</li>
|
|
|
</ul>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
- <h2 class="my-10 title">{{ t("home.title_2") }}</h2>
|
|
|
+ <!-- <h2 class="my-10 title">{{ t("home.title_2") }}</h2>
|
|
|
<v-row>
|
|
|
- <!-- <v-col cols="6" md="4">
|
|
|
- <router-link to="/college-group/future" class="img-info">
|
|
|
- <img
|
|
|
- src="@/assets/img/home/首頁元素-12.webp"
|
|
|
- alt="臺灣工藝學習平台"
|
|
|
- />
|
|
|
- <section>
|
|
|
- <p>{{ t("college_group_1") }}</p>
|
|
|
- </section>
|
|
|
- </router-link>
|
|
|
- </v-col> -->
|
|
|
<v-col cols="12" sm="4">
|
|
|
<router-link to="/college-group/craft" class="img-info">
|
|
|
<img
|
|
|
@@ -484,39 +510,149 @@ let closeBanner = ref(false);
|
|
|
</section>
|
|
|
</router-link>
|
|
|
</v-col>
|
|
|
- <!-- <v-col cols="6" md="4">
|
|
|
- <router-link to="/college-group/online" class="img-info">
|
|
|
- <img
|
|
|
- src="@/assets/img/home/首頁元素-09.webp"
|
|
|
- alt="臺灣工藝學習平台"
|
|
|
- />
|
|
|
- <section>
|
|
|
- <p>{{ t("college_group_4") }}</p>
|
|
|
- </section>
|
|
|
- </router-link>
|
|
|
- </v-col> -->
|
|
|
- <!-- <v-col cols="6" md="4">
|
|
|
- <router-link to="/college-group/craft-for-all" class="img-info">
|
|
|
- <img
|
|
|
- src="@/assets/img/home/臺灣綠工藝希望工程.png"
|
|
|
- alt="臺灣工藝學習平台"
|
|
|
- />
|
|
|
- <section>
|
|
|
- <p>{{ t("college_group_5") }}</p>
|
|
|
+ </v-row> -->
|
|
|
+
|
|
|
+ <h2 class="mt-15 mb-10 title">{{ t("home.title_4") }}</h2>
|
|
|
+ <v-row class="recommend-block">
|
|
|
+ <v-col
|
|
|
+ cols="12"
|
|
|
+ sm="6"
|
|
|
+ lg="4"
|
|
|
+ v-for="(data, index) in recommendListData"
|
|
|
+ :key="index"
|
|
|
+ class="pa-5"
|
|
|
+ >
|
|
|
+ <div class="main-card">
|
|
|
+ <section class="card-title">
|
|
|
+ <h3>{{ data.org === "Udemy" ? data.title : data.name }}</h3>
|
|
|
</section>
|
|
|
- </router-link>
|
|
|
+ <div class="card-info">
|
|
|
+ <!-- <router-link :to="`/course-detail/${data.class_name_id}`"> -->
|
|
|
+ <a :href="data.url" target="_blank">
|
|
|
+ <div class="overflow-hidden">
|
|
|
+ <v-img
|
|
|
+ class="mx-auto cover-img"
|
|
|
+ :lazy-src="store.getImageSrc(data)"
|
|
|
+ height="13.75em"
|
|
|
+ cover
|
|
|
+ :src="store.getImageSrc(data)"
|
|
|
+ alt="臺灣工藝學習平台"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div class="d-flex align-center justify-space-between mt-5">
|
|
|
+ <v-chip
|
|
|
+ @click="handleCategory(data.category)"
|
|
|
+ v-if="data.category"
|
|
|
+ label
|
|
|
+ color="primary"
|
|
|
+ class="category-item"
|
|
|
+ >
|
|
|
+ {{ data.category }}
|
|
|
+ </v-chip>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <v-chip v-if="data.level" size="small">
|
|
|
+ {{ data.level }}
|
|
|
+ </v-chip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- </router-link> -->
|
|
|
+
|
|
|
+ <ul v-if="data.org !== 'Udemy'">
|
|
|
+ <li class="d-flex align-center mb-5">
|
|
|
+ <div class="description">
|
|
|
+ <p
|
|
|
+ class="text-gray pt-3"
|
|
|
+ v-html="store.formatString(data.introduction)"
|
|
|
+ ></p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="d-flex align-center justify-space-between">
|
|
|
+ <div class="d-flex align-center">
|
|
|
+ <v-icon
|
|
|
+ color="primary"
|
|
|
+ icon="mdi-map-marker"
|
|
|
+ class="me-1 mt-1"
|
|
|
+ ></v-icon>
|
|
|
+ <p class="mb-0 pe-3 location-item">
|
|
|
+ {{ data.location }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <button aria-label="收藏課程">
|
|
|
+ <v-icon
|
|
|
+ v-if="isClassFavorite(data.class_name_id)"
|
|
|
+ @click="deleteFavoriteClass(data.class_name_id)"
|
|
|
+ color="primary"
|
|
|
+ icon="mdi-bookmark"
|
|
|
+ size="large"
|
|
|
+ ></v-icon>
|
|
|
+ <v-icon
|
|
|
+ v-else
|
|
|
+ @click="setFavoriteClass(data.class_name_id)"
|
|
|
+ color="primary"
|
|
|
+ icon="mdi-bookmark-outline"
|
|
|
+ size="large"
|
|
|
+ ></v-icon>
|
|
|
+ </button> -->
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <ul v-else class="justify-center">
|
|
|
+ <li>
|
|
|
+ <div class="description">
|
|
|
+ <p
|
|
|
+ class="text-gray pt-3"
|
|
|
+ v-html="store.formatString(data.content)"
|
|
|
+ ></p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <p class="text-gray pt-3">
|
|
|
+ {{ data.content }}
|
|
|
+ </p> -->
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="data.encode"
|
|
|
+ class="d-flex align-center justify-end my-2"
|
|
|
+ >
|
|
|
+ <small class="text-gray">編號：{{ data.encode }}</small>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </v-col>
|
|
|
+
|
|
|
+ <!-- <v-col
|
|
|
+ cols="12"
|
|
|
+ sm="6"
|
|
|
+ lg="4"
|
|
|
+ v-for="(item, index) in recommend.list"
|
|
|
+ :key="index"
|
|
|
+ class="pa-5"
|
|
|
+ >
|
|
|
+ <CourseCard :data="item" />
|
|
|
</v-col> -->
|
|
|
- <!-- <v-col cols="6" md="4">
|
|
|
- <router-link to="/college-group/life" class="img-info">
|
|
|
+ <v-col cols="12">
|
|
|
+ <router-link to="/course-list" class="course-link">
|
|
|
<img
|
|
|
- src="@/assets/img/home/首頁元素-07.webp"
|
|
|
+ src="@/assets/img/course/探索課程素材-15.png"
|
|
|
alt="臺灣工藝學習平台"
|
|
|
/>
|
|
|
- <section>
|
|
|
- <p>{{ t("college_group_6") }}</p>
|
|
|
- </section>
|
|
|
+ <p>{{ t("see_more") }}</p>
|
|
|
</router-link>
|
|
|
- </v-col> -->
|
|
|
+ </v-col>
|
|
|
</v-row>
|
|
|
|
|
|
<div class="map-block">
|
|
|
@@ -575,13 +711,32 @@ let closeBanner = ref(false);
|
|
|
</div>
|
|
|
</v-col>
|
|
|
<v-col md="4" cols="12" :class="{ 'd-none': store.isMobile }">
|
|
|
- <p v-if="!classes.data.length" class="text-center text-gray">
|
|
|
+ <!-- <p v-if="!classes.data.length" class="text-center text-gray">
|
|
|
未找到符合條件的結果
|
|
|
- </p>
|
|
|
- <v-list v-else lines="three" class="list pa-0">
|
|
|
- <v-list-item v-for="item in classes.data" :key="item.id">
|
|
|
+ </p> -->
|
|
|
+ <v-list lines="three" class="list pa-0">
|
|
|
+ <v-list-item v-for="item in recommendListData">
|
|
|
<div class="d-flex align-center">
|
|
|
- <router-link
|
|
|
+ <a :href="item.url" target="_blank" class="link">
|
|
|
+ <v-img
|
|
|
+ :lazy-src="item.cover_img"
|
|
|
+ cover
|
|
|
+ :src="item.cover_img"
|
|
|
+ alt="臺灣工藝學習平台"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ </a>
|
|
|
+ <!-- <router-link
|
|
|
:to="`/course-detail/${item.class_name_id}`"
|
|
|
class="link"
|
|
|
>
|
|
|
@@ -602,10 +757,10 @@ let closeBanner = ref(false);
|
|
|
</div>
|
|
|
</template>
|
|
|
</v-img>
|
|
|
- </router-link>
|
|
|
+ </router-link> -->
|
|
|
<section>
|
|
|
<h2>{{ item.name }}</h2>
|
|
|
- <div class="d-flex align-start">
|
|
|
+ <!-- <div class="d-flex align-start">
|
|
|
<v-icon
|
|
|
color="primary"
|
|
|
icon="mdi-domain"
|
|
|
@@ -618,14 +773,15 @@ let closeBanner = ref(false);
|
|
|
: item.organizer
|
|
|
}}
|
|
|
</p>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="d-flex align-start">
|
|
|
<v-icon
|
|
|
color="primary"
|
|
|
icon="mdi-map-marker"
|
|
|
class="me-2 pt-1"
|
|
|
></v-icon>
|
|
|
- <p>{{ item.address }}</p>
|
|
|
+ <p>{{ item.location }}</p>
|
|
|
+ <!-- <p>{{ item.address }}</p> -->
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
@@ -723,35 +879,12 @@ let closeBanner = ref(false);
|
|
|
<Map @locationId="getClassList" />
|
|
|
</div> -->
|
|
|
</div>
|
|
|
-
|
|
|
- <h2 class="mb-10 title">{{ t("home.title_4") }}</h2>
|
|
|
- <v-row class="recommend-block">
|
|
|
- <v-col
|
|
|
- cols="12"
|
|
|
- sm="6"
|
|
|
- lg="4"
|
|
|
- v-for="(item, index) in recommend.list"
|
|
|
- :key="index"
|
|
|
- class="pa-5"
|
|
|
- >
|
|
|
- <CourseCard :data="item" />
|
|
|
- </v-col>
|
|
|
- <v-col cols="12">
|
|
|
- <router-link to="/course-list" class="course-link">
|
|
|
- <img
|
|
|
- src="@/assets/img/course/探索課程素材-15.png"
|
|
|
- alt="臺灣工藝學習平台"
|
|
|
- />
|
|
|
- <p>{{ t("see_more") }}</p>
|
|
|
- </router-link>
|
|
|
- </v-col>
|
|
|
- </v-row>
|
|
|
</v-container>
|
|
|
|
|
|
- <!-- <v-container fluid class="pa-0 pt-sm-16 tutorial-block">
|
|
|
+ <v-container fluid class="pa-0 pt-sm-16 tutorial-block">
|
|
|
<h2 class="mb-10 title">{{ t("tutorial.title") }}</h2>
|
|
|
<CoursesTutorial />
|
|
|
- </v-container> -->
|
|
|
+ </v-container>
|
|
|
|
|
|
<v-container class="px-md-0 my-16">
|
|
|
<h2 class="mb-10 title">{{ t("home.title_6") }}</h2>
|
|
|
@@ -836,7 +969,7 @@ let closeBanner = ref(false);
|
|
|
</v-expansion-panel>
|
|
|
</v-expansion-panels>
|
|
|
|
|
|
- <h2 class="mb-10 mt-16 title">{{ t("crafts.title") }}</h2>
|
|
|
+ <!-- <h2 class="mb-10 mt-16 title">{{ t("crafts.title") }}</h2>
|
|
|
|
|
|
<v-row class="px-5 px-sm-10 mt-16 mb-10 tag-btn">
|
|
|
<v-col
|
|
|
@@ -846,13 +979,12 @@ let closeBanner = ref(false);
|
|
|
md=""
|
|
|
>
|
|
|
<a :href="item.url" target="_blank" class="py-3 py-lg-6 item">
|
|
|
- <!-- 網址 -->
|
|
|
{{ t(`${item.title}`) }}
|
|
|
</a>
|
|
|
</v-col>
|
|
|
- </v-row>
|
|
|
+ </v-row> -->
|
|
|
|
|
|
- <CraftsArticle />
|
|
|
+ <!-- <CraftsArticle /> -->
|
|
|
|
|
|
<router-link to="/crafts" class="crafts-link">
|
|
|
<img
|
|
|
@@ -969,7 +1101,8 @@ let closeBanner = ref(false);
|
|
|
}
|
|
|
|
|
|
.map-block {
|
|
|
- margin: 6.25em auto;
|
|
|
+ margin-top: 6.25em;
|
|
|
+
|
|
|
.map {
|
|
|
height: 100%;
|
|
|
min-height: 100vh;
|
