1.6

2026-06-13 17:57:43 +08:00
parent 68678304ff
commit a0f441d8ae
28 changed files with 1933 additions and 2 deletions
@@ -0,0 +1,79 @@
+<template>
+  <div class="garden-view">
+    <div class="garden-header">
+      <h2 class="garden-title">🌿 花园</h2>
+      <p class="garden-subtitle">在这里，关系会生长 · 每一片叶子都是独一无二的回忆</p>
+    </div>
+
+    <div class="feature-cards">
+      <div class="feature-card leaf-card" @click="$router.push('/garden/leaf')">
+        <div class="card-icon">🍃</div>
+        <div class="card-body">
+          <h3>每日心情叶</h3>
+          <p>每天收获一片独一无二的叶子，记录今日心情</p>
+        </div>
+        <span class="card-arrow">›</span>
+      </div>
+
+      <div class="feature-card tree-card" @click="$router.push('/garden/tree')">
+        <div class="card-icon">🌳</div>
+        <div class="card-body">
+          <h3>好友之树</h3>
+          <p>你们的友谊会长成一棵树，越聊越茂盛</p>
+        </div>
+        <span class="card-arrow">›</span>
+      </div>
+
+      <div class="feature-card capsule-card" @click="$router.push('/garden/capsule')">
+        <div class="card-icon">⏳</div>
+        <div class="card-body">
+          <h3>时光胶囊</h3>
+          <p>给未来的自己或好友，寄一颗会发芽的种子</p>
+        </div>
+        <span class="card-arrow">›</span>
+      </div>
+    </div>
+
+    <div class="garden-quote">
+      <p>「过去 · 当下 · 未来，都在这片花园里生长」</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.garden-view {
+  flex: 1; overflow-y: auto; padding: 32px;
+  background: linear-gradient(160deg, var(--color-bg) 0%, var(--color-primary-lightest) 100%);
+}
+.garden-header { text-align: center; margin-bottom: 36px; }
+.garden-title { font-size: 28px; font-weight: 700; margin: 0 0 8px; color: var(--color-primary-darker); }
+.garden-subtitle { font-size: 14px; color: var(--color-text-secondary); margin: 0; }
+
+.feature-cards { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+.feature-card {
+  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
+  background: var(--color-surface); border-radius: 16px;
+  border: 1px solid var(--color-border); cursor: pointer;
+  transition: all 0.25s; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+}
+.feature-card:hover {
+  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,150,136,0.15);
+  border-color: var(--color-primary-light);
+}
+.card-icon { font-size: 40px; flex-shrink: 0; }
+.card-body { flex: 1; }
+.card-body h3 { margin: 0 0 4px; font-size: 17px; color: var(--color-text-primary); }
+.card-body p { margin: 0; font-size: 13px; color: var(--color-text-secondary); }
+.card-arrow { font-size: 24px; color: var(--color-text-hint); flex-shrink: 0; }
+.feature-card:hover .card-arrow { color: var(--color-primary); }
+
+.leaf-card { border-left: 4px solid #66BB6A; }
+.tree-card { border-left: 4px solid #8D6E63; }
+.capsule-card { border-left: 4px solid #FFB74D; }
+
+.garden-quote { text-align: center; margin-top: 48px; }
+.garden-quote p { font-size: 13px; color: var(--color-text-hint); font-style: italic; margin: 0; }
+</style>