31 lines
3.8 KiB
HTML
31 lines
3.8 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=1920, initial-scale=1">
|
|
<base href="../../">
|
|
<title>shop item row component catalog</title>
|
|
<link rel="stylesheet" href="src-web/index.css">
|
|
</head>
|
|
<body>
|
|
<template id="showcase">
|
|
<div class="panel shop-item-row-panel">
|
|
<div class="panel-heading"><div class="panel-title">ShopItemRow</div><div class="panel-note">No header · dual normal rows · hover / selected</div></div>
|
|
<div class="panel-body">
|
|
<div class="data-table shop-item-table dnf-ui">
|
|
<div class="shop-item-body">
|
|
<div class="shop-item-row" tabindex="0" data-selectable-row><i class="shop-item-row-frame" aria-hidden="true"></i><div class="shop-item-row-icon"><img src="src-web/shop-item-row/img/sprite_item.NPK/equipmentskill.img/7.PNG"></div><div>+0</div><div>+0</div><div class="q-artifact">人造神 3 号纳波尔宝珠</div><div><button type="button" class="shop-inspect-button"><img src="src-web/shop-item-row/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>绝唱</div></div>
|
|
<div class="shop-item-row" tabindex="0" data-selectable-row><i class="shop-item-row-frame" aria-hidden="true"></i><div class="shop-item-row-icon"><img src="src-web/shop-item-row/img/sprite_item.NPK/equipmentskill.img/8.PNG"></div><div>+0</div><div>+0</div><div class="q-epic">果味整夏收集箱宝珠自选</div><div><button type="button" class="shop-inspect-button"><img src="src-web/shop-item-row/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="success">出售完成</div><div>湖北 4<br>绝唱</div></div>
|
|
<div class="shop-item-row is-selected" tabindex="0" data-selectable-row><i class="shop-item-row-frame" aria-hidden="true"></i><div class="shop-item-row-icon"><img src="src-web/shop-item-row/img/sprite_item.NPK/equipmentskill.img/9.PNG"></div><div>+2</div><div>+0</div><div class="q-rare">魔法封印转换灵魂</div><div><button type="button" class="shop-inspect-button"><img src="src-web/shop-item-row/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>蛋猪超人</div></div>
|
|
<div class="shop-item-row" tabindex="0" data-selectable-row><i class="shop-item-row-frame" aria-hidden="true"></i><div class="shop-item-row-icon"><img src="src-web/shop-item-row/img/sprite_item.NPK/equipmentskill.img/3.PNG"></div><div>+0</div><div>+0</div><div class="q-epic">史诗灵魂结晶</div><div><button type="button" class="shop-inspect-button"><img src="src-web/shop-item-row/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>蛋猪超人</div></div>
|
|
<div class="shop-item-row" tabindex="0" data-selectable-row><i class="shop-item-row-frame" aria-hidden="true"></i><div class="shop-item-row-icon"><img src="src-web/shop-item-row/img/sprite_item.NPK/equipmentskill.img/4.PNG"></div><div>+0</div><div>+0</div><div class="q-epic">史诗灵魂结晶</div><div><button type="button" class="shop-inspect-button"><img src="src-web/shop-item-row/img/sprite_interface.NPK/windowcommon.chn.img/652.PNG" alt="查看"></button></div><div class="status">购买完成</div><div>湖北 4<br>蛋猪超人</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="spec-row shop-item-row-spec"><span class="spec-chip captured">RowNormal = CSS 96 / 85</span><span class="spec-chip captured">Hover / Selected = CSS 86 / 87</span><span class="spec-chip">Header = None</span></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));</script>
|
|
</body>
|
|
</html>
|