save
This commit is contained in:
parent
18fd3ede2c
commit
dc24d5b6ed
117 changed files with 36876 additions and 7 deletions
79
client/limo-mobile-h5/app/globals.css
Normal file
79
client/limo-mobile-h5/app/globals.css
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96%;
|
||||
--secondary-foreground: 222.2 84% 4.9%;
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96%;
|
||||
--accent-foreground: 222.2 84% 4.9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--radius: 0.5rem;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
257
client/limo-mobile-h5/app/immersive/page.tsx
Normal file
257
client/limo-mobile-h5/app/immersive/page.tsx
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useRef } from "react"
|
||||
import Image from "next/image"
|
||||
import { ArrowLeft, Heart, MessageCircle, Share, Play, Volume2, VolumeX } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
interface VideoData {
|
||||
id: number
|
||||
venue: string
|
||||
title: string
|
||||
description: string
|
||||
likes: number
|
||||
comments: number
|
||||
shares: number
|
||||
videoUrl: string
|
||||
thumbnail: string
|
||||
isLiked: boolean
|
||||
}
|
||||
|
||||
const mockVideos: VideoData[] = [
|
||||
{
|
||||
id: 1,
|
||||
venue: "RONIN黄金篮球馆",
|
||||
title: "精彩三分球集锦",
|
||||
description: "今日比赛精彩瞬间，连续三分命中！#篮球 #精彩瞬间",
|
||||
likes: 1234,
|
||||
comments: 89,
|
||||
shares: 45,
|
||||
videoUrl: "/placeholder.svg?height=800&width=400&text=Basketball+Highlights",
|
||||
thumbnail: "/placeholder.svg?height=800&width=400&text=Basketball+Game+1",
|
||||
isLiked: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
venue: "Panda惊怒熊猫运动俱乐部",
|
||||
title: "激烈对抗瞬间",
|
||||
description: "双方激烈对抗，精彩防守反击！#运动 #篮球对抗",
|
||||
likes: 2156,
|
||||
comments: 156,
|
||||
shares: 78,
|
||||
videoUrl: "/placeholder.svg?height=800&width=400&text=Basketball+Defense",
|
||||
thumbnail: "/placeholder.svg?height=800&width=400&text=Basketball+Game+2",
|
||||
isLiked: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
venue: "星光篮球场",
|
||||
title: "完美扣篮时刻",
|
||||
description: "力量与技巧的完美结合，震撼扣篮！#扣篮 #力量",
|
||||
likes: 3421,
|
||||
comments: 234,
|
||||
shares: 123,
|
||||
videoUrl: "/placeholder.svg?height=800&width=400&text=Basketball+Dunk",
|
||||
thumbnail: "/placeholder.svg?height=800&width=400&text=Basketball+Game+3",
|
||||
isLiked: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
venue: "蓝天体育馆",
|
||||
title: "团队配合精彩",
|
||||
description: "完美的团队配合，流畅的传球配合！#团队 #配合",
|
||||
likes: 987,
|
||||
comments: 67,
|
||||
shares: 34,
|
||||
videoUrl: "/placeholder.svg?height=800&width=400&text=Team+Play",
|
||||
thumbnail: "/placeholder.svg?height=800&width=400&text=Basketball+Game+4",
|
||||
isLiked: false,
|
||||
},
|
||||
]
|
||||
|
||||
export default function ImmersivePage() {
|
||||
const [currentIndex, setCurrentIndex] = useState(0)
|
||||
const [videos, setVideos] = useState(mockVideos)
|
||||
const [isPlaying, setIsPlaying] = useState(true)
|
||||
const [isMuted, setIsMuted] = useState(false)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const startY = useRef(0)
|
||||
const currentY = useRef(0)
|
||||
|
||||
const handleTouchStart = (e: React.TouchEvent) => {
|
||||
startY.current = e.touches[0].clientY
|
||||
}
|
||||
|
||||
const handleTouchMove = (e: React.TouchEvent) => {
|
||||
currentY.current = e.touches[0].clientY
|
||||
}
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
const deltaY = startY.current - currentY.current
|
||||
const threshold = 50
|
||||
|
||||
if (Math.abs(deltaY) > threshold) {
|
||||
if (deltaY > 0 && currentIndex < videos.length - 1) {
|
||||
// 向上滑动，下一个视频
|
||||
setCurrentIndex(currentIndex + 1)
|
||||
} else if (deltaY < 0 && currentIndex > 0) {
|
||||
// 向下滑动，上一个视频
|
||||
setCurrentIndex(currentIndex - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleLike = (videoId: number) => {
|
||||
setVideos(
|
||||
videos.map((video) => {
|
||||
if (video.id === videoId) {
|
||||
return {
|
||||
...video,
|
||||
isLiked: !video.isLiked,
|
||||
likes: video.isLiked ? video.likes - 1 : video.likes + 1,
|
||||
}
|
||||
}
|
||||
return video
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
const formatNumber = (num: number) => {
|
||||
if (num >= 1000) {
|
||||
return (num / 1000).toFixed(1) + "k"
|
||||
}
|
||||
return num.toString()
|
||||
}
|
||||
|
||||
const currentVideo = videos[currentIndex]
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black overflow-hidden">
|
||||
{/* Header - Minimized */}
|
||||
<div className="absolute top-0 left-0 right-0 z-20 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/">
|
||||
<div className="w-8 h-8 bg-black bg-opacity-30 rounded-full flex items-center justify-center">
|
||||
<ArrowLeft className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="text-white text-sm font-medium">沉浸模式</div>
|
||||
<div className="w-8 h-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Container */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="h-full w-full relative"
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
style={{
|
||||
transform: `translateY(-${currentIndex * 100}%)`,
|
||||
transition: "transform 0.3s ease-out",
|
||||
}}
|
||||
>
|
||||
{videos.map((video, index) => (
|
||||
<div key={video.id} className="absolute inset-0 w-full h-full" style={{ top: `${index * 100}%` }}>
|
||||
{/* Video Background */}
|
||||
<div className="relative w-full h-full">
|
||||
<Image
|
||||
src={video.thumbnail || "/placeholder.svg"}
|
||||
alt={video.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority={Math.abs(index - currentIndex) <= 1}
|
||||
/>
|
||||
|
||||
{/* Video Overlay */}
|
||||
<div className="absolute inset-0 bg-black bg-opacity-10" />
|
||||
|
||||
{/* Play/Pause Button - Minimized */}
|
||||
<div
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
>
|
||||
{!isPlaying && (
|
||||
<div className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
|
||||
<Play className="w-6 h-6 text-white ml-0.5" fill="currentColor" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side Actions - Minimized */}
|
||||
<div className="absolute right-3 bottom-24 flex flex-col items-center space-y-4">
|
||||
{/* Like Button */}
|
||||
<div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => handleLike(video.id)}
|
||||
className={`w-9 h-9 rounded-full flex items-center justify-center ${
|
||||
video.isLiked ? "bg-red-500" : "bg-black bg-opacity-20"
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`w-4 h-4 ${video.isLiked ? "text-white" : "text-white"}`}
|
||||
fill={video.isLiked ? "currentColor" : "none"}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-white text-xs mt-1 font-medium">{formatNumber(video.likes)}</span>
|
||||
</div>
|
||||
|
||||
{/* Comment Button */}
|
||||
<div className="flex flex-col items-center">
|
||||
<button className="w-9 h-9 bg-black bg-opacity-20 rounded-full flex items-center justify-center">
|
||||
<MessageCircle className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<span className="text-white text-xs mt-1 font-medium">{formatNumber(video.comments)}</span>
|
||||
</div>
|
||||
|
||||
{/* Share Button */}
|
||||
<div className="flex flex-col items-center">
|
||||
<button className="w-9 h-9 bg-black bg-opacity-20 rounded-full flex items-center justify-center">
|
||||
<Share className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<span className="text-white text-xs mt-1 font-medium">{formatNumber(video.shares)}</span>
|
||||
</div>
|
||||
|
||||
{/* Volume Button */}
|
||||
<button
|
||||
onClick={() => setIsMuted(!isMuted)}
|
||||
className="w-9 h-9 bg-black bg-opacity-20 rounded-full flex items-center justify-center"
|
||||
>
|
||||
{isMuted ? <VolumeX className="w-4 h-4 text-white" /> : <Volume2 className="w-4 h-4 text-white" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Bottom Info - Minimized */}
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-3 pb-6">
|
||||
<div className="max-w-xs">
|
||||
<h3 className="text-white font-medium text-base mb-1">{video.venue}</h3>
|
||||
<p className="text-white text-sm opacity-90 leading-relaxed line-clamp-2">{video.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Indicator - Minimized */}
|
||||
<div className="absolute right-1 top-1/2 transform -translate-y-1/2 flex flex-col space-y-1">
|
||||
{videos.map((_, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`w-0.5 h-6 rounded-full ${idx === currentIndex ? "bg-white" : "bg-white bg-opacity-30"}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Swipe Hint - Minimized */}
|
||||
{currentIndex === 0 && (
|
||||
<div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 text-white text-xs opacity-60 animate-bounce">
|
||||
上滑查看更多
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
client/limo-mobile-h5/app/layout.tsx
Normal file
20
client/limo-mobile-h5/app/layout.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import type { Metadata } from 'next'
|
||||
import './globals.css'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'v0 App',
|
||||
description: 'Created with v0',
|
||||
generator: 'v0.dev',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
257
client/limo-mobile-h5/app/m-space/page.tsx
Normal file
257
client/limo-mobile-h5/app/m-space/page.tsx
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useRef } from "react"
|
||||
import Image from "next/image"
|
||||
import { X, Heart, MessageCircle, Share, Play, Volume2, VolumeX } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
interface VideoData {
|
||||
id: number
|
||||
venue: string
|
||||
title: string
|
||||
description: string
|
||||
likes: number
|
||||
comments: number
|
||||
shares: number
|
||||
videoUrl: string
|
||||
thumbnail: string
|
||||
isLiked: boolean
|
||||
}
|
||||
|
||||
const mockVideos: VideoData[] = [
|
||||
{
|
||||
id: 1,
|
||||
venue: "RONIN黄金篮球馆",
|
||||
title: "精彩三分球集锦",
|
||||
description: "今日比赛精彩瞬间，连续三分命中！#篮球 #精彩瞬间",
|
||||
likes: 1234,
|
||||
comments: 89,
|
||||
shares: 45,
|
||||
videoUrl: "/placeholder.svg?height=800&width=400&text=Basketball+Highlights",
|
||||
thumbnail: "/placeholder.svg?height=800&width=400&text=Basketball+Game+1",
|
||||
isLiked: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
venue: "Panda惊怒熊猫运动俱乐部",
|
||||
title: "激烈对抗瞬间",
|
||||
description: "双方激烈对抗，精彩防守反击！#运动 #篮球对抗",
|
||||
likes: 2156,
|
||||
comments: 156,
|
||||
shares: 78,
|
||||
videoUrl: "/placeholder.svg?height=800&width=400&text=Basketball+Defense",
|
||||
thumbnail: "/placeholder.svg?height=800&width=400&text=Basketball+Game+2",
|
||||
isLiked: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
venue: "星光篮球场",
|
||||
title: "完美扣篮时刻",
|
||||
description: "力量与技巧的完美结合，震撼扣篮！#扣篮 #力量",
|
||||
likes: 3421,
|
||||
comments: 234,
|
||||
shares: 123,
|
||||
videoUrl: "/placeholder.svg?height=800&width=400&text=Basketball+Dunk",
|
||||
thumbnail: "/placeholder.svg?height=800&width=400&text=Basketball+Game+3",
|
||||
isLiked: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
venue: "蓝天体育馆",
|
||||
title: "团队配合精彩",
|
||||
description: "完美的团队配合，流畅的传球配合！#团队 #配合",
|
||||
likes: 987,
|
||||
comments: 67,
|
||||
shares: 34,
|
||||
videoUrl: "/placeholder.svg?height=800&width=400&text=Team+Play",
|
||||
thumbnail: "/placeholder.svg?height=800&width=400&text=Basketball+Game+4",
|
||||
isLiked: false,
|
||||
},
|
||||
]
|
||||
|
||||
export default function MSpacePage() {
|
||||
const [currentIndex, setCurrentIndex] = useState(0)
|
||||
const [videos, setVideos] = useState(mockVideos)
|
||||
const [isPlaying, setIsPlaying] = useState(true)
|
||||
const [isMuted, setIsMuted] = useState(false)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const startY = useRef(0)
|
||||
const currentY = useRef(0)
|
||||
|
||||
const handleTouchStart = (e: React.TouchEvent) => {
|
||||
startY.current = e.touches[0].clientY
|
||||
}
|
||||
|
||||
const handleTouchMove = (e: React.TouchEvent) => {
|
||||
currentY.current = e.touches[0].clientY
|
||||
}
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
const deltaY = startY.current - currentY.current
|
||||
const threshold = 50
|
||||
|
||||
if (Math.abs(deltaY) > threshold) {
|
||||
if (deltaY > 0 && currentIndex < videos.length - 1) {
|
||||
// 向上滑动，下一个视频
|
||||
setCurrentIndex(currentIndex + 1)
|
||||
} else if (deltaY < 0 && currentIndex > 0) {
|
||||
// 向下滑动，上一个视频
|
||||
setCurrentIndex(currentIndex - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleLike = (videoId: number) => {
|
||||
setVideos(
|
||||
videos.map((video) => {
|
||||
if (video.id === videoId) {
|
||||
return {
|
||||
...video,
|
||||
isLiked: !video.isLiked,
|
||||
likes: video.isLiked ? video.likes - 1 : video.likes + 1,
|
||||
}
|
||||
}
|
||||
return video
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
const formatNumber = (num: number) => {
|
||||
if (num >= 1000) {
|
||||
return (num / 1000).toFixed(1) + "k"
|
||||
}
|
||||
return num.toString()
|
||||
}
|
||||
|
||||
const currentVideo = videos[currentIndex]
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black overflow-hidden">
|
||||
{/* Header - Minimized */}
|
||||
<div className="absolute top-0 left-0 right-0 z-20 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/">
|
||||
<div className="w-8 h-8 bg-black bg-opacity-30 rounded-full flex items-center justify-center">
|
||||
<X className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="text-white text-sm font-medium">M空间</div>
|
||||
<div className="w-8 h-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Video Container */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="h-full w-full relative"
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
style={{
|
||||
transform: `translateY(-${currentIndex * 100}%)`,
|
||||
transition: "transform 0.3s ease-out",
|
||||
}}
|
||||
>
|
||||
{videos.map((video, index) => (
|
||||
<div key={video.id} className="absolute inset-0 w-full h-full" style={{ top: `${index * 100}%` }}>
|
||||
{/* Video Background */}
|
||||
<div className="relative w-full h-full">
|
||||
<Image
|
||||
src={video.thumbnail || "/placeholder.svg"}
|
||||
alt={video.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority={Math.abs(index - currentIndex) <= 1}
|
||||
/>
|
||||
|
||||
{/* Video Overlay */}
|
||||
<div className="absolute inset-0 bg-black bg-opacity-10" />
|
||||
|
||||
{/* Play/Pause Button - Minimized */}
|
||||
<div
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
onClick={() => setIsPlaying(!isPlaying)}
|
||||
>
|
||||
{!isPlaying && (
|
||||
<div className="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
|
||||
<Play className="w-6 h-6 text-white ml-0.5" fill="currentColor" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side Actions - Minimized */}
|
||||
<div className="absolute right-3 bottom-24 flex flex-col items-center space-y-4">
|
||||
{/* Like Button */}
|
||||
<div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => handleLike(video.id)}
|
||||
className={`w-9 h-9 rounded-full flex items-center justify-center ${
|
||||
video.isLiked ? "bg-red-500" : "bg-black bg-opacity-20"
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`w-4 h-4 ${video.isLiked ? "text-white" : "text-white"}`}
|
||||
fill={video.isLiked ? "currentColor" : "none"}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-white text-xs mt-1 font-medium">{formatNumber(video.likes)}</span>
|
||||
</div>
|
||||
|
||||
{/* Comment Button */}
|
||||
<div className="flex flex-col items-center">
|
||||
<button className="w-9 h-9 bg-black bg-opacity-20 rounded-full flex items-center justify-center">
|
||||
<MessageCircle className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<span className="text-white text-xs mt-1 font-medium">{formatNumber(video.comments)}</span>
|
||||
</div>
|
||||
|
||||
{/* Share Button */}
|
||||
<div className="flex flex-col items-center">
|
||||
<button className="w-9 h-9 bg-black bg-opacity-20 rounded-full flex items-center justify-center">
|
||||
<Share className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<span className="text-white text-xs mt-1 font-medium">{formatNumber(video.shares)}</span>
|
||||
</div>
|
||||
|
||||
{/* Volume Button */}
|
||||
<button
|
||||
onClick={() => setIsMuted(!isMuted)}
|
||||
className="w-9 h-9 bg-black bg-opacity-20 rounded-full flex items-center justify-center"
|
||||
>
|
||||
{isMuted ? <VolumeX className="w-4 h-4 text-white" /> : <Volume2 className="w-4 h-4 text-white" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Bottom Info - Minimized */}
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-3 pb-6">
|
||||
<div className="max-w-xs">
|
||||
<h3 className="text-white font-medium text-base mb-1">{video.venue}</h3>
|
||||
<p className="text-white text-sm opacity-90 leading-relaxed line-clamp-2">{video.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Indicator - Minimized */}
|
||||
<div className="absolute right-1 top-1/2 transform -translate-y-1/2 flex flex-col space-y-1">
|
||||
{videos.map((_, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`w-0.5 h-6 rounded-full ${idx === currentIndex ? "bg-white" : "bg-white bg-opacity-30"}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Swipe Hint - Minimized */}
|
||||
{currentIndex === 0 && (
|
||||
<div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 text-white text-xs opacity-60 animate-bounce">
|
||||
上滑查看更多
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
211
client/limo-mobile-h5/app/page.tsx
Normal file
211
client/limo-mobile-h5/app/page.tsx
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
import Image from "next/image"
|
||||
import { MapPin, Play, Home, User, Clock, Zap } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function LimoMobile() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header with subtle gradient */}
|
||||
<div className="bg-gradient-to-b from-white to-gray-50/30 px-4 py-4 sticky top-0 z-10 backdrop-blur-md border-b border-gray-100/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<Image src="/images/limo-logo.png" alt="LIMO来刻" width={120} height={40} className="h-8 w-auto" />
|
||||
<Link href="/m-space">
|
||||
<Button className="bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] hover:from-[#04B5B5] hover:to-[#039999] text-white p-2.5 rounded-xl shadow-lg shadow-[#05C7C7]/20 transition-all duration-300 hover:scale-105">
|
||||
<Zap className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Navigation Tabs with enhanced styling */}
|
||||
<div className="flex mt-6 space-x-8">
|
||||
<div className="relative">
|
||||
<span className="text-[#05C7C7] font-semibold text-base">发现</span>
|
||||
<div className="absolute -bottom-3 left-0 right-0 h-0.5 bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] rounded-full"></div>
|
||||
</div>
|
||||
<span className="text-gray-400 font-medium text-base">关注</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sports Categories with glassmorphism effect */}
|
||||
<div className="bg-white/80 backdrop-blur-sm px-4 py-6 mb-6 border-b border-gray-100/50">
|
||||
<div className="flex space-x-5 overflow-x-auto scrollbar-hide">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] text-white px-4 py-3 rounded-2xl text-sm font-semibold flex flex-col items-center justify-center min-w-[70px] shadow-lg shadow-[#05C7C7]/20 transition-all duration-300 hover:scale-105">
|
||||
<span>全部</span>
|
||||
<span>项目</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 flex flex-col items-center space-y-2">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-orange-100 to-orange-50 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-105">
|
||||
<span className="text-3xl leading-none">🏀</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-600 font-medium">篮球</span>
|
||||
</div>
|
||||
<div className="flex-shrink-0 flex flex-col items-center space-y-2">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-green-100 to-green-50 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-105">
|
||||
<span className="text-3xl leading-none">⚽</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-600 font-medium">足球</span>
|
||||
</div>
|
||||
<div className="flex-shrink-0 flex flex-col items-center space-y-2">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-yellow-100 to-yellow-50 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-105">
|
||||
<span className="text-3xl leading-none">🎾</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-600 font-medium">网球</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Location with enhanced styling */}
|
||||
<div className="px-4 mb-6">
|
||||
<div className="flex items-center text-gray-500 text-sm bg-gray-50/50 rounded-xl px-3 py-2">
|
||||
<MapPin className="w-4 h-4 mr-2 text-[#05C7C7]" />
|
||||
<span className="flex-1">杭州市文一西路未来科技城万利大厦0701</span>
|
||||
<span className="text-[#05C7C7] text-xs font-medium">切换</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Venue Cards with premium styling */}
|
||||
<div className="px-4 space-y-6">
|
||||
{/* Distance Timeline */}
|
||||
<div className="relative">
|
||||
<div className="absolute left-6 top-0 bottom-0 w-px bg-gradient-to-b from-[#05C7C7]/30 via-gray-200 to-gray-200"></div>
|
||||
|
||||
{/* First Venue */}
|
||||
<div className="relative">
|
||||
<div className="absolute left-4 w-4 h-4 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-full border-2 border-white shadow-lg"></div>
|
||||
<div className="ml-12">
|
||||
<div className="flex items-center space-x-2 mb-3">
|
||||
<div className="text-xs text-gray-400 font-medium">120km</div>
|
||||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||||
<div className="flex items-center text-xs text-gray-400">
|
||||
<Clock className="w-3 h-3 mr-1" />
|
||||
<span>2分钟前更新</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 hover:shadow-2xl hover:shadow-gray-200/60 hover:-translate-y-1">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/placeholder.svg?height=200&width=400"
|
||||
alt="Basketball court"
|
||||
width={400}
|
||||
height={200}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
<div className="absolute top-3 left-3">
|
||||
<div className="bg-black/20 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-medium">
|
||||
🔥 热门
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-3 right-3">
|
||||
<div className="bg-green-500 w-2 h-2 rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<span className="text-white text-sm font-bold">R</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900 text-base">RONIN黄金篮球馆</h3>
|
||||
<p className="text-sm text-gray-500 mt-0.5">杭州拱墅区黑马路124号（肯德基对面）</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/zone">
|
||||
<Button className="bg-gradient-to-r from-orange-400 to-orange-500 hover:from-orange-500 hover:to-orange-600 text-white px-5 py-2.5 rounded-2xl text-sm font-semibold shadow-lg shadow-orange-400/30 transition-all duration-300 hover:scale-105">
|
||||
进入ZONE
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Second Venue */}
|
||||
<div className="relative mt-10">
|
||||
<div className="absolute left-4 w-4 h-4 bg-gradient-to-br from-gray-300 to-gray-400 rounded-full border-2 border-white shadow-lg"></div>
|
||||
<div className="ml-12">
|
||||
<div className="flex items-center space-x-2 mb-3">
|
||||
<div className="text-xs text-gray-400 font-medium">140km</div>
|
||||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||||
<div className="flex items-center text-xs text-gray-400">
|
||||
<Clock className="w-3 h-3 mr-1" />
|
||||
<span>5分钟前更新</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 hover:shadow-2xl hover:shadow-gray-200/60 hover:-translate-y-1">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/placeholder.svg?height=200&width=400"
|
||||
alt="Basketball court with crowd"
|
||||
width={400}
|
||||
height={200}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
|
||||
<div className="w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl transition-all duration-300 hover:scale-110">
|
||||
<Play className="w-8 h-8 text-gray-800 ml-1" fill="currentColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-3 left-3">
|
||||
<div className="bg-red-500/90 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-medium flex items-center">
|
||||
<div className="w-1.5 h-1.5 bg-white rounded-full mr-1 animate-pulse"></div>
|
||||
直播中
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<span className="text-white text-sm font-bold">P</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900 text-base">Panda惊怒熊猫运动俱乐部</h3>
|
||||
<p className="text-sm text-gray-500 mt-0.5">杭州拱墅区黑马路124号（肯德基对面）</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/zone">
|
||||
<Button className="bg-gradient-to-r from-orange-400 to-orange-500 hover:from-orange-500 hover:to-orange-600 text-white px-5 py-2.5 rounded-2xl text-sm font-semibold shadow-lg shadow-orange-400/30 transition-all duration-300 hover:scale-105">
|
||||
进入ZONE
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Spacing for Fixed Navigation */}
|
||||
<div className="h-24"></div>
|
||||
|
||||
{/* Bottom Navigation with glassmorphism */}
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-200/50 px-4 py-3">
|
||||
<div className="flex justify-around">
|
||||
<Link href="/" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] rounded-xl flex items-center justify-center shadow-lg shadow-[#05C7C7]/20">
|
||||
<Home className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="text-xs text-[#05C7C7] font-semibold mt-1">首页</span>
|
||||
</Link>
|
||||
<Link href="/profile" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||
<User className="w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
<span className="text-xs text-gray-400 mt-1">我的</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Watermark with fade effect */}
|
||||
<div className="fixed bottom-20 left-1/2 transform -translate-x-1/2">
|
||||
<div className="text-gray-300 text-xs font-light tracking-wider opacity-60">You Only Live Once.</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
215
client/limo-mobile-h5/app/profile/page.tsx
Normal file
215
client/limo-mobile-h5/app/profile/page.tsx
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
import {
|
||||
ArrowLeft,
|
||||
Settings,
|
||||
Heart,
|
||||
Clock,
|
||||
MapPin,
|
||||
Home,
|
||||
User,
|
||||
Crown,
|
||||
Star,
|
||||
ChevronRight,
|
||||
Bell,
|
||||
Shield,
|
||||
} from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function ProfilePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
|
||||
{/* Header with glassmorphism */}
|
||||
<div className="bg-white/80 backdrop-blur-xl px-4 py-4 sticky top-0 z-10 border-b border-gray-100/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/">
|
||||
<div className="w-10 h-10 bg-gray-100/80 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
||||
<ArrowLeft className="w-5 h-5 text-gray-600" />
|
||||
</div>
|
||||
</Link>
|
||||
<h1 className="text-xl font-bold text-gray-900">我的</h1>
|
||||
<div className="w-10 h-10 bg-gray-100/80 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
|
||||
<Settings className="w-5 h-5 text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Profile Section with premium styling */}
|
||||
<div className="bg-gradient-to-br from-white to-gray-50/50 mx-4 mt-6 rounded-3xl p-6 shadow-xl shadow-gray-200/50 border border-gray-100/50">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] rounded-3xl flex items-center justify-center shadow-lg shadow-[#05C7C7]/20">
|
||||
<User className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
<div className="absolute -bottom-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"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<h2 className="text-2xl font-bold text-gray-900">用户昵称</h2>
|
||||
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 px-2 py-0.5 rounded-lg">
|
||||
<Crown className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mb-2">ID: 123456789</p>
|
||||
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Star className="w-3 h-3 text-yellow-500" />
|
||||
<span>积分: 2,580</span>
|
||||
</div>
|
||||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||||
<span>等级: LV.8</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="w-full mt-4 bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] hover:from-[#04B5B5] hover:to-[#039999] text-white py-3 rounded-2xl font-semibold shadow-lg shadow-[#05C7C7]/20 transition-all duration-300 hover:scale-[1.02]">
|
||||
编辑资料
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="px-4 mt-6 grid grid-cols-3 gap-3">
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 text-center shadow-lg shadow-gray-200/30 border border-gray-100/50">
|
||||
<div className="text-2xl font-bold text-gray-900 mb-1">12</div>
|
||||
<div className="text-xs text-gray-500">观看场次</div>
|
||||
</div>
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 text-center shadow-lg shadow-gray-200/30 border border-gray-100/50">
|
||||
<div className="text-2xl font-bold text-gray-900 mb-1">5</div>
|
||||
<div className="text-xs text-gray-500">收藏场馆</div>
|
||||
</div>
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-2xl p-4 text-center shadow-lg shadow-gray-200/30 border border-gray-100/50">
|
||||
<div className="text-2xl font-bold text-gray-900 mb-1">28</div>
|
||||
<div className="text-xs text-gray-500">观看时长(h)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu Items with premium styling */}
|
||||
<div className="mx-4 mt-6 bg-white/80 backdrop-blur-sm rounded-3xl shadow-xl shadow-gray-200/50 border border-gray-100/50 overflow-hidden">
|
||||
<Link
|
||||
href="/vip"
|
||||
className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center shadow-lg shadow-yellow-400/30">
|
||||
<Crown className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-900 font-semibold text-base">VIP会员</span>
|
||||
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-3 py-1 rounded-full text-xs font-medium mt-1 inline-block">
|
||||
开通享特权
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-gray-400" />
|
||||
</Link>
|
||||
|
||||
<div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-2xl flex items-center justify-center">
|
||||
<Heart className="w-6 h-6 text-red-500" />
|
||||
</div>
|
||||
<span className="text-gray-900 font-medium text-base">我的收藏</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="bg-red-500 text-white text-xs px-2 py-1 rounded-full font-medium">5</div>
|
||||
<ChevronRight className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-50 rounded-2xl flex items-center justify-center">
|
||||
<Clock className="w-6 h-6 text-blue-500" />
|
||||
</div>
|
||||
<span className="text-gray-900 font-medium text-base">观看历史</span>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-green-100 to-green-50 rounded-2xl flex items-center justify-center">
|
||||
<MapPin className="w-6 h-6 text-green-500" />
|
||||
</div>
|
||||
<span className="text-gray-900 font-medium text-base">常用地址</span>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-5 border-b border-gray-100/50 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-purple-100 to-purple-50 rounded-2xl flex items-center justify-center">
|
||||
<Bell className="w-6 h-6 text-purple-500" />
|
||||
</div>
|
||||
<span className="text-gray-900 font-medium text-base">消息通知</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="bg-red-500 w-2 h-2 rounded-full"></div>
|
||||
<ChevronRight className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-5 flex items-center justify-between transition-all duration-300 hover:bg-gray-50/50">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-gray-100 to-gray-50 rounded-2xl flex items-center justify-center">
|
||||
<Shield className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<span className="text-gray-900 font-medium text-base">隐私设置</span>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Activity with enhanced styling */}
|
||||
<div className="mx-4 mt-6 bg-white/80 backdrop-blur-sm rounded-3xl p-6 shadow-xl shadow-gray-200/50 border border-gray-100/50">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-4 flex items-center">
|
||||
<div className="w-1 h-6 bg-gradient-to-b from-[#05C7C7] to-[#04B5B5] rounded-full mr-3"></div>
|
||||
最近活动
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4 p-3 bg-gray-50/50 rounded-2xl transition-all duration-300 hover:bg-gray-100/50">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-orange-100 to-orange-50 rounded-2xl overflow-hidden">
|
||||
<div className="w-full h-full bg-orange-200"></div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-900">观看了 RONIN黄金篮球馆</p>
|
||||
<p className="text-xs text-gray-500 mt-1">2小时前 · 观看时长 45分钟</p>
|
||||
</div>
|
||||
<div className="text-xs text-[#05C7C7] font-medium">+10积分</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4 p-3 bg-gray-50/50 rounded-2xl transition-all duration-300 hover:bg-gray-100/50">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-red-100 to-red-50 rounded-2xl overflow-hidden">
|
||||
<div className="w-full h-full bg-red-200"></div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-semibold text-gray-900">收藏了 Panda惊怒熊猫运动俱乐部</p>
|
||||
<p className="text-xs text-gray-500 mt-1">1天前</p>
|
||||
</div>
|
||||
<div className="text-xs text-[#05C7C7] font-medium">+5积分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Spacing for Fixed Navigation */}
|
||||
<div className="h-24"></div>
|
||||
|
||||
{/* Bottom Navigation with glassmorphism */}
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-200/50 px-4 py-3">
|
||||
<div className="flex justify-around">
|
||||
<Link href="/" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||
<Home className="w-4 h-4 text-gray-400" />
|
||||
</div>
|
||||
<span className="text-xs text-gray-400 mt-1">首页</span>
|
||||
</Link>
|
||||
<Link href="/profile" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] rounded-xl flex items-center justify-center shadow-lg shadow-[#05C7C7]/20">
|
||||
<User className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="text-xs text-[#05C7C7] font-semibold mt-1">我的</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
317
client/limo-mobile-h5/app/vip/page.tsx
Normal file
317
client/limo-mobile-h5/app/vip/page.tsx
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
"use client"
|
||||
|
||||
import { ArrowLeft, Crown, Check, Star, Zap, Shield, Gift, Sparkles, Trophy, Users } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import Link from "next/link"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function VipPage() {
|
||||
const [selectedPlan, setSelectedPlan] = useState("monthly")
|
||||
|
||||
const plans = [
|
||||
{
|
||||
id: "daily",
|
||||
name: "体验版",
|
||||
duration: "1天",
|
||||
price: 9.9,
|
||||
originalPrice: 19.9,
|
||||
discount: "限时5折",
|
||||
popular: false,
|
||||
badge: "试用",
|
||||
color: "from-blue-400 to-blue-500",
|
||||
},
|
||||
{
|
||||
id: "monthly",
|
||||
name: "月度会员",
|
||||
duration: "1个月",
|
||||
price: 68,
|
||||
originalPrice: 98,
|
||||
discount: "7折优惠",
|
||||
popular: true,
|
||||
badge: "推荐",
|
||||
color: "from-purple-400 to-purple-500",
|
||||
},
|
||||
{
|
||||
id: "quarterly",
|
||||
name: "季度会员",
|
||||
duration: "3个月",
|
||||
price: 168,
|
||||
originalPrice: 294,
|
||||
discount: "超值4.3折",
|
||||
popular: false,
|
||||
badge: "超值",
|
||||
color: "from-pink-400 to-pink-500",
|
||||
},
|
||||
{
|
||||
id: "yearly",
|
||||
name: "年度会员",
|
||||
duration: "1年",
|
||||
price: 588,
|
||||
originalPrice: 1176,
|
||||
discount: "超值5折",
|
||||
popular: false,
|
||||
badge: "最划算",
|
||||
color: "from-orange-400 to-orange-500",
|
||||
},
|
||||
]
|
||||
|
||||
const privileges = [
|
||||
{
|
||||
icon: <Crown className="w-6 h-6" />,
|
||||
title: "专属身份标识",
|
||||
desc: "VIP专属标识，彰显尊贵身份",
|
||||
color: "from-yellow-400 to-orange-500",
|
||||
},
|
||||
{
|
||||
icon: <Zap className="w-6 h-6" />,
|
||||
title: "优先预约权",
|
||||
desc: "热门场馆优先预约，不再排队等待",
|
||||
color: "from-blue-400 to-blue-500",
|
||||
},
|
||||
{
|
||||
icon: <Gift className="w-6 h-6" />,
|
||||
title: "专属折扣",
|
||||
desc: "场馆预订享受VIP专属折扣优惠",
|
||||
color: "from-green-400 to-green-500",
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-6 h-6" />,
|
||||
title: "免费取消",
|
||||
desc: "预约后可免费取消，无违约金",
|
||||
color: "from-purple-400 to-purple-500",
|
||||
},
|
||||
{
|
||||
icon: <Star className="w-6 h-6" />,
|
||||
title: "专属客服",
|
||||
desc: "7x24小时VIP专属客服服务",
|
||||
color: "from-pink-400 to-pink-500",
|
||||
},
|
||||
{
|
||||
icon: <Check className="w-6 h-6" />,
|
||||
title: "高清回放",
|
||||
desc: "无限制观看高清比赛回放视频",
|
||||
color: "from-indigo-400 to-indigo-500",
|
||||
},
|
||||
]
|
||||
|
||||
const stats = [
|
||||
{ label: "活跃用户", value: "50万+", icon: <Users className="w-5 h-5" /> },
|
||||
{ label: "满意度", value: "98%", icon: <Star className="w-5 h-5" /> },
|
||||
{ label: "场馆覆盖", value: "1000+", icon: <Trophy className="w-5 h-5" /> },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50">
|
||||
{/* Header with premium gradient */}
|
||||
<div className="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 px-4 py-4 sticky top-0 z-10 shadow-2xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="/profile">
|
||||
<div className="w-10 h-10 bg-white/20 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>
|
||||
</Link>
|
||||
<h1 className="text-xl font-bold text-white">VIP会员</h1>
|
||||
<div className="w-10 h-10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* VIP Banner with enhanced styling */}
|
||||
<div className="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 px-4 pb-12 relative overflow-hidden">
|
||||
{/* Background decorations */}
|
||||
<div className="absolute top-0 left-0 w-32 h-32 bg-white/10 rounded-full -translate-x-16 -translate-y-16"></div>
|
||||
<div className="absolute top-20 right-0 w-24 h-24 bg-white/10 rounded-full translate-x-12"></div>
|
||||
<div className="absolute bottom-0 left-1/2 w-40 h-40 bg-white/5 rounded-full translate-x-20 translate-y-20"></div>
|
||||
|
||||
<div className="text-center relative z-10">
|
||||
<div className="w-24 h-24 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-4 shadow-2xl">
|
||||
<Crown className="w-12 h-12 text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-white mb-2">LIMO VIP会员</h2>
|
||||
<p className="text-white/90 text-lg">开启专属运动体验</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex justify-center space-x-8 mt-6">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center mx-auto mb-1">
|
||||
{stat.icon}
|
||||
</div>
|
||||
<div className="text-white font-bold text-lg">{stat.value}</div>
|
||||
<div className="text-white/80 text-xs">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pricing Plans with premium styling */}
|
||||
<div className="px-4 -mt-8 relative z-10">
|
||||
<div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">选择会员套餐</h3>
|
||||
<p className="text-gray-500">解锁更多专属特权</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{plans.map((plan) => (
|
||||
<div
|
||||
key={plan.id}
|
||||
onClick={() => setSelectedPlan(plan.id)}
|
||||
className={`relative border-2 rounded-3xl p-5 cursor-pointer transition-all duration-300 ${
|
||||
selectedPlan === plan.id
|
||||
? "border-transparent bg-gradient-to-br from-[#05C7C7]/10 to-[#04B5B5]/10 shadow-xl scale-[1.02]"
|
||||
: "border-gray-200/50 bg-white/50 hover:border-gray-300/50 hover:shadow-lg"
|
||||
} ${plan.popular ? "ring-2 ring-yellow-400/50" : ""}`}
|
||||
>
|
||||
{plan.popular && (
|
||||
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
|
||||
<div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-4 py-1 rounded-full text-xs font-bold shadow-lg">
|
||||
<Sparkles className="w-3 h-3 inline mr-1" />
|
||||
最受欢迎
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-center">
|
||||
<div
|
||||
className={`w-12 h-12 bg-gradient-to-r ${plan.color} rounded-2xl flex items-center justify-center mx-auto mb-3 shadow-lg`}
|
||||
>
|
||||
<Crown className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
<h4 className="font-bold text-gray-900 mb-1 text-lg">{plan.name}</h4>
|
||||
<p className="text-sm text-gray-500 mb-3">{plan.duration}</p>
|
||||
|
||||
<div className="mb-3">
|
||||
<span className="text-3xl font-bold text-[#05C7C7]">¥{plan.price}</span>
|
||||
<span className="text-sm text-gray-400 line-through ml-2">¥{plan.originalPrice}</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-r from-red-100 to-red-50 text-red-600 px-3 py-1 rounded-xl text-xs font-bold border border-red-200/50">
|
||||
{plan.discount}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedPlan === plan.id && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<div className="w-6 h-6 bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] rounded-full flex items-center justify-center shadow-lg">
|
||||
<Check className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* VIP Privileges with enhanced styling */}
|
||||
<div className="px-4 mt-8">
|
||||
<div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center justify-center">
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center mr-3 shadow-lg">
|
||||
<Crown className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
VIP专属特权
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{privileges.map((privilege, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start space-x-4 p-4 bg-gradient-to-r from-gray-50/50 to-white/50 rounded-2xl border border-gray-100/50 transition-all duration-300 hover:shadow-lg hover:scale-[1.01]"
|
||||
>
|
||||
<div
|
||||
className={`w-12 h-12 bg-gradient-to-r ${privilege.color} rounded-2xl flex items-center justify-center text-white flex-shrink-0 shadow-lg`}
|
||||
>
|
||||
{privilege.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-bold text-gray-900 text-lg mb-1">{privilege.title}</h4>
|
||||
<p className="text-sm text-gray-600 leading-relaxed">{privilege.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonials */}
|
||||
<div className="px-4 mt-8">
|
||||
<div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 text-center">用户好评</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-2xl border border-blue-100/50">
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-blue-400 to-blue-500 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-sm font-bold">张</span>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">张先生</span>
|
||||
<div className="flex space-x-1">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Star key={i} className="w-4 h-4 text-yellow-400" fill="currentColor" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">"VIP服务真的很棒，预约场馆再也不用排队了！"</p>
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-2xl border border-green-100/50">
|
||||
<div className="flex items-center space-x-2 mb-2">
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-green-400 to-green-500 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-sm font-bold">李</span>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">李女士</span>
|
||||
<div className="flex space-x-1">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Star key={i} className="w-4 h-4 text-yellow-400" fill="currentColor" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">"专属客服响应很快，解决问题很及时，值得推荐！"</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Purchase Section with enhanced styling */}
|
||||
<div className="px-4 mt-8 pb-8">
|
||||
<div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
|
||||
<div className="flex items-center justify-between mb-6 p-4 bg-gradient-to-r from-gray-50 to-white rounded-2xl border border-gray-100/50">
|
||||
<span className="text-gray-600 font-medium">选择套餐:</span>
|
||||
<div className="text-right">
|
||||
<div className="font-bold text-gray-900 text-lg">{plans.find((p) => p.id === selectedPlan)?.name}</div>
|
||||
<div className="text-2xl font-bold text-[#05C7C7]">
|
||||
¥{plans.find((p) => p.id === selectedPlan)?.price}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 hover:from-yellow-500 hover:via-orange-600 hover:to-red-600 text-white py-5 rounded-2xl font-bold text-lg shadow-2xl shadow-orange-500/30 transition-all duration-300 hover:scale-[1.02] relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<Crown className="w-6 h-6 mr-2" />
|
||||
立即开通VIP会员
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center justify-center space-x-4 mt-4 text-xs text-gray-400">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Shield className="w-3 h-3" />
|
||||
<span>安全支付</span>
|
||||
</div>
|
||||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Check className="w-3 h-3" />
|
||||
<span>随时取消</span>
|
||||
</div>
|
||||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||||
<span>7天无理由退款</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-400 text-center mt-4">开通即表示同意《VIP会员服务协议》</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Spacing */}
|
||||
<div className="h-8"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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