先搞好怪物信息窗口大概架构

script.js

@@ -3286,7 +3286,7 @@ function initialize() {
 	const s_awokensIcons = s_awokensLi.map(li => li.querySelector(".awoken-icon"));
 	s_awokensUl.originalSorting = s_awokensIcons.map(icon => parseInt(icon.getAttribute("data-awoken-icon"), 10)); //储存觉醒列表的原始排序
 
-	const searchMonList = searchBox.querySelector(".search-mon-list"); //搜索结果列表
+	const searchMonList = editBox.querySelector(".search-mon-list"); //搜索结果列表
 	searchMonList.originalHeads = null; //用于存放原始搜索结果
 
 	const s_awokensEquivalent = searchBox.querySelector("#consider-equivalent-awoken"); //搜索等效觉醒
@@ -4132,6 +4132,8 @@ function initialize() {
 		{
 			const mSAwokenChoIpt = monEditSAwokensRow.querySelector("input[name='sawoken-choice']:checked");
 			mon.sawoken = parseInt(mSAwokenChoIpt?.value, 10) || 0;
+			// const mSAwokenIcon = monEditSAwokensRow.querySelector("#current-super-awoken-icon");
+			// mon.sawoken = parseInt(mSAwokenIcon.getAttribute("data-awoken-icon"), 10) || 0;
 		}
 
 		if (card.stacking || card.types.some(t=>[0,12,14,15].includes(t)) &&

solo.html

@@ -938,8 +938,8 @@ var formation = new Formation(teamsCount,6);
 					<div class="search-list-length"></div>
 				</div>
 			</div>
-			<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		</div>
+		<ul class="search-mon-list"></ul><!--搜索结果的显示列表-->
 		<div class="monsterinfo-box">
 			<div class="monster-head">
 				<a class="monster null" target="_blank">
@@ -947,13 +947,13 @@ var formation = new Formation(teamsCount,6);
 					<div class="subproperty"></div>
 				</a>
 			</div>
-			<div class="monsterinfo-line">
+			<div class="monsterinfo-line line1">
 				<div class="monster-id"></div><div class="monster-rare"></div><div class="monster-mp"></div>
 			</div>
-			<div class="monsterinfo-line">
+			<div class="monsterinfo-line line2">
 				<div class="monster-name"></div>
 			</div>
-			<div class="monsterinfo-line">
+			<div class="monsterinfo-line line3">
 				<ul class="monster-type">
 					<li class="type-name"><span class="type-icon"></span></li><li class="type-name"><span class="type-icon"></span></li><li class="type-name"><span class="type-icon"></span></li>
 				</ul>
@@ -963,22 +963,25 @@ var formation = new Formation(teamsCount,6);
 					<div class="monster-altName"></div>
 				</div>
 			</div>
-			<div class="monsterinfo-line row-awoken-sawoken">
+			<div class="monsterinfo-line line4 row-awoken-sawoken">
 				<div class="row-mon-awoken">
 					<!--怪物觉醒-->
 					<div class="awoken-ul">
-						<label for="awoken-number-0" class="awoken-count-num" title="0"></label><input type="radio" name="awoken-number" class="awoken-number" value="0" id="awoken-number-0" /><!--
-						--><label for="awoken-number-1" class="awoken-icon" title="1"></label><input type="radio" name="awoken-number" class="awoken-number" value="1" id="awoken-number-1" /><!--
-						--><label for="awoken-number-2" class="awoken-icon" title="2"></label><input type="radio" name="awoken-number" class="awoken-number" value="2" id="awoken-number-2" /><!--
-						--><label for="awoken-number-3" class="awoken-icon" title="3"></label><input type="radio" name="awoken-number" class="awoken-number" value="3" id="awoken-number-3" /><!--
-						--><label for="awoken-number-4" class="awoken-icon" title="4"></label><input type="radio" name="awoken-number" class="awoken-number" value="4" id="awoken-number-4" /><!--
-						--><label for="awoken-number-5" class="awoken-icon" title="5"></label><input type="radio" name="awoken-number" class="awoken-number" value="5" id="awoken-number-5" /><!--
-						--><label for="awoken-number-6" class="awoken-icon" title="6"></label><input type="radio" name="awoken-number" class="awoken-number" value="6" id="awoken-number-6" /><!--
-						--><label for="awoken-number-7" class="awoken-icon" title="7"></label><input type="radio" name="awoken-number" class="awoken-number" value="7" id="awoken-number-7" /><!--
-						--><label for="awoken-number-8" class="awoken-icon" title="8"></label><input type="radio" name="awoken-number" class="awoken-number" value="8" id="awoken-number-8" /><!--
-						--><label for="awoken-number-9" class="awoken-icon" title="9"></label><input type="radio" name="awoken-number" class="awoken-number" value="9" id="awoken-number-9" />
+						<label for="awoken-number-0" class="awoken-count-num" title="0"></label><input type="radio" name="awoken-number" class="awoken-number" value="0" id="awoken-number-0" />
+						<label for="awoken-number-1" class="awoken-icon" title="1"></label><input type="radio" name="awoken-number" class="awoken-number" value="1" id="awoken-number-1" />
+						<label for="awoken-number-2" class="awoken-icon" title="2"></label><input type="radio" name="awoken-number" class="awoken-number" value="2" id="awoken-number-2" />
+						<label for="awoken-number-3" class="awoken-icon" title="3"></label><input type="radio" name="awoken-number" class="awoken-number" value="3" id="awoken-number-3" />
+						<label for="awoken-number-4" class="awoken-icon" title="4"></label><input type="radio" name="awoken-number" class="awoken-number" value="4" id="awoken-number-4" />
+						<label for="awoken-number-5" class="awoken-icon" title="5"></label><input type="radio" name="awoken-number" class="awoken-number" value="5" id="awoken-number-5" />
+						<label for="awoken-number-6" class="awoken-icon" title="6"></label><input type="radio" name="awoken-number" class="awoken-number" value="6" id="awoken-number-6" />
+						<label for="awoken-number-7" class="awoken-icon" title="7"></label><input type="radio" name="awoken-number" class="awoken-number" value="7" id="awoken-number-7" />
+						<label for="awoken-number-8" class="awoken-icon" title="8"></label><input type="radio" name="awoken-number" class="awoken-number" value="8" id="awoken-number-8" />
+						<label for="awoken-number-9" class="awoken-icon" title="9"></label><input type="radio" name="awoken-number" class="awoken-number" value="9" id="awoken-number-9" />
 					</div>
 				</div>
+				<div class="current-super-awoken">
+					<icon id="current-super-awoken-icon" class="awoken-icon"></icon>
+				</div>
 				<div class="row-mon-super-awoken">
 					<!--怪物超觉醒-->
 					<input type="radio" name="sawoken-choice" class="sawoken-choice" value="0" id="sawoken-choice-nosawoken" />

style.css

@@ -548,6 +548,9 @@ ul{
 /*怪物-觉醒*/
 .awoken-count-num
 {
+	font-family: var(--game-font-family);
+	font-size: 20px;
+	line-height: 28px;
 	color: yellow;
 	text-shadow: black 0 0 4px;
 	text-align: center;
@@ -566,9 +569,6 @@ ul{
 /*显示怪物觉醒的数字*/
 .awoken-count-num
 {
-	font-family: var(--game-font-family);
-	font-size: 20px;
-	line-height: 28px;
 }
 .awoken-count-num::before
 {
@@ -1362,6 +1362,10 @@ icon.inflicts::after
 	content: "修改辅助";
 }*/
 .edit-box .monsterinfo-box{
+	display: grid;
+	grid-auto-rows: min-content;
+	grid-template-columns: 100px auto;
+	gap: 5px;
 	font-family: var(--game-font-family);
 	color: white;
 	text-shadow: black 2px 2px 0;
@@ -1375,6 +1379,29 @@ icon.inflicts::after
 	top: 0;
 	z-index: 1;
 }
+.monsterinfo-box .monster-head {
+	grid-row: 1 / 4;
+}
+.monsterinfo-box .monsterinfo-line {
+	display: flex;
+}
+.monsterinfo-box .row-awoken-sawoken {
+	grid-column: 1 / 3;
+	display: flex;
+	gap: 5px;
+	flex-wrap: wrap;
+}
+.row-awoken-sawoken .awoken-ul,
+.row-awoken-sawoken .current-super-awoken
+{
+	display: inline-flex;
+	vertical-align: top;
+}
+.row-awoken-sawoken .current-super-awoken::before{
+	content:"+";
+	line-height: 25px;
+}
+
 .edit-box .search-box,
 .edit-box .setting-box{
 	padding: 10px;
@@ -1419,7 +1446,7 @@ icon.inflicts::after
 	font-size: 25px;
 }
 .edit-box .setting-box .row-mon-id .evo-card-list>li,
-.edit-box .search-box .search-mon-list>li
+.edit-box .search-mon-list>li
 {
 	display: inline-block;
 	vertical-align: top;
@@ -1430,7 +1457,7 @@ icon.inflicts::after
 	vertical-align: bottom;
 }
 .edit-box .setting-box .row-mon-id .evo-card-list .monster,
-.edit-box .search-box .search-mon-list .monster,
+.edit-box .search-mon-list .monster,
 .detail-mon .monster,
 .mask-evolutionary-tree .evo-panel-left>.monster-head>.monster
 {
@@ -1439,7 +1466,7 @@ icon.inflicts::after
 	margin: calc(-100px * (1 - 0.75) / 2);
 }
 .edit-box .setting-box .row-mon-id .evo-card-list .monster .id,
-.edit-box .search-box .search-mon-list .monster .id,
+.edit-box .search-mon-list .monster .id,
 .detail-mon .monster .id{
 	bottom: 5px;
 	font-size: 20px;
@@ -1455,10 +1482,10 @@ icon.inflicts::after
 	font-weight: bold;
 	text-shadow: black -3px -3px 3px, black 3px -3px 3px, black -3px 3px 3px, black 3px 3px 3px, ;
 }
-.edit-box .search-box .search-mon-list .monster .level {
+.edit-box .search-mon-list .monster .level {
 	bottom: 23px;
 }
-.edit-box .search-box .search-mon-list .monster .plus {
+.edit-box .search-mon-list .monster .plus {
 	top: 20px;
 }
 
@@ -2039,7 +2066,7 @@ icon.inflicts::after
 	content: "关闭搜索";
 }*/
 
-.search-box .search-mon-list{
+.search-mon-list{
 	border: 1px solid white;
 	border-radius: 5px;
 	background: grey;
@@ -2057,7 +2084,7 @@ icon.inflicts::after
 {
 	content: attr(data-search-result-count);
 }
-.guide-mod .search-box .search-mon-list{
+.guide-mod .search-mon-list{
 	max-height: 790px;
 	overflow: auto;
 }
@@ -2079,19 +2106,9 @@ icon.inflicts::after
 .edit-box .setting-row{
 	width: 100%;
 }
-.monsterinfo-box .monster-head{
-	float: left;
-	margin-right:5px;
-}
 .monsterinfo-box .monsterinfo-line{
 	font-size: 22px;
 	line-height: 30px;
-	height: auto;
-}
-.monsterinfo-box .monsterinfo-line > div
-{
-	display:inline;
-	vertical-align: middle;
 }
 .monsterinfo-box .monsterinfo-line .monsterinfo-cell{
 	display:inline-block;
@@ -2193,7 +2210,8 @@ icon.inflicts::after
 */
 .row-mon-awoken .awoken-count-num{
 	display: inline-block;
-	transform: scale(0.84) translateY(-2px);
+	transform: scale(0.84);
+	margin: -3px -1px;
 }
 .edit-box .awoken-ul .awoken-icon,
 .row-mon-awoken .awoken-count-num
@@ -2225,23 +2243,12 @@ icon.inflicts::after
 .row-mon-super-awoken
 {
 	display: inline-block;
-	box-sizing: border-box;
-	vertical-align: top;
 }
 .row-mon-super-awoken::before {
 	/* content: "+"; */
-	vertical-align: top;
-}
-.row-mon-awoken .awoken-ul,
-.row-mon-super-awoken .awoken-ul
-{
-	grid-template-columns: repeat(10, 32px);
-	display: inline-grid;
-	vertical-align: bottom;
 }
-.row-mon-awoken .awoken-count-num,
-.row-mon-awoken .awoken-icon,
-.row-mon-super-awoken .awoken-icon
+.row-awoken-sawoken .awoken-count-num,
+.row-awoken-sawoken .awoken-icon
 {
 	grid-column: span 1;
 	grid-row: span 1;