docker/relationship
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated 添加页面

Browse Source
This commit is contained in:
PASSER-BY
2022-02-14 23:45:38 +08:00
parent 41ad0b6289
commit 34caec269d
3 changed files with 446 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
index.html
View File

@@ -30,6 +30,7 @@
<div class="mod-head">
<div class="bd">
<a class="btn btn-blue" href="/relationship/vue/" target="_blank">手机版</a>
<a class="btn" href="/relationship/table.html" target="_blank">亲戚大全</a>
<a class="btn" href="https://github.com/mumuy/relationship/" rel="nofollow" target="_blank">Github</a>
<a class="btn" href="/">返回首页</a>
</div>
@@ -45,170 +46,172 @@
<p>当前亲戚称呼大全已收录约<b id="count">-</b>条亲戚关系</p>
</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>
</ul>
</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="cantonese">
<span>粤语惯用</span>
</label>
</div>
<div class="field">
我的性别：
<label for="field-1-1">
<input id="field-1-1" type="radio" name="sex" value="1" 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>快速选择：</p>
<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-orange">回退</button>
<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">1. 使用别称查询：</p>
<p class="a">姥姥的爸爸的老窦 / 娘子的爹地的母亲 / 岳丈的妈咪 </p>
<p class="q">2. 使用合称查询：</p>
<p class="a">舅舅的孙辈 / 爸爸的祖父母 / 姑妈的兄弟姐妹 / 表妹的孩子</p>
<p class="q">3. 大小数字混合查询：</p>
<p class="a">儿子的大舅的二姑妈的七舅姥爷 / 女婿的小姨</p>
<p class="q">4. 不限制方向祖辈孙辈跨度，反复查询：</p>
<p class="a">舅妈的婆婆的外甥的姨妈的侄子的爷爷 / 老公的丈母娘的儿媳</p>
<p class="q">5. 年龄推导：</p>
<p class="a">哥哥的表姐 = 姑表姐、舅表姐</p>
<p class="a">堂妹的姐姐 = 堂姐、堂妹</p>
<p class="a">弟弟的表哥 = 姑表哥、姑表弟、舅表哥、舅表弟</p>
</div>
<div class="box">
<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>
</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="cantonese">
<span>粤语惯用</span>
</label>
</div>
<div class="field">
我的性别：
<label for="field-1-1">
<input id="field-1-1" type="radio" name="sex" value="1" 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>
<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">
<div class="field">
<input class="input-text" type="text" name="person" placeholder="输入要查询的称呼"/>
</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>
</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>
<textarea name="input" placeholder="称呼之间用'的'字分开…"></textarea>
</div>
<div class="operation">
<div class="row">
<p>快速选择：</p>
<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-orange">回退</button>
<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">1. 使用别称查询：</p>
<p class="a">姥姥的爸爸的老窦 / 娘子的爹地的母亲 / 岳丈的妈咪 </p>
<p class="q">2. 使用合称查询：</p>
<p class="a">舅舅的孙辈 / 爸爸的祖父母 / 姑妈的兄弟姐妹 / 表妹的孩子</p>
<p class="q">3. 大小数字混合查询：</p>
<p class="a">儿子的大舅的二姑妈的七舅姥爷 / 女婿的小姨</p>
<p class="q">4. 不限制方向祖辈孙辈跨度，反复查询：</p>
<p class="a">舅妈的婆婆的外甥的姨妈的侄子的爷爷 / 老公的丈母娘的儿媳</p>
<p class="q">5. 年龄推导：</p>
<p class="a">哥哥的表姐 = 姑表姐、舅表姐</p>
<p class="a">堂妹的姐姐 = 堂姐、堂妹</p>
<p class="a">弟弟的表哥 = 姑表哥、姑表弟、舅表哥、舅表弟</p>
</div>
</div>
<div class="row">
<p>计算结果：</p>
<p><textarea name="result" readonly></textarea></p>
<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="intro">
<h3>应用场景</h3>
<p class="q">外舅公是我妈的谁？</p>
<p class="q">我爸应该叫舅老爷什么？</p>
<p class="q">我岳父怎么叫我弟弟什么？</p>
<p class="q">我哥如何称呼我岳母？</p>
<div class="c-panel">
<div class="row">
<div class="field">
<input class="input-text" type="text" name="person" placeholder="输入要查询的称呼"/>
</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>
</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>
<p class="q">我岳父怎么叫我弟弟什么？</p>
<p class="q">我哥如何称呼我岳母？</p>
</div>
</div>
</div>
</div>