updated 添加新模块介绍
This commit is contained in:
mumuy
parent
227f44dced
commit
fcd00542c6
44
index.html
44
index.html
@ -366,6 +366,50 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="scroll-item">
|
||||||
|
<div class="module mod-feature">
|
||||||
|
<div class="inner">
|
||||||
|
<div class="bd">
|
||||||
|
<ul class="nav">
|
||||||
|
<li>
|
||||||
|
<p class="title">完整的亲戚关系数据</p>
|
||||||
|
<p class="desc">收录前后多代血亲及姻亲关系数据</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="title">简单易读的数据格式</p>
|
||||||
|
<p class="desc">独创的关系数据结构方便数据查找</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="title">高效全面的网络解析</p>
|
||||||
|
<p class="desc">算法解析包含了网络中的各个节点</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="title">自定义地域称呼功能</p>
|
||||||
|
<p class="desc">让你可以定制符合自己习惯的版本</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="panels">
|
||||||
|
<div class="panel">
|
||||||
|
<img src="./static/image/draw/1.svg" height="320">
|
||||||
|
<span class="slogan">包含了数万条亲戚关系及称呼</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<img src="./static/image/draw/2.svg" height="320">
|
||||||
|
<span class="slogan">拥有小巧而极致的亲戚数据库</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<img src="./static/image/draw/3.svg" height="320">
|
||||||
|
<span class="slogan">不再错过任何一种可能的关系</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<img src="./static/image/draw/4.svg" height="320">
|
||||||
|
<span class="slogan">亲戚该怎么称呼全由自己做主</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<section class="scroll-item">
|
<section class="scroll-item">
|
||||||
<div class="module mod-article">
|
<div class="module mod-article">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
|
|||||||
1
static/image/draw/1.svg
Normal file
1
static/image/draw/1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
1
static/image/draw/2.svg
Normal file
1
static/image/draw/2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.6 KiB |
1
static/image/draw/3.svg
Normal file
1
static/image/draw/3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
1
static/image/draw/4.svg
Normal file
1
static/image/draw/4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
1
static/image/summary-bg.svg
Normal file
1
static/image/summary-bg.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'><circle cx='1.5' cy='1.5' r='2' fill='#DCE2E6' fill-rule='evenodd'/></svg>
|
||||||
|
After Width: | Height: | Size: 158 B |
@ -9,6 +9,29 @@
|
|||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
// 特征选项卡
|
||||||
|
(function(){
|
||||||
|
let $mod_feature = document.querySelector('.mod-feature');
|
||||||
|
let $nav = $mod_feature.querySelectorAll('.nav li');
|
||||||
|
let $panels = $mod_feature.querySelectorAll('.panels .panel');
|
||||||
|
let togglePanel = function(index = 0){
|
||||||
|
$nav.forEach(function($li){
|
||||||
|
$li.classList.remove('active');
|
||||||
|
});
|
||||||
|
$nav[index].classList.add('active');
|
||||||
|
$panels.forEach(function($panel){
|
||||||
|
$panel.classList.remove('active');
|
||||||
|
});
|
||||||
|
$panels[index].classList.add('active');
|
||||||
|
};
|
||||||
|
$nav.forEach(function($item,index){
|
||||||
|
$item.addEventListener('click',function(){
|
||||||
|
togglePanel(index);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
togglePanel(0);
|
||||||
|
})();
|
||||||
|
|
||||||
// 底部滚动
|
// 底部滚动
|
||||||
(function(){
|
(function(){
|
||||||
let $gotop = document.querySelector('.mod-fixedbar .gotop');
|
let $gotop = document.querySelector('.mod-fixedbar .gotop');
|
||||||
|
|||||||
@ -353,7 +353,7 @@ header{
|
|||||||
}
|
}
|
||||||
.mod-panel .panel-right .c-hd li.active a{
|
.mod-panel .panel-right .c-hd li.active a{
|
||||||
flex: 1.5;
|
flex: 1.5;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
color: rgba(0,0,0,0.9);
|
color: rgba(0,0,0,0.9);
|
||||||
}
|
}
|
||||||
.mod-panel .panel-right .c-hd li.active a::after{
|
.mod-panel .panel-right .c-hd li.active a::after{
|
||||||
@ -533,6 +533,68 @@ header{
|
|||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mod-feature .bd{
|
||||||
|
display: flex;
|
||||||
|
padding: 25px 0;
|
||||||
|
}
|
||||||
|
.mod-feature .bd ul{
|
||||||
|
width: 350px;
|
||||||
|
margin-left: 20px;
|
||||||
|
padding: 25px 0;
|
||||||
|
}
|
||||||
|
.mod-feature .bd li{
|
||||||
|
padding: 20px;
|
||||||
|
margin: 5px 0;
|
||||||
|
margin-left: 15px;
|
||||||
|
background: linear-gradient(to right, #f6f8fa 0, transparent 100%);
|
||||||
|
line-height: 28px;
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
opacity: 0.75;
|
||||||
|
transition: all 0.25s ease-in;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.mod-feature .bd li.active{
|
||||||
|
opacity: 1;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.mod-feature .bd li p.title{
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.mod-feature .bd li p.desc{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.mod-feature .panels{
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 20px;
|
||||||
|
background: url('../image/summary-bg.svg') center center repeat;
|
||||||
|
}
|
||||||
|
.mod-feature .panel{
|
||||||
|
display: none;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px 0 100px;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.mod-feature .panel.active{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.mod-feature .panel .slogan{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 10px;
|
||||||
|
padding: 15px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.mod-article .banner{
|
.mod-article .banner{
|
||||||
height: 120px;
|
height: 120px;
|
||||||
padding: 20px 20px 20px 38%;
|
padding: 20px 20px 20px 38%;
|
||||||
|
|||||||
44
zh-HK.html
44
zh-HK.html
@ -366,6 +366,50 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="scroll-item">
|
||||||
|
<div class="module mod-feature">
|
||||||
|
<div class="inner">
|
||||||
|
<div class="bd">
|
||||||
|
<ul class="nav">
|
||||||
|
<li>
|
||||||
|
<p class="title">完整的親戚關係數據</p>
|
||||||
|
<p class="desc">收錄前後多代血親及姻親關係數據</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="title">簡單易讀的數據格式</p>
|
||||||
|
<p class="desc">獨創的關係數據結構方便數據查找</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="title">高效全麵的網絡解析</p>
|
||||||
|
<p class="desc">算法解析包含了網絡中的各個節點</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<p class="title">自定義地域稱呼功能</p>
|
||||||
|
<p class="desc">讓你可以定製符合自己習慣的版本</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="panels">
|
||||||
|
<div class="panel">
|
||||||
|
<img src="./static/image/draw/1.svg" height="320">
|
||||||
|
<span class="slogan">包含了數萬條親戚關係及稱呼</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<img src="./static/image/draw/2.svg" height="320">
|
||||||
|
<span class="slogan">擁有小巧而極緻的親戚數據庫</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<img src="./static/image/draw/3.svg" height="320">
|
||||||
|
<span class="slogan">不再錯過任何一種可能的關係</span>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<img src="./static/image/draw/4.svg" height="320">
|
||||||
|
<span class="slogan">親戚該怎麼稱呼全由自己做主</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<section class="scroll-item">
|
<section class="scroll-item">
|
||||||
<div class="module mod-article">
|
<div class="module mod-article">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user