Skip to content

Commit f29ea9c

Browse files
AsyncFoxAsyncFox
committed
wip: content draft
1 parent eee2012 commit f29ea9c

9 files changed

+163
-6
lines changed

‎components/ContentItem.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="space-y-6">
3+
<div class="mr-auto space-y-1">
4+
<h1 class="text-4xl font-semibold font-misans">
5+
{{ title }}
6+
</h1>
7+
<h3 class="text-xl font-medium font-uncut">
8+
{{ subtitle }}
9+
</h3>
10+
</div>
11+
<div class="space-y-3">
12+
<p v-for="content in contents" :key="content" class="text-lg font-misans">
13+
{{ content }}
14+
</p>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script setup lang="ts">
20+
defineProps<{
21+
title: string;
22+
subtitle: string;
23+
contents: string[];
24+
}>();
25+
</script>

‎components/LoadingAnimation.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="absolute left-0 top-0 h-screen w-screen bg-white">
3+
<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">
4+
<div class="px-2">
5+
<NuxtImg src="/cosmo-logo.svg" class="aspect-square h-6" />
6+
</div>
7+
<div class="h-full flex grow items-center justify-center border-x border-blue-400 px">
8+
<NuxtImg src="/anim-text.svg" class="h-6" />
9+
</div>
10+
<LoadingPing class="aspect-square h-6 stroke-blue-500" />
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script setup lang="ts">
16+
17+
</script>

‎components/LoadingPing.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44">
3+
<g fill="none" fill-rule="evenodd" stroke-width="2">
4+
<circle cx="22" cy="22" r="1">
5+
<animate
6+
attributeName="r" begin="0s" calcMode="spline" dur="1.8s" keySplines="0.165, 0.84, 0.44, 1"
7+
keyTimes="0; 1" repeatCount="indefinite" values="1; 20"
8+
/>
9+
<animate
10+
attributeName="stroke-opacity" begin="0s" calcMode="spline" dur="1.8s"
11+
keySplines="0.3, 0.61, 0.355, 1" keyTimes="0; 1" repeatCount="indefinite" values="1; 0"
12+
/>
13+
</circle>
14+
<circle cx="22" cy="22" r="1">
15+
<animate
16+
attributeName="r" begin="-0.9s" calcMode="spline" dur="1.8s" keySplines="0.165, 0.84, 0.44, 1"
17+
keyTimes="0; 1" repeatCount="indefinite" values="1; 20"
18+
/>
19+
<animate
20+
attributeName="stroke-opacity" begin="-0.9s" calcMode="spline" dur="1.8s"
21+
keySplines="0.3, 0.61, 0.355, 1" keyTimes="0; 1" repeatCount="indefinite" values="1; 0"
22+
/>
23+
</circle>
24+
</g>
25+
</svg>
26+
</template>

‎components/NavBar.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div class="fixed top-5 z-100 w-full">
3-
<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">
4-
<div class="flex items-center justify-center gap-x-6 px-4 font-misans">
2+
<div class="fixed top-0 z-50 w-full border-b bg-white/50 shadow-sm backdrop-blur-md">
3+
<div class="mx-auto h-14 max-w-4xl w-[80%] flex justify-between gap-8 py-2 transition-all duration-10">
4+
<div class="flex items-center justify-center gap-x-8 px-4 font-misans">
55
<NuxtImg src="/cosmo-logo.svg" class="h-8 w-8" />
66
<NavBarItem v-for="item in navbarItems" :key="item.text" :text="item.text" :to="item.to" class="hidden md:block" />
77
</div>
8-
<button type="button" class="button-gradient mr-4 rounded-lg px-4 text-nowrap text-lg text-white font-500 font-misans">
8+
<button type="button" class="button-gradient mr-4 rounded px-4 text-nowrap text-lg text-white font-500 font-misans">
99
加入我们
1010
</button>
1111
</div>

‎components/OrgStructure.vue

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

‎components/OrgStructureItem.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="flex flex-col" :class="right ? 'items-end' : 'items-start'">
3+
<div
4+
class="flex translate-y-1/2 items-center justify-center border rounded-lg bg-white px-4 py-2 shadow-sm"
5+
:class="right ? '-translate-x-4' : 'translate-x-4'"
6+
>
7+
<div class="mr-2 text-2xl" :class="icon" />
8+
<span class="text-xl font-semibold font-misans">{{ department }}</span>
9+
</div>
10+
<div class="border rounded-lg px-4 pb-4 pt-10 shadow-sm">
11+
<p class="text-lg font-misans">
12+
{{ introduction }}
13+
</p>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script setup lang="ts">
19+
defineProps<{
20+
department: string;
21+
introduction: string;
22+
icon: string;
23+
right?: boolean;
24+
}>();
25+
</script>

‎layouts/default.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<template>
2+
<!-- <LoadingAnimation class="z-100" /> -->
23
<NavBar />
34
<slot />
45
<div

‎pages/index.vue

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,31 @@
11
<template>
22
<Hero />
3-
<div class="h-screen w-full flex flex-col items-center justify-center">
4-
dasdas
3+
<div class="mx-auto my-25 max-w-3xl w-[80%] flex flex-col items-center justify-center container space-y-16">
4+
<ContentItem v-for="text in texts" :key="text.title" v-bind="text" />
5+
<OrgStructure />
56
</div>
67
</template>
78

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

‎public/anim-text.svg

Lines changed: 12 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)