add: FeaturedArticles page

src/components/DiscCard.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="w-[21.1875rem] h-[15.25rem] bg-[#E1E1E1] rounded-[0.3125rem] mt-[8.1875rem] relative">
         <div class="title bg-secondary px-[1.3125rem] pt-[0.8125rem] pb-[0.75rem] text-xl relative rounded-[0.3125rem]">
-            <div class="font-bold text-right text-content" :class="titleSize">{{ title }}</div>
-            <div class="absolute bottom-[calc(100%_+_0.44rem)] left-[2.25rem] text-white">#{{ class_ }}</div>
+            <RouterLink class="font-bold text-right text-content" :class="titleSize" :to="link">{{ title }}</RouterLink>
+            <!-- <div class="font-bold text-right text-content" :class="titleSize">{{ title }}</div> -->
+            <div class="absolute bottom-[calc(100%_+_0.44rem)] left-[2.25rem] text-white text-justify">#{{ class_ }}</div>
         </div>
         <div class="text-content mt-8 ml-[0.94rem] mr-[1.69rem]">{{ context }}</div>
         <div class="text-white text-center py-[0.38rem] bg-[#5A5A5A] rounded-bl-[0.3125rem] rounded-br-[0.3125rem] absolute w-full bottom-0">published on {{ timestamp }}</div>
@@ -31,6 +32,10 @@
             type: String,
             default: "yyyy-mm-dd"
         },
+        link: {
+            type: String,
+            default: ""
+        },
     });
 </script>
 
@@ -47,4 +52,11 @@
         border-radius: 50%;
         border: 6.31353rem solid black;
     }
+
+    .text-content {
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
 </style>

src/components/SideBar2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="shadow-[6px_7px_2px_0px_rgba(0,0,0,0.25)] w-60 py-1 px-2 rounded-lg border-t-2 border-t-primary-900">
+  <div class="shadow-[6px_7px_2px_0px_rgba(0,0,0,0.25)] w-60 py-1 px-2 rounded-lg border-t-2 border-t-primary-900 bg-white">
     <div class="text-2xl p-2 text-primary-900 font-bold">{{ title }}</div>
     <div class="subtitle mx-2 select-none" v-for="subtitleData in list">
       <label class="text-xl font-bold py-2 flex items-center justify-between">

src/data/featuredArticles.json

@@ -6,7 +6,14 @@
     "author": "林盈辰",
     "uploadDate": "2023-12-28",
     "content": "",
-    "imageURL": ["../assets/Forum_page/FeaturedArticles/selfLearnin_1/1.webp", "../assets/Forum_page/FeaturedArticles/selfLearnin_1/2.webp", "../assets/Forum_page/FeaturedArticles/selfLearnin_1/3.webp", "../assets/Forum_page/FeaturedArticles/selfLearnin_1/4.webp", "../assets/Forum_page/FeaturedArticles/selfLearnin_1/5.webp", "../assets/Forum_page/FeaturedArticles/selfLearnin_1/6.webp"]
+    "imageURL": [
+      "/BikeFestival17th-Frontend/forum_page/FeaturedArticles/selfLearning_1/1.webp",
+      "/BikeFestival17th-Frontend/forum_page/FeaturedArticles/selfLearning_1/2.webp",
+      "/BikeFestival17th-Frontend/forum_page/FeaturedArticles/selfLearning_1/3.webp",
+      "/BikeFestival17th-Frontend/forum_page/FeaturedArticles/selfLearning_1/4.webp",
+      "/BikeFestival17th-Frontend/forum_page/FeaturedArticles/selfLearning_1/5.webp",
+      "/BikeFestival17th-Frontend/forum_page/FeaturedArticles/selfLearning_1/6.webp"
+    ]
   },
   {
     "id": "selfLearning_2",
@@ -152,5 +159,4 @@
     "content": "",
     "imageURL": []
   }
-]
-
+]

src/views/Partners.vue

@@ -19,13 +19,13 @@
 <script setup>
   // Data
   const sponsors = [
-    "/logo-dark.svg",
-    "/logo-dark.svg",
-    "/logo-dark.svg",
-    "/logo-dark.svg",
-    "/logo-dark.svg",
-    "/logo-dark.svg",
-    "/logo-dark.svg",
-    "/logo-dark.svg",
-  ]
+    "public/logo-dark.svg",
+    "public/logo-dark.svg",
+    "public/logo-dark.svg",
+    "public/logo-dark.svg",
+    "public/logo-dark.svg",
+    "public/logo-dark.svg",
+    "public/logo-dark.svg",
+    "public/logo-dark.svg",
+  ];
 </script>

src/views/forum/FeaturedArticles.vue

@@ -1,9 +1,108 @@
 <template>
   <Breadcrumb />
-  <DiscCard title="真假新聞分不清？不私藏網路新聞指南！" title-size="text-base" />
+  <div v-if="$route.params.article === undefined" v-for="key in dataKey" class="max-w-[1200px] sm:mx-auto sm:w-[72.815rem] mx-[1.81rem]">
+    <div class="sm:pl-[2.31rem] pl-[1.38rem] sm:pb-[0.94rem] pb-2 sm:text-[2.5rem] text-2xl font-bold border-l-[7px] border-l-solid border-l-primary-900">{{
+      key }}</div>
+    <div class="sm:mt-[4.5rem] sm:mb-[3.37rem] my-4 flex gap-[2.47rem] flex-wrap">
+      <DiscCard
+        class="sm:block hidden"
+        v-for="d in featuredArticles.filter(v => v.category === key)"
+        :title="d.title"
+        :class_="d.category"
+        :timestamp="d.uploadDate"
+        :context="d.content"
+        title-size="text-base"
+        :link="`/forum/featuredArticles/${d.id}`"
+      />
+      <DiscCard
+        class="sm:hidden block"
+        v-for="d in featuredArticles.filter(v => v.category === key).slice(0, 3)"
+        :title="d.title"
+        :class_="d.category"
+        :timestamp="d.uploadDate"
+        :context="d.content"
+        title-size="text-base"
+        :link="`/forum/featuredArticles/${d.id}`"
+      />
+    </div>
+    <div v-if="featuredArticles.filter(v => v.category === key).length > 3" class="flex ml-auto items-center justify-end my-4 sm:hidden" v-on:click="() => {open[key] = !open[key]}">
+      <svg v-if="open[key]" xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
+        <path d="M13.7881 23.4291L20.6902 16.5813L13.8424 9.6792L13.7881 23.4291Z" fill="#FF974D"/>
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
+        <path d="M9.625 13.75L16.5 20.625L23.375 13.75H9.625Z" fill="#FF974D"/>
+      </svg>
+      <div class="min-w-[4em] text-xs text-primary-900">{{ open[key] ? "收合" : "更多專欄" }}</div>
+    </div>
+    <div v-if="open[key]" class="sm:hidden my-4 flex gap-[2.47rem] flex-wrap mb-[1.12rem]">
+      <DiscCard
+        v-for="d in featuredArticles.filter(v => v.category === key).slice(3)"
+        :title="d.title"
+        :class_="d.category"
+        :timestamp="d.uploadDate"
+        :context="d.content"
+        title-size="text-base"
+        :link="`/forum/featuredArticles/${d.id}`"
+      />
+    </div>
+  </div>
+  <div v-else class="max-w-[1200px] sm:mx-auto sm:w-[72.815rem] mx-[1.81rem]">
+    <div class="flex flex-col gap-4 mb-9">
+      <img v-if="selectedData.imageURL.length > 0" :src="selectedData.imageURL[0]" class="w-full rounded-[2.625rem] max-sm:hidden">
+      <div class="font-bold text-[2.5rem]">{{ selectedData.title }}</div>
+      <div class="text-primary-900 text-lg">{{ selectedData.author }}</div>
+      <div class="text-primary-900 text-base">{{ `發布於 ${selectedData.uploadDate}` }}</div>
+      <div class="text-lg whitespace-pre-line text-[#3A3A3A]">123123</div>
+      <div class="flex flex-wrap gap-8">
+        <img class="block w-[calc(25%_-_1.5rem)]" v-for="src in selectedData.imageURL.slice(1)" :src="src">
+      </div>
+    </div>
+    <RouterLink class="text-2xl font-bold underline text-primary-900 text-right block ml-auto mt-[2.37rem] mb-[3.44rem]" to="./">回到上一頁</RouterLink>
+    <div class="text-5xl font-bold text-center mb-20">更多文章</div>
+    <div class="flex mb-40 gap-10 justify-center">
+      <DiscCard
+        class="max-sm:hidden max-sm:first:block"
+        v-for="d in relative"
+        :title="d.title"
+        :class_="d.category"
+        :timestamp="d.uploadDate"
+        :context="d.content"
+        title-size="text-base"
+        :link="`/forum/featuredArticles/${d.id}`"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
 import Breadcrumb from '@/components/Breadcrumb.vue';
 import DiscCard from '../../components/DiscCard.vue';
+import featuredArticles from '../../data/featuredArticles.json';
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const defaultData = {
+  id: "",
+  title: "",
+  category: "",
+  author: "",
+  uploadDate: "",
+  content: "",
+  imageURL: [""]
+};
+const router = useRoute();
+const selectedData = computed(() => (
+  router.params.article === undefined ? defaultData : featuredArticles.find(v => v.id === router.params.article)
+));
+
+const relative = computed(() => {
+  let same = featuredArticles.filter(v => v.category === selectedData.value.category);
+  if (same.length <= 3) return same;
+  same = same.filter(v => v.id != selectedData.value.id);
+  same.sort(() => Math.random());
+  return same.slice(0, 3);
+});
+
+const dataKey = new Set(featuredArticles.map(v => v.category));
+const open = ref(Object.fromEntries(Array.from(dataKey).map(v => [v, false])));
 </script>