update

src/assets/css/style.css

@@ -72,7 +72,7 @@ input:focus-visible {
   position: relative;
 }
 .search input {
-  padding: 5px 10px;
+  padding: 5px 15px;
   border-radius: 100px;
   border: 1px solid #ccc;
   background-color: #fff;

src/assets/css/style.scss

@@ -76,7 +76,7 @@ input:focus-visible {
   }
 
   input {
-    padding: 5px 10px;
+    padding: 5px 15px;
     border-radius: 100px;
     border: 1px solid #ccc;
     background-color: #fff;

src/components/Navbar.vue

@@ -54,10 +54,12 @@ function handleClose(value) {
               <router-link :to="'/college-group/craft'">技藝工藝</router-link>
             </li>
             <li>
-              <router-link :to="'/college-group/craft'">青年工藝</router-link>
+              <router-link :to="'/college-group/teenager'"
+                >青年工藝</router-link
+              >
             </li>
             <li>
-              <router-link :to="'/college-group/craft'">修護工藝</router-link>
+              <router-link :to="'/college-group/repair'">修護工藝</router-link>
             </li>
             <li>
               <router-link :to="'/college-group/craft'">跨域工藝</router-link>

src/router/index.js

@@ -10,6 +10,8 @@ const CourseDetail = defineAsyncComponent(() => import('@/views/CourseDetail.vue
 const Craft = defineAsyncComponent(() => import('@/views/CollegeGroup/Craft.vue'));
 const Generation = defineAsyncComponent(() => import('@/views/CollegeGroup/Generation.vue'));
 const Future = defineAsyncComponent(() => import('@/views/CollegeGroup/Future.vue'));
+const Repair = defineAsyncComponent(() => import('@/views/CollegeGroup/Repair.vue'));
+const Teenager = defineAsyncComponent(() => import('@/views/CollegeGroup/Teenager.vue'));
 
 const routes = [
   {
@@ -57,6 +59,16 @@ const routes = [
     name: 'Future',
     component: Future
   },
+  {
+    path: '/college-group/repair',
+    name: 'Repair',
+    component: Repair
+  },
+  {
+    path: '/college-group/teenager',
+    name: 'Teenager',
+    component: Teenager
+  },
 ];
 
 const router = createRouter({

src/views/CollegeGroup/Craft.vue

@@ -54,7 +54,7 @@ const testData = [
     <Navbar />
     <v-container fluid class="college-content pb-16 px-sm-0">
       <div class="college-banner">
-        <img src="@/assets/img/college-group/技藝橫幅.png" alt="" />
+        <img src="@/assets/img/college-group/craft/banner.png" alt="" />
         <h1>技藝工藝</h1>
       </div>
       <div class="main-block">

src/views/CollegeGroup/Future.vue

@@ -46,7 +46,7 @@ const testData = [
     <Navbar />
     <v-container fluid class="college-content pb-16 px-sm-0">
       <div class="college-banner">
-        <img src="@/assets/img/college-group/未來工藝 橫幅.png" alt="" />
+        <img src="@/assets/img/college-group/future/banner.png" alt="" />
         <h1>未來工藝</h1>
       </div>
       <div class="main-block">

src/views/CollegeGroup/Generation.vue

@@ -26,7 +26,7 @@ const breadcrumbs = reactive([
     <v-container fluid class="college-content pb-16 px-sm-0">
       <div class="college-banner">
         <img
-          src="@/assets/img/college-group/generation/世代工藝 橫幅.png"
+          src="@/assets/img/college-group/generation/banner.png"
           alt=""
         />
         <h1>世代工藝</h1>
@@ -45,42 +45,42 @@ const breadcrumbs = reactive([
         <v-row>
           <v-col md="6" cols="12">
             <img
-              src="@/assets/img/college-group/generation/世代工藝 素材-07.jpg"
+              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"
+              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"
+              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"
+              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"
+              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"
+              src="@/assets/img/college-group/generation/世代工藝-12.jpg"
               alt=""
             />
             <h3>2020 年國家工藝成就獎得主－陳啟村</h3>

src/views/CollegeGroup/Repair.vue

@@ -0,0 +1,377 @@
+<script setup>
+import { ref, reactive } from "vue";
+import moment from "moment";
+import Navbar from "@/components/Navbar.vue";
+import { useMainStore } from "@/stores/store";
+
+const store = useMainStore();
+
+const breadcrumbs = reactive([
+  {
+    title: "首頁",
+    disabled: false,
+    href: "/",
+  },
+  {
+    title: "工藝學群",
+    disabled: false,
+    href: "/ntcri/college-group/craft",
+  },
+  {
+    title: "修護工藝",
+    disabled: true,
+  },
+]);
+
+const testData_1 = [
+  {
+    title: "臺灣工藝聯合醫院－草鞋墩分院 112 年 6-8 月工藝修復推廣課程",
+    describe:
+      "「臺灣工藝聯合醫院-草鞋墩分院」辦理工藝修護各類推廣課程，目標對象群擴及幼童、學生及社會人士等，課程種類包含「臺灣工藝聯合醫院-草鞋墩分院」5位工藝修護師共同授課的「工藝修護技法培訓課程」、個別工藝修護師辦理的「個別工藝修護技法課程」、「工藝修護體驗」等，民眾能依照自身興趣及學習需求，選擇自己適合且需要的工藝修護課程。",
+    start_time: "2023/06/01",
+    end_time: "2023/08/22",
+    address: "國立台灣工藝研究發展中心",
+    img: store.getImageUrl("college-group/img.jpg"),
+  },
+];
+
+const testData_2 = [
+  {
+    title: "坦然面對殘缺　時光中靜待重生",
+    describe:
+      "日本「古伊萬里染錦花籠大盤」的修護故事 200 年歷史的日本「古伊萬里染錦花籠大盤」頗損已久，在時間的洪流中幾經流轉，終於經由臺灣工藝聯合醫院(草鞋墩分院)工藝修復師 #葉璨榮 及助理 #張晉榮 的巧手修護，再現風華。這件「古伊萬里染錦花籠大盤」在日本藏家手中，曾經由無痕科技修護...",
+    start_time: "2023/06/15",
+    address: "國立台灣工藝研究發展中心",
+    img: store.getImageUrl("college-group/img.jpg"),
+  },
+  {
+    title: "重修舊好，老物件復原術 / 工藝修復小知識",
+    describe:
+      "喜歡的瓷盤、陶杯破損時該怎麼復原呢？ 現代化學黏著劑講求快速卻不耐用，更有安全的隱憂，天然的生漆耐熱又抗酸鹼，是非常優質的黏合劑，生漆加上麵粉調合成的接著劑，可讓漆的黏性更加強韌且堅硬...",
+    start_time: "2023/06/15",
+    address: "國立台灣工藝研究發展中心",
+    img: store.getImageUrl("college-group/img.jpg"),
+  },
+];
+</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/repair/banner.png" alt="" />
+        <h1>修護工藝</h1>
+      </div>
+      <div class="main-block">
+        <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 title"
+        >
+          <h2>修護課程</h2>
+          <div class="search">
+            <span>
+              <input
+                v-model="searchInput"
+                type="text"
+                @keyup.enter="search()"
+              />
+              <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">
+          <li v-for="(item, index) in testData_1" :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-5 px-sm-10 py-5 py-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="my-10">工藝修護師</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="mt-16 mb-10">修護故事</h2>
+
+        <ul class="story-list">
+          <li v-for="(item, index) in testData_2" :key="index" class="mb-5">
+            <section class="d-flex">
+              <p class="mx-3 my-5 date">
+                {{ moment(`${item.start_time}`).format("YYYY-MM-DD") }}
+              </p>
+            </section>
+            <v-card
+              variant="outlined"
+              class="d-flex flex-md-row flex-column align-center pa-5"
+            >
+              <v-row class="align-center">
+                <v-col cols="12" sm="5" md="3">
+                  <router-link :to="`/news/${item.news_id}`" class="cover-img">
+                    <img src="@/assets/img/img-04.jpg" alt="" />
+                  </router-link>
+                </v-col>
+                <v-col cols="12" sm="7" md="9">
+                  <section class="d-flex flex-column py-5 py-md-0">
+                    <h2 class="mb-8">{{ item.title }}</h2>
+                    <p v-html="item.describe"></p>
+                  </section>
+                </v-col>
+              </v-row>
+            </v-card>
+          </li>
+        </ul>
+      </div>
+    </v-container>
+  </div>
+</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: 300;
+  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: 300;
+    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;
+      border-bottom: 3px solid #fff;
+    }
+    .content {
+      padding: 20px;
+      p:first-child {
+        font-weight: 300;
+        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%;
+    }
+  }
+  .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>

src/views/CollegeGroup/Teenager.vue

@@ -0,0 +1,243 @@
+<script setup>
+import { ref, reactive } from "vue";
+import moment from "moment";
+import Navbar from "@/components/Navbar.vue";
+
+const breadcrumbs = reactive([
+  {
+    title: "首頁",
+    disabled: false,
+    href: "/",
+  },
+  {
+    title: "工藝學群",
+    disabled: false,
+    href: "/ntcri/college-group/craft",
+  },
+  {
+    title: "青年工藝",
+    disabled: true,
+  },
+]);
+
+const testData = [
+  {
+    title:
+      "國立臺灣工藝研究發展中心獎助博碩士生研撰臺灣工藝相關研究論文作業要點",
+    date: "2023.08.26",
+    category: "工藝政策",
+    introduction:
+      "國立臺灣工藝研究發展中心為提升臺灣工藝文化之主體性及營造工藝學領域發展環境，鼓勵國內大學校院培養工藝研究人才，發表研究成果，促使工藝升級、文化深耕，並建構相關資源支持體系，特訂定本要點，獎助內容如下：",
+  },
+  {
+    title: "博碩士生研撰臺灣工藝相關研究論文獎助申請，申請至6月30日止",
+    date: "2023.06.07",
+    category: "獎助申請",
+    introduction:
+      "國立臺灣工藝硏究發展中心溈提升臺灣工藝文化之主體性及營造工藝學領域發展環境，鼓勵國內大學校院培養工藝研究人才，發表研究成果，促使工藝升級、文化深耕，並建構相關資源支持體系，獎助國內各大學院校撰寫有闕工藝相關硏究學位論文之在學博士班、碩士班學生，最高#新臺幣12萬元",
+  },
+  {
+    title:
+      "2024學年度「傅爾布萊特一臺灣文化部藝文專業人才獎助計畫」即日開始徵件",
+    date: "2023.08.31",
+    category: "獎助申請",
+    introduction:
+      "2024學年度「傅爾布萊特一臺灣文化部藝文專業人才獎助計畫」即日起開始徵件，甄選對象含藝文行政、管理、技術、策展、評論人員，薦送名額為3人，申請截止日期為2023年10月31日，有志前往美國機構交流的藝文工作者，請務必把握機會申請.",
+  },
+  {
+    title: "2023臺北設計獎",
+    date: "2023.08.31",
+    category: "競賽資訊",
+    introduction:
+      "2023臺北設計獎(Taipei Design Awardy總獎金高達423萬元，其中「工業設計類小、「視覺傳達設計類」、「公共空間設計類」三大類別已於5月20日開始徵件。今年特別新增全新獎項「臺北城市設計",
+  },
+];
+
+const categoryList = reactive([
+  {
+    title: "總覽",
+  },
+  {
+    title: "工藝政策",
+  },
+  {
+    title: "競賽資訊",
+  },
+  {
+    title: "校園扎根",
+  },
+  {
+    title: "策展補助",
+  },
+  {
+    title: "獎助申請",
+  },
+  {
+    title: "最新消息",
+  },
+]);
+</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/teenager/banner.png" alt="" />
+        <h1>青年工藝</h1>
+      </div>
+      <div class="main-block">
+        <v-breadcrumbs
+          :items="breadcrumbs"
+          divider="/"
+          class="mt-10 p-0"
+        ></v-breadcrumbs>
+
+        <div
+          class="d-flex flex-column flex-sm-row align-center justify-end title"
+        >
+          <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>
+
+        <v-row>
+          <v-col sm="2" cols="12" class="px-0">
+            <ul class="btn-list">
+              <li
+                v-for="(item, index) in categoryList"
+                :key="index"
+                class="mx-3"
+              >
+                <v-btn class="mb-5" variant="outlined">
+                  {{ item.title }}
+                </v-btn>
+              </li>
+            </ul>
+            <!-- <v-btn
+              v-for="(item, index) in categoryList"
+              :key="index"
+              :class="{ 'me-5': index !== categoryList.length - 1 }"
+              class="btn-list mb-5"
+              variant="outlined"
+            >
+              {{ item.title }}
+            </v-btn> -->
+          </v-col>
+          <v-col sm="10" cols="12">
+            <ul>
+              <li
+                v-for="(item, index) in testData"
+                :key="index"
+                class="post-item pa-5"
+                rounded="xl"
+              >
+                <section class="d-flex">
+                  <p class="category mb-5">
+                    <span></span>
+                    {{ item.category }}
+                  </p>
+                  <p class="ms-5">
+                    {{ moment(`${item.date}`).format("YYYY-MM-DD") }}
+                  </p>
+                </section>
+                <v-card
+                  variant="outlined"
+                  class="d-flex flex-md-row flex-column align-center pa-5"
+                >
+                  <v-row class="align-center">
+                    <v-col cols="12">
+                      <h3>{{ item.title }}</h3>
+                      <ul>
+                        <li class="d-flex align-center mt-3">
+                          <p class="mb-0 ms-3">
+                            {{ item.introduction }}
+                          </p>
+                        </li>
+                      </ul>
+                    </v-col>
+                  </v-row>
+                </v-card>
+              </li>
+            </ul>
+          </v-col>
+        </v-row>
+      </div>
+    </v-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.btn-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
+  justify-content: center;
+  padding: initial;
+  li {
+    list-style-type: none;
+  }
+
+  .v-btn {
+    width: 100px;
+    @media (max-width: 600px) {
+      width: 150px;
+    }
+  }
+}
+.post-item {
+  margin-bottom: 30px;
+}
+
+.v-card {
+  border-radius: 10px;
+
+  h3 {
+    padding: 15px;
+    font-size: 22px;
+    text-align: center;
+    font-weight: 400;
+    line-height: 32px;
+    letter-spacing: 1px;
+    border-bottom: 2px solid #fff;
+  }
+
+  ul {
+    padding: 15px 30px;
+  }
+
+  p {
+    line-height: 1.5;
+  }
+}
+
+.category {
+  display: flex;
+  align-items: center;
+
+  span {
+    display: block;
+    width: 8px;
+    height: 8px;
+    margin-right: 10px;
+    border-radius: 10px;
+    background-color: #000;
+  }
+}
+</style>

src/views/CourseList.vue

@@ -103,7 +103,15 @@ async function search() {
           </v-card-title>
 
           <v-card-text>
-            <ul>
+            <p class="text-gray font-weight-light">{{ item.introduction }}</p>
+            <div class="d-flex align-center mt-2">
+              <img src="@/assets/img/icon/location_icon.png" alt="" />
+              <p class="mb-0 ms-3">
+                {{ item.school }}
+              </p>
+            </div>
+
+            <!-- <ul>
               <li class="d-flex align-center">
                 <img src="@/assets/img/icon/date_icon.png" alt="" />
                 <p class="mb-0 ms-3">
@@ -114,10 +122,10 @@ async function search() {
               <li class="d-flex align-center mt-2">
                 <img src="@/assets/img/icon/location_icon.png" alt="" />
                 <p class="mb-0 ms-3">
-                  {{ item.location }}
+                  {{ item.school }}
                 </p>
               </li>
-            </ul>
+            </ul> -->
           </v-card-text>
         </v-card>
       </v-col>
@@ -126,6 +134,16 @@ async function search() {
 </template>
 
 <style lang="scss" scoped>
+p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-break: after-white-space;
+  line-height: 22px;
+}
+
 .banner {
   position: relative;
   img {