临时阶段1

languages/zh-CN.css

@@ -20,16 +20,27 @@
 .monster .id::before{
 	content: "No.";
 }
-.formation-A-bigbox::after{
+.team-bigbox:nth-of-type(1)::after,
+.team-bigbox:nth-of-type(1)::before
+{
 	content: "队伍\A A";
 }
-.formation-B-bigbox::before{
+.team-bigbox:nth-of-type(2)::after,
+.team-bigbox:nth-of-type(2)::before
+{
 	content: "队伍\A B";
 }
-.formation-A-box .formation-assist .member::after{
+.team-bigbox:nth-of-type(3)::after,
+.team-bigbox:nth-of-type(3)::before
+{
+	content: "队伍\A C";
+}
+.team-box .team-assist .member::after
+{
 	content: "▼辅助";
 }
-.formation-B-box .formation-assist .member::before{
+.team-box .team-assist .member::before
+{
 	content: "▲辅助";
 }
 .abilitys .hp::before{

multi.html

@@ -36,376 +36,378 @@ var formation = new Formation(teamsNumber,5);
 	</div>
 	<div class="formation-box">
 		<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /></div>
-		<div class="formation-A-bigbox">
-			<div class="formation-A-box">
-				<ul class="formation-assist">
-					<li class="member member-1 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="0">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-2 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="1">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-3 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="2">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-4 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="3">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-5 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="4">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-				</ul>
-				<ul class="formation-latents">
-					<li class="latents latents-1">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-2">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-3">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-4">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-5">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-				</ul>
-				<ul class="formation-team">
-					<li class="member member-1 team-leader null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="0">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-2 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="1">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-3 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="2">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-4 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="3">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-5 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="4">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-				</ul>
-			</div>
-		</div>
-		<div class="formation-B-bigbox">
-			<div class="formation-B-box">
-				<ul class="formation-team">
-					<li class="member member-1 null">
-						<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="0">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-2 null">
-						<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="1">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-3 null">
-						<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="2">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-4 null">
-						<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="3">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-5 team-leader null">
-						<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="4">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-				</ul>
-				<ul class="formation-latents">
-					<li class="latents latents-1">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-2">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-3">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-4">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-5">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-				</ul>
-				<ul class="formation-assist">
-					<li class="member member-1 null">
-						<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="0">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-2 null">
-						<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="1">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-3 null">
-						<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="2">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-4 null">
-						<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="3">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-5 null">
-						<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="4">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-				</ul>
-			</div>
-		</div>
+		<ul class="teams">
+			<li class="team-bigbox team-1">
+				<div class="team-box">
+					<ul class="team-assist">
+						<li class="member member-1 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="0">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-2 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="1">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-3 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="2">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-4 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="3">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-5 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="4">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+					</ul>
+					<ul class="team-latents">
+						<li class="latents latents-1">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-2">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-3">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-4">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-5">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+					</ul>
+					<ul class="team-members">
+						<li class="member member-1 team-leader null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="0">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-2 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="1">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-3 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="2">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-4 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="3">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-5 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="4">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</li>
+			<li class="team-bigbox team-2 reverse-member-assist">
+				<div class="team-box">
+					<ul class="team-members">
+						<li class="member member-1 null">
+							<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="0">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-2 null">
+							<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="1">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-3 null">
+							<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="2">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-4 null">
+							<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="3">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-5 team-leader null">
+							<a class="monster" target="_blank" data-team="1" data-assist="0" data-index="4">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+					</ul>
+					<ul class="team-latents">
+						<li class="latents latents-1">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-2">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-3">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-4">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-5">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+					</ul>
+					<ul class="team-assist">
+						<li class="member member-1 null">
+							<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="0">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-2 null">
+							<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="1">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-3 null">
+							<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="2">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-4 null">
+							<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="3">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-5 null">
+							<a class="monster" target="_blank" data-team="1" data-assist="1" data-index="4">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</li>
+		</ul>
 		<div class="awoken-total-box">
 			<!--怪物觉醒-->
 			<ul class="awoken-ul">

script.js

@@ -450,26 +450,20 @@ function initialize()
 
 	//队伍框
 	const formationBox = document.querySelector(".formation-box");
-
-	const formationA = formationBox.querySelector(".formation-box .formation-A-box");
-	const formationB = formationBox.querySelector(".formation-box .formation-B-box");
-	
-	const fATeam = formationA.querySelectorAll(".formation-team .monster");
-	const fAAssist = formationA.querySelectorAll(".formation-assist .monster");
-
-	const fBTeam = formationB ? formationB.querySelectorAll(".formation-team .monster") : null;
-	const fBAssist = formationB ? formationB.querySelectorAll(".formation-assist .monster") : null;
-
-	for (let ti=0;ti<fATeam.length;ti++)
-	{
-		allMembers.push(fATeam[ti]);
-		allMembers.push(fAAssist[ti]);
-		if (formationB)
-		{
-			allMembers.push(fBTeam[ti]);
-			allMembers.push(fBAssist[ti]);
-		}
-	}
+	const teamBigBox = Array.prototype.slice.call(formationBox.querySelectorAll(".team-bigbox"));
+	const teamBox = teamBigBox.map(tbb=>{return tbb.querySelector(".team-box");});
+	//将所有怪物头像添加到全局数组
+	teamBox.forEach(tb=>{
+		const menbers = Array.prototype.slice.call(tb.querySelectorAll(".team-menbers .monster"));
+		const assist = Array.prototype.slice.call(tb.querySelectorAll(".team-assist .monster"));
+		menbers.forEach(m=>{
+			allMembers.push(m);
+		});
+		assist.forEach(m=>{
+			allMembers.push(m);
+		});
+	});
+	//所有怪物头像，添加拖动交换的代码
 	allMembers.forEach(m=>{
 		//点击
 		m.onclick = clickMonHead;
@@ -485,21 +479,26 @@ function initialize()
 		m.ontouchcancel = touchcancelMonHead;
 	});
 
-	//徽章
-	let badges = Array.prototype.slice.call(formationBox.querySelectorAll(".formation-badge .badge-bg"));
-	badges.forEach((badge,bidx) => {
-		badge.onclick = function(){
-			if (badges.some(b=>{return b.classList.contains("display-none");}))
-			{ //未展开时
-				badges.forEach((b,idx) => {if (idx!=bidx)b.classList.remove("display-none");});
-			}else
-			{ //展开时
-				badges.forEach((b,idx) => {if (idx!=bidx)b.classList.add("display-none");});
-				formation.badge = bidx;
-				refreshTotalAbility(formation.team[0]);
-				creatNewUrl();
-			}
-		};
+	const className_ChoseBadges = "show-all-badges";
+	teamBox.forEach(tb=>{
+		//徽章
+		const teamBadge = tb.querySelector(".team-badge");
+		if (!teamBadge) return;
+		const badges = Array.prototype.slice.call(teamBadge.querySelectorAll(".badge-bg"));
+		badges.forEach((badge,bidx) => {
+			badge.onclick = function(){
+				if (teamBadge.classList.contains(className_ChoseBadges))
+				{
+					teamBadge.classList.remove(className_ChoseBadges);
+					formation.badge = bidx;
+					refreshTotalAbility(formation.team[0]);
+					creatNewUrl();
+				}else
+				{
+					teamBadge.classList.add(className_ChoseBadges);
+				}
+			};
+		});
 	});
 
 	//编辑框

solo.html

@@ -40,263 +40,265 @@ var formation = new Formation(teamsNumber,6);
 	</div>
 	<div class="formation-box">
 		<div class="title-box"><input type="text" class="title" placeholder="输入队伍标题" /></div>
-		<div class="formation-A-bigbox">
-			<div class="formation-A-box">
-				<ul class="formation-badge">
-					<li class="badge-bg"><div class="badge badge-0"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-1"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-2"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-3"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-4"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-5"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-6"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-7"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-8"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-9"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-10"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-11"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-12"></div></li>
-					<li class="badge-bg display-none"><div class="badge badge-13"></div></li>
-					<div class="team-info"><div class="tIf-total-hp"></div><div class="tIf-total-rcv"></div></div>
-				</ul>
-				<ul class="formation-assist">
-					<li class="member member-1 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="0">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-2 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="1">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-3 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="2">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-4 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="3">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-5 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="4">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-6 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="5">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-				</ul>
-				<ul class="formation-latents">
-					<li class="latents latents-1">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-2">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-3">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-4">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-5">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-					<li class="latents latents-6">
-						<ul class="latent-ul display-none">
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-							<li class="latent-icon"></li>
-						</ul>
-					</li>
-				</ul>
-				<ul class="formation-team">
-					<li class="member member-1 team-leader null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="0">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-2 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="1">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-3 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="2">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-4 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="3">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-5 null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="4">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-					<li class="member member-6 team-leader null">
-						<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="5">
-							<div class="property"></div>
-							<div class="subproperty"></div>
-							<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
-							<div class="awoken-count display-none"></div>
-							<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
-							<div class="level"></div>
-							<div class="id"></div>
-							<div class="skill"></div>
-						</a>
-					</li>
-				</ul>
-				<ul class="formation-ability">
-					<li class="abilitys abilitys-1">
-						<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
-					</li>
-					<li class="abilitys abilitys-2">
-						<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
-					</li>
-					<li class="abilitys abilitys-3">
-						<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
-					</li>
-					<li class="abilitys abilitys-4">
-						<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
-					</li>
-					<li class="abilitys abilitys-5">
-						<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
-					</li>
-					<li class="abilitys abilitys-6">
-						<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
-					</li>
-				</ul>
-			</div>
-		</div>
+		<ul class="teams">
+			<li class="team-bigbox team-1">
+				<div class="team-box">
+					<ul class="team-badge">
+						<input type="radio" name="team-0-badge" class="badge-radio" value="0" id="team-0-badge-0"><label class="badge-bg" for="team-0-badge-0"><div class="badge badge-0"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="1" id="team-0-badge-1"><label class="badge-bg" for="team-0-badge-1"><div class="badge badge-1"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="2" id="team-0-badge-2"><label class="badge-bg" for="team-0-badge-2"><div class="badge badge-2"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="3" id="team-0-badge-3"><label class="badge-bg" for="team-0-badge-3"><div class="badge badge-3"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="4" id="team-0-badge-4"><label class="badge-bg" for="team-0-badge-4"><div class="badge badge-4"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="5" id="team-0-badge-5"><label class="badge-bg" for="team-0-badge-5"><div class="badge badge-5"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="6" id="team-0-badge-6"><label class="badge-bg" for="team-0-badge-6"><div class="badge badge-6"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="7" id="team-0-badge-7"><label class="badge-bg" for="team-0-badge-7"><div class="badge badge-7"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="8" id="team-0-badge-8"><label class="badge-bg" for="team-0-badge-8"><div class="badge badge-8"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="9" id="team-0-badge-9"><label class="badge-bg" for="team-0-badge-9"><div class="badge badge-9"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="10" id="team-0-badge-10"><label class="badge-bg" for="team-0-badge-10"><div class="badge badge-10"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="11" id="team-0-badge-11"><label class="badge-bg" for="team-0-badge-11"><div class="badge badge-11"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="12" id="team-0-badge-12"><label class="badge-bg" for="team-0-badge-12"><div class="badge badge-12"></div></label>
+						<input type="radio" name="team-0-badge" class="badge-radio" value="13" id="team-0-badge-13"><label class="badge-bg" for="team-0-badge-13"><div class="badge badge-13"></div></label>
+						<div class="team-info"><div class="tIf-total-hp"></div><div class="tIf-total-rcv"></div></div>
+					</ul>
+					<ul class="team-assist">
+						<li class="member member-1 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="0">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-2 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="1">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-3 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="2">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-4 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="3">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-5 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="4">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-6 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="1" data-index="5">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+					</ul>
+					<ul class="team-latents">
+						<li class="latents latents-1">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-2">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-3">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-4">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-5">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+						<li class="latents latents-6">
+							<ul class="latent-ul display-none">
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+								<li class="latent-icon"></li>
+							</ul>
+						</li>
+					</ul>
+					<ul class="team-members">
+						<li class="member member-1 team-leader null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="0">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-2 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="1">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-3 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="2">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-4 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="3">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-5 null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="4">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+						<li class="member member-6 team-leader null">
+							<a class="monster" target="_blank" data-team="0" data-assist="0" data-index="5">
+								<div class="property"></div>
+								<div class="subproperty"></div>
+								<div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div><div class="_297">297</div></div>
+								<div class="awoken-count display-none"></div>
+								<div class="super-awoken display-none"><div class="awoken-icon"></div></div>
+								<div class="level"></div>
+								<div class="id"></div>
+								<div class="skill"></div>
+							</a>
+						</li>
+					</ul>
+					<ul class="team-ability">
+						<li class="abilitys abilitys-1">
+							<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
+						</li>
+						<li class="abilitys abilitys-2">
+							<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
+						</li>
+						<li class="abilitys abilitys-3">
+							<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
+						</li>
+						<li class="abilitys abilitys-4">
+							<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
+						</li>
+						<li class="abilitys abilitys-5">
+							<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
+						</li>
+						<li class="abilitys abilitys-6">
+							<div class="hp"></div><div class="atk"></div><div class="rcv"></div>
+						</li>
+					</ul>
+				</div>
+			</li>
+		</ul>
 		<div class="awoken-total-box">
 			<!--怪物觉醒-->
 			<ul class="awoken-ul">

style-monsterimages.css

@@ -812,13 +812,11 @@ var sawokens = [
 	width: 53px;
 	height: 41px;
 	line-height: 41px;
-	float: left;
 	text-align: center;
 	margin-right: 5px;
-	cursor: pointer;
 }
 .badge{
-	display:inline-block;
+	display: inline-block;
     vertical-align: middle;
 	background-repeat: no-repeat;
 	background-image: url(images/badge.png);

style.css

@@ -20,6 +20,12 @@
 body{
 	font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
 	--search-icon-unchecked: 0.4;
+	--team-1-bgcolor : pink;
+	--team-2-bgcolor : lightblue;
+	--team-3-bgcolor : lightgreen;
+	--team-1-color : red;
+	--team-2-color : blue;
+	--team-3-color : green;
 }
 .display-none{
 	display:none !important;
@@ -76,7 +82,7 @@ ul{
 }
 /*队伍的整个盒子*/
 .formation-box{
-	width: 648px;
+	/*width: 648px;*/
 	min-width: 648px;
 }
 
@@ -281,25 +287,57 @@ ul{
 .formation-box .monster{
 	margin: 4px; /*留给队长边框的*/
 }
-.formation-assist, .formation-team,.formation-badge{
+.team-assist, .team-members,.team-badge{
+	display: inline-block;
+}
+/* 徽章，平时都隐藏 */
+.badge-bg{
+	display: none;
+	cursor: pointer;
+}
+.badge-radio{
+	display: none;
+}
+/* 显示所有徽章时则打开 */
+.show-all-badges .badge-bg{
+	display: inline-block;
+}
+/* 选中的徽章平时也打开 */
+.team-badge .badge-radio:checked+label{
 	display: inline-block;
 }
 /*队伍的背景色*/
-.formation-A-box .formation-team,.formation-A-box .formation-latents{
-	background-color:pink;
+.team-bigbox:nth-of-type(1) .team-menbers,
+.team-bigbox:nth-of-type(1) .team-latents,
+.team-bigbox:nth-of-type(1)::before,
+.team-bigbox:nth-of-type(1)::after
+{
+	background-color: var(--team-1-bgcolor);
+}
+.team-bigbox:nth-of-type(2) .team-menbers,
+.team-bigbox:nth-of-type(2) .team-latents,
+.team-bigbox:nth-of-type(2)::before,
+.team-bigbox:nth-of-type(2)::after
+{
+	background-color: var(--team-2-bgcolor);
 }
-.formation-B-box .formation-team,.formation-B-box .formation-latents{
-	background-color:lightblue;
+.team-bigbox:nth-of-type(3) .team-menbers,
+.team-bigbox:nth-of-type(3) .team-latents,
+.team-bigbox:nth-of-type(3)::before,
+.team-bigbox:nth-of-type(3)::after
+{
+	background-color: var(--team-3-bgcolor);
 }
-.formation-A-bigbox, .formation-B-bigbox{
+.team-bigbox{
 	position: relative;
 	font-size:0;
+	margin-bottom:15px;
 }
-.formation-B-bigbox{
-	margin-top:15px;
+.team-bigbox:last-of-type{
+	margin-bottom:0;
 }
 /*队伍A、B的文字*/
-.formation-A-bigbox::after, .formation-B-bigbox::before{
+.team-bigbox::after, .team-bigbox::before{
 	font-size: 30px;
 	font-weight: bold;
 	text-align: center;
@@ -309,23 +347,37 @@ ul{
 	width: 108px;
 	height: 108px;
 }
-.formation-A-bigbox::after{
-	color:red;
-	background-color:pink;
-	/*content: "队伍\A A";*/
+
+.team-bigbox:nth-of-type(1)::after,
+.team-bigbox:nth-of-type(1)::before,
+.team-bigbox:nth-of-type(1) .team-assist .member::after,
+.team-bigbox:nth-of-type(1) .team-assist .member::before
+{
+	color: var(--team-1-color);
 }
-.formation-B-bigbox::before{
-	color:blue;
-	background-color:lightblue;
-	/*content: "队伍\A B";*/
-	vertical-align:top;
+.team-bigbox:nth-of-type(2)::after,
+.team-bigbox:nth-of-type(2)::before,
+.team-bigbox:nth-of-type(2) .team-assist .member::after,
+.team-bigbox:nth-of-type(2) .team-assist .member::before
+{
+	color: var(--team-2-color);
+	/*vertical-align:top;*/
 }
-.formation-A-box, .formation-B-box{
+.team-bigbox:nth-of-type(3)::after,
+.team-bigbox:nth-of-type(3)::before,
+.team-bigbox:nth-of-type(3) .team-assist .member::after,
+.team-bigbox:nth-of-type(3) .team-assist .member::before
+{
+	color: var(--team-3-color);
+}
+.team-box{
 	display: inline-block;
 	vertical-align:bottom;
 }
 
-.formation-A-box .formation-assist .member::after, .formation-B-box .formation-assist .member::before{
+.team-box .team-assist .member::after,
+.team-box .team-assist .member::before
+{
 	width: 108px;
 	text-align: center;
 	font-size: 18px;
@@ -333,14 +385,6 @@ ul{
 	display: inline-block;
 	position: relative;
 }
-.formation-A-box .formation-assist .member::after{
-	color:red;
-	/*content: "▼辅助";*/
-}
-.formation-B-box .formation-assist .member::before{
-	color:blue;
-	/*content: "▲辅助";*/
-}
 
 .formation-box .team-info{
 	font-size: 15px;
@@ -350,59 +394,62 @@ ul{
 }
 
 /*队伍的潜觉*/
-.formation-latents .latents{
+.team-latents .latents{
 	width: 108px;
 	/*float:left;*/
 	margin-bottom: -20px;
 	display: inline-block;
 }
-.formation-latents .latent-ul{
+.team-latents .latent-ul{
 	font-size: 0;
 	width: 152px;
 	transform: translate(-22px,-8px) scale(0.63);
 }
 
-.formation-latents .latent-icon{
+.team-latents .latent-icon{
 	margin-left: 3px;
 	margin-right: 3px;
 }
-.formation-latents .latent-icon-12,
-.formation-latents .latent-icon-13,
-.formation-latents .latent-icon-14,
-.formation-latents .latent-icon-15,
-.formation-latents .latent-icon-16,
-.formation-latents .latent-icon-17,
-.formation-latents .latent-icon-18,
-.formation-latents .latent-icon-19,
-.formation-latents .latent-icon-20,
-.formation-latents .latent-icon-21,
-.formation-latents .latent-icon-22,
-.formation-latents .latent-icon-23,
-.formation-latents .latent-icon-24,
-.formation-latents .latent-icon-25,
-.formation-latents .latent-icon-26,
-.formation-latents .latent-icon-27,
-.formation-latents .latent-icon-28,
-.formation-latents .latent-icon-29,
-.formation-latents .latent-icon-30,
-.formation-latents .latent-icon-31,
-.formation-latents .latent-icon-32,
-.formation-latents .latent-icon-33{
+.team-latents .latent-icon-12,
+.team-latents .latent-icon-13,
+.team-latents .latent-icon-14,
+.team-latents .latent-icon-15,
+.team-latents .latent-icon-16,
+.team-latents .latent-icon-17,
+.team-latents .latent-icon-18,
+.team-latents .latent-icon-19,
+.team-latents .latent-icon-20,
+.team-latents .latent-icon-21,
+.team-latents .latent-icon-22,
+.team-latents .latent-icon-23,
+.team-latents .latent-icon-24,
+.team-latents .latent-icon-25,
+.team-latents .latent-icon-26,
+.team-latents .latent-icon-27,
+.team-latents .latent-icon-28,
+.team-latents .latent-icon-29,
+.team-latents .latent-icon-30,
+.team-latents .latent-icon-31,
+.team-latents .latent-icon-32,
+.team-latents .latent-icon-33{
 	margin: 0;
 }
 /*队长的边框*/
-.formation-A-box .formation-team .team-leader .monster, .formation-B-box .formation-team .team-leader .monster{
+.team-box .team-members .team-leader .monster{
 	border-radius: 10px;
 	border-width:4px;
 	border-style:solid;
 	box-sizing: initial;
 	margin: 0;
 }
-.formation-A-box .formation-team .team-leader .monster{
-	border-color: red;
+.team-bigbox:nth-of-type(1) .team-members .team-leader .monster{
+	border-color: var(--team-1-color);
+}
+.team-bigbox:nth-of-type(2) .team-members .team-leader .monster{
+	border-color: var(--team-2-color);
 }
-.formation-B-box .formation-team .team-leader .monster{
-	border-color: blue;
+.team-bigbox:nth-of-type(3) .team-members .team-leader .monster{
+	border-color: var(--team-3-color);
 }
 
 /*三维计算值*/