Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
a62f663e
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
a62f663e
编写于
3月 15, 2021
作者:
A
ailululu
提交者:
GitHub
3月 15, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 首页平台特色、更多内容 (#400)
上级
98e7468d
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
261 addition
and
56 deletion
+261
-56
src/sites/assets/images/img-home-features1.png
src/sites/assets/images/img-home-features1.png
+0
-0
src/sites/assets/images/img-home-features2.png
src/sites/assets/images/img-home-features2.png
+0
-0
src/sites/assets/images/img-home-features3.png
src/sites/assets/images/img-home-features3.png
+0
-0
src/sites/assets/images/img-home-features4.png
src/sites/assets/images/img-home-features4.png
+0
-0
src/sites/assets/styles/variables.scss
src/sites/assets/styles/variables.scss
+3
-0
src/sites/doc/views/Main.vue
src/sites/doc/views/Main.vue
+258
-56
未找到文件。
src/sites/assets/images/img-home-features1.png
0 → 100644
浏览文件 @
a62f663e
67.6 KB
src/sites/assets/images/img-home-features2.png
0 → 100644
浏览文件 @
a62f663e
28.5 KB
src/sites/assets/images/img-home-features3.png
0 → 100644
浏览文件 @
a62f663e
25.3 KB
src/sites/assets/images/img-home-features4.png
0 → 100644
浏览文件 @
a62f663e
40.5 KB
src/sites/assets/styles/variables.scss
浏览文件 @
a62f663e
...
...
@@ -52,6 +52,7 @@ $theme-white-footer-border: #eaf0fb;
$theme-white-theme-border
:
#f5f6f7
;
$theme-white-circle
:
#fff
;
$theme-white-circle-border
:
#e5e5e5
;
$theme-white-index-desc
:
#959fb1
;
// 黑色
$theme-black-word
:
#ccc
;
...
...
@@ -82,6 +83,8 @@ $doc-default-nav-color: $title-color;
// footer
// $doc-default-header-color: $white;
// $doc-footer-height: 73px;
// home
$theme-black-content-bg
:
#060506
;
//markdown-add-style
$nutui-doc-black
:
#323233
;
...
...
src/sites/doc/views/Main.vue
浏览文件 @
a62f663e
<
template
>
<doc-header></doc-header>
<div
class=
"doc-content-index"
>
<div
class=
"content-left"
>
<div
class=
"content-title"
>
Nut UI 3.0
</div>
<div
class=
"content-smile"
>
</div>
<div
class=
"content-subTitle"
>
一款具有京东风格的VUE组件
</div>
<div
class=
"content-button"
>
<div
class=
"leftButton"
@
click=
"toIntro"
>
<div
class=
"leftButtonText"
>
开始使用
</div>
</div>
<div
class=
"rightButton"
>
<div
class=
"rightButtonText"
>
扫码体验
</div>
<div
class=
"doc-content"
:class=
"themeName()"
>
<div
class=
"doc-content-index"
>
<div
class=
"content-left"
>
<div
class=
"content-title"
>
Nut UI 3.0
</div>
<div
class=
"content-smile"
>
</div>
<div
class=
"content-subTitle"
>
一款具有京东风格的VUE组件
</div>
<div
class=
"content-button"
>
<div
class=
"leftButton"
@
click=
"toIntro"
>
<div
class=
"leftButtonText"
>
开始使用
</div>
</div>
<div
class=
"rightButton"
>
<div
class=
"rightButtonText"
>
扫码体验
</div>
<div
class=
"qrcodepart"
>
<div
class=
"qrcode-text"
>
请使用手机扫码体验
</div>
<div
class=
"qrcode"
>
</div>
<div
class=
"qrcodepart"
>
<div
class=
"qrcode-text"
>
请使用手机扫码体验
</div>
<div
class=
"qrcode"
>
</div>
</div>
</div>
<iframe
style=
"margin-left: 20px"
src=
"https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
frameborder=
"0"
scrolling=
"0"
width=
"170"
height=
"30"
title=
"GitHub"
></iframe>
</div>
<iframe
style=
"margin-left: 20px"
src=
"https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
frameborder=
"0"
scrolling=
"0"
width=
"170"
height=
"30"
title=
"GitHub"
></iframe>
</div>
<!--
<div
style=
"display: flex; align-items: center"
>
<a
href=
"#"
class=
"leftButton"
>
开始使用
</a>
<a
href=
"javascript:;"
class=
"rightButton "
>
扫码体验
<a>
<span>
请使用手机扫码体验
</span>
<img
src=
"https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png"
alt
/>
<!--
<div
style=
"display: flex; align-items: center"
>
<a
href=
"#"
class=
"leftButton"
>
开始使用
</a>
<a
href=
"javascript:;"
class=
"rightButton "
>
扫码体验
<a>
<span>
请使用手机扫码体验
</span>
<img
src=
"https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png"
alt
/>
</a>
</a>
</a>
<iframe
style=
"margin-left: 20px"
src=
"https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
frameborder=
"0"
scrolling=
"0"
width=
"170"
height=
"30"
title=
"GitHub"
></iframe>
</div>
-->
<iframe
style=
"margin-left: 20px"
src=
"https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
frameborder=
"0"
scrolling=
"0"
width=
"170"
height=
"30"
title=
"GitHub"
></iframe>
</div>
-->
</div>
<div
class=
"content-right"
>
<div
class=
"content-img"
>
</div>
</div>
</div>
<div
class=
"content-right"
>
<div
class=
"content-img"
>
</div>
<div
class=
"doc-content-features"
>
<div
class=
"doc-content-hd"
>
<h4
class=
"doc-content-title"
>
平台特色
</h4>
</div>
<ul
class=
"features-list"
>
<li
class=
"features-item"
>
<img
src=
"../../assets/images/img-home-features1.png"
/>
<p
class=
"features-title"
>
京东风格
</p>
<p
class=
"features-desc"
>
遵循京东App9.0设计规范
</p>
</li>
<li
class=
"features-item"
>
<img
src=
"../../assets/images/img-home-features2.png"
/>
<p
class=
"features-title"
>
组件丰富
</p>
<p
class=
"features-desc a-l"
>
提供70+组件,丰富的demo快速体验交互细节,覆盖各类场景满足各种功能的需求
</p
>
</li>
<li
class=
"features-item"
>
<img
src=
"../../assets/images/img-home-features3.png"
/>
<p
class=
"features-title"
>
前沿技术
</p>
<p
class=
"features-desc"
>
Vue3.X vite2.X typescript
</p>
</li>
<li
class=
"features-item"
>
<img
src=
"../../assets/images/img-home-features4.png"
/>
<p
class=
"features-title"
>
贴心通道
</p>
<p
class=
"features-desc"
>
社区维护 高效服务
<br
/>
技术支持 经验沉淀
</p>
</li>
</ul>
</div>
<div
class=
"doc-content-more"
v-if=
"articleList.length > 0"
>
<div
class=
"doc-content-hd"
>
<h4
class=
"doc-content-title"
>
更多内容
</h4>
<a
class=
"sub-more"
href=
"https://jelly.jd.com"
target=
"_blank"
>
更多内容
</a
>
</div>
<ul
class=
"more-list"
>
<li
class=
"more-item"
v-for=
"item in articleList.slice(0, 4)"
:key=
"item.id"
@
click=
"toLink(item.id)"
>
<img
:src=
"item.cover_image"
/>
<p
class=
"more-title"
>
{{
item
.
title
}}
</p>
</li>
</ul>
</div>
</div>
<doc-footer></doc-footer>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
onMounted
,
reactive
}
from
'
vue
'
;
import
{
defineComponent
,
onMounted
,
reactive
,
toRefs
,
computed
}
from
'
vue
'
;
import
Header
from
'
@/sites/doc/components/Header.vue
'
;
import
Footer
from
'
@/sites/doc/components/Footer.vue
'
;
import
router
from
'
../router
'
;
import
{
themeColor
}
from
'
@/sites/assets/util/ref
'
;
import
{
ArticleApiService
}
from
'
@/sites/service/ArticleApiService
'
;
export
default
defineComponent
({
name
:
'
main
'
,
components
:
{
[
Header
.
name
]:
Header
},
components
:
{
[
Header
.
name
]:
Header
,
[
Footer
.
name
]:
Footer
},
setup
()
{
const
data
=
reactive
({});
const
articleList
:
any
[]
=
[];
const
data
=
reactive
({
// theme: 'white',
articleList
});
onMounted
(()
=>
{
// 文章列表接口
const
articleApiService
=
new
ArticleApiService
();
articleApiService
.
getArticle
().
then
(
res
=>
{
console
.
log
(
'
res
'
,
res
);
if
(
res
?.
state
==
0
)
{
data
.
articleList
=
res
.
value
.
data
.
arrays
as
any
[];
console
.
log
(
'
data.articleList
'
,
data
.
articleList
);
}
});
});
const
themeName
=
computed
(()
=>
{
return
function
()
{
return
`doc-content-
${
themeColor
.
value
}
`
;
};
});
const
toLink
=
(
id
:
number
)
=>
{
window
.
open
(
'
//jelly.jd.com/article/
'
+
id
);
};
function
toIntro
()
{
router
.
push
({
path
:
'
/intro
'
});
}
return
{
toIntro
,
data
...
toRefs
(
data
),
themeName
,
toLink
};
}
});
...
...
@@ -89,12 +168,91 @@ export default defineComponent({
transform
:
translate3d
(
0
,
0
,
0
);
}
}
.doc-content
{
&
-hd
{
height
:
52px
;
line-height
:
52px
;
margin-bottom
:
50px
;
text-align
:
center
;
.sub-more
{
float
:
right
;
color
:
$theme-red
;
}
}
&
-title
{
display
:
inline-block
;
font-size
:
36px
;
font-family
:
PingFangSC-Medium
;
}
&
-features
{
width
:
1230px
;
margin
:
0
auto
90px
;
.features-list
{
display
:
flex
;
justify-content
:
space-between
;
margin-top
:
50px
;
}
.features-item
{
width
:
296px
;
text-align
:
center
;
img
{
width
:
160px
;
height
:
160px
;
margin-bottom
:
20px
;
}
}
.features-title
{
margin-bottom
:
18px
;
line-height
:
50px
;
font-family
:
PingFangSC-Medium
;
font-size
:
36px
;
}
.features-desc
{
font-size
:
18px
;
line-height
:
24px
;
}
}
&
-more
{
width
:
1200px
;
margin
:
0
auto
80px
;
.more-list
{
display
:
flex
;
flex-wrap
:
wrap
;
}
.more-item
{
width
:
280px
;
margin-right
:
26px
;
cursor
:
pointer
;
&
:nth-child
(
4n
)
{
margin-right
:
0
;
}
img
{
width
:
280px
;
height
:
170px
;
margin-bottom
:
20px
;
border-radius
:
6px
;
}
}
.more-title
{
width
:
280px
;
height
:
44px
;
line-height
:
22px
;
font-size
:
16px
;
text-overflow
:
-
o-ellipsis-lastline
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
display
:
-
webkit-box
;
-webkit-line-clamp
:
2
;
line-clamp
:
2
;
-webkit-box-orient
:
vertical
;
}
}
}
.doc-content-index
{
display
:
flex
;
flex
:
1
;
margin-bottom
:
70px
;
background-color
:
#070505
;
.content-left
{
padding
:
15%
0
0
8
.8%
;
// margin: auto 0;
...
...
@@ -214,4 +372,48 @@ export default defineComponent({
}
}
}
.doc-content-black
{
background
:
$theme-black-content-bg
;
color
:
white
;
.doc-content-title
{
color
:
white
;
}
.doc-content-feature
{
.features-title
{
color
:
white
;
}
.features-desc
{
color
:
white
;
}
}
.doc-content-more
{
.more-title
{
color
:
#fff
;
}
}
}
.doc-content-white
,
.doc-content-red
{
background
:
white
;
color
:
white
;
.doc-content-title
{
color
:
$theme-white-footer-word3
;
}
.doc-content-features
{
.features-title
{
color
:
$theme-white-word
;
}
.features-desc
{
color
:
$theme-white-index-desc
;
}
}
.doc-content-more
{
.more-title
{
color
:
$theme-white-footer-word3
;
}
}
}
.a-l
{
text-align
:
left
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录