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-24 22:57:51 +08:00
parent e74aa28795
commit c542c60034
4 changed files with 219 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dist/relationship.min.js vendored
View File

File diff suppressed because one or more lines are too long

330
index.html
View File

@ -28,6 +28,7 @@
<div class="header"> <div class="header">
<div class="inner"> <div class="inner">
<div class="mod-head"> <div class="mod-head">
<div class="hd"><span class="tag">开源算法</span></div>
<div class="bd"> <div class="bd">
<a class="btn btn-blue" href="/relationship/vue/" target="_blank">手机版</a> <a class="btn btn-blue" href="/relationship/vue/" target="_blank">手机版</a>
<a class="btn" href="https://github.com/mumuy/relationship/" rel="nofollow" target="_blank">Github</a> <a class="btn" href="https://github.com/mumuy/relationship/" rel="nofollow" target="_blank">Github</a>
@ -45,185 +46,184 @@
<p>当前<a href="/relationship/table.html" target="_blank">亲戚称呼大全</a>已收录约<b id="count">-</b>条亲戚关系</p> <p>当前<a href="/relationship/table.html" target="_blank">亲戚称呼大全</a>已收录约<b id="count">-</b>条亲戚关系</p>
</div> </div>
<div class="bd"> <div class="bd">
<div class="box"> <div class="c-hd">
<div class="c-hd"> <ul>
<ul> <li class="active"><a href="javascript:;" rel="nofollow">通过关系找称呼</a></li>
<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>
<li><a href="javascript:;" rel="nofollow">任意两者间称呼</a></li> </ul>
</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-1">
<input id="field-1-1" type="radio" name="sex" value="1">
<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>
<p class="q">6. 根据语境确认性别：</p>
<p class="a">老婆的女儿的外婆 = 岳母</p>
<p class="a">爱人的婆婆的儿子 = 兄弟</p>
</div>
</div> </div>
<div class="c-bd"> <div class="c-panel">
<div class="c-panel" style="display:block;"> <div class="row">
<div class="row"> <div class="field">
<div class="field"> 输入称呼：
区域模式： <input class="input-text" type="text" name="input" placeholder="输入要查询的称呼"/>
<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-1">
<input id="field-1-1" type="radio" name="sex" value="1">
<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>
<p class="q">6. 根据语境确认性别：</p>
<p class="a">老婆的女儿的外婆 = 岳母</p>
<p class="a">爱人的婆婆的儿子 = 兄弟</p>
</div> </div>
</div> </div>
<div class="c-panel"> <div class="operation">
<div class="row"> <div class="row">
<div class="field"> <button class="btn btn-red">清空</button>
输入称呼： <button class="btn btn-green">计算</button>
<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> </div>
<div class="c-panel"> <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"> <div class="row">
<div class="field"> <button class="btn btn-red">清空</button>
<input class="input-text" type="text" name="person" placeholder="输入要查询的称呼"/> <button class="btn btn-green">计算</button>
</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>
<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> </div>
</div> </div>
<div class="ft"> <div class="ft">
<div class="article"> <div class="article">
<p>亲属是基于婚姻、血缘和法律拟制而形成的社会关系。亲属关系包括夫妻、父母、子女、兄弟姊妹、祖父母和外祖父母、孙子女和外孙子女、儿媳和公婆、女婿和岳父母、以及其他三代以内的旁系血亲，如伯、叔、姑、舅、姨、侄子女、甥子女、堂兄弟姊妹、表兄弟姊妹等。</p>
<p>亲属称谓指是以本人为中心确定亲族成员和本人关系的名称，是基于血亲姻亲基础上的亲属之间相互称呼的名称、叫法。汉族的家族亲属关系条理分明尊卑有序：比自己长一辈的称呼有姨姑舅叔伯，同辈的有兄弟姊妹、堂表亲等等，下一辈有甥侄等等。中国人由于姻亲而产生的亲戚关系相当庞杂，“祖宗十八代”“五服”“九族”让人难以区分，其派生出的各种称谓也是中华文化的一大特征。</p> <p>亲属称谓指是以本人为中心确定亲族成员和本人关系的名称，是基于血亲姻亲基础上的亲属之间相互称呼的名称、叫法。汉族的家族亲属关系条理分明尊卑有序：比自己长一辈的称呼有姨姑舅叔伯，同辈的有兄弟姊妹、堂表亲等等，下一辈有甥侄等等。中国人由于姻亲而产生的亲戚关系相当庞杂，“祖宗十八代”“五服”“九族”让人难以区分，其派生出的各种称谓也是中华文化的一大特征。</p>
<p>如今由于工作生活节奏差异，很多关系稍疏远的亲戚之间来往并不多，年龄差异长幼辈分模糊。春节拜年走亲戚遇到七大姑八大姨，往往会搞不清楚哪位亲戚应该喊什么称呼，很是尴尬。不仅小孩搞不清亲戚关系和亲戚称谓，就连年轻一代的大人也都常常模糊混乱。</p> <p>如今由于工作生活节奏差异，很多关系稍疏远的亲戚之间来往并不多，年龄差异长幼辈分模糊。春节拜年走亲戚遇到七大姑八大姨，往往会搞不清楚哪位亲戚应该喊什么称呼，很是尴尬。不仅小孩搞不清亲戚关系和亲戚称谓，就连年轻一代的大人也都常常模糊混乱。</p>
<p>“中国亲戚关系计算器”为你避免了叫错、不会叫亲戚的尴尬，收录了中国亲戚关系称呼大全，只需简单的输入即可完成称呼计算。称呼计算器同时兼容了不同地域的方言叫法，你可以称呼父亲为：“老爸”、“爹地”、“老爷子”等等。让您准确的叫出亲戚称谓，理清亲属之间的亲戚关系，轻松掌握中国式的亲戚关系换算，让你更了解中国文化。</p> <p>“中国亲戚关系计算器”为你避免了叫错、不会叫亲戚的尴尬，收录了中国亲戚关系称呼大全，只需简单的输入即可完成称呼计算。称呼计算器同时兼容了不同地域的方言叫法，你可以称呼父亲为：“老爸”、“爹地”、“老爷子”等等。让您准确的叫出亲戚称谓，理清亲属之间的亲戚关系，轻松掌握中国式的亲戚关系换算，让你更了解中国文化。</p>

18
script/relationship.js
View File

@ -216,9 +216,13 @@
'[ob|os]':['哥哥姐姐'], '[ob|os]':['哥哥姐姐'],
'[lb|ls]':['弟弟妹妹'], '[lb|ls]':['弟弟妹妹'],
'[ob|ob,w]':['哥嫂','哥哥嫂嫂'], '[ob|ob,w]':['哥嫂','哥哥嫂嫂'],
'[xb,s|xb,d]':['侄子女','侄子侄女'],
'[xs,s|xs,d]':['甥子女','外甥子女'],
'[s|d]':['子女','儿女','小孩','孩子','孩子们','孩儿','宝宝','宝贝','娃','儿辈','子辈'], '[s|d]':['子女','儿女','小孩','孩子','孩子们','孩儿','宝宝','宝贝','娃','儿辈','子辈'],
'[s,s|s,d|d,s|d,d]':['孙辈'], '[s,s|s,d|d,s|d,d]':['孙辈'],
'[s|d|s,s|s,d|d,s|d,d]':['儿孙','子孙'], '[s,s|s,d]':['孙子女'],
'[d,s|d,d]':['外孙子女'],
'[s|d|s,s|s,d|d,s|d,d]':['儿孙','子孙','孙息'],
'[s,w,f|s,w,m|d,h,f|d,h,m]':['亲家','儿女亲家'], '[s,w,f|s,w,m|d,h,f|d,h,m]':['亲家','儿女亲家'],
// 本家 // 本家
'f':['爸爸','父亲','老爸','阿爸','阿爹','老窦','老汉','老子','爸','父','爹','爹爹','爹地','爹啲','老爹','大大','老爷子'], 'f':['爸爸','父亲','老爸','阿爸','阿爹','老窦','老汉','老子','爸','父','爹','爹爹','爹地','爹啲','老爹','大大','老爷子'],
@ -812,8 +816,8 @@
'f,xb,d,d,d':['堂甥外孙女','从父甥外孙女'], 'f,xb,d,d,d':['堂甥外孙女','从父甥外孙女'],
'f,xb,d,d,d,h':['堂甥外孙婿','从父甥外孙婿'], 'f,xb,d,d,d,h':['堂甥外孙婿','从父甥外孙婿'],
// 姑表 // 姑表
'f,os':['姑母','大姑妈'], 'f,os':['大姑','大姑妈','姑母','姑姊'],
'f,ls':['姑姐','小姑妈','姑仔','幺姑'], 'f,ls':['小姑','小姑妈','姑姐','姑妹','姑仔','幺姑'],
'f,xs':['姑妈','姑姑','嬢嬢','姑','x嬢嬢','x嬢','x姑妈','x姑'], 'f,xs':['姑妈','姑姑','嬢嬢','姑','x嬢嬢','x嬢','x姑妈','x姑'],
'f,xs,h':['姑丈','姑父','姑爸','姑爹','姑夫','姑婿','x姑丈','x姑父'], 'f,xs,h':['姑丈','姑父','姑爸','姑爹','姑夫','姑婿','x姑丈','x姑父'],
'f,xs,h,f':['姑姻祖父','姑姻王父','姑姻爷爷'], 'f,xs,h,f':['姑姻祖父','姑姻王父','姑姻爷爷'],
@ -883,7 +887,7 @@
'f,xs,d,d,d':['姑表甥外孙女'], 'f,xs,d,d,d':['姑表甥外孙女'],
'f,xs,d,d,d,h':['姑表甥外孙婿'], 'f,xs,d,d,d,h':['姑表甥外孙婿'],
// 外家 // 外家
'm':['妈妈','母亲','阿妈','老母','老妈','老娘','老妈子','妈','母','娘','娘亲','妈咪'], 'm':['妈妈','母亲','阿妈','老母','老妈','老娘','老妈子','姆嬷','妈','母','娘','娘亲','妈咪'],
// 外公 // 外公
'm,f':['外公','外祖父','外王父','姥爷','阿公','客公','外爷','毑父','毑爷'], 'm,f':['外公','外祖父','外王父','姥爷','阿公','客公','外爷','毑父','毑爷'],
'm,f,f':['外曾祖父','曾外祖父','外太祖父','外曾王父','外太公','外太爷爷','太外祖父'], 'm,f,f':['外曾祖父','曾外祖父','外太祖父','外曾王父','外太公','外太爷爷','太外祖父'],
@ -1542,7 +1546,7 @@
'h,xs,d,d,h':['姑甥外孙婿'], 'h,xs,d,d,h':['姑甥外孙婿'],
// 岳家 // 岳家
'w':['老婆','妻子','太太','媳妇儿','媳妇','夫人','女人','婆娘','妻','内人','内子','娘子','爱人','那口子','爱妻','老伴','老太婆','老婆子'], 'w':['老婆','妻子','太太','媳妇儿','媳妇','夫人','女人','婆娘','妻','内人','内子','娘子','爱人','那口子','爱妻','老伴','老太婆','老婆子'],
'w,f':['岳父','岳丈','老丈人','岳翁','丈人','外父','泰山'], 'w,f':['岳父','岳丈','老丈人','岳翁','丈人','外父','妻父','泰山'],
'w,f,f':['祖岳父','岳祖父','太岳父','奶岳父'], 'w,f,f':['祖岳父','岳祖父','太岳父','奶岳父'],
'w,f,f,f':['曾祖岳父','岳曾祖父','曾祖丈人'], 'w,f,f,f':['曾祖岳父','岳曾祖父','曾祖丈人'],
'w,f,f,f,xb,s,s&o':['姻伯丈'], 'w,f,f,f,xb,s,s&o':['姻伯丈'],
@ -2108,7 +2112,7 @@
'xs,d,d,d,s':['甥外曾外曾外孙'], 'xs,d,d,d,s':['甥外曾外曾外孙'],
'xs,d,d,d,d':['甥外曾外曾外孙女'], 'xs,d,d,d,d':['甥外曾外曾外孙女'],
//自家 //自家
's':['儿子','男儿','息男','闺男','囝男','小子','男亲','儿','仔','子','阿仔','仔仔','x儿子'], 's':['儿子','男儿','息男','闺男','囝男','小子','男亲','长子','次子','幼子','儿','仔','子','阿仔','仔仔','x儿子'],
's,w':['儿媳','儿媳妇','新妇','息妇','x儿媳'], 's,w':['儿媳','儿媳妇','新妇','息妇','x儿媳'],
's,s':['孙子','孙男','孙儿','x孙子'], 's,s':['孙子','孙男','孙儿','x孙子'],
's,s,w':['孙媳妇','孙媳','孙妇','孙新妇','x孙媳'], 's,s,w':['孙媳妇','孙媳','孙妇','孙新妇','x孙媳'],
@ -2205,7 +2209,7 @@
's,d,d,s,w':['曾外曾外孙媳妇'], 's,d,d,s,w':['曾外曾外孙媳妇'],
's,d,d,d':['曾外曾外孙女'], 's,d,d,d':['曾外曾外孙女'],
's,d,d,d,h':['曾外曾外孙女婿'], 's,d,d,d,h':['曾外曾外孙女婿'],
'd':['女儿','千金','掌上明珠','息女','闺女','囡女','乖囡','囡囡','丫头','姑娘','女亲','女','阿女','女女','x女儿'], 'd':['女儿','千金','掌上明珠','息女','闺女','囡女','乖囡','囡囡','丫头','姑娘','女亲','长女','次女','幼女','女','阿女','女女','x女儿'],
'd,h':['女婿','姑爷','女婿子','女婿儿','儿婿','息婿','囝婿','x女婿'], 'd,h':['女婿','姑爷','女婿子','女婿儿','儿婿','息婿','囝婿','x女婿'],
'd,s':['外孙'], 'd,s':['外孙'],
'd,s,w':['外孙媳妇','外孙妇','外孙新妇'], 'd,s,w':['外孙媳妇','外孙妇','外孙新妇'],

56
style/index.css
View File

@ -33,6 +33,27 @@ a:hover{
margin: 0 auto; margin: 0 auto;
} }
.mod-head .hd,.mod-head .bd{
max-width: 500px;
padding: 0 10px;
margin:0 auto;
}
.mod-head .hd{
position: relative;
}
.mod-head .hd span.tag{
position: absolute;
left: 10px;
top: 0;
display: block;
height: 20px;
padding: 5px 12px;
background: #eee;
line-height: 20px;
color: #444;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.mod-head .bd{ .mod-head .bd{
padding: 10px; padding: 10px;
line-height: 30px; line-height: 30px;
@ -83,43 +104,42 @@ a:hover{
font-weight: normal; font-weight: normal;
font-size: 18px; font-size: 18px;
} }
.mod-panel .hd,.mod-panel .bd{
max-width: 500px;
margin:0 auto;
}
.mod-panel .hd{ .mod-panel .hd{
padding: 10px 0; padding: 10px 0;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
} }
.mod-panel .hd b{ .mod-panel .hd b{
margin: 0 3px; margin: 0 3px;
color: #fd7474; color: #fd7474;
} }
.mod-panel .box{ .mod-panel .bd .c-hd{
max-width: 500px;
margin:0 auto 15px;
}
.mod-panel .box .c-hd{
height: 36px; height: 36px;
margin-bottom: 15px; margin-bottom: 10px;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
} }
.mod-panel .box .c-hd li{ .mod-panel .bd .c-hd li{
float: left; float: left;
width: 33.33%; width: 33.33%;
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
} }
.mod-panel .box .c-hd li a{ .mod-panel .bd .c-hd li a{
display: block; display: block;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
color: #999; color: #999;
cursor: pointer; cursor: pointer;
} }
.mod-panel .box .c-hd li.active a{ .mod-panel .bd .c-hd li.active a{
position: relative; position: relative;
color: #333; color: #333;
} }
.mod-panel .box .c-hd li.active a::after{ .mod-panel .bd .c-hd li.active a::after{
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 0; bottom: 0;
@ -131,16 +151,16 @@ a:hover{
background: #2095f2; background: #2095f2;
border-radius: 3px; border-radius: 3px;
} }
.mod-panel .box .c-panel{ .mod-panel .bd .c-panel{
display: none; display: none;
} }
.mod-panel .box .operation{ .mod-panel .bd .operation{
margin: 10px 0; margin: 10px 0;
} }
.mod-panel .box .row{ .mod-panel .bd .row{
margin-bottom: 5px; margin-bottom: 5px;
} }
.mod-panel .box .field{ .mod-panel .bd .field{
line-height: 28px; line-height: 28px;
} }
.mod-panel .bd p{ .mod-panel .bd p{
@ -349,7 +369,6 @@ a:hover{
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.mod-panel .hd{ .mod-panel .hd{
padding-top: 10px; padding-top: 10px;
margin-bottom: 5px;
} }
.mod-panel .hd h1{ .mod-panel .hd h1{
font-size: 20px; font-size: 20px;
@ -357,6 +376,11 @@ a:hover{
.mod-panel .hd p{ .mod-panel .hd p{
line-height: 22px; line-height: 22px;
overflow: hidden; overflow: hidden;
}
.mod-panel .hd span.tag{
top: 5px;
margin-left: -148px;
font-size: 13px;
} }
.mod-panel .c-hd ul{ .mod-panel .c-hd ul{
overflow-x: auto; overflow-x: auto;