Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
兴科Sinco
开源百科
提交
8be1296d
开
开源百科
项目概览
兴科Sinco
/
开源百科
与 Fork 源项目一致
Fork自
GitCode官方 / 开源百科
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
开
开源百科
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
8be1296d
编写于
12月 19, 2020
作者:
X
xjh22222228
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 新增暗黑模式
上级
e7a1bc3a
变更
30
隐藏空白更改
内联
并排
Showing
30 changed file
with
314 addition
and
253 deletion
+314
-253
README.md
README.md
+2
-1
config/index.ts
config/index.ts
+9
-6
src/app/app.module.ts
src/app/app.module.ts
+2
-2
src/assets/img/light.svg
src/assets/img/light.svg
+1
-0
src/assets/img/transparent.gif
src/assets/img/transparent.gif
+0
-0
src/components/fixbar/index.component.html
src/components/fixbar/index.component.html
+7
-6
src/components/fixbar/index.component.scss
src/components/fixbar/index.component.scss
+6
-0
src/components/fixbar/index.component.ts
src/components/fixbar/index.component.ts
+27
-1
src/components/footer/footer.component.html
src/components/footer/footer.component.html
+1
-1
src/components/loading/loading.component.html
src/components/loading/loading.component.html
+0
-3
src/components/loading/loading.component.scss
src/components/loading/loading.component.scss
+0
-12
src/components/loading/loading.component.ts
src/components/loading/loading.component.ts
+0
-15
src/components/multiple-site/index.component.html
src/components/multiple-site/index.component.html
+31
-0
src/components/multiple-site/index.component.scss
src/components/multiple-site/index.component.scss
+55
-0
src/components/multiple-site/index.component.ts
src/components/multiple-site/index.component.ts
+14
-0
src/components/no-data/no-data.component.html
src/components/no-data/no-data.component.html
+1
-1
src/components/search-engine/search-engine.component.html
src/components/search-engine/search-engine.component.html
+3
-2
src/components/search-engine/search-engine.component.scss
src/components/search-engine/search-engine.component.scss
+2
-5
src/dark.scss
src/dark.scss
+63
-3
src/styles.scss
src/styles.scss
+1
-4
src/types/index.d.ts
src/types/index.d.ts
+1
-0
src/utils/index.ts
src/utils/index.ts
+12
-1
src/utils/ripple.ts
src/utils/ripple.ts
+1
-1
src/view/app/default/app.component.html
src/view/app/default/app.component.html
+2
-2
src/view/index/light/index.component.html
src/view/index/light/index.component.html
+25
-51
src/view/index/light/index.component.scss
src/view/index/light/index.component.scss
+13
-28
src/view/index/light/index.component.ts
src/view/index/light/index.component.ts
+1
-2
src/view/index/sim/index.component.html
src/view/index/sim/index.component.html
+26
-45
src/view/index/sim/index.component.scss
src/view/index/sim/index.component.scss
+6
-59
src/view/index/sim/index.component.ts
src/view/index/sim/index.component.ts
+2
-2
未找到文件。
README.md
浏览文件 @
8be1296d
...
...
@@ -60,7 +60,8 @@
-
[√] 支持自定义引擎搜索。
-
[√] 纯静态, 提供自动化部署功能。
-
[√] 完全开源,轻松定制化。
-
[√] 多款主题。
-
[√] 多款主题切换。
-
[√] 支持暗黑模式。
## 贡献
...
...
config/index.ts
浏览文件 @
8be1296d
...
...
@@ -5,12 +5,17 @@
*/
import
{
ISearchEngineProps
,
ThemeType
}
from
'
../src/types
'
// 主题: light | sim
// 网站标题
export
const
TITLE
=
'
发现导航 - 精选实用导航网站
'
// 默认主题: light | sim
export
const
THEME
:
ThemeType
=
'
light
'
// 海报图, 只支持 sim 主题
export
const
POSTER_IMAGE
=
'
assets/img/wallpaper.jpg
'
// 搜索引擎列表, 为空时不显示搜索引擎
// 以下系统内置了一些,需要其他的自行添加
// 自定义引擎 icon 建议使用网络图标 减少入侵
// 自定义引擎 icon 请使用网络图标
export
const
SEARCH_ENGINE_LIST
:
ISearchEngineProps
[]
=
[
{
name
:
'
站内
'
,
...
...
@@ -52,9 +57,6 @@ export const SEARCH_ENGINE_LIST: ISearchEngineProps[] = [
}
]
// 网站标题
export
const
TITLE
=
'
发现导航 - 精选实用导航网站
'
// Git 仓库地址, 没有填空字符串
export
const
GIT_REPO_URL
=
'
https://github.com/xjh22222228/nav
'
...
...
@@ -81,6 +83,7 @@ export const APP_LANGUAGE = [
'
Git
'
]
// 只支持 light 主题
// http://www.nav3.cn/#/index?q=grabient
export
const
BACKGROUND_LINEAR
=
[
'
linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)
'
,
...
...
src/app/app.module.ts
浏览文件 @
8be1296d
...
...
@@ -12,10 +12,10 @@ import LightComponent from '../view/index/light/index.component'
import
SimComponent
from
'
../view/index/sim/index.component
'
import
WebpComponent
from
'
../view/app/default/app.component
'
import
{
FixbarComponent
}
from
'
../components/fixbar/index.component
'
import
{
MultipleSiteComponent
}
from
'
../components/multiple-site/index.component
'
import
{
FooterComponent
}
from
'
../components/footer/footer.component
'
import
{
IconGitComponent
}
from
'
../components/icon-git/icon-git.component
'
import
{
NoDataComponent
}
from
'
../components/no-data/no-data.component
'
import
{
LoadingComponent
}
from
'
../components/loading/loading.component
'
import
{
SearchEngineComponent
}
from
'
../components/search-engine/search-engine.component
'
const
appRoutes
:
Routes
=
[
...
...
@@ -45,10 +45,10 @@ const appRoutes: Routes = [
SimComponent
,
WebpComponent
,
FixbarComponent
,
MultipleSiteComponent
,
FooterComponent
,
IconGitComponent
,
NoDataComponent
,
LoadingComponent
,
SearchEngineComponent
],
imports
:
[
...
...
src/assets/img/light.svg
0 → 100644
浏览文件 @
8be1296d
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
t=
"1608359352079"
class=
"icon"
viewBox=
"0 0 1024 1024"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
p-id=
"1246"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"200"
height=
"200"
><defs><style
type=
"text/css"
></style></defs><path
d=
"M728.064 573.44a164.864 164.864 0 1 0-164.864 164.864 164.864 164.864 0 0 0 164.864-164.864z"
fill=
"#F4CA1C"
p-id=
"1247"
></path><path
d=
"M512.5632 771.584a258.43712 258.43712 0 1 1 258.43712-258.43712A258.72896 258.72896 0 0 1 512.5632 771.584z m0-448.86016a190.42816 190.42816 0 1 0 190.4128 190.40256 190.63808 190.63808 0 0 0-190.4128-190.42304z m1.13664-128.67584a34.00192 34.00192 0 0 1-34.00192-34.00704V95.44704a34.00704 34.00704 0 0 1 68.00896 0V160.0512a34.00704 34.00704 0 0 1-34.00704 33.9968z m0 768.512a34.00192 34.00192 0 0 1-34.00192-34.00192V863.9488a34.00704 34.00704 0 1 1 68.00896 0v64.60928a34.00192 34.00192 0 0 1-34.00704 34.00192z m414.85824-416.55296H863.9488a34.00704 34.00704 0 1 1 0-68.00896h64.60928a34.00704 34.00704 0 0 1 0 68.00896z m-768.512 0H95.44704a34.00704 34.00704 0 0 1 0-68.00896H160.0512a34.00704 34.00704 0 0 1 0 68.00896z m600.81664-248.86784a34.00192 34.00192 0 0 1-24.064-58.04544l45.69088-45.68576a34.00192 34.00192 0 0 1 48.08192 48.08704L784.896 287.1808a33.88416 33.88416 0 0 1-24.03328 9.9584zM217.45152 840.5504a34.00704 34.00704 0 0 1-24.064-58.05568l45.68576-45.68064a34.00704 34.00704 0 1 1 48.10752 48.08192l-45.68576 45.68064a33.91488 33.91488 0 0 1-24.04352 9.97376z m589.10208 0a33.90976 33.90976 0 0 1-24.0384-9.9584l-45.696-45.696a34.00704 34.00704 0 1 1 48.08704-48.09728l45.68576 45.68064a34.00704 34.00704 0 0 1-24.04352 58.07104zM263.13728 297.1392a33.88416 33.88416 0 0 1-24.064-9.96352l-45.68576-45.68576a34.00192 34.00192 0 1 1 48.08704-48.08192L287.1808 239.104a34.00192 34.00192 0 0 1-24.04352 58.0352z"
fill=
"#595BB3"
p-id=
"1248"
></path></svg>
\ No newline at end of file
src/assets/img/transparent.gif
已删除
100644 → 0
浏览文件 @
e7a1bc3a
43 字节
src/components/fixbar/index.component.html
浏览文件 @
8be1296d
<div
class=
"fixbar"
>
<div
class=
"wrapper"
(click)=
"collapse()"
>
<div
class=
"wrapper
dark-bg dark-border-color dark-action-hover
"
(click)=
"collapse()"
>
<i
class=
"iconfont iconweibiaoti25 collapse"
[class.active]=
"collapsed"
></i>
</div>
<!-- <div class="wrapper" (click)="toggleMode()">
<i class="iconfont icondark" [class.iconA]="isDark" [class.dark]="!isDark"></i>
</div> -->
<div
class=
"wrapper dark-bg dark-border-color dark-action-hover"
(click)=
"toggleMode()"
>
<i
class=
"iconfont icondark dark"
*ngIf=
"!isDark"
></i>
<img
class=
"iconfont icondark"
src=
"assets/img/light.svg"
*ngIf=
"isDark"
>
</div>
<div
class=
"wrapper"
(click)=
"scrollTop()"
>
<i
class=
"iconfont iconjiantouarrow483
icon
arrow"
></i>
<div
class=
"wrapper
dark-bg dark-border-color dark-action-hover
"
(click)=
"scrollTop()"
>
<i
class=
"iconfont iconjiantouarrow483 arrow"
></i>
</div>
</div>
src/components/fixbar/index.component.scss
浏览文件 @
8be1296d
...
...
@@ -3,6 +3,7 @@
position
:
fixed
;
bottom
:
30px
;
right
:
15px
;
user-select
:
none
;
.wrapper
{
width
:
40px
;
...
...
@@ -23,6 +24,11 @@
}
}
img
{
width
:
25px
;
height
:
25px
;
}
i
{
transition
:
.1s
linear
;
display
:
inline-block
;
...
...
src/components/fixbar/index.component.ts
浏览文件 @
8be1296d
import
{
Component
,
Output
,
EventEmitter
,
Input
}
from
'
@angular/core
'
import
{
isDark
as
isDarkFn
,
randomBgImg
}
from
'
../../utils
'
@
Component
({
selector
:
'
app-fixbar
'
,
...
...
@@ -8,10 +9,26 @@ import { Component, Output, EventEmitter, Input } from '@angular/core'
export
class
FixbarComponent
{
@
Input
()
collapsed
:
boolean
@
Input
()
randomBg
:
boolean
@
Input
()
selector
:
string
@
Output
()
onCollapse
=
new
EventEmitter
()
isDark
:
boolean
=
false
isDark
:
boolean
=
isDarkFn
()
ngOnInit
()
{
if
(
isDarkFn
())
{
document
.
body
.
classList
.
add
(
'
dark-container
'
)
}
}
scrollTop
()
{
if
(
this
.
selector
)
{
const
el
=
document
.
querySelector
(
this
.
selector
)
if
(
el
)
{
el
.
scrollTop
=
0
}
return
}
window
.
scrollTo
({
top
:
0
,
behavior
:
'
smooth
'
...
...
@@ -24,5 +41,14 @@ export class FixbarComponent {
toggleMode
()
{
this
.
isDark
=
!
this
.
isDark
window
.
localStorage
.
setItem
(
'
IS_DARK
'
,
String
(
Number
(
this
.
isDark
)))
document
.
body
.
classList
.
toggle
(
'
dark-container
'
)
if
(
this
.
isDark
)
{
const
el
=
document
.
getElementById
(
'
random-light-bg
'
)
el
?.
parentNode
?.
removeChild
?.(
el
)
}
else
{
this
.
randomBg
&&
randomBgImg
()
}
}
}
src/components/footer/footer.component.html
浏览文件 @
8be1296d
<footer
class=
"footer"
[class]=
"className"
>
<footer
class=
"footer
dark-text
"
[class]=
"className"
>
<div
class=
"total"
[ngStyle]=
"{marginBottom: !FOOTER_DESC && '5px'}"
>
共收录 {{ totalWeb }} 个网站
</div>
...
...
src/components/loading/loading.component.html
已删除
100644 → 0
浏览文件 @
e7a1bc3a
<div
class=
"loading"
>
<img
src=
"assets/img/loading.gif"
alt=
""
/>
</div>
src/components/loading/loading.component.scss
已删除
100644 → 0
浏览文件 @
e7a1bc3a
.loading
{
z-index
:
6666
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
background
:
rgb
(
251
,
251
,
251
);
display
:
flex
;
align-items
:
flex-start
;
justify-content
:
center
;
}
src/components/loading/loading.component.ts
已删除
100644 → 0
浏览文件 @
e7a1bc3a
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
@
Component
({
selector
:
'
app-loading
'
,
templateUrl
:
'
./loading.component.html
'
,
styleUrls
:
[
'
./loading.component.scss
'
]
})
export
class
LoadingComponent
implements
OnInit
{
constructor
()
{
}
ngOnInit
():
void
{
}
}
src/components/multiple-site/index.component.html
0 → 100644
浏览文件 @
8be1296d
<div
class=
"mark dark-item-active"
*ngIf=
"dataSource && dataSource.language && dataSource.language.length > 0"
>
<div
class=
"button-box"
>
<a
[href]=
"dataSource.language[0]"
class=
"zh"
target=
"_blank"
*ngIf=
"dataSource.language[0]"
rel=
"noopener noreferer"
>
{{ language[0] }}
</a>
<a
[href]=
"dataSource.language[1]"
class=
"zh"
target=
"_blank"
*ngIf=
"dataSource.language[1]"
rel=
"noopener noreferer"
>
{{ language[1] }}
</a>
<a
[href]=
"dataSource.language[2]"
class=
"zh"
target=
"_blank"
*ngIf=
"dataSource.language[2]"
rel=
"noopener noreferer"
>
{{ language[2] }}
</a>
</div>
</div>
src/components/multiple-site/index.component.scss
0 → 100644
浏览文件 @
8be1296d
.mark
{
z-index
:
28
;
position
:
absolute
;
bottom
:
-50px
;
left
:
0
;
width
:
100%
;
padding
:
10px
0
5px
0px
;
background
:
#fbfbfb
;
cursor
:
auto
;
display
:
flex
;
justify-content
:
center
;
align-content
:
center
;
transition
:
.1s
linear
;
.button-box
{
width
:
100%
;
text-align
:
center
;
}
a
{
display
:
inline-block
;
position
:
relative
;
width
:
50px
;
font-size
:
12px
;
padding
:
3px
0
;
border
:
none
;
background
:
#2db7f5
;
color
:
#fff
;
border-radius
:
3px
;
overflow
:
hidden
;
&
:not
(
:nth-last-child
(
1
))
{
margin-right
:
10px
;
}
&
:after
{
content
:
""
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
background
:
#000
;
opacity
:
0
;
}
&
:active:after
{
opacity
:
.2
;
}
}
.zh
{
background
:
#26a2ff
;
}
}
src/components/multiple-site/index.component.ts
0 → 100644
浏览文件 @
8be1296d
import
{
Component
,
Input
}
from
'
@angular/core
'
import
{
INDEX_LANGUAGE
}
from
'
../../../config
'
import
{
INavFourProp
}
from
'
../../types
'
@
Component
({
selector
:
'
app-multiple-site
'
,
templateUrl
:
'
./index.component.html
'
,
styleUrls
:
[
'
./index.component.scss
'
]
})
export
class
MultipleSiteComponent
{
@
Input
()
dataSource
:
INavFourProp
language
:
string
[]
=
INDEX_LANGUAGE
}
src/components/no-data/no-data.component.html
浏览文件 @
8be1296d
<div
class=
"no-result"
>
<div
class=
"no-result
dark-text
"
>
对不起,没有找到您想要的结果~
<div
class=
"back"
>
<span
(click)=
"goBack()"
>
Back
</span>
...
...
src/components/search-engine/search-engine.component.html
浏览文件 @
8be1296d
<div
class=
"search-engine"
*ngIf=
"SEARCH_ENGINE_LIST && SEARCH_ENGINE_LIST.length > 0"
>
<div
class=
"input-wrapper"
>
<div
class=
"input-wrapper
dark-bg dark-border-color
"
>
<div
class=
"left-icon"
(click)=
"toggleEngine($event)"
...
...
@@ -9,6 +9,7 @@
<input
id=
"search-engine-input"
class=
"dark-input"
type=
"text"
autofocus
[placeholder]=
"currentEngine.placeholder || ''"
...
...
@@ -16,7 +17,7 @@
(keyup)=
"onKey($event)"
/>
<i
class=
"search-icon iconfont iconsousuo"
(click)=
"triggerSearch()"
></i>
<i
class=
"search-icon iconfont iconsousuo
dark-text
"
(click)=
"triggerSearch()"
></i>
</div>
<div
class=
"engine-main"
*ngIf=
"showEngine"
>
...
...
src/components/search-engine/search-engine.component.scss
浏览文件 @
8be1296d
...
...
@@ -23,17 +23,14 @@ $width: 500px;
border-color
:
transparent
;
font-size
:
16px
;
transition
:
all
.3s
;
background-color
:
transparent
;
&
::placeholder
{
font-size
:
14px
;
}
&
:hover
{
border-color
:
#40a9ff
;
}
&
:focus
{
border-color
:
#40a9ff
;
border-color
:
#40a9ff
!
important
;
box-shadow
:
0
0
0
2px
rgba
(
24
,
144
,
255
,
0
.2
);
}
}
...
...
src/dark.scss
浏览文件 @
8be1296d
.dark
{
.dark-container
{
.dark
{
.sim-bg
{
background-color
:
#0d1117
!
important
;
&
-primary
{
color
:
#58a6ff
!
important
;
font-weight
:
600
;
}
&
-input
{
color
:
#f0f6fc
!
important
;
border-color
:
#21262d
!
important
;
&
::placeholder
{
color
:
#c9d1d9
!
important
;
}
&
:focus
{
color
:
#c9d1d9
!
important
;
}
}
&
-title
{
color
:
#c9d1d9
!
important
;
font-weight
:
600
!
important
;
}
&
-bg
{
background-color
:
#0d1117
!
important
;
}
&
-text
{
color
:
#6e7681
!
important
;
}
&
-text-active
{
color
:
#c9d1d9
!
important
;
font-weight
:
600
;
}
&
-border-color
{
border-color
:
#30363d
!
important
;
}
&
-item-active
{
background-color
:
#21262d
!
important
;
border-color
:
#21262d
!
important
;
color
:
#c9d1d9
!
important
;
font-weight
:
600
;
}
&
-scrollbar
{
&
::-webkit-scrollbar
{
background-color
:
#0d1117
!
important
;
}
}
// fix-bar
&
-action-hover
:hover
{
background-color
:
#c9d1d9
!
important
;
&
>
*
{
color
:
#fff
!
important
;
}
}
}
}
src/styles.scss
浏览文件 @
8be1296d
...
...
@@ -96,10 +96,7 @@ em {
.touch-active
:active
{
background
:
rgba
(
0
,
0
,
0
,
.2
)
!
important
;
}
.container
{
width
:
1000px
;
margin
:
0
auto
;
}
.cursor-pointer
{
cursor
:
pointer
;
}
...
...
src/types/index.d.ts
浏览文件 @
8be1296d
...
...
@@ -8,6 +8,7 @@ export interface INavFourProp {
name
:
string
desc
:
string
url
?:
string
language
?:
string
|
null
|
undefined
[]
}
export
interface
INavThreeProp
{
...
...
src/utils/index.ts
浏览文件 @
8be1296d
...
...
@@ -91,8 +91,14 @@ export function totalWeb(): number {
return
total
}
let
randomTimer
export
function
randomBgImg
()
{
if
(
isDark
())
return
clearInterval
(
randomTimer
)
const
el
=
document
.
createElement
(
'
div
'
)
el
.
id
=
'
random-light-bg
'
el
.
style
.
cssText
=
'
position:fixed;top:0;left:0;right:0;bottom:0;z-index:-3;transition: 1s linear;
'
el
.
style
.
backgroundImage
=
BACKGROUND_LINEAR
[
randomInt
(
BACKGROUND_LINEAR
.
length
)]
document
.
body
.
appendChild
(
el
)
...
...
@@ -106,7 +112,7 @@ export function randomBgImg() {
},
1000
)
}
setInterval
(
setBg
,
10000
)
randomTimer
=
setInterval
(
setBg
,
10000
)
}
export
function
onImgError
(
e
:
any
)
{
...
...
@@ -230,3 +236,8 @@ export function imgErrorInRemove(e) {
const
el
=
e
.
currentTarget
;
el
?.
parentNode
?.
removeChild
?.(
el
)
}
export
function
isDark
():
boolean
{
const
isDark
=
Boolean
(
Number
(
window
.
localStorage
.
getItem
(
'
IS_DARK
'
)))
return
isDark
}
src/utils/ripple.ts
浏览文件 @
8be1296d
...
...
@@ -21,7 +21,7 @@ export function setAnnotate(querySelector = '.top-nav .ripple-btn') {
const
annotation
=
annotate
(
elList
[
page
],
{
type
:
'
underline
'
,
color
:
'
red
'
,
color
:
'
#f9826c
'
,
padding
:
3
,
strokeWidth
:
3
})
...
...
src/view/app/default/app.component.html
浏览文件 @
8be1296d
...
...
@@ -15,7 +15,8 @@
*ngFor=
"let item of nav; let i = index;"
(click)=
"handleCilckNav(i)"
[class.active]=
"page === i"
class=
"nav-title"
>
class=
"nav-title"
>
{{ item.title }}
</div>
</nav>
...
...
@@ -44,7 +45,6 @@
<img
*ngIf=
"el.icon || item.icon; else icon"
[src]=
"el.icon || item.icon"
alt=
""
class=
"icon"
(error)=
"onImgError($event)"
>
...
...
src/view/index/light/index.component.html
浏览文件 @
8be1296d
<div
class=
"index-wrapper"
>
<main
class=
"homepage container"
>
<div
class=
"fixed-collapse"
(click)=
"onCollapseAll()"
[class.active]=
"websiteList[page].nav[id].collapsed"
<main
class=
"homepage dark-border-color"
>
<app-fixbar
(onCollapse)=
"onCollapseAll()"
[collapsed]=
"websiteList[page].nav[id].collapsed"
selector=
".main"
[randomBg]=
"true"
>
<i
class=
"iconfont iconweibiaoti25"
></i>
</div>
</app-fixbar>
<nav
class=
"top-nav user-select-none"
>
<nav
class=
"top-nav user-select-none
dark-border-color dark-bg
"
>
<a
*ngFor=
"let item of websiteList; let i = index;"
(click)=
"handleCilckTopNav(i)"
[class.active]=
"page === i"
class=
"ripple-btn"
[class.dark-text-active]=
"page === i"
class=
"ripple-btn dark-text"
>
{{ item.title }}
</a>
</nav>
<section
class=
"index-section user-select-none"
>
<aside
class=
"sidebar"
id=
"sidebar"
>
<section
class=
"index-section user-select-none
dark-bg
"
>
<aside
class=
"sidebar
dark-bg dark-border-color
"
id=
"sidebar"
>
<ul>
<li
class=
"tag"
*ngFor=
"let item of websiteList[page].nav; let i = index"
class=
"tag dark-text"
[class.active]=
"id === i"
[class.dark-item-active]=
"id === i"
(click)=
"handleSidebarNav(i)"
*ngFor=
"let item of websiteList[page].nav; let i = index"
>
<a
class=
"ripple-btn"
*ngIf=
"item.title"
>
{{ item.title }}
</a>
</li>
</ul>
</aside>
<div
class=
"main"
>
<div
class=
"main
dark-scrollbar
"
>
<app-search-engine
(onSearch)=
"onSearch($event)"
></app-search-engine>
<ul
*ngIf=
"currentList.length && currentList[0].nav"
>
<li
*ngFor=
"let item of currentList; let i=index"
>
<div
class=
"title-wrapper"
*ngIf=
"item.title"
>
<div
class=
"title-wrapper
dark-border-color
"
*ngIf=
"item.title"
>
<h2
class=
"block-title"
>
<span
(click)=
"onCollapse(item, i)"
class=
"cursor-pointer"
class=
"cursor-pointer
dark-primary
"
>
{{ item.title }} x {{ item.nav.length }}
</span>
...
...
@@ -64,51 +66,21 @@
</div>
<div
class=
"row"
*ngIf=
"!item.collapsed"
>
<div
class=
"click-btn"
*ngFor=
"let el of item.nav"
>
<div
class=
"click-btn
dark-border-color
"
*ngFor=
"let el of item.nav"
>
<a
[href]=
"el.url"
target=
"_blank"
rel=
"noopener noreferer"
>
<div
class=
"top"
>
<img
*ngIf=
"el.icon || item.icon || websiteList[page].nav[id].icon; else icon"
[src]=
"el.icon || item.icon || websiteList[page].nav[id].icon"
class=
"icon"
class=
"icon
dark-border-color
"
(error)=
"onImgError($event)"
>
<em
class=
"name
"
[innerHtml
]=
"el.name"
></em>
<em
class=
"name
dark-primary"
[innerHtml]=
"el.name"
[title
]=
"el.name"
></em>
</div>
<div
class=
"desc"
[innerHtml]=
"el.desc"
></div>
<div
class=
"desc
dark-border-color dark-text
"
[innerHtml]=
"el.desc"
></div>
</a>
<div
class=
"mark"
*ngIf=
"el.language && el.language.length > 0"
>
<div
class=
"button-box"
>
<a
[href]=
"el.language[0]"
class=
"zh"
target=
"_blank"
*ngIf=
"el.language[0]"
rel=
"noopener noreferer"
>
{{ language[0] }}
</a>
<a
[href]=
"el.language[1]"
class=
"zh"
target=
"_blank"
*ngIf=
"el.language[1]"
rel=
"noopener noreferer"
>
{{ language[1] }}
</a>
<a
[href]=
"el.language[2]"
class=
"zh"
target=
"_blank"
*ngIf=
"el.language[2]"
rel=
"noopener noreferer"
>
{{ language[2] }}
</a>
</div>
</div>
<app-multiple-site
[dataSource]=
"ele"
></app-multiple-site>
</div>
</div>
</li>
...
...
@@ -124,3 +96,5 @@
<app-footer></app-footer>
</div>
<div
class=
"layer-bg dark-bg"
></div>
src/view/index/light/index.component.scss
浏览文件 @
8be1296d
.layer-bg
{
z-index
:
-1
;
position
:
fixed
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
}
.index-wrapper
{
display
:
flex
;
flex-direction
:
column
;
...
...
@@ -6,39 +15,15 @@
}
.homepage
{
width
:
1000px
;
margin
:
0
auto
;
flex
:
1
;
position
:
relative
;
background
:
rgb
(
251
,
251
,
251
);
border-radius
:
5px
;
overflow
:
hidden
;
transition
:
.1s
linear
;
.fixed-collapse
{
z-index
:
99999
;
position
:
absolute
;
bottom
:
30px
;
right
:
30px
;
width
:
39px
;
height
:
39px
;
background
:
#eee
;
border-radius
:
50%
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
cursor
:
pointer
;
transform
:
rotate
(
-270deg
);
transition
:
.1s
linear
;
overflow
:
hidden
;
&
.active
{
transform
:
rotate
(
-360deg
);
}
.iconfont
{
font-size
:
22px
;
color
:
#666
;
}
}
border
:
1px
solid
transparent
;
.top-nav
{
padding
:
10px
;
...
...
@@ -137,7 +122,7 @@
.name
{
display
:
inline-block
;
font-size
:
1
6
px
;
font-size
:
1
5
px
;
margin-left
:
5px
;
width
:
calc
(
100%
-
50px
);
white-space
:
nowrap
;
...
...
src/view/index/light/index.component.ts
浏览文件 @
8be1296d
import
{
Component
}
from
'
@angular/core
'
import
{
Router
,
ActivatedRoute
}
from
'
@angular/router
'
import
{
INDEX_LANGUAGE
,
GIT_REPO_URL
}
from
'
../../../../config
'
import
{
GIT_REPO_URL
}
from
'
../../../../config
'
import
{
INavProps
,
INavThreeProp
}
from
'
../../../types
'
import
{
debounce
,
...
...
@@ -30,7 +30,6 @@ export default class HomeComponent {
page
:
number
=
0
searchKeyword
:
string
=
''
showInput
=
false
language
:
string
[]
=
INDEX_LANGUAGE
GIT_REPO_URL
:
string
=
GIT_REPO_URL
ngOnInit
()
{
...
...
src/view/index/sim/index.component.html
浏览文件 @
8be1296d
<div
class=
"sim"
>
<div
class=
"wallpaper"
>
<h1
class=
"title"
>
{{ title }}
</h1>
<h2
class=
"description"
>
这里收录多达
<b>
{{ totalWeb }}
</b>
个优质网站, 助您工作、学习和生活
</h2>
<div
class=
"wallpaper"
[ngStyle]=
"{ 'background-image': 'url(' + POSTER_IMAGE + ')' }"
>
<h1
class=
"title
dark-title
"
>
{{ title }}
</h1>
<h2
class=
"description
dark-text-active
"
>
这里收录多达
<b>
{{ totalWeb }}
</b>
个优质网站, 助您工作、学习和生活
</h2>
<app-search-engine
(onSearch)=
"onSearch($event)"
></app-search-engine>
</div>
<nav
class=
"top-nav user-select-none"
>
<nav
class=
"top-nav user-select-none
dark-border-color
"
>
<a
*ngFor=
"let item of websiteList; let i = index;"
[class.active]=
"page === i"
class=
"ripple-btn"
[class.dark-text-active]=
"page === i"
class=
"ripple-btn dark-text"
(click)=
"handleCilckTopNav(i)"
>
{{ item.title }}
...
...
@@ -17,20 +18,21 @@
</nav>
<div
class=
"wrapper"
>
<nav
class=
"sidebar"
id=
"sidebar"
>
<nav
class=
"sidebar
dark-bg
"
id=
"sidebar"
>
<div
*ngIf=
"websiteList[page].nav.length"
>
<div
*ngFor=
"let item of websiteList[page].nav; let i = index"
(click)=
"handleSidebarNav(i)"
[class.active]=
"id === i"
class=
"ripple-btn"
[class.dark-item-active]=
"id === i"
class=
"ripple-btn dark-text"
>
{{ item.title || websiteList[page].title }}
</div>
</div>
</nav>
<aside
class=
"site-box"
>
<aside
class=
"site-box
dark-bg
"
>
<app-no-data
*ngIf=
"currentList.length && currentList[0].nav && !currentList[0].nav.length"
>
...
...
@@ -38,15 +40,24 @@
<div
*ngFor=
"let item of currentList; let i=index"
>
<div
class=
"nav-wrapper"
>
<div
class=
"title"
*ngIf=
"item.title"
(click)=
"onCollapse(item, i)"
>
<div
class=
"title dark-primary dark-border-color"
*ngIf=
"item.title"
(click)=
"onCollapse(item, i)"
>
{{ item.title }} x {{ item.nav.length }}
<i
class=
"iconfont iconjiantouarrow483 down-arrow"
[class.active]=
"item.collapsed"
></i>
</div>
<ul
class=
"ul"
*ngIf=
"!item.collapsed"
>
<li
*ngFor=
"let ele of item.nav"
>
<a
class=
"url-box"
[href]=
"ele.url"
target=
"_blank"
rel=
"noopener noreferer"
>
<li
*ngFor=
"let ele of item.nav"
class=
"dark-border-color"
>
<a
class=
"url-box"
[href]=
"ele.url"
target=
"_blank"
rel=
"noopener noreferer"
>
<div
class=
"box-wrapper"
>
<div
class=
"left"
>
<img
...
...
@@ -57,43 +68,13 @@
>
</div>
<div
class=
"right
"
[innerHtml
]=
"ele.name"
></div>
<div
class=
"right
dark-primary"
[innerHtml]=
"ele.name"
[title
]=
"ele.name"
></div>
</div>
<div
class=
"desc"
[innerHtml]=
"ele.desc"
></div>
<div
class=
"desc
dark-text
"
[innerHtml]=
"ele.desc"
></div>
</a>
<div
class=
"mark"
*ngIf=
"ele.language && ele.language.length > 0"
>
<div
class=
"button-box"
>
<a
[href]=
"ele.language[0]"
class=
"zh"
target=
"_blank"
*ngIf=
"ele.language[0]"
rel=
"noopener noreferer"
>
{{ language[0] }}
</a>
<a
[href]=
"ele.language[1]"
class=
"zh"
target=
"_blank"
*ngIf=
"ele.language[1]"
rel=
"noopener noreferer"
>
{{ language[1] }}
</a>
<a
[href]=
"ele.language[2]"
class=
"zh"
target=
"_blank"
*ngIf=
"ele.language[2]"
rel=
"noopener noreferer"
>
{{ language[2] }}
</a>
</div>
</div>
<app-multiple-site
[dataSource]=
"ele"
></app-multiple-site>
</li>
</ul>
</div>
...
...
@@ -109,4 +90,4 @@
>
</app-fixbar>
<div
class=
"sim-bg"
></div>
<div
class=
"sim-bg
dark-bg
"
></div>
src/view/index/sim/index.component.scss
浏览文件 @
8be1296d
...
...
@@ -40,7 +40,7 @@ $width: 1200px;
.wallpaper
{
height
:
350px
;
background
:
url("../../../assets/img/wallpaper.jpg")
no-repeat
;
background
-repeat
:
no-repeat
;
background-position
:
top
center
;
display
:
flex
;
justify-content
:
center
;
...
...
@@ -139,7 +139,7 @@ $width: 1200px;
&
:hover
{
box-shadow
:
2px
2px
25px
-5px
rgba
(
0
,
0
,
0
,.
2
);
.mark
{
::ng-deep
.mark
{
bottom
:
0
!
important
;
}
}
...
...
@@ -166,10 +166,13 @@ $width: 1200px;
.right
{
flex
:
1
;
margin-left
:
10px
;
font-size
:
1
6
px
;
font-size
:
1
5
px
;
font-weight
:
600
;
color
:
#273a52
;
align-self
:
center
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
}
.desc
{
...
...
@@ -179,62 +182,6 @@ $width: 1200px;
}
}
}
.mark
{
z-index
:
28
;
position
:
absolute
;
bottom
:
-50px
;
left
:
0
;
width
:
100%
;
padding
:
10px
0
5px
0px
;
background
:
#fbfbfb
;
cursor
:
auto
;
display
:
flex
;
justify-content
:
center
;
align-content
:
center
;
transition
:
.1s
linear
;
.button-box
{
width
:
100%
;
text-align
:
center
;
}
a
{
display
:
inline-block
;
position
:
relative
;
width
:
50px
;
font-size
:
12px
;
padding
:
3px
0
;
border
:
none
;
background
:
#2db7f5
;
color
:
#fff
;
border-radius
:
3px
;
overflow
:
hidden
;
&
:not
(
:nth-last-child
(
1
))
{
margin-right
:
10px
;
}
&
:after
{
content
:
""
;
position
:
absolute
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
background
:
#000
;
opacity
:
0
;
}
&
:active:after
{
opacity
:
.2
;
}
}
.zh
{
background
:
#26a2ff
;
}
}
}
::ng-deep
.sim-footer
{
...
...
src/view/index/sim/index.component.ts
浏览文件 @
8be1296d
import
{
Component
}
from
'
@angular/core
'
import
{
Router
,
ActivatedRoute
}
from
'
@angular/router
'
import
{
INDEX_LANGUAGE
,
GIT_REPO_URL
,
TITL
E
}
from
'
../../../../config
'
import
{
GIT_REPO_URL
,
TITLE
,
POSTER_IMAG
E
}
from
'
../../../../config
'
import
{
INavProps
,
INavThreeProp
}
from
'
../../../types
'
import
{
debounce
,
...
...
@@ -31,10 +31,10 @@ export default class HomeComponent {
id
:
number
=
0
page
:
number
=
0
searchKeyword
:
string
=
''
language
:
string
[]
=
INDEX_LANGUAGE
GIT_REPO_URL
:
string
=
GIT_REPO_URL
totalWeb
:
number
=
totalWeb
()
title
:
string
=
TITLE
POSTER_IMAGE
:
string
=
POSTER_IMAGE
ngOnInit
()
{
const
initList
=
()
=>
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录