first commit

src/views/client/TimeBank.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="space-y-6">
+    <!-- Balance Card -->
+    <div class="bg-gradient-to-r from-orange-400 to-pink-500 rounded-2xl p-6 text-white shadow-lg relative overflow-hidden">
+      <div class="absolute -right-6 -top-6 w-32 h-32 bg-white opacity-10 rounded-full blur-2xl"></div>
+      <div class="relative z-10">
+        <div class="text-sm opacity-90 mb-1">我的智护通证 (Token)</div>
+        <div class="text-4xl font-bold font-mono tracking-tight">1,250.00</div>
+        <div class="mt-6 flex space-x-3">
+          <button class="flex-1 bg-white/20 hover:bg-white/30 backdrop-blur py-2 rounded-lg text-sm font-medium transition-colors">
+            兑换服务
+          </button>
+          <button class="flex-1 bg-white text-orange-600 hover:bg-orange-50 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm">
+            去赚取
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tasks List -->
+    <div>
+      <h3 class="text-lg font-bold text-gray-800 mb-4 px-1">社区互助任务</h3>
+      <div class="space-y-3">
+        <div v-for="task in tasks" :key="task.id" class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex justify-between items-center">
+          <div class="flex items-center space-x-3">
+            <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-xl">
+              {{ task.icon }}
+            </div>
+            <div>
+              <div class="font-medium text-gray-900">{{ task.title }}</div>
+              <div class="text-xs text-gray-500">{{ task.distance }} • {{ task.time }}</div>
+            </div>
+          </div>
+          <div class="flex flex-col items-end">
+            <span class="text-vitality-orange font-bold text-lg">+{{ task.reward }}</span>
+            <button class="px-3 py-1 bg-gray-900 text-white text-xs rounded-md mt-1 hover:bg-gray-700">接单</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const tasks = ref([
+  { id: 1, title: '陪伴李奶奶聊天', icon: '👵', distance: '300m', time: '30分钟', reward: 50 },
+  { id: 2, title: '协助购买日用品', icon: '🛒', distance: '500m', time: '1小时', reward: 100 },
+  { id: 3, title: '教张大爷使用手机', icon: '📱', distance: '1.2km', time: '45分钟', reward: 80 },
+])
+</script>