This is an automated email from the ASF dual-hosted git repository.
kirs pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git
The following commit(s) were added to refs/heads/master by this push:
new 134fba0 Changeallhead (#344)
134fba0 is described below
commit 134fba00b09f6dcd64b08cd566a56cc2385d19f6
Author: GaoTianDuo <[email protected]>
AuthorDate: Fri Apr 30 12:15:09 2021 +0800
Changeallhead (#344)
* Optimize the style of the head of the
docs,blog,community,download,development page.
* Modified the style of the home page:head,introduction,feature
* fix Changeallhead #344 and add img
* todo :home page screen adaptive
---
img/banner.jpg | Bin 0 -> 123469 bytes
img/easyuse.png | Bin 0 -> 5748 bytes
img/framework.png | Bin 0 -> 67643 bytes
img/ha.png | Bin 0 -> 6522 bytes
img/scaleout.png | Bin 0 -> 8296 bytes
img/scene.png | Bin 0 -> 2865 bytes
site_config/home.jsx | 17 +++++--
src/components/button/index.scss | 6 ++-
src/components/header/index.scss | 3 +-
src/pages/blog/index.jsx | 1 -
src/pages/community/index.jsx | 1 -
src/pages/community/index.md.jsx | 1 -
src/pages/docs/index.md.jsx | 1 -
src/pages/home/index.jsx | 14 ++++-
src/pages/home/index.scss | 107 +++++++++++++++++++++++++++++----------
15 files changed, 111 insertions(+), 40 deletions(-)
diff --git a/img/banner.jpg b/img/banner.jpg
new file mode 100755
index 0000000..77f0439
Binary files /dev/null and b/img/banner.jpg differ
diff --git a/img/easyuse.png b/img/easyuse.png
new file mode 100644
index 0000000..05d2a96
Binary files /dev/null and b/img/easyuse.png differ
diff --git a/img/framework.png b/img/framework.png
new file mode 100644
index 0000000..1d8a4df
Binary files /dev/null and b/img/framework.png differ
diff --git a/img/ha.png b/img/ha.png
new file mode 100644
index 0000000..0f94363
Binary files /dev/null and b/img/ha.png differ
diff --git a/img/scaleout.png b/img/scaleout.png
new file mode 100644
index 0000000..6fe221a
Binary files /dev/null and b/img/scaleout.png differ
diff --git a/img/scene.png b/img/scene.png
new file mode 100644
index 0000000..888198e
Binary files /dev/null and b/img/scene.png differ
diff --git a/site_config/home.jsx b/site_config/home.jsx
index f4981f4..28ebcd3 100644
--- a/site_config/home.jsx
+++ b/site_config/home.jsx
@@ -24,33 +24,36 @@ export default {
introduction: {
title: '分布式易扩展的可视化DAG工作流任务调度系统',
desc: 'Apache
DolphinScheduler是一个分布式去中心化，易扩展的可视化DAG工作流任务调度系统。致力于解决数据处理流程中错综复杂的依赖关系，使调度系统在数据处理流程中开箱即用。',
- img: '/img/architecture.jpg',
+ img: '/img/framework.png',
},
features: {
title: '特性一览',
list: [
{
- img: '/img/feature_loadbalances.png',
+ img: '/img/ha.png',
title: '高可靠性',
content: '去中心化的多Master和多Worker, 自身支持HA功能, 采用任务队列来避免过载，不会造成机器卡死',
},
{
- img: '/img/feature_hogh.png',
+ img: '/img/easyuse.png',
title: '简单易用',
content: 'DAG监控界面，所有流程定义都是可视化，通过拖拽任务定制DAG，通过API方式与第三方系统对接, 一键部署',
},
{
- img: '/img/feature_service.png',
+ img: '/img/scene.png',
title: '丰富的使用场景',
content: '支持暂停恢复操作. 支持多租户，更好的应对大数据的使用场景. 支持更多的任务类型，如 spark, hive,
mr, python, sub_process, shell',
},
{
- img: '/img/feature_runtime.png',
+ img: '/img/scaleout.png',
title: '高扩展性',
content: '支持自定义任务类型，调度器使用分布式调度，调度能力随集群线性增长，Master和Worker支持动态上下线',
},
],
},
+ news:{
+ title: '事件&新闻',
+ },
},
'en-us': {
brand: {
@@ -104,5 +107,9 @@ export default {
},
],
},
+ news:{
+ title: '事件&新闻',
+ desc: 'Apache
DolphinScheduler是一个分布式去中心化，易扩展的可视化DAG工作流任务调度系统。致力于解决数据处理流程中错综复杂的依赖关系，使调度系统在数据处理流程中开箱即用。',
+ },
},
};
diff --git a/src/components/button/index.scss b/src/components/button/index.scss
index 5c0d62c..1f10b03 100644
--- a/src/components/button/index.scss
+++ b/src/components/button/index.scss
@@ -11,10 +11,12 @@
border-radius: 4px;
text-decoration: none;
&-primary {
- background: #4190FF;
+ background: #000F20;
+ border: 2px solid #000F20;
}
&-normal {
background: transparent;
- border: 1px solid #fff;
+ border: 2px solid #000F20;
+ color: #000F20;
}
}
\ No newline at end of file
diff --git a/src/components/header/index.scss b/src/components/header/index.scss
index 9364365..8597162 100644
--- a/src/components/header/index.scss
+++ b/src/components/header/index.scss
@@ -20,7 +20,7 @@
background-color: transparent;
}
&-dark {
- background-color: #333;
+ background-color:#000F20;
}
&-normal {
background-color: #fff;
@@ -88,6 +88,7 @@
.submenu-title-wrapper {
a {
color: #fff;
+ opacity:0.6;
font-family: Avenir-Medium;
}
}
diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
index bf6e003..2b5968c 100644
--- a/src/pages/blog/index.jsx
+++ b/src/pages/blog/index.jsx
@@ -23,7 +23,6 @@ class Blog extends Language {
language={language}
onLanguageChange={this.onLanguageChange}
/>
-
<section className="blog-container">
<div className="col col-18 left-part">
<PageSlider pageSize={5}>
diff --git a/src/pages/community/index.jsx b/src/pages/community/index.jsx
index 9b109b3..7593c51 100644
--- a/src/pages/community/index.jsx
+++ b/src/pages/community/index.jsx
@@ -24,7 +24,6 @@ class Community extends Language {
language={language}
onLanguageChange={this.onLanguageChange}
/>
-
<section className="content-section">
<Sidemenu dataSource={dataSource.sidemenu} />
<div className="doc-content markdown-body">
diff --git a/src/pages/community/index.md.jsx b/src/pages/community/index.md.jsx
index 72bff8e..7075faf 100644
--- a/src/pages/community/index.md.jsx
+++ b/src/pages/community/index.md.jsx
@@ -21,7 +21,6 @@ class Community extends Md2Html(Language) {
language={language}
onLanguageChange={this.onLanguageChange}
/>
-
<section className="content-section">
<Sidemenu dataSource={dataSource.sidemenu} />
<div
diff --git a/src/pages/docs/index.md.jsx b/src/pages/docs/index.md.jsx
index 8e71b5a..cad56fe 100644
--- a/src/pages/docs/index.md.jsx
+++ b/src/pages/docs/index.md.jsx
@@ -73,7 +73,6 @@ class Docs extends Md2Html(Language) {
ref={(node) => { this.markdownContainer = node; }}
dangerouslySetInnerHTML={{ __html }}
/>
-
</section>
<Footer logo="/img/ds_gray.svg" language={language} />
</div>
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 9e4283e..471feee 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -22,11 +22,12 @@ class Home extends Language {
componentDidMount() {
window.addEventListener('scroll', () => {
const scrollTop = getScrollTop();
- if (scrollTop > 66 && scrollTop <= 663) {
+ const offsetHeight = document.querySelector('.top-section').offsetHeight
- 66;
+ if (scrollTop > 66 && scrollTop <= offsetHeight) {
this.setState({
headerType: 'normal',
});
- } else if (scrollTop > 663) {
+ } else if (scrollTop > offsetHeight) {
this.setState({
headerType: 'dark',
});
@@ -56,6 +57,7 @@ class Home extends Language {
return (
<div className="home-page">
<section className="top-section">
+ <img src="/img/banner.jpg" />
<Header
currentKey="home"
type={headerType}
@@ -117,6 +119,14 @@ class Home extends Language {
}
</ul>
</section>
+ {/* <section className="news-section">
+ <div className="news-body">
+ <div className="news">
+ <h3>{dataSource.news.title}</h3>
+ <p>{dataSource.news.desc}</p>
+ </div>
+ </div>
+ </section> */}
<Footer logo="/img/ds_gray.svg" language={language} />
</div>
);
diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
index 00c7d90..eb5405a 100644
--- a/src/pages/home/index.scss
+++ b/src/pages/home/index.scss
@@ -11,8 +11,9 @@
.home-page {
.top-section {
position: relative;
- height: 720px;
- background-image: linear-gradient(0deg, $startColor 0%, $intermediateColor
51%, $endColor 100%);
+ img {
+ width: 100%;
+ }
.animation {
position: absolute;
width: 6px;
@@ -48,7 +49,7 @@
.vertical-middle {
position: absolute;
left: 0;
- top: 50%;
+ top: 40%;
transform: translateY(-50%);
box-sizing: border-box;
width: 100%;
@@ -147,6 +148,36 @@
text-align: center;
}
}
+ .news-section {
+ background: #F9FAFA;
+ position: relative;
+ .news-body {
+ height: 600px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ }
+ .news{
+ position: relative;
+ color: #333;
+ margin: 80px auto;
+ h3 {
+ font-family: Avenir-Heavy;
+ font-size: 36px;
+ color: #333;
+ width: 940px;
+ height: 54px;
+ }
+ p {
+ font-family: Avenir-Heavy;
+ font-size: 36px;
+ color: #333;
+ width: 940px;
+ height: 54px;
+ }
+ }
+
+ }
.introduction-section {
background: #F9FAFA;
.introduction-body {
@@ -154,50 +185,57 @@
box-sizing: border-box;
margin: 0 auto;
min-height: 640px;
- padding: 0 40px;
+ padding: 0 0px;
position: relative;
display: flex;
- flex-wrap: wrap;
align-items: center;
- justify-content: space-between;
+ justify-content: center;
+ flex-direction: column;
&::before {
content: '';
- position: absolute;
- top: 0;
+ position: relative;
+ top: 102px;
left: 40px;
opacity: 0.3;
border-right: 1px solid #666;
}
&::after {
content: '';
- position: absolute;
+ position: relative;
left: 39px;
top: 165px;
height: 17px;
background-image: linear-gradient(0deg, $startColor 0%,
$intermediateColor 51%, $endColor 100%);
}
.introduction {
- display: inline-block;
- width: calc(100% - 726px);
+ //display: inline-block;
+ //width: calc(100% - 726px);
min-width: 300px;
- max-width: 590px;
+ //max-width: 790px;
+ margin: 80px auto 0px auto;
h3 {
font-family: Avenir-Heavy;
+ text-align: center;
font-size: 36px;
color: #333;
- margin-bottom: 40px;
+ margin-bottom: 30px;
word-break: break-word;
+ width: 940px;
+ height: 54px;
}
p {
opacity: 0.56;
font-family: Avenir-Medium;
- font-size: 18px;
- color: #999;
+ font-size: 22px;
+ width: 940px;
+ height: 64px;
+ color:#130e0e;
}
}
img {
- width: 562px;
- margin: 0 82px;
+ width: 880px;
+ height: 425px;
+ margin: 40px 82px;
max-width: 100%;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.05);
}
@@ -250,30 +288,47 @@
padding: 0;
margin: 0;
li {
+ width: 240px;
+ height: 430px;
+ text-align: center;
vertical-align: top;
display: inline-block;
margin-bottom: 40px;
- width: 50%;
+ width: 25%;
+ cursor: pointer;
+ &:hover {
+ box-shadow: 0px 0px 12px 0px rgba(0, 15, 32, 0.1);
+ }
img {
- vertical-align: top;
- width: 60px;
- height: 60px;
- margin-right: 20px;
+ margin: 20px auto;
+ // vertical-align: top;
+ width: 74px;
+ height: 74px;
+ // margin-right: 20px;
+ display: block;
}
div {
display: inline-block;
width: 80%;
h4 {
font-family: Avenir-Heavy;
- font-size: 20px;
+ font-size: 24px;
color: #333;
margin-top: 10px;
+ height: 32px;
+ font-weight: 400;
+ color: #333333;
+ line-height: 32px
}
p {
+ width: 200px;
+ height: 128px;
+ font-size: 16px;
+ font-weight: 400;
+ color: #666666;
+ line-height: 32px;
+ margin: 30px auto;
font-family: Avenir-Medium;
- font-size: 14px;
- line-height: 20px;
- color: #999;
}
}
}
