update index and nav style
diff --git a/_jade/components/nav-mixin.jade b/_jade/components/nav-mixin.jade
index 2271386..b0f1575 100644
--- a/_jade/components/nav-mixin.jade
+++ b/_jade/components/nav-mixin.jade
@@ -98,29 +98,27 @@
li
a(href='https://www.apache.org/foundation/thanks.html', target='_blank') 鸣谢
include ./svg/external-link
- li#nav-ec5
- a(href='#', class="dropdown-toggle", data-toggle="dropdown") ECharts 5
- span.new new
- b.caret
- ul.dropdown-menu
- li
- a(href="#{hostParam}/next/zh/tutorial.html") 教程
- li
- a(href="#{hostParam}/next/zh/api.html") API
- li
- a(href="#{hostParam}/next/zh/option.html") 配置项手册
- li
- a(href='#{hostParam}/next/examples/zh/index.html') 实例
+ //- li#nav-ec5
+ //- a(href='#', class="dropdown-toggle", data-toggle="dropdown") ECharts 5
+ //- span.new new
+ //- b.caret
+ //- ul.dropdown-menu
+ //- li
+ //- a(href="#{hostParam}/next/zh/tutorial.html") 教程
+ //- li
+ //- a(href="#{hostParam}/next/zh/api.html") API
+ //- li
+ //- a(href="#{hostParam}/next/zh/option.html") 配置项手册
+ //- li
+ //- a(href='#{hostParam}/next/examples/zh/index.html') 实例
ul(class='nav navbar-nav navbar-right')
li#nav-homeen
- .nav-circle
- .nav-circle-inner
- a(href='javascript:;', onclick="changeLang('en')") EN
- li#nav-github
- a(href='https://github.com/apache/incubator-echarts', target='_blank')
- include ./svg/github
- +svgGithub('#333')
- li#nav-apache
- a(href="https://www.apache.org/" target="_blank")
- img(src="#{cdnPayRoot}/#{ecWWWLang}/images/asf_logo.png?_v_=#{cdnPayVersion}")
+ a(href='javascript:;', onclick="changeLang('en')") EN
+ //- li#nav-github
+ //- a(href='https://github.com/apache/incubator-echarts', target='_blank')
+ //- include ./svg/github
+ //- +svgGithub('#333')
+ //- li#nav-apache
+ //- a(href="https://www.apache.org/" target="_blank")
+ //- img(src="#{cdnPayRoot}/#{ecWWWLang}/images/asf_logo.png?_v_=#{cdnPayVersion}")
diff --git a/_jade/zh/index.jade b/_jade/zh/index.jade
index 08ee6fd..377f89d 100644
--- a/_jade/zh/index.jade
+++ b/_jade/zh/index.jade
@@ -26,6 +26,9 @@
a.btn.btn-main.btn-index-home(href='./download.html')
include ../components/svg/index-example
span 所有示例
+ a.btn.btn-main.btn-index-home.btn-index-github(href='https://github.com/apache/incubator-echarts', target='_blank')
+ include ../components/svg/github
+ +svgGithub('#081642')
.home-chart
img(src="images/index-home-pie.png")
@@ -42,50 +45,56 @@
.index-features
h2 特性
hr
+ a.more(href='#') 查看完整特性
.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='#') 了解更多特性
+ .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 多种图表、强大的自定义系列以及来自社区贡献的扩展插件，助你轻松实现各种可视化需求。
script(type='text/javascript').
var animationMap = {};
@@ -114,45 +123,6 @@
setLottieAnimatiion('bg-icon-' + (i + 1), 'asset/lottie/json/bg_0'+ (i + 1) + '.json');
}
- $('.list-item').mouseenter(function(event) {
- var num = +$(this).attr('feat');
- var list = $('.list-item .item');
-
- //- 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 === 2 || num === 5) {
- //- $(list[num - 1]).css('border-bottom', 0);
- //- }
-
- var id = $(this).find('.feature-icon-panel')[0].id;
- animationMap[id].goToAndPlay(0);
- });
-
- $('.list-item').mouseleave(function(event) {
- var num = +$(this).attr('feat');
- var list = $('.list-item .item');
-
- if (num === 0 || num === 3) {
- $(list[num]).css('border-bottom', '1px solid rgba(151,151,151,0.25)');
- }
-
- if (num === 1 || num === 4) {
- $(list[num - 1]).css('border-bottom', '1px solid rgba(151,151,151,0.25)');
- $(list[num]).css('border-bottom', '1px solid rgba(151,151,151,0.25)');
- }
-
- if (num === 2 || num === 5) {
- $(list[num - 1]).css('border-bottom', '1px solid rgba(151,151,151,0.25)');
- }
- });
-
//- ScrollReveal().reveal('#feature-section', {delay: 0});
//- ScrollReveal().reveal('#feature-section .title p', {delay: 300});
//- ScrollReveal().reveal('#feature-section .title p.more', {delay: 600});
@@ -167,8 +137,7 @@
.content
h2 ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
p.note 如果您在科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关活动中使用了 Apache ECharts，欢迎引用本论文。
- .link
- a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf").pdf Visual Informatics, 2018 [PDF]
+ a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf").pdf Visual Informatics, 2018 [PDF]
.icon
#paper-icon
#end-line
@@ -186,8 +155,9 @@
var startLine = $("#start-line").offset().top;
var endLine = $("#end-line").offset().top;
- if (startLine >= $(window).scrollTop() && startLine < ($(window).scrollTop() + $(window).height())) {
+ if (startLine >= $(window).scrollTop() && startLine < ($(window).scrollTop() + $(window).height() - 200)) {
if (!hasStartLineShow) {
+ $('#publication').css('opacity', 1);
if (animationMap['start-line']) {
animationMap['start-line'].goToAndPlay(0);
}
@@ -211,7 +181,7 @@
}
}
- if (endLine <= 100) {
+ if (endLine <= 200) {
if (!hasEndLineShow) {
if (animationMap['end-line']) {
animationMap['end-line'].goToAndPlay(0);
@@ -237,36 +207,40 @@
h3 关注我们
hr
p 关注我们以及时获得更多最新动态
- .btn-panel
- a#btn-github(href='https://github.com/apache/incubator-echarts')
- .btn-content
- .btn-logo
- include ../components/svg/github
- +svgGithub('#081642')
- span GitHub
- .icon-v-right
+ .btn-panel.row
+ .col-md-3.col-sm-6
+ a#btn-github(href='https://github.com/apache/incubator-echarts')
+ .btn-content
+ .btn-logo
+ include ../components/svg/github
+ +svgGithub('#081642')
+ span GitHub
+ .icon-v-right
- a#btn-weixin
- .btn-content.zh
- .btn-logo
- include ../components/svg/wechart
- span 公众号
- .weixin-code
- img(src="images/ercode.jpg")
+ .col-md-3.col-sm-6
+ a#btn-weixin
+ .btn-content.zh
+ .btn-logo
+ include ../components/svg/wechart
+ span 公众号
+ .weixin-code
+ img(src="images/ercode.jpg")
- a#btn-weibo(href='https://weibo.com/echarts')
- .btn-content
- .btn-logo
- include ../components/svg/weibo
- span 微博
- .icon-v-right
+ .col-md-3.col-sm-6
+ a#btn-weibo(href='https://weibo.com/echarts')
+ .btn-content
+ .btn-logo
+ include ../components/svg/weibo
+ span 微博
+ .icon-v-right
- a#btn-twitter(href='https://twitter.com/echartsjs')
- .btn-content
- .btn-logo
- include ../components/svg/twitter
- span Twitter
- .icon-v-right
+ .col-md-3.col-sm-6
+ a#btn-twitter(href='https://twitter.com/echartsjs')
+ .btn-content
+ .btn-logo
+ include ../components/svg/twitter
+ span Twitter
+ .icon-v-right
include ../components/footer
diff --git a/_scss/_components.nav.scss b/_scss/_components.nav.scss
index b628759..8d2610c 100644
--- a/_scss/_components.nav.scss
+++ b/_scss/_components.nav.scss
@@ -126,28 +126,35 @@
margin-left: -2px;
}
- .navbar-collapse {
+ #navbar-collapse {
border-top: none;
+ background: $clr-nav-bg;
+ margin-left: -25px;
+ margin-right: -15px;
}
+
.navbar-toggle {
padding: 1px 5px;
margin: 7px 16px 0 0;
- border-color: #384E6B;
- background-color: #384E6B;
+ border-color: $clr-nav-border;
+ background-color: $clr-nav-bg;
+
.icon-bar {
margin: 7px 0!important;
height: 1px;
- background-color: #fff;
+ background-color: $clr-nav-border;
}
+
&:hover, &:focus {
- border-color: #384E6B;
- background-color: #384E6B;
+ border-color: $clr-nav-border;
+ background-color: $clr-nav-bg-hover;
}
}
}
.container-fluid {
- padding-left: 25px;
+ padding: 0 25px;
+ box-shadow: 0 0 20px #ddd;
}
@@ -246,13 +253,6 @@
margin-top: 0;
margin-bottom: 0;
- .open .dropdown-menu {
- li a {
- color: #fff;
- }
- padding: 0;
- }
-
li.active>a {
border-left: 4px solid $clr-nav-link;
border-top: none;
@@ -266,6 +266,9 @@
#nav-download {
display: none;
}
+ .dropdown-menu {
+ width: 100% !important;
+ }
}
@media (max-width: 992px) and (min-width: 768px) {
diff --git a/_scss/_pages.index.scss b/_scss/_pages.index.scss
index 4233db1..ce6b7b7 100644
--- a/_scss/_pages.index.scss
+++ b/_scss/_pages.index.scss
@@ -17,6 +17,7 @@
}
#main-content {
+ overflow: hidden;
color: $clr-text;
a {
@@ -39,6 +40,7 @@
#home-section {
width: 100%;
height: 100vh;
+ overflow: hidden;
}
.home-brand-panel {
@@ -81,13 +83,13 @@
}
.btn-index-home {
- min-width: 180px;
- padding: 15px 25px;
+ min-width: 155px;
+ padding: 10px;
border-radius: 30px;
background-color: $clr-lighter;
color: $clr-dark;
opacity: 0.8;
- font-size: 18px;
+ font-size: 16px;
&:first-child {
background-color: $clr-contrast;
@@ -96,6 +98,7 @@
.index-home-svg {
left: -3px;
+ top: 3px;
}
}
@@ -103,10 +106,15 @@
box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.2);
}
}
+ .btn-index-github {
+ min-width: 46px;
+ height: 46px;
+ background: transparent;
+ }
.index-home-svg {
position: relative;
- top: 3px;
+ top: 4px;
left: -5px;
}
@@ -141,7 +149,8 @@
}
.row {
- margin: 20px 0;
+ margin-top: 20px;
+ margin-bottom: 20px;
}
section.normal {
@@ -243,7 +252,7 @@
display: inline-block;
text-align: center;
width: 36px;
- margin: 15px 0 0 0;
+ margin: 15px 0;
height: 2px;
border: 0;
background-color: $clr-primary;
@@ -264,7 +273,6 @@
.index-feature {
margin: 30px 0;
- padding: 0 50px;
}
.index-feature-left {
@@ -301,24 +309,26 @@
#publication {
overflow: hidden;
height: 720px;
+ opacity: 0;
+ transition: 1s;
#start-line {
position: relative;
- left: 548px;
+ left: 518px;
top: 82px;
width: 200px;
+ z-index: -10;
}
#end-line {
position: relative;
- left: 1045px;
+ left: 1015px;
top: -84px;
width: 257px;
+ z-index: -10;
}
.container {
- padding: 15px 65px;
-
.paper {
display: flex;
justify-content: space-between;
@@ -347,7 +357,7 @@
margin-top: 10px;
}
- .link {
+ .pdf {
display: inline-block;
margin-top: 20px;
height: 45px;
@@ -355,19 +365,14 @@
text-align: center;
background: $clr-primary;
border-radius: 22.5px;
+ padding: 13px 0;
+ color: #fff;
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;
- }
}
}
@@ -409,19 +414,11 @@
}
.btn-panel {
- display: flex;
- justify-content: center;
- margin-top: 71px;
text-align: center;
+ margin-top: 30px;
a {
- flex: 0 0 220px;
height: 78px;
- display: inline-block;
- margin: 0 15px;
- background: #FFFFFF;
- box-shadow: 2px 4px 14px 4px rgba(112,114,124,0.15);
- border-radius: 8px;
&:hover {
text-decoration: none;
@@ -429,24 +426,21 @@
}
}
- #btn-weixin {
- .btn-logo span {
- margin-left: 0px;
- }
- }
-
.btn-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
+ margin: 20px 0;
padding: 9px 22px 9px 24px;
text-indent: 10px;
position: relative;
z-index: 100;
transition: 0.3s;
line-height: 60px;
+ box-shadow: 2px 4px 14px 4px rgba(112,114,124,0.2);
+ border-radius: 8px;
.btn-logo {
display: flex;
@@ -488,25 +482,47 @@
}
@media (max-width: 992px) {
- #home-section {
+ #main-content {
.home-brand-panel {
width: 80%;
left: 0;
margin-left: 10%;
}
+
+ .home-info {
+ width: 100%;
+ left: 0;
+ margin-left: 0;
+ text-align: center;
+ }
+
+ .home-apache {
+ color: $clr-dark-light;
+ }
+
+ .home-chart {
+ position: relative;
+ margin: 0 auto;
+ width: 100%;
+ text-align: center;
+ top: 50px;
+ opacity: 0.3;
+ right: auto;
+ }
}
- #col-desktop > * {
- margin-left: 0;
+ #start-line, #paper-icon, #end-line {
+ display: none;
}
- #col-data {
- padding-top: 100px;
- }
-}
+ #publication {
+ height: auto;
+ margin: 80px 10px;
-.mobile {
- display: none;
+ .container .paper .content {
+ width: 100%;
+ }
+ }
}
@media (max-width: 768px) {
@@ -522,14 +538,6 @@
}
}
- .home-chart {
- position: relative;
- left: 50%;
- margin-left: -143px;
- top: 50px;
- opacity: 0.5;
- }
-
#reference {
background-size: cover;
@@ -551,11 +559,4 @@
}
}
}
-
- #about-section .btn-panel {
- a {
- display: block;
- margin: 20px auto;
- }
- }
}
diff --git a/_scss/_settings.colors.scss b/_scss/_settings.colors.scss
index 6c10b69..4e7ff2a 100644
--- a/_scss/_settings.colors.scss
+++ b/_scss/_settings.colors.scss
@@ -31,6 +31,7 @@
$clr-nav-bg: #fff;
$clr-nav-bg-hover: #f9f9f9;
+$clr-nav-border: #ddd;
$clr-nav-link: $clr-dark;
$clr-nav-link-active: $clr-contrast;
$clr-nav-link-active-hover: $clr-contrast-lighter;
