<noinclude>{{#widget:NewCharPreview|name=UMP40|c1.src={{filepath:Pic_UMP40.png}}|c1.quote=UMP40，登场了！指挥官，那些过时的家伙，就让我为您一一取代掉吧！|c1.type=冲锋枪|c1.pow=B|c1.hit=A|c1.dodge=A|c1.rate=B|c1.hp=B|c1.growth=A|c1.gain=打开物资箱概率获得，累计打开777个必定获得。 |name=KLIN|c2.src={{filepath:Pic_KLIN.png}}|c2.quote=长官你要记好了！我就是要成为格里芬NO.1的人形——KLIN！|c2.type=冲锋枪|c2.pow=B|c2.hit=B|c2.dodge=S|c2.rate=S|c2.hp=B|c2.growth=B|c2.gain=【认知迷云Ⅳ】通关奖励。}}</noinclude><includeonly>

#pbutton .detail { width: 9em; height: 2.5em; border: none; color: white; border font-radiusstyle: 4pxitalic; background-color width: transparent100%;

#pmore .preview-attr-ranks { max-width: 100%420px; font text-stylealign: italiccenter; width: 100%;

#plist li .preview-detail-notice {font-style: italic; }  width.preview-name { font-weight: 10embold;} height.preview-quote::after { content: 2"”"; } .5empreview-quote::before { content: "“";}  display#preview-list { flex-wrap: inline-blockwrap; line list-heightstyle: 2.5emnone; background-clip margin: border-box0; border z-bottomindex: 2px transparent solid1;

#plist preview-list li:active,#preview-menu:active { background: #fff5; } #preview-menu:hover, #plist lipreview-menu:focus, #pbuttonpreview-list li:hover, #pbuttonpreview-list li:focus { cursor background: pointer#fff3; background-color cursor: rgba(255, 255, 255, 0.2)pointer;

#plist lipreview-menu { background:active, #pbuttonfff3; border-radius: 4px 4px 0 0; height:active {48px; background-color width: rgbacalc(255, 255, 255, 0.338em + 56px);

#pcontent preview-menu div:first-child { flex-wrap padding: 13px 0 4px 16px; width: wrap8em;

#pimg { flex: 360px 1; widthpreview-menu div: 100%; maxlast-width: 512px;child { height padding: auto12px 8px;

#pcontent div 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: 12em 10;

#pquotepreviews > div { display:before {flex; flex: 1; content flex-wrap: "“"wrap;

#pquotepreviews > div > div { flex:after 12em 1; } #previews > div > p { contentwidth: "”"100%;}

#pgrades previews img { flex: 360px 1;

text-align: center; max-width: 420px;} #pname { font-weight: bold512px;

#pbuttontab-indicator { background: #f4c430; height:hover {2px; left: 0; position: relative; top: -2px; transition: left 0.3s ease; cursor width: pointer10em;

<button type="button" onclick="toggleMenu()" div id="pbuttonpreview-menu"></button> <ul id="plist"div> <!--{foreach $name as $n}--> <li tabindex="[0"><!--{$n]}--></li> <!--{/foreach}--></ul><div id="pcontent" style="display:none;"> <p id="pmore">更多信息请见：<a href="" class="pname"></a></p> <img src="" id="pimg">

<p classsvg xmlns="pname"><http:/p> <blockquote id="pquote"></blockquote> <p>武器类型：<span id="ptype"><www.w3.org/span><2000/p> <table id="pgrades" class="stattablesvg"> <caption>属性评级</caption> <tbody> <tr> <th>伤害</th><th>命中</th><th>回避</th><th>射速</th><th>生命</th><th>成长</th><th>护甲</th> </tr> <tr> <td id="ppowarrow-drop"></td><td idheight="phit24px"></td><td idwidth="pdodge24px"></td><td idviewBox="prate0 0 24 24"> </td><td idpath d="phpM 7,10 l 5,5 5,-5 H 7 z"></td><td idfill="pgrowthwhite"></td><td id="parmor"></td> </tr> </tbody> </table> <p>获得方式：<span id="pgain"></span></psvg>

const charList = document.querySelectorAll("#plist preview-list li");let isOpen = false;let isMobile = false;if (document.getElementById("section_0")) { isMobile = true;}

if (documentisMobile) { $("#preview-list").querySelectorcss("background", "#222"); $("#section_0preview-list").css("border-radius", "4px") {; document $("#preview-list").getElementByIdcss("plistbox-shadow", "0 4px 6px #0005"); $("#preview-list").style.cssText = css("display: ", "none");position: absolute;width: 9em $("#preview-list").css("margin-top", "-4px"); $("#preview-list").css("padding-left: ", "8px 0");background $("#preview-color: list").css("position", "absolute"); $("#333;boxpreview-shadow: 0 4px 4px rgbalist").css(0"width",0,0,0.2"calc(8em + 56px)"); charList.forEach(function(item) => { item.style.cssText = "textheight: 26px; margin-alignbottom: left0;padding: 6px 0 8px0 16px;width: calc100%;"; }); $(9em "#tab- 16pxindicator").css("display", "none"); } $("#preview-menu").css("display", "flex"); document.getElementById $("pbutton#preview-menu").innerText = on("选择人形click", toggleMenu);

document $("#preview-menu").querySelectorcss("display", "none"); $("#pbuttonpreview-list").style.css("display = "none, "flex"); charList.forEach(function(item) => { item.style.textAlign cssText = "height: 36px; padding-top: 12px; text-align: center; width: 10em;"; });

charList.forEach(function(item) => { item.onclick = selectTabparseOnClick; item.onkeydown = parseOnKeyDown;

function parseOnClick() { selectTab(this);} function parseOnKeyDown(e) { if (documente.querySelectorkey == "Enter") { selectTab(this); }} function selectTab(targetItem) { if (isMobile) { toggleMenu(); if ($("#pcontentpreview-menu div:first-child").styletext() != targetItem.display == "none"textContent) { document.querySelector $("#pcontentpreview-menu div:first-child").styletext(targetItem.display = "flex"textContent); } }

if (document.getElementById("section_0")) { document.getElementById("plist").style.display = "none"; document.getElementById("pbutton").innerText = this.innerText; } let index = 0; while (charList[index].innerText != this.innerTexttargetItem) { index++; } let dataset = { src: "", quote: "", type: "", pow: "", hit: "", dodge: "", rate: "", hp: "", growth: "", armor: "", gain: "" }; switch if (index!isMobile) { case 0: <!--{foreach from=$c1 key=key item=item}--> dataset.<!--{$key}--> = "<!--{ $item}-->"; <!--{/foreach}--> break; case 1: <!--{foreach from=$c2 key=key item=item}--> dataset.<!--{$key}--> = "<!--{$item}-->"; <!--{/foreach}--> break; case 2: <!--{foreach from=$c3 key=key item=item}--> dataset.<!--{$key}--> = "<!--{$item}-->"; <!--{/foreach}--> break; case 3: <!--{foreach from=$c4 key=key item=item}--> dataset.<!--{$key}--> = "<!--{$item}-->"; <!--{/foreach}--> break; case 4: <!--{foreach from=$c5 key=key item=item}--> dataset.<!--{$key}--> = "<!--{$item}-->"; <!--{/foreach}--> break; case 5: <!--{foreach from=$c6 key=key item=item}--> dataset.<!--{$key}--> = "<!--{$item}-->"; <!--{/foreach}--> break; case 6: <!--{foreach from=$c7 key=key item=item}--> dataset.<!--{$key}--> = "<!--{$item}-->"; <!--{/foreach}--> break; case 7: <!--{foreach from=$c8 key=key item=item}--> dataset.<!--{$key}--> = "<!--{$item}-->"; <!--{/foreach}--> } requestAnimationFrame(function() { document.querySelector("#pcontenttab-indicator").style.transition = "opacity 0.2s"; document.querySelectorcss("#pcontentleft").style.opacity = "0"; }); setTimeout(loadPreview(this.innerText, dataset), 200); setTimeout(requestAnimationFrame(function() { document.querySelector("#pcontent").style.transition = "opacity 0.2s"; document.querySelector("#pcontent").style.opacity = "1"; }), 400); if (!document.getElementById("section_0")) { for (let i = 0; i < charList.length; i+index*10 +) { if (charList[i].innerText != this.innerText) { charList[i].style.borderBottomColor = "transparent"; charList[i].style.color = em"rgba(255, 255, 255, 0.67)"; }

this.style.borderBottomColor = $("#F4C430previews"; this.style).color = css("whiteleft", -index*100 + '%'); }

this targetItem.blur();} function loadPreview(name, dataset) { document.querySelector("a.pname").href = "/w/" + name; document.querySelector("a.pname").innerText = name; document.querySelector("#pimg").src = dataset.src; document.querySelector("p.pname").innerText = name; document.querySelector("#pquote").innerText = dataset.quote; document.querySelector("#ptype").innerText = dataset.type; document.querySelector("#ppow").innerText = dataset.pow; document.querySelector("#phit").innerText = dataset.hit; document.querySelector("#pdodge").innerText = dataset.dodge; document.querySelector("#prate").innerText = dataset.rate; document.querySelector("#php").innerText = dataset.hp; document.querySelector("#pgrowth").innerText = dataset.growth; if (dataset.armor && dataset.armor != "") { document.querySelectorAll("#pgrades th")[6].style.display = "table-cell"; document.getElementById("parmor").style.display = "table-cell"; document.querySelector("#parmor").innerText = dataset.armor; } else { document.querySelectorAll("#pgrades th")[6].style.display = "none"; document.getElementById("parmor").style.display = "none"; } document.querySelector("#pgain").innerText = dataset.gain;

let plist = document if (isOpen) { $("#preview-list").querySelectorcss("#plistdisplay", "none"); if $(plist"#arrow-drop").style.display == css("transform", "nonerotate(0deg)") {; plist.style.display = $("inline#preview-blockmenu").blur(); } else { plist.style $("#preview-list").css("display = "none, "flex"); document.getElementById$("pbutton#arrow-drop").blurcss("transform", "rotate(180deg)"); } isOpen ^= true;}</script></includeonly><noinclude>{{Documentation}}</noinclude>