From fcd00542c6c29bd876b201332cb7b0b11cdd89dd Mon Sep 17 00:00:00 2001 From: mumuy <> Date: Sat, 21 Sep 2024 09:36:47 +0800 Subject: [PATCH] =?UTF-8?q?updated=20=E6=B7=BB=E5=8A=A0=E6=96=B0=E6=A8=A1?= =?UTF-8?q?=E5=9D=97=E4=BB=8B=E7=BB=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 44 +++++++++++++++++++++++++ static/image/draw/1.svg | 1 + static/image/draw/2.svg | 1 + static/image/draw/3.svg | 1 + static/image/draw/4.svg | 1 + static/image/summary-bg.svg | 1 + static/script/index.js | 23 +++++++++++++ static/style/index.css | 64 ++++++++++++++++++++++++++++++++++++- zh-HK.html | 44 +++++++++++++++++++++++++ 9 files changed, 179 insertions(+), 1 deletion(-) create mode 100644 static/image/draw/1.svg create mode 100644 static/image/draw/2.svg create mode 100644 static/image/draw/3.svg create mode 100644 static/image/draw/4.svg create mode 100644 static/image/summary-bg.svg diff --git a/index.html b/index.html index f4bd01a..1a6d74d 100644 --- a/index.html +++ b/index.html @@ -366,6 +366,50 @@ +
+
+
+
+
    +
  • +

    完整的亲戚关系数据

    +

    收录前后多代血亲及姻亲关系数据

    +
    • +
  • +

    简单易读的数据格式

    +

    独创的关系数据结构方便数据查找

    +
    • +
  • +

    高效全面的网络解析

    +

    算法解析包含了网络中的各个节点

    +
    • +
  • +

    自定义地域称呼功能

    +

    让你可以定制符合自己习惯的版本

    +
    • +
+
+
+ + 包含了数万条亲戚关系及称呼 +
+
+ + 拥有小巧而极致的亲戚数据库 +
+
+ + 不再错过任何一种可能的关系 +
+
+ + 亲戚该怎么称呼全由自己做主 +
+
+
+
+
+
diff --git a/static/image/draw/1.svg b/static/image/draw/1.svg new file mode 100644 index 0000000..62314fc --- /dev/null +++ b/static/image/draw/1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/image/draw/2.svg b/static/image/draw/2.svg new file mode 100644 index 0000000..df66f03 --- /dev/null +++ b/static/image/draw/2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/image/draw/3.svg b/static/image/draw/3.svg new file mode 100644 index 0000000..9fbbac3 --- /dev/null +++ b/static/image/draw/3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/image/draw/4.svg b/static/image/draw/4.svg new file mode 100644 index 0000000..134cd0f --- /dev/null +++ b/static/image/draw/4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/image/summary-bg.svg b/static/image/summary-bg.svg new file mode 100644 index 0000000..f728874 --- /dev/null +++ b/static/image/summary-bg.svg @@ -0,0 +1 @@ + diff --git a/static/script/index.js b/static/script/index.js index 0ff219e..aabf9ee 100644 --- a/static/script/index.js +++ b/static/script/index.js @@ -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(){ let $gotop = document.querySelector('.mod-fixedbar .gotop'); diff --git a/static/style/index.css b/static/style/index.css index 1c20af3..5f85ab1 100644 --- a/static/style/index.css +++ b/static/style/index.css @@ -353,7 +353,7 @@ header{ } .mod-panel .panel-right .c-hd li.active a{ flex: 1.5; - font-size: 20px; + font-size: 18px; color: rgba(0,0,0,0.9); } .mod-panel .panel-right .c-hd li.active a::after{ @@ -533,6 +533,68 @@ header{ 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{ height: 120px; padding: 20px 20px 20px 38%; diff --git a/zh-HK.html b/zh-HK.html index 98aadc9..0ce769c 100644 --- a/zh-HK.html +++ b/zh-HK.html @@ -366,6 +366,50 @@
+
+
+
+
+
    +
  • +

    完整的親戚關係數據

    +

    收錄前後多代血親及姻親關係數據

    +
    • +
  • +

    簡單易讀的數據格式

    +

    獨創的關係數據結構方便數據查找

    +
    • +
  • +

    高效全麵的網絡解析

    +

    算法解析包含了網絡中的各個節點

    +
    • +
  • +

    自定義地域稱呼功能

    +

    讓你可以定製符合自己習慣的版本

    +
    • +
+
+
+ + 包含了數萬條親戚關係及稱呼 +
+
+ + 擁有小巧而極緻的親戚數據庫 +
+
+ + 不再錯過任何一種可能的關係 +
+
+ + 親戚該怎麼稱呼全由自己做主 +
+
+
+
+
+