◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
“Widget:Equipquery”的版本间的差异
(fix table whitespace) |
|||
(未显示3个用户的43个中间版本) | |||
第1行: | 第1行: | ||
<includeonly><style type="text/css"> | <includeonly><style type="text/css"> | ||
+ | /* Auto Grid START */ | ||
+ | @media screen and (max-width: 900px) { | ||
+ | #Equiptable:not(.minimode) tr::after {content:"";grid-column: auto/span 2;grid-row-start: 2 ;background: linear-gradient(45deg, rgb(85 85 85 / 47%), rgb(85 85 85 / 47%));background-repeat: no-repeat;background-position: 1px 1px;background-size: calc(100% - 2px) calc(100% - 2px);} | ||
+ | |||
+ | .skin-minerva #Equiptable:not(.minimode) tr::after{background-image: linear-gradient(45deg, rgb(119 119 119 / 0.34), rgb(119 119 119 / 0.34));} | ||
+ | .skin-minerva table#Equiptable:not(.minimode) tr td {border-width:1px !important} | ||
+ | #Equiptable:not(.minimode) tr {background:transparent !important;} | ||
+ | |||
+ | @media screen and (max-width: 500px) { | ||
+ | .skin-minerva #Equiptable *{font-size:0.8rem;} | ||
+ | } | ||
+ | .skin-vector #Equiptable:not(.minimode) td {} | ||
+ | .skin-vector #Equiptable:not(.minimode) td {margin:1px;background-color:rgb(85 85 85 / 47%)} | ||
+ | .skin-vector #Equiptable:not(.minimode) td:hover {background-color:rgb(119 119 119 / 47%)} | ||
+ | .skin-vector #Equiptable:not(.minimode) tbody {background:transparent} | ||
+ | table#Equiptable:not(.minimode) td:empty,table#Equiptable thead {display:none} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(2) {display:inline-block;width:100px} | ||
+ | table#Equiptable:not(.minimode) tbody tr { | ||
+ | grid-template-columns: 20% 20% 20% 20% 1fr; | ||
+ | grid-template-rows: initial; | ||
+ | grid-template-areas: initial; | ||
+ | grid-auto-flow: row; | ||
+ | grid-auto-columns: initial; | ||
+ | grid-auto-rows: initial; | ||
+ | display: grid; | ||
+ | margin: 2px 0; | ||
+ | padding: 1px; | ||
+ | border: 1px solid #f4c430; | ||
+ | } | ||
+ | table#Equiptable:not(.minimode) tbody {display: block;width:100%;} | ||
+ | table#Equiptable:not(.minimode) tr td{display: flex;align-items: center;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(1)::before {content:"装备名称\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(1) {grid-column:auto/span 3;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(2) img {width:100% !important;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(2) {grid-column:auto/span 1;width: auto;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(3)::before {content:"装备类型\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(3) {grid-column:auto/span 1;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(4)::before {content:"伤害\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(4) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(5)::before {content:"命中\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(5) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(6)::before {content:"回避\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(6) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(7)::before {content:"射速\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(7) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(8)::before {content:"暴击\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(8) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(9)::before {content:"暴伤\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(9) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(10)::before {content:"穿甲\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(10) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(11)::before {content:"护甲\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(11) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(12)::before {content:"夜视\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(12) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(13)::before {content:"弹量\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(13) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(14)::before {content:"移速\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(14) {grid-column:auto/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(15)::before {content:"效果\A";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(15) {grid-column:5/span 1;grid-row-start: 2;} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(16)::before {content: "适用人形:";white-space: pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(16){grid-column:1/span 3;flex-direction:row;flex-wrap: wrap;padding:4px 0} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(16) a::before{content: " ";white-space: pre;text-decoration:none !important} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(16) a:first-child::before{content: "";text-decoration:none !important} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(16) a {white-space:nowrap} | ||
+ | |||
+ | table#Equiptable:not(.minimode) tr td:nth-child(17)::before {content:"获得途径:";white-space:pre;} | ||
+ | table#Equiptable:not(.minimode) tr td:nth-child(17) {grid-column:auto/span 2;width: auto;display: flex;flex-direction: row;} | ||
+ | } | ||
+ | /* Auto Grid END */ | ||
+ | /* 精简模式START */ | ||
+ | body.skin-vector .minimode tbody {background:transparent !important} | ||
+ | body.skin-vector .minimode tbody td {background:rgb(128 128 128 / 0.5);margin:2px} | ||
+ | table#Equiptable.minimode * {display:block} | ||
+ | table#Equiptable.minimode thead {display:none} | ||
+ | table#Equiptable.minimode tr :not(td:nth-child(2)) {display:none} | ||
+ | table#Equiptable.minimode tr td:nth-child(2) img ,table#Equiptable.minimode tr td:nth-child(2) a,table#Equiptable.minimode tr {display:inline-block} | ||
+ | @media screen and (max-width: 640px) { | ||
+ | table#Equiptable.minimode tr {width:20%} | ||
+ | table#Equiptable.minimode tr td:nth-child(2) img {width:100% !important} | ||
+ | table#Equiptable.minimode tr td:nth-child(2) {width:100%! } | ||
+ | } | ||
+ | table#Equiptable.minimode tr td:nth-child(2):hover { | ||
+ | background-color:#f4c430 | ||
+ | } | ||
+ | table#Equiptable.minimode tr td:nth-child(2) {transition: 0.2s all ease-in-out;} | ||
+ | /* 精简模式END */ | ||
.error {background-color: red;font-size: inherit;color: inherit;} | .error {background-color: red;font-size: inherit;color: inherit;} | ||
div.tileSearchCond { | div.tileSearchCond { | ||
第285行: | 第388行: | ||
} | } | ||
+ | table.dollTable { | ||
+ | display: table; | ||
+ | width: 100%; | ||
+ | background-color: #111; | ||
+ | border: 1px solid #888; | ||
+ | text-align: center; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | table.dollTable td { | ||
+ | border: 1px solid #333; | ||
+ | background-color: #222; | ||
+ | padding: 3px; | ||
+ | } | ||
+ | |||
+ | table.dollTable th { | ||
+ | border: 1px solid #f4c430; | ||
+ | background-color: #f4c430; | ||
+ | color: black; | ||
+ | padding: 3px; | ||
+ | } | ||
<!--{if ($hideinput)==1}-->div#TDollQuery {display:none;}<!--{/if}--> | <!--{if ($hideinput)==1}-->div#TDollQuery {display:none;}<!--{/if}--> | ||
− | </style><div style="max-width: | + | </style><div style="max-width: 70rem;"> |
<div id="buttonContainer" style="margin: 2px;"> | <div id="buttonContainer" style="margin: 2px;"> | ||
+ | <div> | ||
+ | <button class="clearSelect">清除</button> | ||
+ | <button class="invertSelect">反选</button> | ||
+ | <label for="type1gx"><input type="checkbox" id="type1gx" class="filter_item" /><div>特殊配件</div></label> | ||
+ | <label for="type1qx"><input type="checkbox" id="type1qx" class="filter_item" /><div>特殊弹匣</div></label> | ||
+ | <label for="type1hd"><input type="checkbox" id="type1hd" class="filter_item" /><div>特殊人形装备</div></label> | ||
+ | </div> | ||
<div> | <div> | ||
<button class="clearSelect">清除</button> | <button class="clearSelect">清除</button> | ||
第298行: | 第428行: | ||
<label for="MGEquip"><input type="checkbox" id="MGEquip" class="filter_item" /><div>机枪装备</div></label> | <label for="MGEquip"><input type="checkbox" id="MGEquip" class="filter_item" /><div>机枪装备</div></label> | ||
<label for="SGEquip"><input type="checkbox" id="SGEquip" class="filter_item" /><div>霰弹枪装备</div></label> | <label for="SGEquip"><input type="checkbox" id="SGEquip" class="filter_item" /><div>霰弹枪装备</div></label> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
<div> | <div> | ||
第336行: | 第437行: | ||
<label for="Obtainph"><input type="checkbox" id="Obtainph" class="filter_item" /><div>排行奖励</div></label> | <label for="Obtainph"><input type="checkbox" id="Obtainph" class="filter_item" /><div>排行奖励</div></label> | ||
<label for="Obtainxz"><input type="checkbox" id="Obtainxz" class="filter_item" /><div>心智升级</div></label> | <label for="Obtainxz"><input type="checkbox" id="Obtainxz" class="filter_item" /><div>心智升级</div></label> | ||
− | <label for="Obtainhs"><input type="checkbox" id="Obtainhs" class="filter_item" /><div> | + | <label for="Obtainhs"><input type="checkbox" id="Obtainhs" class="filter_item" /><div>机密商店</div></label> |
<label for="Obtainmy"><input type="checkbox" id="Obtainmy" class="filter_item" /><div>每月签到</div></label> | <label for="Obtainmy"><input type="checkbox" id="Obtainmy" class="filter_item" /><div>每月签到</div></label> | ||
+ | <label for="Obtainhy"><input type="checkbox" id="Obtainhy" class="filter_item" /><div>灰域探查</div></label> | ||
</div> | </div> | ||
<div class="sort-list"> | <div class="sort-list"> | ||
+ | <label for="liteMode"><input type="checkbox" id="liteMode"/><div>精简模式</div></label><span> </span> | ||
<label><div>排序:</div></label> | <label><div>排序:</div></label> | ||
<label><input type="radio" id="sortReldate" name="sort"><div>实装日期</div></label> | <label><input type="radio" id="sortReldate" name="sort"><div>实装日期</div></label> | ||
第359行: | 第462行: | ||
</div></div><BR> | </div></div><BR> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | |||
var equipElement = document.querySelectorAll('.equipdata'); | var equipElement = document.querySelectorAll('.equipdata'); | ||
equipElement.forEach(function(el,i){el.dataset.nameIngame=el.dataset.nameIngame.replaceAll("_"," ")}) | equipElement.forEach(function(el,i){el.dataset.nameIngame=el.dataset.nameIngame.replaceAll("_"," ")}) | ||
var equipTarget = new Array(1000); | var equipTarget = new Array(1000); | ||
+ | //if (document.body.className.indexOf("skin-minerva")>-1&&document.body.clientWidth<650){document.querySelector("#liteMode").checked=true} | ||
for (var k = 0; k < 1000; k++) { equipTarget[k] = -1; } | for (var k = 0; k < 1000; k++) { equipTarget[k] = -1; } | ||
− | + | var gunTypeStr = ["特殊配件", "特殊弹匣", "特殊人形"]; | |
var gunDollStr = ["HG", "SMG", "AR", "RF", "MG", "SG"]; | var gunDollStr = ["HG", "SMG", "AR", "RF", "MG", "SG"]; | ||
− | + | var gunGetStr = ["主线战役", "常驻活动", "限时活动", "排行奖励", "心智升级", "机密商店" , "每月签到", "灰域探查"]; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | var gunGetStr = ["主线战役", "常驻活动", "限时活动", "排行奖励", "心智升级", " | ||
var equipCheckbox = document.querySelectorAll('.filter_item'); | var equipCheckbox = document.querySelectorAll('.filter_item'); | ||
第391行: | 第489行: | ||
function checkGunDollStr(i) { //装备枪种 | function checkGunDollStr(i) { //装备枪种 | ||
for (var j = 0; j < gunDollStr.length; j++) { | for (var j = 0; j < gunDollStr.length; j++) { | ||
− | if (equipCheckbox[j].checked == false) continue; | + | if (equipCheckbox[j + gunTypeStr.length].checked == false) continue; |
if (gunDollStr[j] == equipElement[i].getAttribute('data-equip-dolltype')) { | if (gunDollStr[j] == equipElement[i].getAttribute('data-equip-dolltype')) { | ||
checkGunTypeStr(i); | checkGunTypeStr(i); | ||
第400行: | 第498行: | ||
function checkGunTypeStr(i) { //装备种类 | function checkGunTypeStr(i) { //装备种类 | ||
− | |||
var equipClass2 = equipElement[i].getAttribute('data-equip-class2'); | var equipClass2 = equipElement[i].getAttribute('data-equip-class2'); | ||
− | for (var j = 0; j < | + | for (var j = 0; j < gunTypeStr.length; j++) { |
− | if (equipCheckbox[j | + | if (equipCheckbox[j].checked == false) continue; |
− | if ( | + | if (equipClass2 == gunTypeStr[j]) { |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
checkGunGetStr(i); | checkGunGetStr(i); | ||
return; | return; | ||
第427行: | 第510行: | ||
function checkGunGetStr(i) { //获得途径 | function checkGunGetStr(i) { //获得途径 | ||
for (var j = 0; j < gunGetStr.length; j++) { | for (var j = 0; j < gunGetStr.length; j++) { | ||
− | if (equipCheckbox[j + gunDollStr.length + | + | if (equipCheckbox[j + gunDollStr.length + gunTypeStr.length].checked == false) continue; |
if (equipElement[i].getAttribute('data-obtain') == gunGetStr[j]) { | if (equipElement[i].getAttribute('data-obtain') == gunGetStr[j]) { | ||
equipPrep(i); | equipPrep(i); | ||
第451行: | 第534行: | ||
var thisline = "<tr><td>"; | var thisline = "<tr><td>"; | ||
− | + | thisline += "<a href=\"" + tar.getAttribute('data-url') + "\"><b>" + tar.getAttribute('data-name-ingame').replace("(", "<br>(") + "<\/b><\/a><\/td><td>"; | |
− | thisline += "<img style= | + | thisline += `<a title="${tar.getAttribute('data-name-ingame').replace("(", "<br>(")}" href="${tar.getAttribute('data-url')}"><img style="width:100px;" src="${tar.getAttribute('data-avatar')}" \/><\/a><\/td><td>`; |
thisline += tar.getAttribute('data-equip-class1') + "<\/br>" + tar.getAttribute('data-equip-class2') + "<\/td><td>"; | thisline += tar.getAttribute('data-equip-class1') + "<\/br>" + tar.getAttribute('data-equip-class2') + "<\/td><td>"; | ||
thisline += (tar.getAttribute('data-base-atk') != "0" ? tar.getAttribute('data-base-atk') : "") + "<\/td><td>"; | thisline += (tar.getAttribute('data-base-atk') != "0" ? tar.getAttribute('data-base-atk') : "") + "<\/td><td>"; | ||
第472行: | 第555行: | ||
} | } | ||
− | var output = `<table id="Equiptable" class=" | + | var output = `<table id="Equiptable" class="dollTable ${liteCheck()}" style="text-align:center; mid-width:300px; width:100%;">`; |
− | output += `<thead><tr><th style="width:120px;">装备<\/th><th>图标<\/th><th>类型<\/th><th>伤害<\/th><th>命中<\/th><th>回避<\/th><th>射速<\/th><th>暴击<\/th><th>暴伤<\/th><th>穿甲<\/th><th>护甲<\/th><th>夜视<\/th><th>弹量<\/th><th>移速<\/th><th>效果<\/th><th style="width:110px; text-align:center;">适用人形<\/th><th>获得途径<\/th><\/tr><\/thead>`; | + | output += `<thead><tr><th style="min-width:120px;max-width:120px">装备<\/th><th style="min-width:110px;max-width:110px">图标<\/th><th>类型<\/th><th>伤害<\/th><th>命中<\/th><th>回避<\/th><th>射速<\/th><th>暴击<\/th><th>暴伤<\/th><th>穿甲<\/th><th>护甲<\/th><th>夜视<\/th><th>弹量<\/th><th>移速<\/th><th>效果<\/th><th style="width:110px; text-align:center;">适用人形<\/th><th>获得途径<\/th><\/tr><\/thead>`; |
output += `<tbody id="Equiptbody">` + htmlline + `<\/tbody><\/table>`; | output += `<tbody id="Equiptbody">` + htmlline + `<\/tbody><\/table>`; | ||
positionT.innerHTML = output; | positionT.innerHTML = output; | ||
第481行: | 第564行: | ||
var invertSel = document.querySelectorAll('.invertSelect'); | var invertSel = document.querySelectorAll('.invertSelect'); | ||
for (var x = 0; x < clearSel.length; x++) { clearSel[x].addEventListener("click", function () { clearSelect(this); }); } | for (var x = 0; x < clearSel.length; x++) { clearSel[x].addEventListener("click", function () { clearSelect(this); }); } | ||
− | for (var y = 0; y < invertSel.length; y++) { invertSel[y].addEventListener("click", function () { invertSelect(this); }); } | + | for (var y = 0; y < invertSel.length; y++) { invertSel[y].addEventListener("click", function () { invertSelect(this); }); |
+ | } | ||
+ | |||
+ | function liteCheck(){if(document.querySelector("#liteMode").checked){return "minimode"}else{return ""}} | ||
function invertSelect(box) {//反选函数 | function invertSelect(box) {//反选函数 | ||
第502行: | 第588行: | ||
function toDollName(i) { //Name模板 | function toDollName(i) { //Name模板 | ||
− | |||
var thisDoll = equipElement[equipTarget[i]]; | var thisDoll = equipElement[equipTarget[i]]; | ||
− | + | let tdolls = []; | |
− | + | for (let i = 1; i < 4; i++) { | |
− | + | let tdoll = thisDoll.dataset['equipDollname'+i]; | |
− | + | if (tdoll !== undefined) tdolls.push(`<a href="/w/${tdoll.replace(' ', '_')}">${tdoll}</a>`); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | return tdolls.join(`<br>`); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
第606行: | 第658行: | ||
for (var i = 0; i < equipElement.length; i++) { equipPrep(i); } | for (var i = 0; i < equipElement.length; i++) { equipPrep(i); } | ||
revealEquip(); | revealEquip(); | ||
+ | |||
+ | document.querySelector("#liteMode").addEventListener("click", function(e){var a = document.querySelector("#Equiptable");if(e.target.checked){a.classList.add("minimode")}else{a.classList.remove("minimode")}}) | ||
</script></includeonly> | </script></includeonly> |