◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
“Widget:NewCharPreview”的版本间的差异
(未显示同一用户的41个中间版本) | |||
第1行: | 第1行: | ||
− | < | + | <includeonly> |
− | + | <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 toggleMenu() { | function toggleMenu() { | ||
− | + | if (isOpen) { | |
− | + | $("#preview-list").css("display", "none"); | |
− | + | $("#arrow-drop").css("transform", "rotate(0deg)"); | |
− | + | $("#preview-menu").blur(); | |
− | + | } else { | |
− | + | $("#preview-list").css("display", "flex"); | |
− | + | $("#arrow-drop").css("transform", "rotate(180deg)"); | |
− | }</script></includeonly> | + | } |
+ | isOpen ^= true; | ||
+ | }</script></includeonly><noinclude> | ||
+ | {{Documentation}} | ||
+ | </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