doc: update index design
diff --git a/_jade/en/index.jade b/_jade/en/index.jade
index ffe294e..9276544 100644
--- a/_jade/en/index.jade
+++ b/_jade/en/index.jade
@@ -131,7 +131,7 @@
.container
.col-sm-8.col
h2 ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
- p.note <i class="note-icon"><img classs="lazy" data-src="#{cdnPayRoot}/#{ecWWWLang}/images/note.svg?_v_=#{cdnPayVersion}" /></i> Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.
+ p.note <i class="note-icon"><img classs="lazy" data-src="#{cdnPayRoot}/#{ecWWWLang}/images/note.svg?_v_=#{cdnPayVersion}" /></i> You are welcomed to cite this paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.
p.link Visual Informatics, 2018
a(href="https://www.sciencedirect.com/science/article/pii/S2468502X18300068") [PDF]
.col-sm-4.col
diff --git a/_jade/zh/index.jade b/_jade/zh/index.jade
index 7a90a8b..08ee6fd 100644
--- a/_jade/zh/index.jade
+++ b/_jade/zh/index.jade
@@ -14,7 +14,7 @@
.page-main#page-index
#main-content
section#home-section
- .home-brand-panel.description
+ .home-brand-panel.description.container
.home-info
.home-apache Apache
.home-brand ECharts
@@ -39,81 +39,53 @@
section#feature-section
.container
- .features
- .title
- .content ECharts Features
- hr
- p 我们希望 ECharts 可能满足你的任何数据可视化的需求，并且让这一切都变得更加
- p 简单、美好、强大，相信 ECharts 一直在成长
- p.more 更多功能，等你体验
- .list
- .list-line
- .list-item(feat="0")
- .item
- .left
- .icon-bg#bg-icon-1
- .feature-icon-panel#icon-1
- .right
- h3 超多图表类型和强大的自定义，满足千万种可能
- .content
- p 30多种图表和强大的自定义功能，类型不设限，机会无极限。
- p 满足你千变万化的数据和场景，更注重满足你的个性化需求
- .list-item(feat="1")
- .item
- .left
- .icon-bg#bg-icon-2
- .feature-icon-panel#icon-2
- .right
- h3 千万级别数据量的前端展现，仍然轻松流畅
- .content
- p 使用增量渲染、对流加载等技术，配合各种细致的优化，在展现
- p 千万级的数据量的同时依然能进行流畅的图表交互
- .list-item(feat="2")
- .item
- .left
- .icon-bg#bg-icon-3
- .feature-icon-panel#icon-3
- .right
- h3 打破与图表的边界，获得更多的体验机会
- .content
- p 无论是「无障碍访问」还是「多设备兼容」，我们一直在持续
- p 拓展更多可能性，希望更多的人，在更多的场景，都能获得顺畅
- p 如一的美好体验
- .list-hr
- .list-line
- .list-item(feat="3")
- .item
- .left
- .icon-bg#bg-icon-4
- .feature-icon-panel#icon-4
- .right
- h3 开箱即用，做图表变得更简单
- .content
- p 提供开箱即用的组件和配置，极简配置即可实现万千可能。
- p 支持多种数据格式、多渲染方案，直接使用毫无压力
- .list-item(feat="4")
- .item
- .left
- .icon-bg#bg-icon-5
- .feature-icon-panel#icon-5
- .right
- h3 多维度的数据分析，发掘更多数据的价值
- .content
- p 数据自由刷选 —— 自由选择数据，发掘数据背后的更多秘密
- p 多图表联动查看 —— 对多个图表数据联动查看，多维有效分析
- p dataset 数据变换——对数据自由的过滤、统计，深度探索数据
- p storytelling —— 提升数据自己讲故事的能力，更加生动的展现
- .list-item(feat="5")
- .item
- .left
- .icon-bg#bg-icon-6
- .feature-icon-panel#icon-6
- .right
- h3 才华与颜值兼备，玩转图表新可能
- .content
- p 完善的图表交互，让你一上手就自然顺手，与数据实现轻松互动
- p 恰当的动画，更自然的反馈与图形过渡，更易理解数据间的联系
- p 细致且多样的样式与主题设计，一切都只为更好地展现你的数据
+ .index-features
+ h2 特性
+ hr
+ .row
+ .col-md-6.index-feature
+ .index-feature-left
+ .index-feature-icon-bg#bg-icon-1
+ .index-feature-icon#icon-1
+ .index-feature-right
+ h3 丰富的图表类型
+ p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。
+ .col-md-6.index-feature
+ .index-feature-left
+ .index-feature-icon-bg#bg-icon-2
+ .index-feature-icon#icon-2
+ .index-feature-right
+ h3 强劲的渲染引擎
+ p 采用增量渲染、流式加载等技术，千万级数据的图表也能在网页上流畅交互。
+ .col-md-6.index-feature
+ .index-feature-left
+ .index-feature-icon-bg#bg-icon-3
+ .index-feature-icon#icon-3
+ .index-feature-right
+ h3 丰富的图表类型
+ p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。
+ .col-md-6.index-feature
+ .index-feature-left
+ .index-feature-icon-bg#bg-icon-4
+ .index-feature-icon#icon-4
+ .index-feature-right
+ h3 丰富的图表类型
+ p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。
+ .col-md-6.index-feature
+ .index-feature-left
+ .index-feature-icon-bg#bg-icon-5
+ .index-feature-icon#icon-5
+ .index-feature-right
+ h3 丰富的图表类型
+ p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。
+ .col-md-6.index-feature
+ .index-feature-left
+ .index-feature-icon-bg#bg-icon-6
+ .index-feature-icon#icon-6
+ .index-feature-right
+ h3 丰富的图表类型
+ p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。
+ a.more(href='#') 了解更多特性
script(type='text/javascript').
var animationMap = {};
@@ -146,18 +118,18 @@
var num = +$(this).attr('feat');
var list = $('.list-item .item');
- if (num === 0 || num === 3) {
- $(list[num]).css('border-bottom', 0);
- }
+ //- if (num === 0 || num === 3) {
+ //- $(list[num]).css('border-bottom', 0);
+ //- }
- if (num === 1 || num === 4) {
- $(list[num - 1]).css('border-bottom', 0);
- $(list[num]).css('border-bottom', 0);
- }
+ //- if (num === 1 || num === 4) {
+ //- $(list[num - 1]).css('border-bottom', 0);
+ //- $(list[num]).css('border-bottom', 0);
+ //- }
- if (num === 2 || num === 5) {
- $(list[num - 1]).css('border-bottom', 0);
- }
+ //- if (num === 2 || num === 5) {
+ //- $(list[num - 1]).css('border-bottom', 0);
+ //- }
var id = $(this).find('.feature-icon-panel')[0].id;
animationMap[id].goToAndPlay(0);
@@ -194,7 +166,7 @@
.paper
.content
h2 ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
- p.note Please cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.
+ p.note 如果您在科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关活动中使用了 Apache ECharts，欢迎引用本论文。
.link
a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf").pdf Visual Informatics, 2018 [PDF]
.icon
@@ -264,7 +236,7 @@
.container
h3 关注我们
hr
- p 可以通过以下渠道关注 ECharts，及时获得更多最新动态
+ p 关注我们以及时获得更多最新动态
.btn-panel
a#btn-github(href='https://github.com/apache/incubator-echarts')
.btn-content
diff --git a/_scss/_pages.index.scss b/_scss/_pages.index.scss
index 3677f32..4233db1 100644
--- a/_scss/_pages.index.scss
+++ b/_scss/_pages.index.scss
@@ -18,16 +18,15 @@
#main-content {
color: $clr-text;
- font-weight: 300;
- h1, h2, h3, h4, h5, h6 {
- color: $clr-darker;
- font-weight: 400;
+ a {
+ color: $clr-link;
}
- p {
- font-weight: 300;
- }
+ .more {
+ text-align: center;
+ display: block;
+ }
footer {
font-weight: 400 !important;
@@ -44,7 +43,6 @@
.home-brand-panel {
margin: 0 auto;
- max-width: 1000px;
height: 100%;
padding: 0 30px;
position: relative;
@@ -53,6 +51,7 @@
.home-info {
height: 256px;
margin-top: 50vh;
+ margin-left: 50px;
position: absolute;
top: -178px;
}
@@ -72,8 +71,8 @@
.home-subtitle {
position: relative;
- left: 8px;
- font-size: 16px;
+ left: 5px;
+ font-size: 21px;
color: $clr-dark-light;
}
@@ -115,7 +114,8 @@
height: 60%;
top: 16%;
position: absolute;
- right: 0;
+ right: 50px;
+ z-index: -100;
img {
height: 100%;
@@ -140,26 +140,8 @@
margin: 35px 0 5px 0;
}
- .feature-btn {
- margin-top: 40px;
-
- a {
- color: $clr-thirdary;
- }
-
- .more-icon {
- display: inline-block;
- margin-left: 8px;
- padding-top: 2px;
- }
- }
-
.row {
- margin: 40px 0;
- }
-
- .right-column {
- text-align: right;
+ margin: 20px 0;
}
section.normal {
@@ -169,10 +151,6 @@
}
}
-#efe-more {
- margin-top: -10px;
-}
-
#reference {
font-size: 1.6rem;
font-weight: 400;
@@ -258,199 +236,68 @@
margin-top: 100px;
}
-.companies {
- overflow-x: hidden;
- overflow-y: hidden;
- width: 100%;
- height: 80px;
- white-space: nowrap;
- background: white;
- margin: 69px 0 90px 0;
- transition: 0.5s;
+#feature-section {
+ padding-top: 50px;
- img {
- padding: 15px;
- height: 100%;
+ hr {
+ display: inline-block;
+ text-align: center;
+ width: 36px;
+ margin: 15px 0 0 0;
+ height: 2px;
+ border: 0;
+ background-color: $clr-primary;
}
}
-#feature-section {
- padding-top: 50px;
+ .index-features {
+ margin-top: 20px;
+ text-align: center;
+ color: $clr-text;
- .container {
- max-width: 1200px;
+ h2 {
+ font-size: 35px;
+ font-weight: 800;
+ color: #090909;
+ }
+ }
+
+ .index-feature {
+ margin: 30px 0;
+ padding: 0 50px;
}
- .features {
- margin-top: 20px;
- text-align: center;
+ .index-feature-left {
+ display: inline-block;
+ position: absolute;
+ width: 107px;
+ height: 99px;
+ }
- .title {
- .content {
- font-size: 35px;
+ .index-feature-icon {
+ position: absolute;
+ width: 50%;
+ left: 28%;
+ top: 22.5%;
+ }
+
+ .index-feature-right {
+ display: inline-block;
+ margin-left: 127px;
+
+ h3 {
+ margin-top: 10px;
+ font-size: 16px;
font-weight: bold;
- color: #090909;
- }
- .line {
- color: #86BCF2;
- }
-
- hr {
- display: inline-block;
- text-align: center;
- width: 36px;
- margin: 0px;
- height:1px;
- border:0px;
- background-color: #86BCF2;
- color: #86BCF2;
+ color: $clr-darker;
}
p {
- font-size: 12px;
- color: #8D909A
- }
-
- a {
- font-size: 12px;
- color: #8EB5DC;
+ margin-top: 14px;
+ line-height: 1.75em;
}
}
- .list {
- display: flex;
- margin-top: 36px;
- text-align: left;
-
- .list-line {
- width: 537px;
- .list-item {
- position: relative;
- flex: auto;
- height: 178px;
-
- .item {
- display: flex;
- padding-top: 39px;
- margin: 0px 37px 0px 33px;
- height: 178px;
- border-bottom: 1px solid rgba(151,151,151,0.25);
- .left {
- position: relative;
- width: 115px;
- .icon-bg {
- position: absolute;
- width: 110px;
- top: -10px;
- left: -10px;
- }
- .feature-icon-panel {
- position: absolute;
- width: 60px;
- left: 18px;
- top: 10px;
- }
- }
- .right {
- width: 352px;
- }
-
- h3 {
- margin-bottom: 16px;
- font-size: 16px;
- font-weight: 500;
- line-height: 18px;
- color: #090909;
- }
-
- p {
- margin-top: 3px;
- color: #8D909A;
- font-size: 12px;
- }
- }
-
- }
- .list-item:last-child {
- .item {
- border: none;
- }
- }
- // don't show shadow unless we have something to click
- // .list-item:hover {
- // box-shadow: 0 9px 12px 0 rgba(0,0,0,0.10);
- // }
-
- }
- .list-hr {
- width: 1px;
- background-color: #979797;
- opacity: 0.25;
- }
- }
-
- p {
- margin-top: 8px;
- }
-
- p.more {
- color: #8EB5DC;
- }
- }
-
- .feature-detail {
- margin-bottom: 20px;
- position: relative;
- transform: translateY(50%);
-
- & > .col {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- }
-
- &::before,
- &::after {
- content: " ";
- display: table;
- }
-
- &::after {
- clear: both;
- }
-
- h2 {
- font-size: 35px;
- margin-bottom: 12px;
- }
-
- h3 {
- font-size: 18px;
- font-weight: 300;
- color: $clr-text;
- margin-top: 30px;
-
- & ~ h3 {
- margin-top: 18px;
- }
- }
-
- p {
- font-weight: 300;
- margin-top: 8px;
- }
-
- #col-analysis h2 {
- margin-top: -45px;
- }
-
- #col-data h2 {
- margin-top: 100px;
- }
- }
-
-}
-
#publication {
overflow: hidden;
height: 720px;
@@ -470,8 +317,7 @@
}
.container {
- width: 1195px;
- max-width: 1440px;
+ padding: 15px 65px;
.paper {
display: flex;
@@ -507,16 +353,21 @@
height: 45px;
width: 237px;
text-align: center;
- background: #5E7AD9;
- box-shadow: 2px 6px 18px 0 rgba(73,103,201,0.30);
+ background: $clr-primary;
border-radius: 22.5px;
+ transition: 0.5s;
+
+ &:hover, &:focus {
+ text-decoration: none;
+ box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.2);
+ }
+
.pdf {
line-height: 45px;
color: #fff;
opacity: 0.8;
font-size: 14px;
}
-
}
}
@@ -645,27 +496,6 @@
}
}
- #feature-section .feature-detail {
- h2 {
- font-size: 30px;
- margin-top: -15px;
- }
-
- h3 {
- margin-top: 15px;
- }
-
- p {
- margin-top: 8px;
- }
- }
-
- #main-content {
- .feature-btn {
- margin-top: 15px;
- }
- }
-
#col-desktop > * {
margin-left: 0;
}
@@ -692,26 +522,13 @@
}
}
- .features {
- margin-bottom: 0;
- }
-
- #feature-section {
- .feature-detail {
- transform: none;
-
- & > .col {
- top: 0;
- transform: none;
- text-align: center;
- }
-
- .col-sm-4 {
- margin-bottom: 80px;
- padding-top: 0;
- }
+ .home-chart {
+ position: relative;
+ left: 50%;
+ margin-left: -143px;
+ top: 50px;
+ opacity: 0.5;
}
- }
#reference {
background-size: cover;
diff --git a/_scss/_settings.colors.scss b/_scss/_settings.colors.scss
index dda06b7..6c10b69 100644
--- a/_scss/_settings.colors.scss
+++ b/_scss/_settings.colors.scss
@@ -24,6 +24,8 @@
$clr-thirdary: #40A7DC;
$clr-thirdary-light: lighten($clr-thirdary, 10%);
+$clr-link: $clr-primary;
+
$clr-border: rgba(78, 97, 118, 0.45);
$clr-border-light: rgba(78, 97, 118, 0.25);
