kever/epic-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
hu xiaotong
2025-04-17 07:47:17 +08:00
parent f9ef592877
commit 16eed5ff46
6 changed files with 204 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@@ -42,6 +42,7 @@
"integrity": "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==", "integrity": "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==",
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"license": "MIT OR Apache-2.0",
"bin": { "bin": {
"biome": "bin/biome" "biome": "bin/biome"
}, },

8
src/components/Footer.tsx
View File

@@ -38,7 +38,9 @@ const Footer: React.FC = () => {
</div> </div>
</div> </div>
<div> <div>
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">快速链接</h3> <h3 className="text-lg font-semibold text-[#E6B17E] mb-4">
快速链接
</h3>
<ul className="space-y-2"> <ul className="space-y-2">
<li> <li>
<a <a
@@ -128,7 +130,9 @@ const Footer: React.FC = () => {
</ul> </ul>
</div> </div>
<div> <div>
<h3 className="text-lg font-semibold text-[#E6B17E] mb-4">联系我们</h3> <h3 className="text-lg font-semibold text-[#E6B17E] mb-4">
联系我们
</h3>
<ul className="space-y-2"> <ul className="space-y-2">
<li className="text-[#9B8579] flex items-center"> <li className="text-[#9B8579] flex items-center">
<i className="fas fa-envelope mr-2 text-[#C17F59]"></i> <i className="fas fa-envelope mr-2 text-[#C17F59]"></i>

52
src/components/LoginModal.tsx
View File

@@ -11,10 +11,18 @@ const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
return ( return (
<div className="fixed inset-0 z-50 overflow-y-auto"> <div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div className="fixed inset-0 transition-opacity z-50" aria-hidden="true"> <div
className="fixed inset-0 transition-opacity z-50"
aria-hidden="true"
>
<div className="absolute inset-0 bg-black opacity-75"></div> <div className="absolute inset-0 bg-black opacity-75"></div>
</div> </div>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span> <span
className="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true"
>
&#8203;
</span>
<div className="inline-block align-bottom bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50"> <div className="inline-block align-bottom bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-50">
<div className="absolute top-4 right-4 z-50"> <div className="absolute top-4 right-4 z-50">
<button <button
@@ -33,7 +41,10 @@ const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
</h3> </h3>
<div className="mt-2"> <div className="mt-2">
<div className="mb-4"> <div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-400 mb-1"> <label
htmlFor="email"
className="block text-sm font-medium text-gray-400 mb-1"
>
电子邮箱 电子邮箱
</label> </label>
<input <input
@@ -44,7 +55,10 @@ const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
/> />
</div> </div>
<div className="mb-6"> <div className="mb-6">
<label htmlFor="password" className="block text-sm font-medium text-gray-400 mb-1"> <label
htmlFor="password"
className="block text-sm font-medium text-gray-400 mb-1"
>
密码 密码
</label> </label>
<input <input
@@ -62,12 +76,18 @@ const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
type="checkbox" type="checkbox"
className="h-4 w-4 text-yellow-500 focus:ring-yellow-500 border-gray-600 rounded" className="h-4 w-4 text-yellow-500 focus:ring-yellow-500 border-gray-600 rounded"
/> />
<label htmlFor="remember-me" className="ml-2 block text-sm text-gray-400"> <label
htmlFor="remember-me"
className="ml-2 block text-sm text-gray-400"
>
记住我 记住我
</label> </label>
</div> </div>
<div className="text-sm"> <div className="text-sm">
<a href="#" className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"> <a
href="#"
className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"
>
忘记密码? 忘记密码?
</a> </a>
</div> </div>
@@ -89,17 +109,26 @@ const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
</div> </div>
<div className="mt-6 grid grid-cols-3 gap-3"> <div className="mt-6 grid grid-cols-3 gap-3">
<div> <div>
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"> <a
href="#"
className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
>
<i className="fab fa-weixin text-xl"></i> <i className="fab fa-weixin text-xl"></i>
</a> </a>
</div> </div>
<div> <div>
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"> <a
href="#"
className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
>
<i className="fab fa-qq text-xl"></i> <i className="fab fa-qq text-xl"></i>
</a> </a>
</div> </div>
<div> <div>
<a href="#" className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"> <a
href="#"
className="w-full inline-flex justify-center py-2 px-4 border border-gray-700 rounded-md shadow-sm bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
>
<i className="fab fa-weibo text-xl"></i> <i className="fab fa-weibo text-xl"></i>
</a> </a>
</div> </div>
@@ -108,7 +137,10 @@ const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-sm text-gray-400"> <p className="text-sm text-gray-400">
还没有账号?{" "} 还没有账号?{" "}
<a href="#" className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"> <a
href="#"
className="font-medium text-yellow-500 hover:text-yellow-400 cursor-pointer"
>
立即注册 立即注册
</a> </a>
</p> </p>

4
src/index.css
View File

@@ -1,2 +1,2 @@
@import 'tailwindcss'; @import "tailwindcss";
@import '@fortawesome/fontawesome-free/css/all.min.css'; @import "@fortawesome/fontawesome-free/css/all.min.css";

10
src/index.tsx
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from "react-dom/client";
import App from './App'; import App from "./App";
import './index.css'; import "./index.css";
const rootEl = document.getElementById('root'); const rootEl = document.getElementById("root");
if (rootEl) { if (rootEl) {
const root = ReactDOM.createRoot(rootEl); const root = ReactDOM.createRoot(rootEl);
root.render( root.render(

55
src/pages/Home.tsx
View File

@@ -149,14 +149,16 @@ const Home: React.FC = () => {
if (isDragging && Math.abs(normalizedDragX) > 0) { if (isDragging && Math.abs(normalizedDragX) > 0) {
if (dragX > 0) { if (dragX > 0) {
// 向右拖动，显示上一张 // 向右拖动，显示上一张
const prevIndex = currentSlide === 0 ? slides.length - 1 : currentSlide - 1; const prevIndex =
currentSlide === 0 ? slides.length - 1 : currentSlide - 1;
return [ return [
{ index: prevIndex, opacity: Math.min(normalizedDragX, 1) }, { index: prevIndex, opacity: Math.min(normalizedDragX, 1) },
{ index: currentSlide, opacity: Math.max(1 - normalizedDragX, 0) }, { index: currentSlide, opacity: Math.max(1 - normalizedDragX, 0) },
]; ];
} else { } else {
// 向左拖动，显示下一张 // 向左拖动，显示下一张
const nextIndex = currentSlide === slides.length - 1 ? 0 : currentSlide + 1; const nextIndex =
currentSlide === slides.length - 1 ? 0 : currentSlide + 1;
return [ return [
{ index: currentSlide, opacity: Math.max(1 + normalizedDragX, 0) }, { index: currentSlide, opacity: Math.max(1 + normalizedDragX, 0) },
{ index: nextIndex, opacity: Math.min(-normalizedDragX, 1) }, { index: nextIndex, opacity: Math.min(-normalizedDragX, 1) },
@@ -357,8 +359,8 @@ const Home: React.FC = () => {
onTouchMove={handleTouchMove} onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
style={{ style={{
cursor: isDragging ? 'grabbing' : 'grab', cursor: isDragging ? "grabbing" : "grab",
touchAction: 'none' touchAction: "none",
}} }}
> >
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">
@@ -368,7 +370,9 @@ const Home: React.FC = () => {
className="absolute inset-0" className="absolute inset-0"
style={{ style={{
opacity, opacity,
transition: slideTransition ? 'opacity 0.3s ease-out' : 'none' transition: slideTransition
? "opacity 0.3s ease-out"
: "none",
}} }}
> >
<div className="absolute inset-0 bg-gradient-to-r from-[#1A1412] via-[#1A1412]/90 to-transparent z-10"></div> <div className="absolute inset-0 bg-gradient-to-r from-[#1A1412] via-[#1A1412]/90 to-transparent z-10"></div>
@@ -442,7 +446,9 @@ const Home: React.FC = () => {
新英雄预告 新英雄预告
</span> </span>
</div> </div>
<h2 className="text-2xl font-bold text-[#E6B17E]">即将登场</h2> <h2 className="text-2xl font-bold text-[#E6B17E]">
即将登场
</h2>
</div> </div>
<a <a
href="#" href="#"
@@ -475,9 +481,7 @@ const Home: React.FC = () => {
<h3 className="text-lg font-bold text-[#E6B17E]"> <h3 className="text-lg font-bold text-[#E6B17E]">
{character.name} {character.name}
</h3> </h3>
<span className="text-[#C17F59] text-sm"> <span className="text-[#C17F59] text-sm">即将登场</span>
即将登场
</span>
</div> </div>
<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight"> <p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
{character.description} {character.description}
@@ -509,7 +513,9 @@ const Home: React.FC = () => {
平衡性调整 平衡性调整
</span> </span>
</div> </div>
<h2 className="text-2xl font-bold text-[#E6B17E]">最新更新</h2> <h2 className="text-2xl font-bold text-[#E6B17E]">
最新更新
</h2>
</div> </div>
<a <a
href="#" href="#"
@@ -542,9 +548,7 @@ const Home: React.FC = () => {
<h3 className="text-lg font-bold text-[#E6B17E]"> <h3 className="text-lg font-bold text-[#E6B17E]">
{character.name} {character.name}
</h3> </h3>
<span className="text-[#C17F59] text-sm"> <span className="text-[#C17F59] text-sm">最新更新</span>
最新更新
</span>
</div> </div>
<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight"> <p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
{character.description} {character.description}
@@ -691,7 +695,10 @@ const Home: React.FC = () => {
</thead> </thead>
<tbody className="divide-y divide-[#3A2E2A]"> <tbody className="divide-y divide-[#3A2E2A]">
{battleData.map((data) => ( {battleData.map((data) => (
<tr key={data.rank} className="hover:bg-[#3A2E2A] transition-colors duration-200"> <tr
key={data.rank}
className="hover:bg-[#3A2E2A] transition-colors duration-200"
>
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div <div
className={`w-6 h-6 rounded-full flex items-center justify-center ${ className={`w-6 h-6 rounded-full flex items-center justify-center ${
@@ -735,11 +742,15 @@ const Home: React.FC = () => {
</div> </div>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<span className="text-[#9B8579]">开始时间</span> <span className="text-[#9B8579]">开始时间</span>
<span className="text-[#E6B17E] font-medium">2025-03-15</span> <span className="text-[#E6B17E] font-medium">
2025-03-15
</span>
</div> </div>
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<span className="text-[#9B8579]">结束时间</span> <span className="text-[#9B8579]">结束时间</span>
<span className="text-[#E6B17E] font-medium">2025-06-15</span> <span className="text-[#E6B17E] font-medium">
2025-06-15
</span>
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-[#9B8579]">剩余时间</span> <span className="text-[#9B8579]">剩余时间</span>
@@ -769,7 +780,9 @@ const Home: React.FC = () => {
</div> </div>
<span className="text-[#9B8579]">VS</span> <span className="text-[#9B8579]">VS</span>
<div className="flex items-center"> <div className="flex items-center">
<span className="mx-2 text-[#F44336] font-bold">1</span> <span className="mx-2 text-[#F44336] font-bold">
1
</span>
<span className="font-medium text-[#E6B17E]"> <span className="font-medium text-[#E6B17E]">
风暴战队 风暴战队
</span> </span>
@@ -792,7 +805,9 @@ const Home: React.FC = () => {
</div> </div>
<span className="text-[#9B8579]">VS</span> <span className="text-[#9B8579]">VS</span>
<div className="flex items-center"> <div className="flex items-center">
<span className="mx-2 text-[#F44336] font-bold">2</span> <span className="mx-2 text-[#F44336] font-bold">
2
</span>
<span className="font-medium text-[#E6B17E]"> <span className="font-medium text-[#E6B17E]">
雷霆战队 雷霆战队
</span> </span>
@@ -809,7 +824,9 @@ const Home: React.FC = () => {
<span className="font-medium text-[#E6B17E]"> <span className="font-medium text-[#E6B17E]">
幽灵战队 幽灵战队
</span> </span>
<span className="mx-2 text-[#F44336] font-bold">0</span> <span className="mx-2 text-[#F44336] font-bold">
0
</span>
</div> </div>
<span className="text-[#9B8579]">VS</span> <span className="text-[#9B8579]">VS</span>
<div className="flex items-center"> <div className="flex items-center">