nuxt初始化

2026-04-20 09:45:20 +08:00
parent e90903a378
commit d3eb1d3424
508 changed files with 35562 additions and 0 deletions
--- a/nuxt-web/components/Timeline.vue
+++ b/nuxt-web/components/Timeline.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+defineProps<{
+  items: Array<{
+    date: string
+    title: string
+    summary: string
+    highlight?: boolean
+  }>
+}>()
+</script>
+
+<template>
+  <section class="timeline">
+    <div v-for="item in items" :key="`${item.date}-${item.title}`" :class="['timeline-item', { highlight: item.highlight }]">
+      <div class="timeline-marker" />
+      <div class="timeline-content">
+        <p class="timeline-date">{{ item.date }}</p>
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.summary }}</p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.timeline {
+  position: relative;
+  display: grid;
+  gap: 18px;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 14px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #d7e4f2;
+}
+
+.timeline-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 16px;
+}
+
+.timeline-marker {
+  width: 12px;
+  height: 12px;
+  margin-top: 10px;
+  border-radius: 50%;
+  background: #4f6f93;
+  z-index: 1;
+}
+
+.timeline-item.highlight .timeline-marker {
+  background: #1481ff;
+}
+
+.timeline-content {
+  background: #fff;
+  border-radius: 16px;
+  padding: 18px 20px;
+  box-shadow: 0 12px 24px rgba(16, 37, 65, 0.08);
+}
+
+.timeline-date {
+  margin: 0 0 8px;
+  color: #4f6f93;
+  font-size: 14px;
+}
+</style>