update

src/assets/css/style.css

@@ -92,4 +92,110 @@ input:focus-visible {
 .search .error {
   position: absolute;
   bottom: -30px;
+}
+
+.college-bg-img {
+  width: 100vw;
+  background-image: url("@/assets/img/college-group/background.png");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.college-banner {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  top: -8vw;
+  right: 0;
+  left: 0;
+  z-index: 1;
+}
+.college-banner img {
+  width: 100%;
+}
+.college-banner h1 {
+  position: absolute;
+  top: 50%;
+  left: 11%;
+  font-size: 40px;
+  font-weight: 500;
+  word-wrap: break-word;
+}
+@media (max-width: 1200px) {
+  .college-banner h1 {
+    font-size: 36px;
+  }
+}
+@media (max-width: 960px) {
+  .college-banner h1 {
+    font-size: 24px;
+  }
+}
+@media (max-width: 600px) {
+  .college-banner h1 {
+    font-size: 20px;
+    top: 45%;
+    left: 5%;
+  }
+}
+
+.college-content {
+  padding: 0;
+  width: 1300px !important;
+}
+@media (max-width: 600px) {
+  .college-content {
+    width: 85%;
+  }
+}
+.college-content .main-block {
+  padding: 80px 80px 150px;
+  margin-top: -30%;
+  background-color: #fff;
+}
+@media (max-width: 960px) {
+  .college-content .main-block {
+    padding: 50px 50px 100px;
+  }
+}
+@media (max-width: 600px) {
+  .college-content .main-block {
+    padding: 20px 20px 50px;
+  }
+}
+.college-content .main-block h2 {
+  font-size: 30px;
+  font-weight: 500;
+  line-height: 32px;
+  margin-left: 10px;
+}
+@media (max-width: 960px) {
+  .college-content .main-block h2 {
+    font-size: 24px;
+  }
+}
+@media (max-width: 600px) {
+  .college-content .main-block h2 {
+    margin-left: 0;
+    margin-bottom: 50px;
+  }
+}
+.college-content .main-block .title {
+  margin: 80px 0;
+}
+@media (max-width: 960px) {
+  .college-content .main-block .title {
+    margin: 50px 0;
+  }
+}
+.college-content .main-block .v-breadcrumbs {
+  position: relative;
+  z-index: 100;
+  justify-content: flex-start;
+}
+@media (max-width: 600px) {
+  .college-content .main-block .v-breadcrumbs {
+    justify-content: center;
+  }
 }/*# sourceMappingURL=style.css.map */

src/assets/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,cAAA;AAEA;;;;;;;;;;;;;;;;;;;;EAoBE,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,wBAAA;EACA,sBAAA;ACAF;;ADGA,sBAAA;AAEA;EACE,cAAA;ACDF;;ADIA;;EAEE,gBAAA;ACDF;;ADIA;EACE,eAAA;EACA,YAAA;ACDF;;ADIA;EACE,qBAAA;EACA,cAAA;ACDF;;ADIA,kBAAA;AAEA;EACE,qBAAA;EACA,oBAAA;ACFF;;ADKA;EACE,uCAAA;ACFF;;ADKA;EACE,mCAAA;ACFF;;ADKA;EACE,aAAA;EACA,sBAAA;EACA,qBAAA;EACA,oBAAA;EACA,kBAAA;ACFF;ADIE;EACE,kBAAA;ACFJ;ADKE;EACE,iBAAA;EACA,oBAAA;EACA,sBAAA;EACA,sBAAA;ACHJ;ADOE;EACE,kBAAA;EACA,WAAA;EACA,OAAA;EACA,QAAA;ACLJ;ADOI;EACE,WAAA;EACA,kBAAA;EACA,QAAA;EACA,QAAA;ACLN;ADSE;EACE,kBAAA;EACA,aAAA;ACPJ","file":"style.css"}
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,cAAA;AAEA;;;;;;;;;;;;;;;;;;;;EAoBE,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,wBAAA;EACA,sBAAA;ACAF;;ADGA,sBAAA;AAEA;EACE,cAAA;ACDF;;ADIA;;EAEE,gBAAA;ACDF;;ADIA;EACE,eAAA;EACA,YAAA;ACDF;;ADIA;EACE,qBAAA;EACA,cAAA;ACDF;;ADIA,kBAAA;AAEA;EACE,qBAAA;EACA,oBAAA;ACFF;;ADKA;EACE,uCAAA;ACFF;;ADKA;EACE,mCAAA;ACFF;;ADKA;EACE,aAAA;EACA,sBAAA;EACA,qBAAA;EACA,oBAAA;EACA,kBAAA;ACFF;ADIE;EACE,kBAAA;ACFJ;ADKE;EACE,iBAAA;EACA,oBAAA;EACA,sBAAA;EACA,sBAAA;ACHJ;ADOE;EACE,kBAAA;EACA,WAAA;EACA,OAAA;EACA,QAAA;ACLJ;ADOI;EACE,WAAA;EACA,kBAAA;EACA,QAAA;EACA,QAAA;ACLN;ADSE;EACE,kBAAA;EACA,aAAA;ACPJ;;ADWA;EACE,YAAA;EACA,kEAAA;EACA,2BAAA;EACA,sBAAA;EACA,4BAAA;ACRF;;ADWA;EACE,aAAA;EACA,uBAAA;EACA,kBAAA;EACA,SAAA;EACA,QAAA;EACA,OAAA;EACA,UAAA;ACRF;ADUE;EACE,WAAA;ACRJ;ADWE;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;ACTJ;ADWI;EARF;IASI,eAAA;ECRJ;AACF;ADUI;EAZF;IAaI,eAAA;ECPJ;AACF;ADSI;EAhBF;IAiBI,eAAA;IACA,QAAA;IACA,QAAA;ECNJ;AACF;;ADUA;EACE,UAAA;EACA,wBAAA;ACPF;ADSE;EAJF;IAKI,UAAA;ECNF;AACF;ADQE;EACE,wBAAA;EACA,gBAAA;EACA,sBAAA;ACNJ;ADQI;EALF;IAMI,wBAAA;ECLJ;AACF;ADOI;EATF;IAUI,uBAAA;ECJJ;AACF;ADMI;EACE,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,iBAAA;ACJN;ADMM;EANF;IAOI,eAAA;ECHN;AACF;ADKM;EAVF;IAWI,cAAA;IACA,mBAAA;ECFN;AACF;ADKI;EACE,cAAA;ACHN;ADKM;EAHF;IAII,cAAA;ECFN;AACF;ADKI;EACE,kBAAA;EACA,YAAA;EACA,2BAAA;ACHN;ADKM;EALF;IAMI,uBAAA;ECFN;AACF","file":"style.css"}

src/assets/css/style.scss

@@ -101,4 +101,106 @@ input:focus-visible {
     position: absolute;
     bottom: -30px;
   }
+}
+
+.college-bg-img {
+  width: 100vw;
+  background-image: url("@/assets/img/college-group/background.png");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.college-banner {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  top: -8vw;
+  right: 0;
+  left: 0;
+  z-index: 1;
+
+  img {
+    width: 100%;
+  }
+
+  h1 {
+    position: absolute;
+    top: 50%;
+    left: 11%;
+    font-size: 40px;
+    font-weight: 500;
+    word-wrap: break-word;
+
+    @media (max-width: 1200px) {
+      font-size: 36px;
+    }
+
+    @media (max-width: 960px) {
+      font-size: 24px;
+    }
+
+    @media (max-width: 600px) {
+      font-size: 20px;
+      top: 45%;
+      left: 5%;
+    }
+  }
+}
+
+.college-content {
+  padding: 0;
+  width: 1300px !important;
+
+  @media (max-width: 600px) {
+    width: 85%;
+  }
+
+  .main-block {
+    padding: 80px 80px 150px;
+    margin-top: -30%;
+    background-color: #fff;
+
+    @media (max-width: 960px) {
+      padding: 50px 50px 100px;
+    }
+
+    @media (max-width: 600px) {
+      padding: 20px 20px 50px;
+    }
+
+    h2 {
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 32px;
+      margin-left: 10px;
+
+      @media (max-width: 960px) {
+        font-size: 24px;
+      }
+
+      @media (max-width: 600px) {
+        margin-left: 0;
+        margin-bottom: 50px;
+      }
+    }
+
+    .title {
+      margin: 80px 0;
+
+      @media (max-width: 960px) {
+        margin: 50px 0;
+      }
+    }
+
+    .v-breadcrumbs {
+      position: relative;
+      z-index: 100;
+      justify-content: flex-start;
+
+      @media (max-width: 600px) {
+        justify-content: center;
+      }
+    }
+  }
 }

src/components/Navbar.vue

@@ -26,17 +26,26 @@ function handleClose(value) {
         <router-link :to="'/news'">最新消息</router-link>
       </li>
       <li class="position-relative">
-        <a href="javascript:;" @click="collegeMenuShow = !collegeMenuShow"
+        <a
+          href="javascript:;"
+          @mouseover="collegeMenuShow = true"
+          @mouseleave="collegeMenuShow = false"
           >工藝學群</a
         >
-        <!-- <router-link :to="'/college-group/craft'">工藝學群</router-link> -->
-        <div class="college-slider" :class="{ slider: collegeMenuShow }">
+        <div
+          class="college-slider"
+          :class="{ slider: collegeMenuShow }"
+          @mouseover="collegeMenuShow = true"
+          @mouseleave="collegeMenuShow = false"
+        >
           <ul>
             <li>
-              <router-link :to="'/college-group/generation'">世代工藝</router-link>
+              <router-link :to="'/college-group/generation'"
+                >世代工藝</router-link
+              >
             </li>
             <li>
-              <router-link :to="'/college-group/craft'">未來工藝</router-link>
+              <router-link :to="'/college-group/future'">未來工藝</router-link>
             </li>
             <li>
               <router-link :to="'/college-group/craft'">生活工藝</router-link>
@@ -99,7 +108,7 @@ function handleClose(value) {
   width: 90%;
   max-width: 1300px;
   margin: 0 auto 40px;
-  padding: 20px 35px 20px 15px;
+  padding: 0 35px 0 15px;
   border: 1px solid;
   position: relative;
   z-index: 1000;
@@ -160,19 +169,22 @@ function handleClose(value) {
       a {
         width: 100%;
         display: block;
-        padding: 20px 0;
+        padding: 40px 0;
         color: #000;
         text-decoration: none;
         transition: all 0.3s;
         &:hover {
           opacity: 0.8;
         }
+        @media (max-width: 1280px) {
+          padding: 20px 0;
+        }
       }
     }
 
     .college-slider {
       position: absolute;
-      top: 60px;
+      top: 80px;
       left: -30px;
       width: 130px;
       background: #fff;
@@ -184,7 +196,11 @@ function handleClose(value) {
       @media (max-width: 1280px) {
         top: 30px;
         left: 50vw;
-        width: 130px;
+      }
+
+      @media (max-width: 600px) {
+        left: 58vw;
+        width: 100px;
       }
 
       &.slider {
@@ -232,6 +248,13 @@ function handleClose(value) {
     height: 88%;
     background-color: rgba(255, 255, 255, 0.5);
     z-index: -1;
+
+    @media (max-width: 960px) {
+      top: 7px;
+      left: 1.3vw;
+      width: 97%;
+      height: 83%;
+    }
   }
 }
 </style>

src/router/index.js

@@ -9,6 +9,7 @@ const CourseList = defineAsyncComponent(() => import('@/views/CourseList.vue'));
 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 routes = [
   {
@@ -51,6 +52,11 @@ const routes = [
     name: 'Generation',
     component: Generation
   },
+  {
+    path: '/college-group/future',
+    name: 'Future',
+    component: Future
+  },
 ];
 
 const router = createRouter({

src/views/CollegeGroup/Craft.vue

@@ -50,14 +50,10 @@ const testData = [
 </script>
 
 <template>
-  <div class="bg-img">
+  <div class="college-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">
+    <v-container fluid class="college-content pb-16 px-sm-0">
+      <div class="college-banner">
         <img src="@/assets/img/college-group/技藝橫幅.png" alt="" />
         <h1>技藝工藝</h1>
       </div>
@@ -185,51 +181,6 @@ const testData = [
 </template>
 
 <style lang="scss" scoped>
-.bg-img {
-  width: 100vw;
-  background-image: url("@/assets/img/college-group/background.png");
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-
-.banner {
-  display: flex;
-  justify-content: center;
-  position: relative;
-  top: -10vw;
-  right: 0;
-  left: 0;
-  z-index: 1;
-
-  img {
-    width: 100%;
-  }
-
-  h1 {
-    position: absolute;
-    top: 52%;
-    left: 11%;
-    font-size: 40px;
-    font-weight: 500;
-    word-wrap: break-word;
-
-    @media (max-width: 1200px) {
-      font-size: 36px;
-    }
-
-    @media (max-width: 960px) {
-      font-size: 24px;
-    }
-
-    @media (max-width: 600px) {
-      font-size: 20px;
-      top: 50%;
-      left: 5%;
-    }
-  }
-}
-
 .content {
   padding: 0;
   width: 90%;
@@ -279,7 +230,10 @@ const testData = [
         justify-content: center;
       }
     }
-    .card {
+  }
+}
+
+.card {
       letter-spacing: 1px;
       border-radius: 10px;
       box-shadow: 2px 2px 10px #aaaaaa;
@@ -299,6 +253,4 @@ const testData = [
         padding: 0 15px;
       }
     }
-  }
-}
 </style>

src/views/CollegeGroup/Future.vue

@@ -0,0 +1,122 @@
+<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 = [
+  {
+    title: "工藝跨域研創補助計畫【徵件至9月28日止】",
+    start_time: "2023/06/15",
+    end_time: "2023/09/28",
+    address: "國立台灣工藝研究發展中心",
+    img: store.getImageUrl("college-group/img.jpg"),
+  },
+  {
+    title: "積極性藝文紓困補助方案",
+    start_time: "2023/06/15",
+    end_time: "2023/09/28",
+    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/未來工藝 橫幅.png" alt="" />
+        <h1>未來工藝</h1>
+      </div>
+      <div class="main-block">
+        <v-breadcrumbs
+          :items="breadcrumbs"
+          divider="/"
+          class="mt-10 p-0"
+        ></v-breadcrumbs>
+
+        <div class="title">
+          <h2>研發補助</h2>
+        </div>
+
+        <ul>
+          <li v-for="(item, index) in testData" :key="index" class="mb-10">
+            <v-card
+              variant="outlined"
+              class="d-flex flex-md-row flex-column align-center pa-5"
+            >
+              <v-row class="align-center">
+                <v-col sm="4" cols="12">
+                  <img src="@/assets/img/img-04.jpg" alt="" />
+                </v-col>
+                <v-col sm="8" cols="12">
+                  <section
+                    class="d-flex flex-column px-5 px-sm-10 py-5 py-md-0"
+                  >
+                    <h2 class="ms-0 mb-16">{{ item.title }}</h2>
+                    <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-3">
+                      <v-icon
+                        color="gray"
+                        icon="mdi-map-marker"
+                        class="me-2"
+                      ></v-icon>
+                      <p>
+                        {{ item.address }}
+                      </p>
+                    </span>
+                  </section>
+                </v-col>
+              </v-row>
+            </v-card>
+          </li>
+        </ul>
+      </div>
+    </v-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main-block {
+  img {
+    width: 100%;
+    height: 250px;
+    object-fit: cover;
+  }
+
+  span {
+    line-height: 24px;
+  }
+}
+</style>

src/views/CollegeGroup/Generation.vue

@@ -24,44 +24,69 @@ const breadcrumbs = reactive([
 </script>
 
 <template>
-  <div class="bg-img">
+  <div class="college-bg-img">
     <Navbar />
-    <v-container fluid class="content pb-16">
-      <div class="banner">
-        <img src="@/assets/img/college-group/generation/世代工藝 橫幅.png" alt="" />
+    <v-container fluid class="college-content pb-16 px-sm-0">
+      <div class="college-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="title">
           <h2>人間國寶</h2>
         </div>
 
         <v-row>
-          <v-col cols="6">
-            <img src="@/assets/img/college-group/generation/世代工藝 素材-07.jpg" alt="">
-            <!-- <h3>2014 年工藝成就獎得主－施至輝</h3> -->
+          <v-col md="6" cols="12">
+            <img
+              src="@/assets/img/college-group/generation/世代工藝 素材-07.jpg"
+              alt=""
+            />
+            <h3>2014 年工藝成就獎得主－施至輝</h3>
           </v-col>
-          <v-col cols="6">
-            <img src="@/assets/img/college-group/generation/世代工藝 素材-08.jpg" alt="">
-            <!-- <h3>在日昇之處的人間國寶－陳利友妹</h3> -->
+          <v-col md="6" cols="12">
+            <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 md="5" cols="12">
+            <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 md="7" cols="12">
+            <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 md="7" cols="12">
+            <img
+              src="@/assets/img/college-group/generation/世代工藝 素材-11.jpg"
+              alt=""
+            />
+            <h3>羅美玉－入選 2020 年「臺灣工藝之家」</h3>
           </v-col>
-          <v-col cols="5">
-            <img src="@/assets/img/college-group/generation/世代工藝 素材-12.jpg" alt="">
-            <h3></h3>
+          <v-col md="5" cols="12">
+            <img
+              src="@/assets/img/college-group/generation/世代工藝 素材-12.jpg"
+              alt=""
+            />
+            <h3>2020 年國家工藝成就獎得主－陳啟村</h3>
           </v-col>
         </v-row>
       </div>
@@ -70,108 +95,12 @@ const breadcrumbs = reactive([
 </template>
 
 <style lang="scss" scoped>
-.bg-img {
-  width: 100vw;
-  background-image: url("@/assets/img/college-group/background.png");
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
+h3 {
+  padding: 15px 10px;
+  color: #fff;
+  background: #000;
+  text-align: center;
+  font-weight: 400;
+  line-height: 24px;
 }
-
-.banner {
-  display: flex;
-  justify-content: center;
-  position: relative;
-  top: -10vw;
-  right: 0;
-  left: 0;
-  z-index: 1;
-
-  img {
-    width: 100%;
-  }
-
-  h1 {
-    position: absolute;
-    top: 52%;
-    left: 11%;
-    font-size: 40px;
-    font-weight: 500;
-    word-wrap: break-word;
-
-    @media (max-width: 1200px) {
-      font-size: 36px;
-    }
-
-    @media (max-width: 960px) {
-      font-size: 24px;
-    }
-
-    @media (max-width: 600px) {
-      font-size: 20px;
-      top: 50%;
-      left: 5%;
-    }
-  }
-}
-
-.content {
-  padding: 0;
-  width: 90%;
-
-  @media (max-width: 600px) {
-    width: 85%;
-  }
-
-  .main-block {
-    padding: 100px 80px;
-    margin-top: -30%;
-    background-color: #fff;
-
-    @media (max-width: 960px) {
-      padding: 100px 50px;
-    }
-
-    @media (max-width: 600px) {
-      padding: 100px 20px;
-    }
-
-    h2 {
-      font-size: 30px;
-      font-weight: 500;
-      line-height: 32px;
-      margin-left: 10px;
-
-      @media (max-width: 960px) {
-        font-size: 24px;
-      }
-
-      @media (max-width: 600px) {
-        margin-left: 0;
-        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;
-      }
-    }
-
-    img {
-      height: 100%;
-    }
-  }
-}</style>
+</style>

src/views/News.vue

@@ -162,15 +162,6 @@ const categoryList = reactive([
                   </section>
                 </v-col>
               </v-row>
-
-              <!-- <router-link :to="`/news/${item.news_id}`" class="cover-img">
-              <img src="@/assets/img/img-04.jpg" alt="" />
-            </router-link>
-              <img :src="item.img" alt="">
-              <section class="d-flex flex-column px-5 px-sm-10 py-5 py-md-0">
-                <h2>{{ item.title }}</h2>
-                <p v-html="item.content"></p>
-              </section> -->
             </v-card>
           </li>
         </ul>