<template>
    <div class="min-h-screen bg-gray-50">
      <!-- 头部背景 -->
      <div class="bg-blue-600 h-48 relative">
        <!-- 状态栏 -->
        <div class="flex justify-between items-center px-4 py-2">
          <div class="text-lg text-white">14:44</div>
          <div class="flex items-center gap-2 text-white">
            <div class="text-sm">|||</div>
            <WifiIcon class="w-4 h-4" />
            <BatteryIcon class="w-4 h-4" />
          </div>
        </div>
  
        <!-- 用户信息 -->
        <div class="flex items-center px-4 mt-4">
          <div class="w-16 h-16 rounded-full bg-white overflow-hidden">
            <UserIcon class="w-full h-full text-gray-300 p-2" />
          </div>
          <div class="ml-4 text-white">
            <h2 class="text-xl font-medium">Hello,186****2669</h2>
          </div>
          <div class="ml-auto flex gap-2">
            <MoreHorizontalIcon class="w-6 h-6 text-white" />
            <CircleIcon class="w-6 h-6 text-white" />
          </div>
        </div>
      </div>
  
      <!-- 用户数据 -->
      <div class="bg-white rounded-lg mx-4 p-4 -mt-8 relative z-10 shadow-sm">
        <div class="flex justify-between text-center">
          <div>
            <div class="text-lg font-bold">¥0.00</div>
            <div class="text-sm text-gray-500">礼品卡充值</div>
          </div>
          <div>
            <div class="text-lg font-bold">0</div>
            <div class="text-sm text-gray-500">积分</div>
          </div>
          <div>
            <div class="text-lg font-bold">0</div>
            <div class="text-sm text-gray-500">优惠券</div>
          </div>
        </div>
      </div>
  
      <!-- 我的订单 -->
      <div class="bg-white mt-4 p-4">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold">我的订单</h3>
          <div class="text-gray-400 text-sm flex items-center">
            更多
            <ChevronRightIcon class="w-4 h-4" />
          </div>
        </div>
        <div class="flex justify-between text-center">
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 mb-1">
              <CreditCardIcon class="w-full h-full text-blue-600" />
            </div>
            <span class="text-sm">待支付</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 mb-1">
              <LayoutIcon class="w-full h-full text-blue-600" />
            </div>
            <span class="text-sm">待配送</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 mb-1">
              <TruckIcon class="w-full h-full text-blue-600" />
            </div>
            <span class="text-sm">待收货</span>
          </div>
        </div>
      </div>
  
      <!-- 我的服务 -->
      <div class="bg-white mt-4 p-4">
        <h3 class="text-lg font-bold mb-4">我的服务</h3>
        <div class="grid grid-cols-4 gap-4">
          <div v-for="service in services" :key="service.id" class="flex flex-col items-center">
            <img :src="service.icon" :alt="service.name" class="w-12 h-12 mb-1" />
            <span class="text-sm">{{ service.name }}</span>
          </div>
        </div>
      </div>
  
      <!-- 常用工具 -->
      <div class="bg-white mt-4 p-4 pb-20">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-bold">常用工具</h3>
          <div class="text-gray-400 text-sm flex items-center">
            更多
            <ChevronRightIcon class="w-4 h-4" />
          </div>
        </div>
        <div class="grid grid-cols-4 gap-y-6">
          <div v-for="tool in tools" :key="tool.id" class="flex flex-col items-center relative">
            <img :src="tool.icon" :alt="tool.name" class="w-12 h-12 mb-1" />
            <span class="text-sm">{{ tool.name }}</span>
            <span 
              v-if="tool.badge" 
              class="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-1 rounded"
            >
              {{ tool.badge }}
            </span>
          </div>
        </div>
      </div>
  
      <!-- 底部导航 -->
      <div class="fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around py-2">
        <div class="flex flex-col items-center text-gray-500">
          <HomeIcon class="w-6 h-6" />
          <span class="text-xs">首页</span>
        </div>
        <div class="flex flex-col items-center text-gray-500">
          <LayoutGridIcon class="w-6 h-6" />
          <span class="text-xs">分类</span>
        </div>
        <div class="flex flex-col items-center text-gray-500">
          <div class="relative">
            <ShoppingCartIcon class="w-6 h-6" />
            <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">
              2
            </div>
          </div>
          <span class="text-xs">购物车</span>
        </div>
        <div class="flex flex-col items-center text-blue-600">
          <UserIcon class="w-6 h-6" />
          <span class="text-xs">我的</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { 
    User as UserIcon,
    MoreHorizontal as MoreHorizontalIcon,
    Circle as CircleIcon,
    Wifi as WifiIcon,
    Battery as BatteryIcon,
    CreditCard as CreditCardIcon,
    Layout as LayoutIcon,
    Truck as TruckIcon,
    ChevronRight as ChevronRightIcon,
    Home as HomeIcon,
    LayoutGrid as LayoutGridIcon,
    ShoppingCart as ShoppingCartIcon
  } from 'lucide-vue-next';
  
  const services = [
    { id: 1, name: '开卡/续卡', icon: '/placeholder.svg?height=48&width=48&text=💳' },
    { id: 2, name: '亲子时光', icon: '/placeholder.svg?height=48&width=48&text=🧸' },
    { id: 3, name: '联名信用卡', icon: '/placeholder.svg?height=48&width=48&text=💰' },
    { id: 4, name: '会员权益', icon: '/placeholder.svg?height=48&width=48&text=⭐' }
  ];
  
  const tools = [
    { id: 1, name: '绑定礼品卡', icon: '/placeholder.svg?height=48&width=48&text=🎁' },
    { id: 2, name: '领券中心', icon: '/placeholder.svg?height=48&width=48&text=🎫' },
    { id: 3, name: '收货地址', icon: '/placeholder.svg?height=48&width=48&text=📍' },
    { id: 4, name: '会员一码付', icon: '/placeholder.svg?height=48&width=48&text=💳' },
    { id: 5, name: '企微福利', icon: '/placeholder.svg?height=48&width=48&text=💝' },
    { id: 6, name: '售后/退款', icon: '/placeholder.svg?height=48&width=48&text=💰' },
    { id: 7, name: '发票中心', icon: '/placeholder.svg?height=48&width=48&text=📄' },
    { id: 8, name: '附属卡', icon: '/placeholder.svg?height=48&width=48&text=💳' },
    { id: 9, name: '兑换码', icon: '/placeholder.svg?height=48&width=48&text=🔄' },
    { id: 10, name: '联系客服', icon: '/placeholder.svg?height=48&width=48&text=💬' },
    { id: 11, name: '企业资质', icon: '/placeholder.svg?height=48&width=48&text=📋' },
    { id: 12, name: '积分商城', icon: '/placeholder.svg?height=48&width=48&text=🏪', badge: 'NEW' }
  ];
  </script>
  
  <style scoped>
  /* 如果需要自定义样式可以在这里添加 */
  </style>