updated 滚动效果优化
This commit is contained in:
路人甲
458
zh-HK.html
458
zh-HK.html
@@ -26,21 +26,8 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="mod-bg">
|
||||
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.6)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,1)"></use>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div class="scroll-container">
|
||||
<header>
|
||||
<div class="mod-head">
|
||||
<div class="inner">
|
||||
<div class="bd">
|
||||
@@ -57,229 +44,246 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="mod-panel">
|
||||
</header>
|
||||
<section class="scroll-item">
|
||||
<div class="mod-bg">
|
||||
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.6)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)"></use>
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,1)"></use>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="module mod-panel">
|
||||
<div class="inner">
|
||||
<div class="hd">
|
||||
<h1><span class="name">中國</span><span>親戚關系計算器</span><span class="tag">開源算法</span></h1>
|
||||
<p>逢年過節遇到三姑六婆，拒絕叫不出口的尷尬！輕鬆搞定親戚關系～</p>
|
||||
<p>當前親戚稱呼大全已收錄約<b id="count">-</b>條親戚關系</p>
|
||||
<p class="text-gray">始於2016年3月</p>
|
||||
<div class="picture">
|
||||
<img src="static/image/app.png" width="512" height="320" alt="親戚稱呼換算APP"/>
|
||||
</div>
|
||||
<div class="mobile">
|
||||
<a class="btn" href="vue/" target="_blank">
|
||||
<span class="name">訪問手機版</span>
|
||||
<span class="qrcode">
|
||||
<img src="static/image/qrcode.png"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<div class="c-hd">
|
||||
<ul>
|
||||
<li class="active"><a href="javascript:;" rel="nofollow">關系找稱呼</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">稱呼找關系</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">兩者間稱呼</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">兩者的合稱</a></li>
|
||||
</ul>
|
||||
<div class="panel-left">
|
||||
<h1><span class="name">中國</span><span>親戚關系計算器</span><span class="tag">開源算法</span></h1>
|
||||
<p>逢年過節遇到三姑六婆，拒絕叫不出口的尷尬！輕鬆搞定親戚關系～</p>
|
||||
<p>當前親戚稱呼大全已收錄約<b id="count">-</b>條親戚關系</p>
|
||||
<p class="text-gray">始於2016年3月</p>
|
||||
<div class="picture">
|
||||
<img src="static/image/app.png" width="512" height="320" alt="親戚稱呼換算APP"/>
|
||||
</div>
|
||||
<div class="mobile">
|
||||
<a class="btn" href="vue/" target="_blank">
|
||||
<span class="name">訪問手機版</span>
|
||||
<span class="qrcode">
|
||||
<img src="static/image/qrcode.png"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-bd">
|
||||
<div class="c-panel" style="display:block;">
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
區域模式：
|
||||
<label for="field-0-1">
|
||||
<input id="field-0-1" type="radio" name="mode" value="default" checked>
|
||||
<span>默認</span>
|
||||
</label>
|
||||
<label for="field-0-2">
|
||||
<input id="field-0-2" type="radio" name="mode" value="north">
|
||||
<span>北方地區</span>
|
||||
</label>
|
||||
<label for="field-0-3">
|
||||
<input id="field-0-3" type="radio" name="mode" value="guangdong">
|
||||
<span>粵語慣用</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
我的性別：
|
||||
<label for="field-1-1">
|
||||
<input id="field-1-1" type="radio" name="sex" value="1" checked="checked">
|
||||
<span>男</span>
|
||||
</label>
|
||||
<label for="field-1-2">
|
||||
<input id="field-1-2" type="radio" name="sex" value="0">
|
||||
<span>女</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
稱呼方式：
|
||||
<label for="field-2-1">
|
||||
<input id="field-2-1" type="radio" name="reverse" value="0" checked>
|
||||
<span>我稱呼對方</span>
|
||||
</label>
|
||||
<label for="field-2-2">
|
||||
<input id="field-2-2" type="radio" name="reverse" value="1">
|
||||
<span>對方稱呼我</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<textarea name="input" placeholder="稱呼之間用'的'字分開…"></textarea>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<p>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="爸爸">父</button>
|
||||
<button class="btn btn-small" data-value="媽媽">母</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="老公">夫</button>
|
||||
<button class="btn btn-small" data-value="老婆">妻</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="哥哥">兄</button>
|
||||
<button class="btn btn-small" data-value="弟弟">弟</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="姐姐">姐</button>
|
||||
<button class="btn btn-small" data-value="妹妹">妹</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="兒子">子</button>
|
||||
<button class="btn btn-small" data-value="女兒">女</button>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="btn btn-3 btn-orange">回退</button>
|
||||
<button class="btn btn-3 btn-red">清空</button>
|
||||
<button class="btn btn-3 btn-green">計算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>計算結果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="panel-right">
|
||||
<div class="c-hd">
|
||||
<ul>
|
||||
<li class="active"><a href="javascript:;" rel="nofollow">關系找稱呼</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">稱呼找關系</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">兩者間稱呼</a></li>
|
||||
<li><a href="javascript:;" rel="nofollow">兩者的合稱</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="c-panel">
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
輸入稱呼：
|
||||
<input class="input-text" type="text" name="input" placeholder="輸入要查詢的稱呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="c-bd">
|
||||
<div class="c-panel" style="display:block;">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">計算</button>
|
||||
<div class="field">
|
||||
區域模式：
|
||||
<label for="field-0-1">
|
||||
<input id="field-0-1" type="radio" name="mode" value="default" checked>
|
||||
<span>默認</span>
|
||||
</label>
|
||||
<label for="field-0-2">
|
||||
<input id="field-0-2" type="radio" name="mode" value="north">
|
||||
<span>北方地區</span>
|
||||
</label>
|
||||
<label for="field-0-3">
|
||||
<input id="field-0-3" type="radio" name="mode" value="guangdong">
|
||||
<span>粵語慣用</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
我的性別：
|
||||
<label for="field-1-1">
|
||||
<input id="field-1-1" type="radio" name="sex" value="1" checked="checked">
|
||||
<span>男</span>
|
||||
</label>
|
||||
<label for="field-1-2">
|
||||
<input id="field-1-2" type="radio" name="sex" value="0">
|
||||
<span>女</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
稱呼方式：
|
||||
<label for="field-2-1">
|
||||
<input id="field-2-1" type="radio" name="reverse" value="0" checked>
|
||||
<span>我稱呼對方</span>
|
||||
</label>
|
||||
<label for="field-2-2">
|
||||
<input id="field-2-2" type="radio" name="reverse" value="1">
|
||||
<span>對方稱呼我</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<textarea name="input" placeholder="稱呼之間用'的'字分開…"></textarea>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<p>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="爸爸">父</button>
|
||||
<button class="btn btn-small" data-value="媽媽">母</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="老公">夫</button>
|
||||
<button class="btn btn-small" data-value="老婆">妻</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="哥哥">兄</button>
|
||||
<button class="btn btn-small" data-value="弟弟">弟</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="姐姐">姐</button>
|
||||
<button class="btn btn-small" data-value="妹妹">妹</button>
|
||||
</span>
|
||||
<span>
|
||||
<button class="btn btn-small" data-value="兒子">子</button>
|
||||
<button class="btn btn-small" data-value="女兒">女</button>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="btn btn-3 btn-orange">回退</button>
|
||||
<button class="btn btn-3 btn-red">清空</button>
|
||||
<button class="btn btn-3 btn-green">計算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>計算結果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>計算結果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>應用場景</h3>
|
||||
<p class="q">七舅姥爺和我什麼關系？</p>
|
||||
<p class="q">三叔公是什麼親戚？</p>
|
||||
<p class="q">侄子和外甥的區別在哪裏？</p>
|
||||
<p class="q">太外公和外太公有什麼不同？</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-panel">
|
||||
<div class="row text-right">
|
||||
<label for="field-3-0">
|
||||
<input id="field-3-0" type="checkbox" name="optimal" value="1" checked>
|
||||
<span>最短關系</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="person" placeholder="輸入要查詢的稱呼"/>
|
||||
<div class="c-panel">
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
輸入稱呼：
|
||||
<input class="input-text" type="text" name="input" placeholder="輸入要查詢的稱呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">計算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>計算結果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>應用場景</h3>
|
||||
<p class="q">七舅姥爺和我什麼關系？</p>
|
||||
<p class="q">三叔公是什麼親戚？</p>
|
||||
<p class="q">侄子和外甥的區別在哪裏？</p>
|
||||
<p class="q">太外公和外太公有什麼不同？</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
稱呼方式：
|
||||
<label for="field-3-1">
|
||||
<input id="field-3-1" type="radio" name="reverse2" value="1" checked>
|
||||
<span>前者稱呼後者</span>
|
||||
</label>
|
||||
<label for="field-3-2">
|
||||
<input id="field-3-2" type="radio" name="reverse2" value="0">
|
||||
<span>後者稱呼前者</span>
|
||||
<div class="c-panel">
|
||||
<div class="row text-right">
|
||||
<label for="field-3-0">
|
||||
<input id="field-3-0" type="checkbox" name="optimal" value="1" checked>
|
||||
<span>最短關系</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="target" placeholder="輸入要查詢的稱呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">計算</button>
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="person" placeholder="輸入要查詢的稱呼"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>計算結果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>應用場景</h3>
|
||||
<p class="q">外舅公是我媽的誰？</p>
|
||||
<p class="q">我爸應該叫舅老爺什麼？</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-panel">
|
||||
<div class="row text-right">
|
||||
<label for="field-4-0">
|
||||
<input id="field-4-0" type="checkbox" name="optimal" value="1" checked>
|
||||
<span>最短關系</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="person" placeholder="輸入要查詢的稱呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field" style="text-align:center;">
|
||||
<span>+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="target" placeholder="輸入要查詢的稱呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">計算</button>
|
||||
<div class="field">
|
||||
稱呼方式：
|
||||
<label for="field-3-1">
|
||||
<input id="field-3-1" type="radio" name="reverse2" value="1" checked>
|
||||
<span>前者稱呼後者</span>
|
||||
</label>
|
||||
<label for="field-3-2">
|
||||
<input id="field-3-2" type="radio" name="reverse2" value="0">
|
||||
<span>後者稱呼前者</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="target" placeholder="輸入要查詢的稱呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">計算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>計算結果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>應用場景</h3>
|
||||
<p class="q">外舅公是我媽的誰？</p>
|
||||
<p class="q">我爸應該叫舅老爺什麼？</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>計算結果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>應用場景</h3>
|
||||
<p class="q">奶奶和外婆之間什麼關系？</p>
|
||||
<p class="q">舅公和爺爺是什麼關系？</p>
|
||||
<div class="c-panel">
|
||||
<div class="row text-right">
|
||||
<label for="field-4-0">
|
||||
<input id="field-4-0" type="checkbox" name="optimal" value="1" checked>
|
||||
<span>最短關系</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="person" placeholder="輸入要查詢的稱呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field" style="text-align:center;">
|
||||
<span>+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<input class="input-text" type="text" name="target" placeholder="輸入要查詢的稱呼"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="row">
|
||||
<button class="btn btn-red">清空</button>
|
||||
<button class="btn btn-green">計算</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>計算結果：</p>
|
||||
<p><textarea name="result" readonly></textarea></p>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h3>應用場景</h3>
|
||||
<p class="q">奶奶和外婆之間什麼關系？</p>
|
||||
<p class="q">舅公和爺爺是什麼關系？</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="scroll-item">
|
||||
<div class="module mod-intro">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>功能支持</span></div>
|
||||
@@ -361,9 +365,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-banner">
|
||||
</section>
|
||||
<section class="scroll-item">
|
||||
<div class="module mod-article">
|
||||
<div class="inner">
|
||||
<div class="bd">
|
||||
<div class="banner">
|
||||
<span>外甥</span>
|
||||
<span>姑姑</span>
|
||||
<span>岳父</span>
|
||||
@@ -403,10 +409,6 @@
|
||||
<span>孫子</span>
|
||||
<span>姑丈公</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="module mod-article">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>關於中國親戚稱呼</span></div>
|
||||
<div class="bd">
|
||||
<p>親屬是基於婚姻、血緣和法律擬制而形成的社會關系。親屬關系包括夫妻、父母、子女、兄弟姊妹、祖父母和外祖父母、孫子女和外孫子女、兒媳和公婆、女婿和岳父母、以及其他三代以內的旁系血親，如伯、叔、姑、舅、姨、侄子女、甥子女、堂兄弟姊妹、表兄弟姊妹、姨兄弟姊妹等。</p>
|
||||
@@ -416,6 +418,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="scroll-item">
|
||||
<div class="module mod-copy">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>算法開源</span></div>
|
||||
@@ -433,6 +437,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="scroll-item">
|
||||
<div class="module mod-app">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>他們都在使用</span></div>
|
||||
@@ -466,7 +472,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mod-foot">
|
||||
<div class="module mod-foot">
|
||||
<div class="inner">
|
||||
<div class="hd"><span>😳支持我的開源</span></div>
|
||||
<div class="bd">
|
||||
@@ -503,7 +509,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
|
||||
<script type="text/javascript" src="https://passer-by.com/public/script/stat.js"></script>
|
||||
</section>
|
||||
</div>
|
||||
<script type="text/javascript" src="dist/lang/relationship.zh-HK.min.js"></script>
|
||||
<script type="text/javascript" src="dist/lang/relationship-mode.zh-HK.min.js"></script>
|
||||
@@ -764,7 +772,5 @@
|
||||
})();
|
||||
</script>
|
||||
<script async defer src="https://cdn.bootcdn.net/ajax/libs/github-buttons/2.21.1/buttons.min.js"></script>
|
||||
<script type="text/javascript" src="https://passer-by.com/public/script/projects.js"></script>
|
||||
<script type="text/javascript" src="https://passer-by.com/public/script/stat.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user