save
This commit is contained in:
parent
18fd3ede2c
commit
dc24d5b6ed
117 changed files with 36876 additions and 7 deletions
250
client/limo-mobile-h5/app/zone/page.tsx
Normal file
250
client/limo-mobile-h5/app/zone/page.tsx
Normal file
|
@ -0,0 +1,250 @@
|
|||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import {
|
||||
ArrowLeft,
|
||||
Play,
|
||||
ChevronDown,
|
||||
Clock,
|
||||
MapPin,
|
||||
Maximize2,
|
||||
Users,
|
||||
Eye,
|
||||
Share2,
|
||||
Heart,
|
||||
MoreHorizontal,
|
||||
} from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function ZoneVenuePage() {
|
||||
const [activeTab, setActiveTab] = useState("highlights")
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
|
||||
{/* Header with premium background */}
|
||||
<div className="relative h-64 bg-gradient-to-br from-gray-900 via-blue-900 to-red-900 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-black bg-opacity-40"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20"></div>
|
||||
|
||||
{/* Header Controls */}
|
||||
<div className="relative z-10 p-4 flex items-center justify-between">
|
||||
<div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
||||
<ArrowLeft className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
||||
<Share2 className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="w-10 h-10 bg-black/30 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
||||
<MoreHorizontal className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Venue Info Card with glassmorphism */}
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-white/90 backdrop-blur-xl rounded-t-3xl p-6 border-t border-white/20">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl flex items-center justify-center overflow-hidden shadow-xl">
|
||||
<span className="text-white font-bold text-2xl">R</span>
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white flex items-center justify-center">
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-1">RONIN黄金篮球馆</h1>
|
||||
<p className="text-sm text-gray-500 flex items-center mb-2">
|
||||
<MapPin className="w-4 h-4 mr-1" />
|
||||
杭州拱墅区黑马路124号(肯德基对面)
|
||||
</p>
|
||||
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Users className="w-3 h-3" />
|
||||
<span>1,234 关注</span>
|
||||
</div>
|
||||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Eye className="w-3 h-3" />
|
||||
<span>今日 856 观看</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Video Player with enhanced styling */}
|
||||
<div className="px-4 pt-8">
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-2xl shadow-gray-200/50 border border-gray-100/50">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/placeholder.svg?height=300&width=600&text=Basketball+Game"
|
||||
alt="Basketball game"
|
||||
width={600}
|
||||
height={300}
|
||||
className="w-full h-64 object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
|
||||
<div className="w-20 h-20 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 hover:scale-110">
|
||||
<Play className="w-10 h-10 text-gray-800 ml-1" fill="currentColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-4 right-4">
|
||||
<div className="bg-black/30 backdrop-blur-sm rounded-xl p-2 transition-all duration-300 hover:scale-105">
|
||||
<Maximize2 className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-4 left-4 flex space-x-2">
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-white bg-opacity-50 rounded-full"></div>
|
||||
<div className="w-2 h-2 bg-white bg-opacity-50 rounded-full"></div>
|
||||
</div>
|
||||
<div className="absolute top-4 left-4">
|
||||
<div className="bg-red-500/90 backdrop-blur-sm text-white px-3 py-1 rounded-xl text-sm font-semibold flex items-center">
|
||||
<div className="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
|
||||
直播中
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Heart className="w-5 h-5 text-red-500" />
|
||||
<span className="text-sm font-medium text-gray-600">2.1k</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Eye className="w-5 h-5 text-gray-400" />
|
||||
<span className="text-sm font-medium text-gray-600">856</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">2分钟前更新</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Tabs with enhanced styling */}
|
||||
<div className="px-4 mt-8">
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-2xl p-1 shadow-lg shadow-gray-200/30 border border-gray-100/50">
|
||||
<div className="flex">
|
||||
<button
|
||||
onClick={() => setActiveTab("highlights")}
|
||||
className={`flex-1 py-3 px-4 rounded-xl font-semibold text-sm transition-all duration-300 ${
|
||||
activeTab === "highlights"
|
||||
? "bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] text-white shadow-lg shadow-[#05C7C7]/20"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
精彩瞬间
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("replay")}
|
||||
className={`flex-1 py-3 px-4 rounded-xl font-semibold text-sm transition-all duration-300 ${
|
||||
activeTab === "replay"
|
||||
? "bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] text-white shadow-lg shadow-[#05C7C7]/20"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
>
|
||||
直播回放
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Court and Time Selection with premium styling */}
|
||||
<div className="px-4 mt-6 flex space-x-3">
|
||||
<div className="flex items-center space-x-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-3 shadow-lg shadow-gray-200/30 border border-gray-100/50 transition-all duration-300 hover:scale-[1.02]">
|
||||
<div className="w-4 h-4 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full shadow-sm"></div>
|
||||
<span className="text-sm font-semibold text-gray-900">1号篮球场</span>
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-3 shadow-lg shadow-gray-200/30 border border-gray-100/50 transition-all duration-300 hover:scale-[1.02]">
|
||||
<Clock className="w-4 h-4 text-gray-400" />
|
||||
<span className="text-sm font-semibold text-gray-900">今日 08:20 ~ 22:00</span>
|
||||
<ChevronDown className="w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Grid with enhanced styling */}
|
||||
<div className="px-4 mt-6 grid grid-cols-2 gap-4">
|
||||
{/* Live Video */}
|
||||
<div className="relative group">
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/placeholder.svg?height=150&width=200&text=Live+Game"
|
||||
alt="Live basketball game"
|
||||
width={200}
|
||||
height={150}
|
||||
className="w-full h-32 object-cover"
|
||||
/>
|
||||
<div className="absolute top-2 left-2">
|
||||
<div className="bg-[#05C7C7]/90 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-semibold flex items-center">
|
||||
<div className="w-1.5 h-1.5 bg-white rounded-full mr-1 animate-pulse"></div>
|
||||
正在播放
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2">
|
||||
<div className="w-6 h-6 bg-white/80 backdrop-blur-sm rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Other Videos */}
|
||||
{[1, 2, 3, 4, 5].map((index) => (
|
||||
<div key={index} className="relative group">
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={`/placeholder.svg?height=150&width=200&text=Game+${index + 1}`}
|
||||
alt={`Basketball game ${index + 1}`}
|
||||
width={200}
|
||||
height={150}
|
||||
className="w-full h-32 object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center rounded-3xl">
|
||||
<div className="w-10 h-10 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center transition-all duration-300 group-hover:scale-110">
|
||||
<Play className="w-5 h-5 text-gray-800 ml-0.5" fill="currentColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2">
|
||||
<div className="w-6 h-6 bg-white/80 backdrop-blur-sm rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom Notice with enhanced styling */}
|
||||
<div className="px-4 mt-8">
|
||||
<div className="bg-orange-50/80 backdrop-blur-sm border border-orange-200/50 rounded-2xl p-4 flex items-center justify-center">
|
||||
<div className="w-5 h-5 border-2 border-orange-400 rounded-full flex items-center justify-center mr-3">
|
||||
<span className="text-orange-400 text-xs font-bold">!</span>
|
||||
</div>
|
||||
<span className="text-sm text-orange-600 font-medium">视频云端保存仅7天,请及时下载</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Actions - Fixed with glassmorphism */}
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-xl border-t border-gray-200/50 px-4 py-4 flex space-x-4">
|
||||
<Button className="flex-1 bg-gradient-to-r from-orange-400 to-red-500 hover:from-orange-500 hover:to-red-600 text-white py-4 rounded-2xl font-bold shadow-xl shadow-orange-400/30 transition-all duration-300 hover:scale-[1.02]">
|
||||
合成剪辑
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-gray-600 font-semibold px-6 py-4 rounded-2xl transition-all duration-300 hover:bg-gray-100/50"
|
||||
>
|
||||
创作记录 →
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Bottom Spacing for Fixed Actions */}
|
||||
<div className="h-24"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue