add: Disc Card, Partners Page

src/components/DiscCard.vue

@@ -0,0 +1,50 @@
+<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>
+        </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>
+    </div>
+</template>
+
+<script setup>
+    const props = defineProps({
+        class_: {
+            type: String,
+            default: "Class",
+        },
+        title: {
+            type: String,
+            default: "Title",
+        },
+        titleSize: {
+            type: String,
+            default: "",
+        },
+        context: {
+            type: String,
+            default: "context. abcdefg."
+        },
+        timestamp: {
+            type: String,
+            default: "yyyy-mm-dd"
+        },
+    });
+</script>
+
+<style scoped>
+    .title::before {
+        content: "";
+        position: absolute;
+        top: calc(50% - 9.875rem);
+        left: calc(50% - 9.875rem);
+        width: 19.75rem;
+        height: 19.75rem;
+        background-color: var(--Primary-900, #FF7B1A);
+        z-index: -1;
+        border-radius: 50%;
+        border: 6.31353rem solid black;
+    }
+</style>

src/views/Partners.vue

@@ -1,7 +1,31 @@
 <template>
-  <h1 class="text-3xl font-bold">合作夥伴</h1>
-  <h1 class="text-3xl font-bold">合作夥伴</h1>
-  <h1 class="text-3xl font-bold">合作夥伴</h1>
-  <h1 class="text-3xl font-bold">合作夥伴</h1>
+  <div class="h-20"></div>
+  <div class="pt-20 pb-10 sm:px-[8.26rem] px-10 flex flex-col gap-5">
+    <h1 class="text-[#3A3A3A] font-bold text-center sm:text-5xl text-5xl hidden sm:block">贊助廠商</h1>
+    <p class="text-[#3A3A3A] font-bold text-center text-2xl hidden sm:block">依照中英文筆畫順序排列</p>
+    <h1 class="text-[#3A3A3A] font-bold text-center sm:text-5xl text-[2rem] sm:hidden">合作夥伴</h1>
+    <div class="flex flex-wrap sm:gap-x-14 sm:gap-y-[4.06rem] gap-x-[4.5rem] gap-y-2 justify-center">
+      <img class="sm:w-[12.5rem] w-32 sm:h-[12.5rem] h-32 object-contain" v-for="sponsor in sponsors" :src="sponsor">
+    </div>
+  </div>
+  <div class="pt-20 pb-10 sm:px-[8.26rem] px-10 flex flex-col gap-5 mb-[6.17rem]">
+    <h1 class="text-[#3A3A3A] font-bold text-center sm:text-5xl text-[2rem]">網站開發團隊</h1>
+    <a class="sm:w-[50rem] w-[21.875rem] mx-auto" href="https://gdsc.community.dev/national-cheng-kung-university/">
+      <img class="w-full" src="/partners/GDSC NCKU Logo.svg">
+    </a>
+  </div>
 </template>
 
+<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",
+  ]
+</script>

src/views/forum/FeaturedArticles.vue

@@ -3,5 +3,9 @@
   <h1 class="text-3xl font-bold">專欄文章</h1>
   <h1 class="text-3xl font-bold">專欄文章</h1>
   <h1 class="text-3xl font-bold">專欄文章</h1>
+  <DiscCard title="真假新聞分不清？不私藏網路新聞指南！" title-size="text-base" />
 </template>
 
+<script setup>
+import DiscCard from '../../components/DiscCard.vue';
+</script>