130 lines
4.9 KiB
Vue
130 lines
4.9 KiB
Vue
<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 class="feature-card echo-card" @click="$router.push('/contacts')">
|
||
<div class="card-icon">🍃</div>
|
||
<div class="card-body">
|
||
<h3>念念回音</h3>
|
||
<p>在好友资料卡寄一片"我在想你"的回音叶</p>
|
||
</div>
|
||
<span class="card-arrow">›</span>
|
||
</div>
|
||
|
||
<div class="feature-card sync-card" @click="$router.push('/garden/sync')">
|
||
<div class="card-icon">🌱</div>
|
||
<div class="card-body">
|
||
<h3>默契种子</h3>
|
||
<p>和好友盲答一题，默契会长出独特的叶子</p>
|
||
</div>
|
||
<span class="card-arrow">›</span>
|
||
</div>
|
||
|
||
<div class="feature-card grove-card" @click="$router.push('/garden/grove')">
|
||
<div class="card-icon">🌲</div>
|
||
<div class="card-body">
|
||
<h3>情绪共鸣林</h3>
|
||
<p>俯瞰朋友圈今日的情绪天气，你并不孤单</p>
|
||
</div>
|
||
<span class="card-arrow">›</span>
|
||
</div>
|
||
|
||
<div class="feature-card heartbeat-card" @click="$router.push('/garden/heartbeat')">
|
||
<div class="card-icon">💓</div>
|
||
<div class="card-body">
|
||
<h3>心跳同步森林</h3>
|
||
<p>你们的叶子在同一节拍上呼吸</p>
|
||
</div>
|
||
<span class="card-arrow">›</span>
|
||
</div>
|
||
|
||
<div class="feature-card firefly-card" @click="$router.push('/garden/firefly')">
|
||
<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; }
|
||
.echo-card { border-left: 4px solid #26A69A; }
|
||
.sync-card { border-left: 4px solid #9CCC65; }
|
||
.grove-card { border-left: 4px solid #7CB342; }
|
||
.heartbeat-card { border-left: 4px solid #EC407A; }
|
||
.firefly-card { border-left: 4px solid #FFC107; }
|
||
|
||
.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>
|