查看“︁微件:RarityFilter”︁的源代码

<includeonly>
<style>
.pvzhe-rarity-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 8px;
    margin: 15px 0;
    padding: 10px 8px;
    align-items: center;
}
.pvzhe-rarity-btn {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    border: 2px solid transparent;
    background: transparent;
    transition: all 0.2s;
    white-space: nowrap;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pvzhe-rarity-btn:hover { border-color: #ccc; }
.pvzhe-rarity-btn.active { font-weight: bold; }
.pvzhe-rarity-btn.all { border-color: #4CAF50; color: #4CAF50; }
.pvzhe-rarity-btn.all.active { background: #4CAF50; color: #fff; }
.pvzhe-rarity-btn img { height: 28px; }
@media screen and (max-width: 480px) {
    .pvzhe-rarity-btn {
        padding: 3px 6px;
        font-size: 11px;
        gap: 2px;
    }
    .pvzhe-rarity-btn img { height: 20px; }
    .pvzhe-rarity-filter { gap: 4px; }
}
</style>

<div class="pvzhe-rarity-filter" id="pvzhe-rarity-filter">
    <button class="pvzhe-rarity-btn all active" data-rarity="all">全部</button>
    <button class="pvzhe-rarity-btn white" data-rarity="white"><img src="https://new.pvzhe.wiki/images/b/b9/%E7%99%BD%E5%8D%A1.png">白卡</button>
    <button class="pvzhe-rarity-btn gold" data-rarity="gold"><img src="https://new.pvzhe.wiki/images/8/83/%E9%87%91%E5%8D%A1.png">至尊金卡</button>
    <button class="pvzhe-rarity-btn diamond" data-rarity="diamond"><img src="https://new.pvzhe.wiki/images/b/bb/%E9%92%BB%E5%8D%A1.png">臻享钻卡</button>
    <button class="pvzhe-rarity-btn rainbow" data-rarity="rainbow"><img src="https://new.pvzhe.wiki/images/1/10/%E5%BD%A9%E5%8D%A11.png">梦幻彩卡</button>
    <button class="pvzhe-rarity-btn star" data-rarity="star"><img src="https://new.pvzhe.wiki/images/e/e9/%E6%98%9F%E5%8D%A11.png">星光闪卡</button>
    <button class="pvzhe-rarity-btn original" data-rarity="original"><img src="https://new.pvzhe.wiki/images/6/68/%E5%8E%9F%E5%8D%A1.png">原卡</button>
</div>
</includeonly>