<template>
    <div class="max-w-md mx-auto h-screen overflow-y-auto bg-blue-600 text-gray-800 relative">
      <!-- 状态栏 -->
      <div class="flex justify-between items-center px-4 py-2 text-white">
        <div class="text-lg font-bold">14:19</div>
        <div class="flex items-center gap-2">
          <div class="text-sm">|||</div>
          <WifiIcon class="w-4 h-4" />
          <BatteryIcon class="w-4 h-4" />
        </div>
      </div>
  
      <!-- 头部导航 -->
      <div class="flex justify-between items-center px-4 py-2 text-white">
        <div class="flex items-center gap-1">
          <MapPinIcon class="w-5 h-5" />
          <span class="text-sm">定位失败，请选择...</span>
        </div>
        <div class="flex items-center gap-4">
          <ScanIcon class="w-6 h-6" />
          <MaximizeIcon class="w-6 h-6" />
          <MoreHorizontalIcon class="w-6 h-6" />
          <div class="bg-black bg-opacity-20 rounded-full p-1">
            <CircleIcon class="w-6 h-6" />
          </div>
        </div>
      </div>
  
      <!-- 搜索栏 -->
      <div class="flex px-4 pb-4 gap-2 items-center">
        <div class="flex-1 flex items-center bg-white rounded-full px-3 py-2">
          <SearchIcon class="w-4 h-4 text-gray-500" />
          <input type="text" placeholder="香水系列首发" class="flex-1 ml-2 text-sm outline-none border-none" />
          <div class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm">搜索</div>
        </div>
        <div class="flex items-center bg-blue-700 text-white px-2 py-1 rounded-full text-sm">
          <span>臻选</span>
          <ChevronDownIcon class="w-4 h-4 ml-1" />
        </div>
      </div>
  
      <!-- 产品列表 -->
      <div class="grid grid-cols-4 gap-2 p-4 bg-white rounded-xl mx-4">
        <div v-for="(product, index) in products" :key="index" class="flex flex-col">
          <div class="relative mb-2">
            <img :src="product.image" :alt="product.title" class="w-full aspect-square object-cover rounded-lg" />
            <div v-if="product.tag" class="absolute top-0 left-0 bg-purple-600 text-white text-xs px-1.5 py-0.5 rounded">
              {{ product.tag }}
            </div>
          </div>
          <div class="text-xs leading-tight mb-2 h-8 overflow-hidden line-clamp-2">{{ product.title }}</div>
          <div class="flex justify-between items-center">
            <div class="text-orange-600 font-bold text-sm">¥{{ product.price }}</div>
            <div class="bg-green-500 text-white w-6 h-6 flex items-center justify-center rounded text-xs">购</div>
          </div>
        </div>
      </div>
  
      <!-- 优惠券区域 -->
      <div class="mx-4 my-4">
        <h3 class="text-white text-base mb-3">新人领券更优惠</h3>
        <div class="flex gap-2 mb-4">
          <div class="bg-orange-500 text-white rounded-lg p-2 w-20 flex flex-col">
            <div class="flex items-baseline">
              ¥<span class="text-2xl font-bold">10</span>
            </div>
            <div class="flex items-center gap-1 mt-1 text-xs">
              <div>本单可用</div>
            </div>
          </div>
          <div class="flex flex-col justify-center text-xs text-white">
            <div>限时有效</div>
            <div>快去领取</div>
          </div>
          <div class="bg-white rounded-lg p-2 w-20 flex flex-col">
            <div class="flex items-baseline">
              ¥<span class="text-2xl font-bold">15</span>
            </div>
            <div class="flex items-center gap-1 mt-1 text-xs">
              <LockIcon class="w-3.5 h-3.5" />
              <div>第2单可用</div>
            </div>
          </div>
          <div class="bg-white rounded-lg p-2 w-20 flex flex-col">
            <div class="flex items-baseline">
              ¥<span class="text-2xl font-bold">20</span>
            </div>
            <div class="flex items-center gap-1 mt-1 text-xs">
              <LockIcon class="w-3.5 h-3.5" />
              <div>第3单可用</div>
            </div>
          </div>
        </div>
        <button class="bg-yellow-400 text-gray-800 border-none rounded-full py-3 w-full text-base font-bold">
          立即领取
        </button>
      </div>
  
      <!-- 分类区域 -->
      <div class="grid grid-cols-5 gap-4 p-4 bg-white rounded-t-xl mt-4">
        <div v-for="(category, index) in categories" :key="index" class="flex flex-col items-center gap-2">
          <div class="w-12 h-12 bg-pink-200 rounded-full flex items-center justify-center text-white text-lg font-bold">
            {{ category.icon }}
          </div>
          <div class="text-xs text-center">{{ category.name }}</div>
        </div>
      </div>
  
      <!-- 促销横幅 -->
      <div class="bg-white py-3 text-center">
        <div class="text-orange-500 text-sm">❤ 满199减120元 ❤</div>
      </div>
  
      <!-- 底部导航 -->
      <div class="flex justify-around bg-white py-2 sticky bottom-0 border-t border-gray-200">
        <div class="flex flex-col items-center text-xs text-blue-600">
          <HomeIcon class="w-6 h-6" />
          <span>首页</span>
        </div>
        <div class="flex flex-col items-center text-xs text-gray-500">
          <LayoutGridIcon class="w-6 h-6" />
          <span>分类</span>
        </div>
        <div class="flex flex-col items-center text-xs text-gray-500">
          <ShoppingCartIcon class="w-6 h-6" />
          <span>购物车</span>
        </div>
        <div class="flex flex-col items-center text-xs text-gray-500">
          <UserIcon class="w-6 h-6" />
          <span>我的</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { 
    MapPin as MapPinIcon, 
    Search as SearchIcon, 
    MoreHorizontal as MoreHorizontalIcon,
    Circle as CircleIcon,
    ChevronDown as ChevronDownIcon,
    Wifi as WifiIcon,
    Battery as BatteryIcon,
    Maximize as MaximizeIcon,
    Scan as ScanIcon,
    Lock as LockIcon,
    Home as HomeIcon,
    LayoutGrid as LayoutGridIcon,
    ShoppingCart as ShoppingCartIcon,
    User as UserIcon
  } from 'lucide-vue-next';
  
  const products = ref([
    {
      title: '臻选进口100%NFC椰子水',
      price: '0.00',
      image: '/placeholder.svg?height=120&width=120',
      tag: '新'
    },
    {
      title: '臻选半熟芝士蛋糕 720g',
      price: '0.00',
      image: '/placeholder.svg?height=120&width=120'
    },
    {
      title: '臻选强效除菌洗衣凝珠 60颗',
      price: '0.00',
      image: '/placeholder.svg?height=120&width=120'
    },
    {
      title: '臻选血桃糕 500g',
      price: '0.00',
      image: '/placeholder.svg?height=120&width=120'
    }
  ]);
  
  const categories = ref([
    { name: '休闲零食', icon: '多' },
    { name: '粮油调味', icon: '彩' },
    { name: '中外名酒', icon: '女' },
    { name: '个护美妆', icon: '神' },
    { name: '母婴玩具', icon: '节' },
    { name: '每周特价', icon: '满' },
    { name: '新品体验', icon: '199' },
    { name: '线上专享', icon: '减' },
    { name: '积分商城', icon: '120' },
    { name: '领券中心', icon: '元' }
  ]);
  </script>