查看“︁配队模拟器”︁的源代码

<div style="display: flex; gap: 20px; padding: 20px; background-color: #1a1a1a; color: white; font-family: sans-serif;">

<!-- 左侧区域 -->
<div style="flex: 0 0 300px; display: flex; flex-direction: column; gap: 15px;">

<!-- 战斗员选择框 -->
<div id="character-box" style="width: 260px; height: 460px; border-radius: 4px; background-color: #333; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;">
    <span style="font-size: 60px; color: #aaa;">+</span>
    <div id="selected-character" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: #222;">
        <!-- 角色立绘将插入此处 -->
    </div>
</div>

<!-- 伙伴选择框 -->
<div id="partner-box" style="width: 150px; height: 77px; border-radius: 4px; background-color: #333; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;">
    <span style="font-size: 40px; color: #aaa;">+</span>
    <div id="selected-partner" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: #222;">
        <!-- 伙伴头像将插入此处 -->
    </div>
</div>

</div>

<!-- 中部区域 - 卡牌区 -->
<div style="flex: 1; display: flex; flex-direction: column; gap: 15px;">
    <div id="card-deck-box" style="height: 600px; border: 2px dashed #555; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 10px; padding: 15px; background-color: #2a2a2a; overflow-y: auto;">
        <div style="width: 100%; text-align: center; color: #aaa; font-size: 24px; margin-top: 100px;">点击中间“+”号添加卡牌</div>
    </div>

    <div id="add-card-button" style="width: 100%; height: 80px; border-radius: 8px; background-color: #444; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 48px; color: #aaa;">
        +
    </div>

    <!-- 卡牌选择弹窗（默认隐藏） -->
    <div id="card-selection-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 9999; overflow-y: auto; padding: 20px;">
        <div style="position: absolute; top: 20px; right: 20px; color: white; font-size: 24px; cursor: pointer;" onclick="document.getElementById('card-selection-modal').style.display='none'">×</div>
        <div style="margin: 0 auto; max-width: 1200px; background-color: #222; padding: 20px; border-radius: 10px;">
            <h2 style="color: white; text-align: center;">选择角色卡牌</h2>
            <div id="card-list" style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
                <!-- 动态加载卡牌 -->
            </div>
        </div>
    </div>
</div>

<!-- 右侧区域 - 装备区 -->
<div style="flex: 0 0 140px; display: flex; flex-direction: column; gap: 15px;">

<!-- 武器选择 -->
<div id="weapon-box" class="equipment-slot" data-type="武器" style="width: 124px; height: 124px; border-radius: 4px; background-color: #333; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;">
    <span style="font-size: 40px; color: #aaa;">+</span>
    <div class="selected-equipment" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;">
        <!-- 装备图片插入处 -->
    </div>
</div>

<!-- 装甲选择 -->
<div id="armor-box" class="equipment-slot" data-type="装甲" style="width: 124px; height: 124px; border-radius: 4px; background-color: #333; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;">
    <span style="font-size: 40px; color: #aaa;">+</span>
    <div class="selected-equipment" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;">
        <!-- 装备图片插入处 -->
    </div>
</div>

<!-- 戒指选择 -->
<div id="ring-box" class="equipment-slot" data-type="戒指" style="width: 124px; height: 124px; border-radius: 4px; background-color: #333; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;">
    <span style="font-size: 40px; color: #aaa;">+</span>
    <div class="selected-equipment" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;">
        <!-- 装备图片插入处 -->
    </div>
</div>

<!-- 装备选择弹窗（默认隐藏） -->
<div id="equipment-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 9999; overflow-y: auto; padding: 20px;">
    <div style="position: absolute; top: 20px; right: 20px; color: white; font-size: 24px; cursor: pointer;" onclick="document.getElementById('equipment-modal').style.display='none'">×</div>
    <div style="margin: 0 auto; max-width: 1200px; background-color: #222; padding: 20px; border-radius: 10px;">
        <h2 style="color: white; text-align: center;" id="equipment-title">选择装备</h2>
        <div id="equipment-list" style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
            <!-- 由JS动态填充 -->
        </div>
    </div>
</div>

</div>

</div>

<!-- 加载卡牌数据和装备数据的隐藏区域 -->
<div style="display: none;" id="hidden-data-container">
    <!-- 我们将用JS获取这些模板渲染后的内容 -->
</div>