update

src/views/CollegeGroup/Generation.vue

@@ -1,7 +1,5 @@
 <script setup>
 import { ref, reactive } from "vue";
-import axios from "axios";
-import moment from "moment";
 import Navbar from "@/components/Navbar.vue";
 import { useMainStore } from "@/stores/store";
 
@@ -23,160 +21,47 @@ const breadcrumbs = reactive([
     disabled: true,
   },
 ]);
-
-const testData = [
-  {
-    title: "種子教師研習",
-    start_time: "2023/06/15",
-    end_time: "2023/06/20",
-    address: "地方工藝館 工藝教室",
-    img: store.getImageUrl("college-group/img.jpg"),
-  },
-  {
-    title: "種子教師研習",
-    start_time: "2023/06/15",
-    end_time: "2023/06/20",
-    address: "地方工藝館 工藝教室",
-    img: store.getImageUrl("college-group/img.jpg"),
-  },
-  {
-    title: "種子教師研習",
-    start_time: "2023/06/15",
-    end_time: "2023/06/20",
-    address: "地方工藝館 工藝教室",
-    img: store.getImageUrl("college-group/img.jpg"),
-  },
-];
 </script>
 
 <template>
   <div class="bg-img">
     <Navbar />
-    <!-- <div class="banner">
-      <img src="@/assets/img/college-group/技藝橫幅.png" alt="" />
-      <h1>技藝工藝</h1>
-    </div> -->
     <v-container fluid class="content pb-16">
       <div class="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>
+        <v-breadcrumbs :items="breadcrumbs" divider="/" class="mt-10 p-0"></v-breadcrumbs>
 
-        <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 class="title">
+          <h2>人間國寶</h2>
         </div>
 
         <v-row>
-          <v-col
-            sm="6"
-            md="4"
-            cols="12"
-            v-for="(item, index) in testData"
-            :key="index"
-            class="pa-5"
-          >
-            <div class="card">
-              <h3>{{ item.title }}</h3>
-              <img :src="item.img" alt="" class="cover-img" />
-              <ul>
-                <li class="d-flex align-center">
-                  <img src="@/assets/img/icon/date_icon.png" alt="" />
-                  <p class="mb-0 ms-3">
-                    {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }} -
-                    {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
-                  </p>
-                </li>
-                <li class="d-flex align-center mt-3">
-                  <img src="@/assets/img/icon/location_icon.png" alt="" />
-                  <p class="mb-0 ms-3">
-                    {{ item.address }}
-                  </p>
-                </li>
-              </ul>
-            </div>
+          <v-col cols="6">
+            <img src="@/assets/img/college-group/generation/世代工藝 素材-07.jpg" alt="">
+            <!-- <h3>2014 年工藝成就獎得主－施至輝</h3> -->
           </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>
-
-        <v-row>
-          <v-col
-            sm="6"
-            md="4"
-            cols="12"
-            v-for="(item, index) in testData"
-            :key="index"
-            class="pa-5"
-          >
-            <div class="card">
-              <h3>{{ item.title }}</h3>
-              <img :src="item.img" alt="" class="cover-img" />
-              <ul>
-                <li class="d-flex align-center">
-                  <img src="@/assets/img/icon/date_icon.png" alt="" />
-                  <p class="mb-0 ms-3">
-                    {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }} -
-                    {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
-                  </p>
-                </li>
-                <li class="d-flex align-center mt-3">
-                  <img src="@/assets/img/icon/location_icon.png" alt="" />
-                  <p class="mb-0 ms-3">
-                    {{ item.address }}
-                  </p>
-                </li>
-              </ul>
-            </div>
+          <v-col cols="6">
+            <img src="@/assets/img/college-group/generation/世代工藝 素材-08.jpg" alt="">
+            <!-- <h3>在日昇之處的人間國寶－陳利友妹</h3> -->
+          </v-col>
+          <v-col cols="5">
+            <img src="@/assets/img/college-group/generation/世代工藝 素材-09.jpg" alt="">
+            <h3></h3>
+          </v-col>
+          <v-col cols="7">
+            <img src="@/assets/img/college-group/generation/世代工藝 素材-10.jpg" alt="">
+            <h3></h3>
+          </v-col>
+          <v-col cols="7">
+            <img src="@/assets/img/college-group/generation/世代工藝 素材-11.jpg" alt="">
+            <h3></h3>
+          </v-col>
+          <v-col cols="5">
+            <img src="@/assets/img/college-group/generation/世代工藝 素材-12.jpg" alt="">
+            <h3></h3>
           </v-col>
         </v-row>
       </div>
@@ -233,10 +118,11 @@ const testData = [
 .content {
   padding: 0;
   width: 90%;
-  
+
   @media (max-width: 600px) {
     width: 85%;
   }
+
   .main-block {
     padding: 100px 80px;
     margin-top: -30%;
@@ -265,40 +151,27 @@ const testData = [
         margin-bottom: 50px;
       }
     }
+
     .title {
       margin: 80px 0;
+
       @media (max-width: 600px) {
         margin: 50px 0;
       }
     }
+
     .v-breadcrumbs {
       position: relative;
       z-index: 100;
       justify-content: flex-start;
+
       @media (max-width: 600px) {
         justify-content: center;
       }
     }
-    .card {
-      letter-spacing: 1px;
-      border-radius: 10px;
-      box-shadow: 2px 2px 10px #aaaaaa;
-      background-color: var(--sub-color);
-      h3 {
-        padding: 15px;
-        font-size: 22px;
-        font-weight: 400;
-        text-align: center;
-        margin-bottom: 15px;
-        border-bottom: 2px solid #fff;
-      }
-      ul {
-        padding: 20px;
-      }
-      .cover-img {
-        padding: 0 15px;
-      }
+
+    img {
+      height: 100%;
     }
   }
-}
-</style>
+}</style>