Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
N
Neos
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Packages
Packages
List
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issues
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
love_飞影
Neos
Commits
01b0ade5
Commit
01b0ade5
authored
Aug 22, 2023
by
timel
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: start
parent
210aa003
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
78 additions
and
132 deletions
+78
-132
neos-assets/neos-main-bg.webp
neos-assets/neos-main-bg.webp
+0
-0
neos-assets/neos-main.webp
neos-assets/neos-main.webp
+0
-0
neos-assets/neos.png
neos-assets/neos.png
+0
-0
src/ui/Start/index.module.scss
src/ui/Start/index.module.scss
+51
-111
src/ui/Start/index.tsx
src/ui/Start/index.tsx
+27
-21
No files found.
neos-assets/neos-main-bg.webp
0 → 100644
View file @
01b0ade5
File added
neos-assets/neos-main.webp
0 → 100644
View file @
01b0ade5
File added
neos-assets/neos.png
deleted
100644 → 0
View file @
210aa003
1.33 MB
src/ui/Start/index.module.scss
View file @
01b0ade5
.wrap
{
position
:
relative
;
text-align
:
center
;
height
:
calc
(
100%
-
var
(
--
header-height
));
display
:
flex
;
flex-direction
:
column
;
...
...
@@ -10,124 +9,65 @@
}
.main
{
height
:
650px
;
width
:
650px
;
height
:
453px
;
width
:
1000px
;
max-height
:
100%
;
position
:
relative
;
display
:
flex
;
justify-content
:
center
;
.neos-pic
{
max-width
:
100%
;
max-height
:
100%
;
filter
:
drop-shadow
(
0
0
50px
#ffffff
7d
)
drop-shadow
(
0
10px
0
.5rem
#0a3c71
ce
);
z-index
:
-1
;
}
.neos-logo
{
filter
:
drop-shadow
(
0
0
2rem
#ffffff
bc
);
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%
;
justify-content
:
space-between
;
.left
{
height
:
100%
;
border-radius
:
50%
;
mix-blend-mode
:
screen
;
background-image
:
radial-gradient
(
hsl
(
180
,
100%
,
80%
)
,
hsl
(
180
,
100%
,
80%
)
10%
,
hsla
(
180
,
100%
,
80%
,
0
)
56%
);
animation
:
fadein-frames
200ms
infinite
,
scale-frames
2s
infinite
;
}
@keyframes
fadein-frames
{
0
%
{
opacity
:
1
;
display
:
flex
;
flex-direction
:
column
;
gap
:
6px
;
.neos-logo
{
width
:
143px
;
height
:
34px
;
}
50
%
{
opacity
:
0
.7
;
.title
{
font-size
:
36px
;
font-weight
:
500
;
color
:
rgba
(
255
,
255
,
255
,
0
.86
);
}
100
%
{
opacity
:
1
;
.keywords
{
font-size
:
24px
;
font-weight
:
500
;
color
:
rgba
(
235
,
245
,
235
,
0
.8
);
}
}
@keyframes
scale-frames
{
0
%
{
transform
:
scale3d
(
0
.4
,
0
.4
,
1
);
}
50
%
{
transform
:
scale3d
(
2
.2
,
2
.2
,
1
);
}
100
%
{
transform
:
scale3d
(
0
.4
,
0
.4
,
1
);
.details
{
margin-top
:
31px
;
width
:
450px
;
font-size
:
14px
;
font-weight
:
500
;
line-height
:
24px
;
color
:
rgba
(
235
,
245
,
235
,
0
.5
);
}
}
$particleBaseSize
:
10
;
@for
$i
from
1
to
$particleNum
{
&
:nth-child
(
#{
$i
}
)
{
$particleSize
:
random
(
$particleBaseSize
);
width
:
$particleSize
+
px
;
height
:
$particleSize
+
px
;
$startPositionY
:
random
(
10
)
+
80
;
$framesName
:
"move-frames"
+
$i
;
$moveDuration
:
28000
+
random
(
9000
)
+
ms
;
animation-name
:
#{
$framesName
}
;
animation-duration
:
$moveDuration
;
animation-delay
:
random
(
37000
)
+
ms
;
@keyframes
#{
$framesName
}
{
from
{
transform
:
translate3d
(
#{
random
(
90
)
+
vw
}
,
#{
$startPositionY
+
vh
}
,
0
);
}
to
{
transform
:
translate3d
(
#{
random
(
90
)
+
vw
}
,
#{
-
$startPositionY
-
random
(
30
)
+
vh
}
,
0
);
}
}
.particle
{
animation-delay
:
random
(
4000
)
+
ms
;
}
.right
{
width
:
360px
;
height
:
100%
;
position
:
relative
;
overflow
:
hidden
;
border-bottom-right-radius
:
180px
;
border-bottom-left-radius
:
180px
;
.neos-main-bg
{
position
:
absolute
;
bottom
:
0
;
width
:
fit-content
;
height
:
360px
;
border-radius
:
50%
;
filter
:
brightness
(
0
.7
);
}
.neos-main
{
position
:
absolute
;
bottom
:
0
;
border-bottom-right-radius
:
50%
;
transform
:
scale
(
1
.25
);
transform-origin
:
50%
100%
;
width
:
max-content
;
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
;
}
}
}
src/ui/Start/index.tsx
View file @
01b0ade5
...
...
@@ -17,28 +17,31 @@ export const Component: React.FC = () => {
<>
<
Background
/>
<
div
className=
{
styles
.
wrap
}
>
<
div
className=
{
styles
[
"
particles-container
"
]
}
>
{
Array
.
from
({
length
:
100
}).
map
((
_
,
key
)
=>
(
<
div
key=
{
key
}
className=
{
styles
[
"
particle-container
"
]
}
>
<
div
className=
{
styles
[
"
particle
"
]
}
/>
<
main
className=
{
styles
.
main
}
>
<
div
className=
{
styles
.
left
}
>
<
img
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
>
<
main
className=
{
styles
[
"
main
"
]
}
>
<
img
className=
{
styles
[
"
neos-logo
"
]
}
src=
{
`${NeosConfig.assetsPath}/neos-logo.svg`
}
alt=
"YGO NEOS"
/>
<
img
className=
{
styles
[
"
neos-pic
"
]
}
src=
{
`${NeosConfig.assetsPath}/neos.png`
}
alt=
"neos"
/>
<
LoginBtn
logined=
{
Boolean
(
user
)
}
/>
</
div
>
<
div
className=
{
styles
.
right
}
>
<
img
className=
{
styles
[
"
neos-main-bg
"
]
}
src=
{
`${NeosConfig.assetsPath}/neos-main-bg.webp`
}
/>
<
img
className=
{
styles
[
"
neos-main
"
]
}
src=
{
`${NeosConfig.assetsPath}/neos-main.webp`
}
/>
</
div
>
</
main
>
<
div
style=
{
{
display
:
"
flex
"
,
justifyContent
:
"
center
"
}
}
>
<
LoginBtn
logined=
{
Boolean
(
user
)
}
/>
</
div
>
</
div
>
</>
);
...
...
@@ -55,7 +58,10 @@ const LoginBtn: React.FC<{ logined: boolean }> = ({ logined }) => {
const
goToMatch
=
()
=>
navigate
(
"
/match
"
);
return
(
<
SpecialButton
onClick=
{
logined
?
goToMatch
:
loginViaSSO
}
>
<
SpecialButton
style=
{
{
marginTop
:
"
auto
"
}
}
onClick=
{
logined
?
goToMatch
:
loginViaSSO
}
>
<
span
>
{
logined
?
"
开始游戏
"
:
"
登录游戏
"
}
</
span
>
<
RightOutlined
/>
</
SpecialButton
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment