Skip to content

N
Neos
Commit a28e035e authored by timel's avatar timel
Browse files
Options

Merge branch 'feat/start' into 'main' 

重构起始页（landing page）

See merge request !281
parents 210aa003 01b0ade5
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 132 deletions
src/ui/Start/index.module.scss
View file @ a28e035e
.wrap { .wrap {
position: relative; position: relative;
text-align: center;
height: calc(100% - var(--header-height)); height: calc(100% - var(--header-height));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -10,124 +9,65 @@ ...@@ -10,124 +9,65 @@
} }
.main { .main {
height: 650px; height: 453px;
width: 650px; width: 1000px;
max-height: 100%;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
.neos-pic { .left {
max-width: 100%;
max-height: 100%;
filter: drop-shadow(0 0 50px #ffffff7d) drop-shadow(0 10px 0.5rem #0a3c71ce);
z-index: -1;
}
.neos-logo {
filter: drop-shadow(0 0 2rem #ffffffbc);
position: absolute;
top: 50%;
width: 90%;
height: fit-content;
left: 52%;
transform: translateX(-50%);
}
}
// 以下是粒子动画的样式
.particles-container {
width: 100%;
height: 100%;
position: relative;
}
.particle-container {
$particleNum: 200;
$particleColor: hsl(180, 100%, 80%);
position: absolute;
transform: translateY(-10vh);
animation-iteration-count: infinite;
animation-timing-function: linear;
.particle {
width: 100%;
height: 100%; height: 100%;
border-radius: 50%; display: flex;
mix-blend-mode: screen; flex-direction: column;
background-image: radial-gradient( gap: 6px;
hsl(180, 100%, 80%), .neos-logo {
hsl(180, 100%, 80%) 10%, width: 143px;
hsla(180, 100%, 80%, 0) 56% height: 34px;
);
animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
}
@keyframes fadein-frames {
0% {
opacity: 1;
} }
.title {
50% { font-size: 36px;
opacity: 0.7; font-weight: 500;
color: rgba(255, 255, 255, 0.86);
} }
.keywords {
100% { font-size: 24px;
opacity: 1; font-weight: 500;
color: rgba(235, 245, 235, 0.8);
} }
} .details {
margin-top: 31px;
@keyframes scale-frames { width: 450px;
0% { font-size: 14px;
transform: scale3d(0.4, 0.4, 1); font-weight: 500;
} line-height: 24px;
color: rgba(235, 245, 235, 0.5);
50% {
transform: scale3d(2.2, 2.2, 1);
}
100% {
transform: scale3d(0.4, 0.4, 1);
} }
} }
.right {
$particleBaseSize: 10; width: 360px;
height: 100%;
@for $i from 1 to $particleNum { position: relative;
&:nth-child(#{$i}) { overflow: hidden;
$particleSize: random($particleBaseSize); border-bottom-right-radius: 180px;
width: $particleSize + px; border-bottom-left-radius: 180px;
height: $particleSize + px; .neos-main-bg {
position: absolute;
$startPositionY: random(10) + 80; bottom: 0;
$framesName: "move-frames" + $i; width: fit-content;
$moveDuration: 28000 + random(9000) + ms; height: 360px;
border-radius: 50%;
animation-name: #{$framesName}; filter: brightness(0.7);
animation-duration: $moveDuration; }
animation-delay: random(37000) + ms; .neos-main {
position: absolute;
@keyframes #{$framesName} { bottom: 0;
from { border-bottom-right-radius: 50%;
transform: translate3d( transform: scale(1.25);
#{random(90) + vw}, transform-origin: 50% 100%;
#{$startPositionY + vh}, width: max-content;
0 filter: drop-shadow(0px 8px 8px rgba(255, 255, 255, 0.3))
); drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.8));
} transition: 0.2s;
to {
transform: translate3d(
#{random(90) + vw},
#{- $startPositionY - random(30) + vh},
0
);
}
}
.particle {
animation-delay: random(4000) + ms;
}
} }
} }
} }
src/ui/Start/index.tsx
View file @ a28e035e
...@@ -17,28 +17,31 @@ export const Component: React.FC = () => { ...@@ -17,28 +17,31 @@ export const Component: React.FC = () => {
<> <>
<Background /> <Background />
<div className={styles.wrap}> <div className={styles.wrap}>
<div className={styles["particles-container"]}> <main className={styles.main}>
{Array.from({ length: 100 }).map((_, key) => ( <div className={styles.left}>
<div key={key} className={styles["particle-container"]}> <img
<div className={styles["particle"]} /> className={styles["neos-logo"]}
src={`${NeosConfig.assetsPath}/neos-logo.svg`}
alt="YGO NEOS"
/>
<div className={styles.title}>游戏王网页对战模拟器</div>
<div className={styles.keywords}>开源、免费、轻量级</div>
<div className={styles.details}>
这是有关Neos的详细介绍。观夫明堂之宏壮也，则突兀瞳曨，乍明乍蒙，若大古元气之结空。巃嵸颓沓，若嵬若嶪，似天阃地门之开阖。尔乃划岝峉以岳立，郁穹崇而鸿纷。冠百王而垂勋，烛万象而腾文。
</div> </div>
))} <LoginBtn logined={Boolean(user)} />
</div> </div>
<main className={styles["main"]}> <div className={styles.right}>
<img <img
className={styles["neos-logo"]} className={styles["neos-main-bg"]}
src={`${NeosConfig.assetsPath}/neos-logo.svg`} src={`${NeosConfig.assetsPath}/neos-main-bg.webp`}
alt="YGO NEOS" />
/> <img
<img className={styles["neos-main"]}
className={styles["neos-pic"]} src={`${NeosConfig.assetsPath}/neos-main.webp`}
src={`${NeosConfig.assetsPath}/neos.png`} />
alt="neos" </div>
/>
</main> </main>
<div style={{ display: "flex", justifyContent: "center" }}>
<LoginBtn logined={Boolean(user)} />
</div>
</div> </div>
</> </>
); );
...@@ -55,7 +58,10 @@ const LoginBtn: React.FC<{ logined: boolean }> = ({ logined }) => { ...@@ -55,7 +58,10 @@ const LoginBtn: React.FC<{ logined: boolean }> = ({ logined }) => {
const goToMatch = () => navigate("/match"); const goToMatch = () => navigate("/match");
return ( return (
<SpecialButton onClick={logined ? goToMatch : loginViaSSO}> <SpecialButton
style={{ marginTop: "auto" }}
onClick={logined ? goToMatch : loginViaSSO}
>
<span>{logined ? "开始游戏" : "登录游戏"}</span> <span>{logined ? "开始游戏" : "登录游戏"}</span>
<RightOutlined /> <RightOutlined />
</SpecialButton> </SpecialButton>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment