Skip to content
Permalink
Browse files
update index design
  • Loading branch information
Ovilia committed Jan 6, 2021
1 parent 6ecca4c commit 31c8eda9626aa8a75204bd3d98cf97053829474a
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 94 deletions.
@@ -78,7 +78,7 @@ mixin nav(hostParam, cdnPayRootParam, cdnPayVersionParam)
a(href='https://github.com/apache/incubator-echarts/issues', target='_blank') Issues(GitHub)
include ./svg/external-link
li#nav-others
a(href='#', class="dropdown-toggle", data-toggle="dropdown") 其他
a(href='#', class="dropdown-toggle", data-toggle="dropdown") ASF
b.caret
ul.dropdown-menu
li
@@ -1,2 +1,2 @@
svg(width='25px', height='19px', viewBox='0 0 17 22', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', class="index-home-svg")
path(fill="#081642", d='M21,0 L6,0 C4.9,0 4,0.9 4,2 L4,4 L2,4 C0.9,4 0,4.9 0,6 L0,18 C0,19.1 0.9,20 2,20 L17,20 C18.1,20 19,19.1 19,18 L19,16 L21,16 C22.1,16 23,15.1 23,14 L23,2 C23,0.9 22.1,0 21,0 Z M17,18 L2,18 L2,6 L17,6 L17,18 Z M21,14 L19,14 L19,6 C19,4.9 18.1,4 17,4 L6,4 L6,2 L21,2 L21,14 Z M4,15 L4,12 C4,11.4 4.4,11 5,11 C5.6,11 6,11.4 6,12 L6,15 C6,15.6 5.6,16 5,16 C4.4,16 4,15.6 4,15 Z M13,15 L13,12 C13,11.4 13.4,11 14,11 C14.6,11 15,11.4 15,12 L15,15 C15,15.6 14.6,16 14,16 C13.4,16 13,15.6 13,15 Z M7,15 L7,9 C7,8.4 7.4,8 8,8 C8.6,8 9,8.4 9,9 L9,15 C9,15.6 8.6,16 8,16 C7.4,16 7,15.6 7,15 Z M10,15 L10,11 C10,10.4 10.4,10 11,10 C11.6,10 12,10.4 12,11 L12,15 C12,15.6 11.6,16 11,16 C10.4,16 10,15.6 10,15 Z')
path(fill="#F72C5B", d='M21,0 L6,0 C4.9,0 4,0.9 4,2 L4,4 L2,4 C0.9,4 0,4.9 0,6 L0,18 C0,19.1 0.9,20 2,20 L17,20 C18.1,20 19,19.1 19,18 L19,16 L21,16 C22.1,16 23,15.1 23,14 L23,2 C23,0.9 22.1,0 21,0 Z M17,18 L2,18 L2,6 L17,6 L17,18 Z M21,14 L19,14 L19,6 C19,4.9 18.1,4 17,4 L6,4 L6,2 L21,2 L21,14 Z M4,15 L4,12 C4,11.4 4.4,11 5,11 C5.6,11 6,11.4 6,12 L6,15 C6,15.6 5.6,16 5,16 C4.4,16 4,15.6 4,15 Z M13,15 L13,12 C13,11.4 13.4,11 14,11 C14.6,11 15,11.4 15,12 L15,15 C15,15.6 14.6,16 14,16 C13.4,16 13,15.6 13,15 Z M7,15 L7,9 C7,8.4 7.4,8 8,8 C8.6,8 9,8.4 9,9 L9,15 C9,15.6 8.6,16 8,16 C7.4,16 7,15.6 7,15 Z M10,15 L10,11 C10,10.4 10.4,10 11,10 C11.6,10 12,10.4 12,11 L12,15 C12,15.6 11.6,16 11,16 C10.4,16 10,15.6 10,15 Z')
@@ -16,8 +16,7 @@ block content
section#home-section
.home-brand-panel.description.container
.home-info
.home-apache Apache
.home-brand ECharts
.home-brand Apache ECharts
.home-subtitle 一个基于 JavaScript 的开源可视化图表库
.home-btn-panel
a.btn.btn-main.btn-index-home(href='./feature.html')
@@ -43,58 +42,60 @@ block content
section#feature-section
.container
.index-features
h2 特性
hr
a.more(href='#') 查看完整特性
h2.reveal 特性
hr.reveal
a.more.reveal(href='#') 查看完整特性
.row
.col-md-6
.index-feature
.index-feature-left
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-1
.index-feature-icon#icon-1
.index-feature-right
h3 丰富的图表类型
p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
.index-feature-right.reveal
h3.reveal 丰富的图表类型
p.reveal-later 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
.col-md-6
.index-feature
.index-feature-left
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-2
.index-feature-icon#icon-2
.index-feature-right
h3 强劲的渲染引擎
p 采用增量渲染、流式加载等技术,千万级数据的图表也能在网页上流畅交互。
h3.reveal 丰富的图表类型
p.reveal-later 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
//- h3.reveal 强劲的渲染引擎
//- p.reveal-later 采用增量渲染、流式加载等技术,千万级数据的图表也能在网页上流畅交互。
.col-md-6
.index-feature
.index-feature-left
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-3
.index-feature-icon#icon-3
.index-feature-right
h3 丰富的图表类型
p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
h3.reveal 丰富的图表类型
p.reveal-later 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
.col-md-6
.index-feature
.index-feature-left
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-4
.index-feature-icon#icon-4
.index-feature-right
h3 丰富的图表类型
p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
h3.reveal 丰富的图表类型
p.reveal-later 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
.col-md-6
.index-feature
.index-feature-left
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-5
.index-feature-icon#icon-5
.index-feature-right
h3 丰富的图表类型
p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
h3.reveal 丰富的图表类型
p.reveal-later 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
.col-md-6
.index-feature
.index-feature-left
.index-feature-left.reveal
.index-feature-icon-bg#bg-icon-6
.index-feature-icon#icon-6
.index-feature-right
h3 丰富的图表类型
p 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。
h3.reveal 丰富的图表类型
p.reveal-later 内置的 20 多种图表、强大的自定义系列以及来自社区贡献的扩展插件,助你轻松实现各种可视化需求。

script(type='text/javascript').
var animationMap = {};
@@ -123,21 +124,15 @@ block content
setLottieAnimatiion('bg-icon-' + (i + 1), 'asset/lottie/json/bg_0'+ (i + 1) + '.json');
}

//- ScrollReveal().reveal('#feature-section', {delay: 0});
//- ScrollReveal().reveal('#feature-section .title p', {delay: 300});
//- ScrollReveal().reveal('#feature-section .title p.more', {delay: 600});
//- ScrollReveal().reveal('#feature-section .list-item .left', {delay: 900});
//- ScrollReveal().reveal('#feature-section .list-item .right h3', {delay: 1200});
//- ScrollReveal().reveal('#feature-section .list-item .right .content', {delay: 1500});

section#publication
.container
#start-line
.paper
.content
h2 ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
p.note 如果您在科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关活动中使用了 Apache ECharts,欢迎引用本论文。
a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf").pdf Visual Informatics, 2018 [PDF]
h2.reveal ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
p.note.reveal-later 如果您在科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关活动中使用了 Apache ECharts,欢迎引用本论文。
.single-btn-panel
a(href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf").pdf.reveal-later Visual Informatics, 2018 [PDF]
.icon
#paper-icon
#end-line
@@ -155,7 +150,7 @@ block content
var startLine = $("#start-line").offset().top;
var endLine = $("#end-line").offset().top;

if (startLine >= $(window).scrollTop() && startLine < ($(window).scrollTop() + $(window).height() - 200)) {
if (startLine >= $(window).scrollTop() && startLine < ($(window).scrollTop() + $(window).height() - 300)) {
if (!hasStartLineShow) {
$('#publication').css('opacity', 1);
if (animationMap['start-line']) {
@@ -181,7 +176,7 @@ block content
}
}

if (endLine <= 200) {
if (endLine <= 300) {
if (!hasEndLineShow) {
if (animationMap['end-line']) {
animationMap['end-line'].goToAndPlay(0);
@@ -202,7 +197,7 @@ block content

})()

section.normal#about-section
section.normal#about-section.reveal-about
.container
h3 关注我们
hr
@@ -235,13 +230,27 @@ block content
.icon-v-right

.col-md-3.col-sm-6
a#btn-twitter(href='https://twitter.com/echartsjs')
a#btn-twitter(href='https://twitter.com/ApacheECharts')
.btn-content
.btn-logo
include ../components/svg/twitter
span Twitter
.icon-v-right

script(type='text/javascript').
ScrollReveal().reveal('.reveal', {
container: '#page-index',
delay: 300
});
ScrollReveal().reveal('.reveal-later', {
container: '#page-index',
delay: 600
});
ScrollReveal().reveal('.reveal-about', {
container: '#page-index',
delay: 1500
});

include ../components/footer

block extra_js
@@ -6,7 +6,6 @@ $nav-height: 51px;
z-index: 10000;
transition: background-color 0.5s linear;
height: 50px;
box-shadow: 0 0 20px #ddd;

.navbar-nav {
transition: background-color 0.5s linear;
@@ -27,7 +26,7 @@ $nav-height: 51px;
right: 50%;
top: 0;
background: $clr-nav-link;
height: 4px;
height: 3px;
transition-property: 'left, right';
transition-duration: .3s;
transition-timing-function: ease-out;
@@ -72,7 +71,7 @@ $nav-height: 51px;

&.active>a {
padding-top: 11px;
border-top: 4px solid $clr-nav-link-active;
border-top: 3px solid $clr-nav-link-active;
color: $clr-nav-link-active;
background-color: $clr-nav-bg;
transition: 0.5s background-color;
@@ -111,7 +110,7 @@ $nav-height: 51px;
}

ul {
box-shadow: 0 0 20px #ddd;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 0 0 10px 10px;
overflow: hidden;

@@ -254,7 +253,7 @@ $nav-height: 51px;
margin-bottom: 0;

li.active>a {
border-left: 4px solid $clr-nav-link;
border-left: 3px solid $clr-nav-link;
border-top: none;
padding: 10px 15px 10px 11px;
}

0 comments on commit 31c8eda

Please sign in to comment.