配队模拟器：修订间差异

来自卡厄思梦境WIKI

←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
3,949次编辑
小无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
3,949次编辑
无编辑摘要
第1行： 第1行：
<div style="display: flex; gap: 20px; padding: 20px; background-color: #1a1a1a; color: white; font-family: sans-serif;">
<div id="team-simulator">
 
<div style="display: flex; gap: 20px; padding: 20px; background: #f5f5f5; border-radius: 8px;">
<!-- 左侧区域 -->
<!-- 左侧区域 -->
<div style="flex: 0 0 300px; display: flex; flex-direction: column; gap: 15px;">
<div style="display: flex; flex-direction: column; gap: 20px; width: 260px;">
 
    <!-- 战斗员选择 -->
<!-- 战斗员选择框 -->
    <div id="character-slot" class="selection-slot" style="width: 260px; height: 460px; border: 2px dashed #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: white;">
<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;">
        <div style="font-size: 48px; color: #ccc;">+</div>
    <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>
   
 
    <!-- 伙伴选择 -->
<!-- 伙伴选择框 -->
    <div id="partner-slot" class="selection-slot" style="width: 150px; height: 77px; border: 2px dashed #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: white;">
<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;">
        <div style="font-size: 24px; color: #ccc;">+</div>
    <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>
 
<!-- 中部区域 -->
</div>
<div style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
 
     <!-- 卡组区域 -->
<!-- 中部区域 - 卡牌区 -->
    <div id="deck-area" class="selection-slot" style="min-height: 400px; border: 2px dashed #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: white; padding: 20px;">
<div style="flex: 1; display: flex; flex-direction: column; gap: 15px;">
         <div style="font-size: 48px; color: #ccc;">+</div>
     <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>
</div>
 
<!-- 右侧区域 -->
<!-- 右侧区域 - 装备区 -->
<div style="width: 124px; display: flex; flex-direction: column; gap: 20px;">
<div style="flex: 0 0 140px; display: flex; flex-direction: column; gap: 15px;">
    <!-- 武器 -->
 
    <div id="weapon-slot" class="selection-slot" style="width: 124px; height: 124px; border: 2px dashed #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: white;">
<!-- 武器选择 -->
        <div style="font-size: 24px; color: #ccc;">+</div>
<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>
   
 
    <!-- 装甲 -->
<!-- 装甲选择 -->
    <div id="armor-slot" class="selection-slot" style="width: 124px; height: 124px; border: 2px dashed #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: white;">
<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;">
        <div style="font-size: 24px; color: #ccc;">+</div>
    <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>
      
 
     <!-- 戒指 -->
<!-- 戒指选择 -->
<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>
{{#微件:配队模拟器}}
{{#微件:配队模拟器}}

2025年10月18日 (六) 20:08的版本

+
+
+
+
+

检索自“http://cznwiki.com/index.php?title=配队模拟器&oldid=3408”