| ◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺，请勇于修正/添加！参与进来其实很容易！点这里 加入少前百科。 ◆有任何意见、建议、纠错，欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群：597764980，微博@GFwiki少前百科 ◆To foreigners，You can use twitter to contact us. |
|
“Widget:NewCharPreview”的版本间的差异
| （未显示同一用户的27个中间版本） | |||
| 第1行： | 第1行： | ||
<includeonly> | <includeonly> | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | + | .detail { | |
| − | + | font-style: italic; | |
| − | + | width: 100%; | |
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | .preview-attr-ranks { | |
| − | + | max-width: 420px; | |
| − | + | text-align: center; | |
| + | width: 100%; | ||
} | } | ||
| − | + | .preview-detail-notice { font-style: italic; } | |
| − | + | ||
| − | + | .preview-name { font-weight: bold; } | |
| − | + | ||
| + | .preview-quote::after { content: "”"; } | ||
| + | |||
| + | .preview-quote::before { content: "“"; } | ||
| + | |||
| + | #preview-list { | ||
| + | flex-wrap: wrap; | ||
| + | list-style: none; | ||
| + | margin: 0; | ||
| + | z-index: 1; | ||
} | } | ||
| − | # | + | #preview-list li:active, |
| − | + | #preview-menu:active { background: #fff5; } | |
| − | + | ||
| − | + | #preview-menu:hover, #preview-menu:focus, | |
| − | + | #preview-list li:hover, #preview-list li:focus { | |
| − | + | background: #fff3; | |
| + | cursor: pointer; | ||
} | } | ||
| − | # | + | #preview-menu { |
| − | + | background: #fff3; | |
| − | + | border-radius: 4px 4px 0 0; | |
| + | height: 48px; | ||
| + | width: calc(8em + 56px); | ||
} | } | ||
| − | # | + | #preview-menu div:first-child { |
| − | + | padding: 13px 0 4px 16px; | |
| + | width: 8em; | ||
} | } | ||
| − | # | + | #preview-menu div:last-child { |
| − | + | padding: 12px 8px; | |
| − | |||
| − | |||
| − | |||
} | } | ||
| − | # | + | #preview-pager { overflow: hidden; } |
| − | + | ||
| − | + | #previews { | |
| − | + | display: flex; | |
| − | + | left: 0; | |
| − | + | position: relative; | |
| + | transition: left 0.3s ease; | ||
| + | <!--{assign var=name_count value=$name|@count}--> | ||
| + | width: <!--{$name_count*100}-->%; | ||
| + | z-index: 0; | ||
} | } | ||
| − | # | + | #previews > div { |
| − | + | display: flex; | |
| − | + | flex: 1; | |
| + | flex-wrap: wrap; | ||
} | } | ||
| − | # | + | #previews > div > div { flex: 12em 1; } |
| − | |||
| − | } | ||
| − | # | + | #previews > div > p { width: 100%; } |
| − | |||
| − | } | ||
| − | # | + | #previews img { |
| + | flex: 360px 1; | ||
width: 100%; | width: 100%; | ||
| − | + | max-width: 512px; | |
| − | max-width: | ||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | # | + | #tab-indicator { |
| − | + | background: #f4c430; | |
| + | height: 2px; | ||
| + | left: 0; | ||
| + | position: relative; | ||
| + | top: -2px; | ||
| + | transition: left 0.3s ease; | ||
| + | width: 10em; | ||
} | } | ||
</style> | </style> | ||
| − | < | + | <div id="preview-menu"> |
| − | < | + | <div><!--{$name[0]}--></div> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div> | <div> | ||
| − | < | + | <svg xmlns="http://www.w3.org/2000/svg" |
| − | + | id="arrow-drop" height="24px" width="24px" viewBox="0 0 24 24"> | |
| − | + | <path d="M 7,10 l 5,5 5,-5 H 7 z" fill="white" /> | |
| − | + | </svg> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </ | ||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| + | </div> | ||
| + | <ul id="preview-list"> | ||
| + | <!--{foreach $name as $n}--> | ||
| + | <li tabindex="0"><!--{$n}--></li> | ||
| + | <!--{/foreach}--> | ||
| + | </ul> | ||
| + | <div id="tab-indicator"></div> | ||
| + | <div id="preview-pager"> | ||
| + | <div id="previews"> | ||
| + | <!--{foreach $name as $n}--> | ||
| + | <div> | ||
| + | <p class="preview-detail-notice">更多信息请见：<a href="/w/<!--{$n}-->"><!--{$n}--></a></p> | ||
| + | <img src="<!--{$pic[$n@index]}-->" alt="<!--{$n}-->的立绘"> | ||
| + | <div> | ||
| + | <p class="preview-name"><!--{$n}--></p> | ||
| + | <blockquote class="preview-quote"><!--{$quote[$n@index]}--></blockquote> | ||
| + | <p>武器类型：<!--{$type[$n@index]}--></p> | ||
| + | <table class="stattable preview-attr-ranks"> | ||
| + | <caption>属性评级</caption> | ||
| + | <tr> | ||
| + | <th>伤害</th> | ||
| + | <th>命中</th> | ||
| + | <th>回避</th> | ||
| + | <th>射速</th> | ||
| + | <th>生命</th> | ||
| + | <th>成长</th> | ||
| + | <!--{if $armor[$n@index] neq ''}--> | ||
| + | <th>护甲</th> | ||
| + | <!--{/if}--> | ||
| + | </tr> | ||
| + | <tr> | ||
| + | <td><!--{$pow[$n@index]}--></td> | ||
| + | <td><!--{$hit[$n@index]}--></td> | ||
| + | <td><!--{$dodge[$n@index]}--></td> | ||
| + | <td><!--{$rate[$n@index]}--></td> | ||
| + | <td><!--{$life[$n@index]}--></td> | ||
| + | <td><!--{$growth[$n@index]}--></td> | ||
| + | <!--{if $armor[$n@index] neq ''}--> | ||
| + | <td><!--{$armor[$n@index]}--></td> | ||
| + | <!--{/if}--> | ||
| + | </tr> | ||
| + | </table> | ||
| + | <p>获得方式：<!--{$gain[$n@index]}--></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <!--{/foreach}--> | ||
| + | </div> | ||
</div> | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| − | const charList = document.querySelectorAll("# | + | const charList = document.querySelectorAll("#preview-list li"); |
| + | let isOpen = false; | ||
| + | let isMobile = false; | ||
| + | if (document.getElementById("section_0")) { | ||
| + | isMobile = true; | ||
| + | } | ||
(window.RLQ=window.RLQ||[]).push(function(){ | (window.RLQ=window.RLQ||[]).push(function(){ | ||
| − | if ( | + | if (isMobile) { |
| − | + | $("#preview-list").css("background", "#222"); | |
| − | + | $("#preview-list").css("border-radius", "4px"); | |
| − | + | $("#preview-list").css("box-shadow", "0 4px 6px #0005"); | |
| − | + | $("#preview-list").css("display", "none"); | |
| − | + | $("#preview-list").css("margin-top", "-4px"); | |
| − | + | $("#preview-list").css("padding", "8px 0"); | |
| − | + | $("#preview-list").css("position", "absolute"); | |
| − | + | $("#preview-list").css("width", "calc(8em + 56px)"); | |
| − | + | charList.forEach(item => { | |
| + | item.style.cssText = "height: 26px; margin-bottom: 0; padding: 6px 0 0 16px; width: 100%;"; | ||
| + | }); | ||
| + | $("#tab-indicator").css("display", "none"); | ||
| + | $("#preview-menu").css("display", "flex"); | ||
| + | $("#preview-menu").on("click", toggleMenu); | ||
} else { | } else { | ||
| − | + | $("#preview-menu").css("display", "none"); | |
| − | + | $("#preview-list").css("display", "flex"); | |
| − | + | charList.forEach(item => { | |
| − | + | item.style.cssText = "height: 36px; padding-top: 12px; text-align: center; width: 10em;"; | |
| − | + | }); | |
} | } | ||
| − | charList.forEach | + | charList.forEach(item => { |
| − | + | item.onclick = parseOnClick; | |
| − | + | item.onkeydown = parseOnKeyDown; | |
}); | }); | ||
| − | |||
}) | }) | ||
function parseOnClick() { | function parseOnClick() { | ||
| − | + | selectTab(this); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
function parseOnKeyDown(e) { | function parseOnKeyDown(e) { | ||
| − | + | if (e.key == "Enter") { | |
| − | + | selectTab(this); | |
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
function selectTab(targetItem) { | function selectTab(targetItem) { | ||
| − | + | if (isMobile) { | |
| − | + | toggleMenu(); | |
| − | + | if ($("#preview-menu div:first-child").text() != targetItem.textContent) { | |
| − | + | $("#preview-menu div:first-child").text(targetItem.textContent); | |
| + | } | ||
} | } | ||
| − | |||
| − | |||
| − | + | let index = 0; | |
| − | + | while (charList[index] != targetItem) { | |
| − | + | index++; | |
| − | + | } | |
| − | + | ||
| − | + | if (!isMobile) { | |
| − | + | $("#tab-indicator").css("left", index*10 + "em"); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | $("#previews").css("left", -index*100 + '%'); | |
| − | |||
| − | |||
| − | + | targetItem.blur(); | |
} | } | ||
| − | function | + | function toggleMenu() { |
| − | + | if (isOpen) { | |
| − | + | $("#preview-list").css("display", "none"); | |
| − | + | $("#arrow-drop").css("transform", "rotate(0deg)"); | |
| − | + | $("#preview-menu").blur(); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} else { | } else { | ||
| − | + | $("#preview-list").css("display", "flex"); | |
| − | + | $("#arrow-drop").css("transform", "rotate(180deg)"); | |
} | } | ||
| − | + | isOpen ^= true; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
}</script></includeonly><noinclude> | }</script></includeonly><noinclude> | ||
{{Documentation}} | {{Documentation}} | ||
</noinclude> | </noinclude> | ||
2021年5月24日 (一) 13:42的最新版本
小工具文档本部件的预期用途是在活动专题页面中展示新增角色的信息，用例如梦间剧#登场联动角色。
使用
以下用空行分隔开的每一部分是同一角色的信息，如果新角色数量没有那么多，请删去多余的部分。参数的具体说明在本模板之后。
{{#widget:NewCharPreView
|name=
|pic={{filename:|}}
|quote=
|type=
|pow=N|hit=N|dodge=N|rate=N|life=N|growth=N|armor=
|gain=
|name=
|pic={{filename:|}}
|quote=
|type=
|pow=N|hit=N|dodge=N|rate=N|life=N|growth=N|armor=
|gain=
|name=
|pic={{filename:|}}
|quote=
|type=
|pow=N|hit=N|dodge=N|rate=N|life=N|growth=N|armor=
|gain=
|name=
|pic={{filename:|}}
|quote=
|type=
|pow=N|hit=N|dodge=N|rate=N|life=N|growth=N|armor=
|gain=
|name=
|pic={{filename:|}}
|quote=
|type=
|pow=N|hit=N|dodge=N|rate=N|life=N|growth=N|armor=
|gain=
|name=
|pic={{filename:|}}
|quote=
|type=
|pow=N|hit=N|dodge=N|rate=N|life=N|growth=N|armor=
|gain=
|name=
|pic={{filename:|}}
|quote=
|type=
|pow=N|hit=N|dodge=N|rate=N|life=N|growth=N|armor=
|gain=
|name=
|pic={{filename:|}}
|quote=
|type=
|pow=N|hit=N|dodge=N|rate=N|life=N|growth=N|armor=
|gain=
}}
模板中为属性评级参数预置值“N”仅仅是为了方便在桌面端编辑时双击选中，请不要在实际使用时填入这个值。
- name – 角色在游戏中的名称
- pic – {{filepath:默认立绘图片名|缩略图宽度，建议512以上}}
- quote – 登场台词
- type – 手枪/冲锋枪/步枪/突击步枪/机枪/霰弹枪
- pow – 伤害评级
- hit – 命中评级
- dodge – 回避评级
- rate – 射速评级
- life – 生命评级
- growth – 成长评级
- armor – 护甲评级，如没有请留空，不要删去
- gain – 获得方式
示例
{{#widget:NewCharPreview
|name=UMP40
|pic={{filepath:Pic_UMP40.png|600}}
|quote=UMP40，登场了！指挥官，那些过时的家伙，就让我为您一一取代掉吧！
|type=冲锋枪
|pow=B|hit=A|dodge=A|rate=B|life=B|growth=A|armor=
|gain=打开物资箱概率获得，累计打开777个必定获得。
|name=KLIN
|pic={{filepath:Pic_KLIN.png|600}}
|quote=长官你要记好了！我就是要成为格里芬NO.1的人形——KLIN！
|type=冲锋枪
|pow=B|hit=B|dodge=S|rate=S|life=B|growth=B|armor=
|gain=【认知迷云Ⅳ】通关奖励。
}
- UMP40
- KLIN
