wip: content draft

components/ContentItem.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="space-y-6">
+    <div class="mr-auto space-y-1">
+      <h1 class="text-4xl font-semibold font-misans">
+        {{ title }}
+      </h1>
+      <h3 class="text-xl font-medium font-uncut">
+        {{ subtitle }}
+      </h3>
+    </div>
+    <div class="space-y-3">
+      <p v-for="content in contents" :key="content" class="text-lg font-misans">
+        {{ content }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  subtitle: string;
+  contents: string[];
+}>();
+</script>

components/LoadingAnimation.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="absolute left-0 top-0 h-screen w-screen bg-white">
+    <div class="relative top-1/2 mx-auto h-10 max-w-xl w-[85%] flex items-center justify-center border border-blue-400 -translate-y-1/2">
+      <div class="px-2">
+        <NuxtImg src="/cosmo-logo.svg" class="aspect-square h-6" />
+      </div>
+      <div class="h-full flex grow items-center justify-center border-x border-blue-400 px">
+        <NuxtImg src="/anim-text.svg" class="h-6" />
+      </div>
+      <LoadingPing class="aspect-square h-6 stroke-blue-500" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>

components/LoadingPing.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44">
+    <g fill="none" fill-rule="evenodd" stroke-width="2">
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r" begin="0s" calcMode="spline" dur="1.8s" keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1" repeatCount="indefinite" values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity" begin="0s" calcMode="spline" dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1" keyTimes="0; 1" repeatCount="indefinite" values="1; 0"
+        />
+      </circle>
+      <circle cx="22" cy="22" r="1">
+        <animate
+          attributeName="r" begin="-0.9s" calcMode="spline" dur="1.8s" keySplines="0.165, 0.84, 0.44, 1"
+          keyTimes="0; 1" repeatCount="indefinite" values="1; 20"
+        />
+        <animate
+          attributeName="stroke-opacity" begin="-0.9s" calcMode="spline" dur="1.8s"
+          keySplines="0.3, 0.61, 0.355, 1" keyTimes="0; 1" repeatCount="indefinite" values="1; 0"
+        />
+      </circle>
+    </g>
+  </svg>
+</template>

components/NavBar.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="fixed top-5 z-100 w-full">
-    <div class="mx-4 h-14 flex justify-between gap-8 border rounded-full bg-white/50 p-2 shadow-sm backdrop-blur-md transition-all duration-10 md:mx-auto md:w-1/2 sm:px-6">
-      <div class="flex items-center justify-center gap-x-6 px-4 font-misans">
+  <div class="fixed top-0 z-50 w-full border-b bg-white/50 shadow-sm backdrop-blur-md">
+    <div class="mx-auto h-14 max-w-4xl w-[80%] flex justify-between gap-8 py-2 transition-all duration-10">
+      <div class="flex items-center justify-center gap-x-8 px-4 font-misans">
         <NuxtImg src="/cosmo-logo.svg" class="h-8 w-8" />
         <NavBarItem v-for="item in navbarItems" :key="item.text" :text="item.text" :to="item.to" class="hidden md:block" />
       </div>
-      <button type="button" class="button-gradient mr-4 rounded-lg px-4 text-nowrap text-lg text-white font-500 font-misans">
+      <button type="button" class="button-gradient mr-4 rounded px-4 text-nowrap text-lg text-white font-500 font-misans">
         加入我们
       </button>
     </div>

components/OrgStructure.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="w-full space-y-8">
+    <div class="mr-auto space-y-1">
+      <h1 class="text-4xl font-semibold font-misans">
+        我们的组织架构
+      </h1>
+      <h3 class="text-xl font-medium font-uncut">
+        Our Organization Structure
+      </h3>
+    </div>
+    <section>
+      <OrgStructureItem
+        v-for="orgStructureItem in orgStructure"
+        :key="orgStructureItem.department"
+        v-bind="orgStructureItem"
+      />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+const orgStructure = [{
+  department: '技术部',
+  icon: 'i-ph:terminal-window-duotone',
+  introduction: '对编程有不错的兴趣？技术部是个很棒的选择！作为COSMO核心部门，技术部负责项目的开发与运维，在这里，你可以实战上手开发，切实锻炼自己的编程技能，可以拓宽技术视野，提升综合水平。',
+}, {
+  department: '美工部',
+  icon: 'i-ph:pencil-circle-duotone',
+  introduction: '你是否总被各种色彩吸引眼球？喜爱平面设计？想要为网页设计UI？想自己尝试却不知道从哪里开始？美工部是一个绝佳的机会！我们有超多实践机会，0门槛，帮你打开新世界的大门！',
+  right: true,
+}];
+</script>

components/OrgStructureItem.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex flex-col" :class="right ? 'items-end' : 'items-start'">
+    <div
+      class="flex translate-y-1/2 items-center justify-center border rounded-lg bg-white px-4 py-2 shadow-sm"
+      :class="right ? '-translate-x-4' : 'translate-x-4'"
+    >
+      <div class="mr-2 text-2xl" :class="icon" />
+      <span class="text-xl font-semibold font-misans">{{ department }}</span>
+    </div>
+    <div class="border rounded-lg px-4 pb-4 pt-10 shadow-sm">
+      <p class="text-lg font-misans">
+        {{ introduction }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  department: string;
+  introduction: string;
+  icon: string;
+  right?: boolean;
+}>();
+</script>

layouts/default.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- <LoadingAnimation class="z-100" /> -->
   <NavBar />
   <slot />
   <div

pages/index.vue

@@ -1,12 +1,31 @@
 <template>
   <Hero />
-  <div class="h-screen w-full flex flex-col items-center justify-center">
-    dasdas
+  <div class="mx-auto my-25 max-w-3xl w-[80%] flex flex-col items-center justify-center container space-y-16">
+    <ContentItem v-for="text in texts" :key="text.title" v-bind="text" />
+    <OrgStructure />
   </div>
 </template>
 
 <script setup lang="ts">
 useHeadSafe({
   title: 'COSMO | 智造无限可能',
 });
+
+const texts = [
+  {
+    title: 'COSMO 是什么',
+    subtitle: 'What is COSMO',
+    contents: ['COSMO 智慧校园平台运研中心，深圳中学七大校级学生组织之一，成立于 2021 年 5 月，是一个小而精的年轻组织。在这里，我们依托互联网等技术，致力于通过信息化手段给予学生在校园生活中各方面的帮助。'],
+  },
+  {
+    title: '我们做什么',
+    subtitle: 'What We Do',
+    contents: ['我们关注校园生活中的问题，用技术改善体验。上一学年，我们完成了食堂点歌系统，深中漫游指南，“深中知网”等项目，收获了同学们的好评。接下来，我们将持续推进食堂显示屏优化等项目。', '同时，我们还运营着校园互助，招募学霸同学担任讲师为同学们提供一对一的学习帮助。'],
+  },
+  {
+    title: '为什么加入 COSMO',
+    subtitle: 'Why COSMO',
+    contents: ['麻雀虽小，五脏俱全。 COSMO 比其他学生组织规模小，我们重视组织内 每一个人的想法 和立场。 同学们拥有很大的话语权和决策权，并且参与到现有核心项目的开发和运营，获得宝贵的实践经验。', '同时，在 COSMO， 成为组织高层 的机会大于其他学生组织。 加入COSMO，不仅是对单纯想提升领导能力的高考体系同学一次绝佳的历练机会， 还可以为国际体系同学的课外活动添砖加瓦，为未来的大学申请锦上添花。', '对于 国际体系的同学 ，COSMO 是一个不错的选择， 无论是锻炼社交能力，增长领导才能， 或者自己实践做项目，加强 Community Influence 等等， 都可以在这里找到独属于自己的收获。'],
+  },
+];
 </script>