From f29ea9c38d85a28eeb5404e00048130764a83d38 Mon Sep 17 00:00:00 2001
From: AsyncFox <dev.asyncfox@gmail.com>
Date: Mon, 22 Jul 2024 21:02:42 +0800
Subject: [PATCH] wip: content draft

---
 components/ContentItem.vue      | 25 +++++++++++++++++++++++++
 components/LoadingAnimation.vue | 17 +++++++++++++++++
 components/LoadingPing.vue      | 26 ++++++++++++++++++++++++++
 components/NavBar.vue           |  8 ++++----
 components/OrgStructure.vue     | 32 ++++++++++++++++++++++++++++++++
 components/OrgStructureItem.vue | 25 +++++++++++++++++++++++++
 layouts/default.vue             |  1 +
 pages/index.vue                 | 23 +++++++++++++++++++++--
 public/anim-text.svg            | 12 ++++++++++++
 9 files changed, 163 insertions(+), 6 deletions(-)
 create mode 100644 components/ContentItem.vue
 create mode 100644 components/LoadingAnimation.vue
 create mode 100644 components/LoadingPing.vue
 create mode 100644 components/OrgStructure.vue
 create mode 100644 components/OrgStructureItem.vue
 create mode 100644 public/anim-text.svg

diff --git a/components/ContentItem.vue b/components/ContentItem.vue
new file mode 100644
index 0000000..199f45b
--- /dev/null
+++ b/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>
diff --git a/components/LoadingAnimation.vue b/components/LoadingAnimation.vue
new file mode 100644
index 0000000..f7650cf
--- /dev/null
+++ b/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>
diff --git a/components/LoadingPing.vue b/components/LoadingPing.vue
new file mode 100644
index 0000000..12831f8
--- /dev/null
+++ b/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>
diff --git a/components/NavBar.vue b/components/NavBar.vue
index fa2e929..a08a906 100644
--- a/components/NavBar.vue
+++ b/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>
diff --git a/components/OrgStructure.vue b/components/OrgStructure.vue
new file mode 100644
index 0000000..295da97
--- /dev/null
+++ b/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>
diff --git a/components/OrgStructureItem.vue b/components/OrgStructureItem.vue
new file mode 100644
index 0000000..6149d71
--- /dev/null
+++ b/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>
diff --git a/layouts/default.vue b/layouts/default.vue
index 78771d1..1955b9a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- <LoadingAnimation class="z-100" /> -->
   <NavBar />
   <slot />
   <div
diff --git a/pages/index.vue b/pages/index.vue
index d7488fe..518b897 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,8 @@
 <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>
 
@@ -9,4 +10,22 @@
 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>
diff --git a/public/anim-text.svg b/public/anim-text.svg
new file mode 100644
index 0000000..4c00962
--- /dev/null
+++ b/public/anim-text.svg
@@ -0,0 +1,12 @@
+<svg width="72" height="12" viewBox="0 0 72 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.812 6.148V11.104H1.188V6.148H10.812ZM1.272 0.256H2.808L2.64 0.676H5.748V1.972H4.056V2.536H6V3.856H4.212C4.468 4.048 4.74 4.204 5.028 4.324C5.316 4.444 5.64 4.548 6 4.636V6.052C5.4 5.932 4.888 5.776 4.464 5.584C4.048 5.384 3.66 5.092 3.3 4.708C2.932 5.092 2.54 5.384 2.124 5.584C1.716 5.776 1.208 5.932 0.6 6.052V4.636C0.96 4.548 1.284 4.444 1.572 4.324C1.86 4.204 2.132 4.048 2.388 3.856H0.6V2.536H2.52V1.972H0.588L1.272 0.256ZM9.252 9.796V9.208H2.748V9.796H9.252ZM9.252 8.044V7.456H2.748V8.044H9.252ZM6.504 0.615999H11.1V5.656H6.504V0.615999ZM9.6 4.156V2.116H8.004V4.156H9.6ZM23.52 9.64V11.08H17.64C16.912 11.08 16.3 11.036 15.804 10.948C15.316 10.868 14.876 10.728 14.484 10.528C14.388 10.88 14.324 11.104 14.292 11.2H12.624C13 10.152 13.276 9.18 13.452 8.284C13.628 7.388 13.736 6.42 13.776 5.38H12.36V3.82H15.348C15.348 4.868 15.312 5.804 15.24 6.628C15.168 7.444 15.04 8.264 14.856 9.088C15.216 9.288 15.612 9.432 16.044 9.52C16.484 9.6 17.016 9.64 17.64 9.64H23.52ZM14.472 0.4L15.3 3.004H13.68L12.852 0.4H14.472ZM15.648 3.784H18.756V2.608H17.484C17.396 2.92 17.3 3.216 17.196 3.496H15.66C16.092 2.448 16.352 1.416 16.44 0.4H17.844C17.812 0.799999 17.78 1.096 17.748 1.288H18.756V0.279999H20.304V1.288H22.884V2.608H20.304V3.784H23.4V5.104H15.648V3.784ZM16.212 5.56H22.56V9.184H16.212V5.56ZM21.036 7.912V6.832H17.736V7.912H21.036ZM55.404 3.28V9.04H49.596V3.28H55.404ZM48.504 0.7H59.496V2.248H58.476V11.224H55.14V9.676H56.928V2.248H48.504V0.7ZM53.868 7.504V4.828H51.132V7.504H53.868ZM60.84 4.696H66.072V11.2H64.56V10.072H62.352V11.2H60.84V4.696ZM60.6 2.68H61.164L62.46 0.352H64.272L62.976 2.68H64.524L64.128 1.312H65.652L66.456 4.12H60.6V2.68ZM64.56 8.788V8.092H62.352V8.788H64.56ZM64.56 6.808V6.076H62.352V6.808H64.56ZM66.864 5.8H68.412V7.216C69.34 6.952 70.296 6.576 71.28 6.088V7.672C70.384 8.128 69.428 8.476 68.412 8.716V9.556H71.4V11.104H66.864V5.8ZM66.864 0.4H68.412V1.864C69.316 1.616 70.272 1.256 71.28 0.784V2.32C70.4 2.768 69.444 3.108 68.412 3.34V3.964H71.4V5.476H66.864V0.4Z" fill="black"/>
+<path d="M24.6 9.532C26.336 8.82 27.592 7.656 28.368 6.04H24.6V4.492H28.896C29.064 3.82 29.16 3.092 29.184 2.308H25.104V0.76H34.896V2.308H30.768C30.744 3.052 30.664 3.78 30.528 4.492H35.4V6.04H32.04V9.532H35.52V11.08H30.48V6.04H30.084C29.18 8.448 27.352 10.224 24.6 11.368V9.532ZM36.828 0.52H40.824C40.824 1.392 40.768 2.188 40.656 2.908C40.544 3.62 40.36 4.344 40.104 5.08C40.528 5.88 40.74 6.7 40.74 7.54C40.74 8.356 40.54 9.152 40.14 9.928H38.532C38.796 9.52 38.988 9.124 39.108 8.74C39.236 8.348 39.3 7.948 39.3 7.54C39.3 7.132 39.236 6.736 39.108 6.352C38.988 5.96 38.796 5.556 38.532 5.14C38.908 4.1 39.152 3.072 39.264 2.056H38.34V11.2H36.828V0.52ZM41.064 0.472H47.016V6.256H44.676C44.812 7.048 45.096 7.712 45.528 8.248L46.272 6.568H47.652L46.8 8.488H45.744C46.208 8.984 46.812 9.36 47.556 9.616V11.32C46.236 10.904 45.212 10.244 44.484 9.34C43.756 8.436 43.316 7.408 43.164 6.256H42.588V9.664H43.704V11.2H41.064V0.472ZM45.48 4.792V4.072H42.588V4.792H45.48ZM45.48 2.656V1.936H42.588V2.656H45.48Z" fill="url(#paint0_linear_1332_36)"/>
+<defs>
+<linearGradient id="paint0_linear_1332_36" x1="36" y1="-2.26831e-08" x2="36" y2="11" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D4ED8"/>
+<stop offset="0.304" stop-color="#2563EB"/>
+<stop offset="0.634" stop-color="#60A5FA"/>
+<stop offset="1" stop-color="#93C5FD"/>
+</linearGradient>
+</defs>
+</svg>