From d7e2d5b80fc7e527d3d51aac7f93f3712bfcbf2f Mon Sep 17 00:00:00 2001 From: "ZM.J" Date: Thu, 24 Oct 2024 21:11:41 +0800 Subject: [PATCH] =?UTF-8?q?Fix:=20=E5=B9=BB=E6=83=B3=E7=9C=9F=E5=A2=83?= =?UTF-8?q?=E5=89=A7=E8=AF=97=E6=94=B9=E7=89=88=E8=A7=A3=E6=9E=90=20(#814)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix header * Add more detailed info * Add total_use_time & adjust css --- models/RoleCombat.js | 17 ++++- resources/stat/role-summary.css | 56 ++++++++++++---- resources/stat/role-summary.html | 70 +++++++++++++++----- resources/stat/role-summary.less | 108 ++++++++++++++++++++----------- 4 files changed, 186 insertions(+), 65 deletions(-) diff --git a/models/RoleCombat.js b/models/RoleCombat.js index d5c326cd..f73f9426 100644 --- a/models/RoleCombat.js +++ b/models/RoleCombat.js @@ -15,11 +15,25 @@ export default class RoleCombat extends Base { constructor (data) { super() this.rounds = {} + function getSplendourBuffSummary(level) { + return { + 'total_level': level, + 'hp_increase': level * 800, + 'atk_increase': level * 50, + 'def_increase': level * 50, + 'em_increase': level * 20 + } + } lodash.forEach(data.detail.rounds_data, (round) => { let tmp = { is_get_medal: round.is_get_medal, choice_cards: round.choice_cards, - buffs: round.buffs + buffs: round.buffs, // TODO: 改版之后这个 buffs 似乎都返回一个空的 list 了 + enemies: round.enemies, + splendour_buff: { + summary: getSplendourBuffSummary(round.splendour_buff.summary.total_level), + buffs: round.splendour_buff.buffs + } } let time = moment(new Date(round.finish_time * 1000)) tmp.finish_time = time.format('MM-DD HH:mm:ss') @@ -42,6 +56,7 @@ export default class RoleCombat extends Base { }) this.stat = data.stat this.month = data.schedule.start_date_time.month + this.stat.total_use_time = data.detail.fight_statisic.total_use_time } getData () { diff --git a/resources/stat/role-summary.css b/resources/stat/role-summary.css index 7155ad11..59a701a2 100644 --- a/resources/stat/role-summary.css +++ b/resources/stat/role-summary.css @@ -41,11 +41,11 @@ body, } .role-stat .cont { margin: 5px 10px 5px 5px; - width: 175px; - height: 90px; + width: 150px; + height: 82px; } .role-stat .cont.star-display { - width: 230px; + width: 300px; } .role-stat strong { text-shadow: 0 0 3px #000; @@ -62,7 +62,7 @@ body, display: block; font-weight: normal; font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif; - font-size: 24px; + font-size: 20px; } .role-stat .stat-title strong { display: block; @@ -82,8 +82,7 @@ body, justify-content: flex-start; } .role-stat .stat-msg .stat-star-container { - flex: 0 0 11%; - /* 23% 是为了在有间隙的情况下，四个元素一行 */ + flex: 0 0 10%; margin-bottom: 10px; } .role-stat .stat-msg .stat-star-container .stat-star { @@ -134,26 +133,53 @@ body, } .role-buff .role-choice-cards-container { width: 100%; - height: 46%; + height: 100%; background-color: #e7e5d9; display: flex; border-radius: 10px; overflow: hidden; flex-direction: column; } -.role-buff .role-choice-cards-container .role-choice-cards-header { +.role-buff .role-enemy-container { + width: 20%; + height: 100%; + background-color: #e7e5d9; + display: flex; + border-radius: 10px; + overflow: hidden; + flex-direction: column; +} +.role-buff .role-splendour-container { + width: 40%; + height: 100%; + background-color: #e7e5d9; + display: flex; + border-radius: 10px; + overflow: hidden; + flex-direction: column; +} +.role-buff .role-splendour-buff-container { + width: 40%; + height: 100%; + background-color: #e7e5d9; + display: flex; + border-radius: 10px; + overflow: hidden; + flex-direction: column; +} +.role-buff .role-choice-cards-header { width: 100%; height: 30px; background-color: #8b8b83; padding: 5px; font-size: 18px; } -.role-buff .role-choice-cards-container .role-choice-cards-content { +.role-buff .role-choice-cards-content { width: 100%; padding: 5px; display: flex; } -.role-buff .role-choice-cards-container .role-choice-cards-content .role-content-container { +.role-buff .role-choice-cards-content .role-content-container { width: 40px; display: flex; margin-top: 5px; @@ -162,14 +188,20 @@ body, align-items: center; margin-right: 5px; } -.role-buff .role-choice-cards-container .role-choice-cards-content .role-content-icon { +.role-buff .role-choice-cards-content .role-content-icon { width: 40px; height: 40px; background-size: cover; background-color: black; border-radius: 50%; } -.role-buff .role-choice-cards-container + .role-choice-cards-container { +.role-buff .role-buff-line { + width: 100%; + height: 46%; + display: flex; + flex-direction: row; +} +.role-buff .role-buff-line + .role-buff-line { margin-top: 4%; /* 两个子元素之间的间距4% */ } diff --git a/resources/stat/role-summary.html b/resources/stat/role-summary.html index 3e5fbde8..9be81ed3 100644 --- a/resources/stat/role-summary.html +++ b/resources/stat/role-summary.html @@ -7,7 +7,7 @@ {{/block}} {{block 'main'}} -{{ set difficultyName = {1:'简单', 2:'普通', 3:'困难'} }} +{{ set difficultyName = {1:'简单', 2:'普通', 3:'困难', 4:'卓越'} }}
#幻想真境剧诗{{role.month}}月 · {{difficultyName[role.stat.difficulty_id]}}模式
UID:{{uid}}
@@ -31,6 +31,14 @@ {{/each}}
+
+
+ 总耗时 +
+
+ {{role.stat.total_use_time}} 秒 +
+
消耗幻剧之花 @@ -56,6 +64,8 @@
+ + {{set cardTypes={1:['wide wide2'],2:['wide','wide'],3:['wide','mini','mini'],4:['mini','mini','mini','mini']} }} @@ -80,26 +90,54 @@
- {{set buffs=round?.buffs }} -
-
奇妙助益
-
- {{each buffs buff}} +
+ {{set enemies=round?.enemies }} +
+
选择敌人
+
+ {{set display_enemy = enemies?.[0]}} +
+
+
+
+
+ {{set splendour_summary=round?.splendour_buff?.summary}} +
+
辉彩祝福
+
+
等级 {{splendour_summary?.total_level}}
+
生命值 +{{splendour_summary?.hp_increase}} + 攻击力 +{{splendour_summary?.atk_increase}} +
+
防御力 +{{splendour_summary?.def_increase}} + 元素精通 +{{splendour_summary?.em_increase}} +
+
+
+ {{set buffs=round?.splendour_buff?.buffs}} +
+
辉彩祝福 buff
+
+ {{each buffs buff}}
+
Lv. {{buff.level}}
- {{/each}} + {{/each}} +
- {{set choice_cards=round?.choice_cards }} -
-
神秘收获
-
- {{each choice_cards choice_card}} -
-
-
- {{/each}} +
+ {{set choice_cards=round?.choice_cards }} +
+
神秘收获
+
+ {{each choice_cards choice_card}} +
+
+
+ {{/each}} +
diff --git a/resources/stat/role-summary.less b/resources/stat/role-summary.less index eca1c045..91b1fe53 100644 --- a/resources/stat/role-summary.less +++ b/resources/stat/role-summary.less @@ -47,12 +47,12 @@ body, .cont { // position: relative; margin: 5px 10px 5px 5px; - width: 175px; - height: 90px; + width: 150px; + height: 82px; } .cont.star-display { - width: 230px; + width: 300px; } strong { @@ -71,7 +71,7 @@ body, display: block; font-weight: normal; .font-NZBZ; - font-size: 24px; + font-size: 20px; } strong { @@ -94,8 +94,7 @@ body, justify-content: flex-start; .stat-star-container { - flex: 0 0 11%; - /* 23% 是为了在有间隙的情况下，四个元素一行 */ + flex: 0 0 10%; margin-bottom: 10px; .stat-star { @@ -156,47 +155,84 @@ body, .role-choice-cards-container { width: 100%; - height: 46%; + height: 100%; background-color: rgb(231, 229, 217); display: flex; border-radius: 10px; overflow: hidden; flex-direction: column; + } - .role-choice-cards-header { - width: 100%; - height: 30px; - background-color: rgb(139, 139, 131); - padding: 5px; - font-size: 18px; + .role-enemy-container { + width: 20%; + height: 100%; + background-color: rgb(231, 229, 217); + display: flex; + border-radius: 10px; + overflow: hidden; + flex-direction: column; + } + + .role-splendour-container { + width: 40%; + height: 100%; + background-color: rgb(231, 229, 217); + display: flex; + border-radius: 10px; + overflow: hidden; + flex-direction: column; + } + + .role-splendour-buff-container { + width: 40%; + height: 100%; + background-color: rgb(231, 229, 217); + display: flex; + border-radius: 10px; + overflow: hidden; + flex-direction: column; + } + + .role-choice-cards-header { + width: 100%; + height: 30px; + background-color: rgb(139, 139, 131); + padding: 5px; + font-size: 18px; + } + + .role-choice-cards-content { + width: 100%; + padding: 5px; + display: flex; + + .role-content-container { + width: 40px; + display: flex; + margin-top: 5px; + margin-left: 5px; + flex-direction: column; + align-items: center; + margin-right: 5px } - .role-choice-cards-content { - width: 100%; - padding: 5px; - display: flex; - - .role-content-container { - width: 40px; - display: flex; - margin-top: 5px; - margin-left: 5px; - flex-direction: column; - align-items: center; - margin-right: 5px - } - - .role-content-icon { - width: 40px; - height: 40px; - background-size: cover; - background-color: black; - border-radius: 50%; - } + .role-content-icon { + width: 40px; + height: 40px; + background-size: cover; + background-color: black; + border-radius: 50%; } } - .role-choice-cards-container + .role-choice-cards-container { + .role-buff-line { + width: 100%; + height: 46%; + display: flex; + flex-direction: row; + } + + .role-buff-line + .role-buff-line { margin-top: 4%; /* 两个子元素之间的间距4% */ }