AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-19 04:19:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

完善状态栏

Browse Source
This commit is contained in:
unanmed 2022-12-29 14:05:16 +08:00
parent 190201b386
commit e165bc9f74
2 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/box.vue
View File

@ -67,7 +67,9 @@ let topB: HTMLDivElement;
let bottomB: HTMLDivElement; let bottomB: HTMLDivElement;
let drag: HTMLElement; let drag: HTMLElement;
const width = ref(isMobile ? window.innerWidth - 100 : 300); const width = ref(
isMobile ? window.innerWidth - 100 : window.innerWidth * 0.175
);
const height = ref(isMobile ? 250 : window.innerHeight - 100); const height = ref(isMobile ? 250 : window.innerHeight - 100);
const left = ref(50); const left = ref(50);
const top = ref(50); const top = ref(50);

58
src/ui/statusBar.vue
View File

@ -18,8 +18,12 @@
</div> </div>
<div id="status-hp" class="status-item"> <div id="status-hp" class="status-item">
<img src="/project/images/hp.png" class="status-icon" /> <img src="/project/images/hp.png" class="status-icon" />
<span>{{ format(hero.hp!) }}</span> <span class="status-item-bold">{{
<span id="status-hpmax" class="status-extra" format(hero.hp!)
}}</span>
<span
id="status-hpmax"
class="status-extra status-item-bold"
>+{{ format(hero.hpmax!) }}/t</span >+{{ format(hero.hpmax!) }}/t</span
> >
<span <span
@ -34,37 +38,41 @@
src="/project/images/atk.png" src="/project/images/atk.png"
class="status-icon" class="status-icon"
/> />
<span>{{ format(hero.atk!) }}</span> <span class="status-item-bold">{{
<span id="status-mana" class="status-extra" format(hero.atk!)
}}</span>
<span
id="status-mana"
class="status-extra status-item-bold"
>+{{ format(hero.mana!) }}</span >+{{ format(hero.mana!) }}</span
> >
</div> </div>
<div id="status-def" class="status-item"> <div id="status-def" class="status-item status-item-bold">
<img <img
src="/project/images/def.png" src="/project/images/def.png"
class="status-icon" class="status-icon"
/> />
<span>{{ format(hero.def!) }}</span> <span>{{ format(hero.def!) }}</span>
</div> </div>
<div id="status-mdef" class="status-item"> <div id="status-mdef" class="status-item status-item-bold">
<img src="/project/images/IQ.png" class="status-icon" /> <img src="/project/images/IQ.png" class="status-icon" />
<span>{{ format(hero.mdef!) }}</span> <span>{{ format(hero.mdef!) }}</span>
</div> </div>
<div id="status-money" class="status-item"> <div id="status-money" class="status-item status-item-bold">
<img <img
src="/project/images/money.png" src="/project/images/money.png"
class="status-icon" class="status-icon"
/> />
<span>{{ format(hero.money!) }}</span> <span>{{ format(hero.money!) }}</span>
</div> </div>
<div id="status-exp" class="status-item"> <div id="status-exp" class="status-item status-item-bold">
<img <img
src="/project/images/exp.png" src="/project/images/exp.png"
class="status-icon" class="status-icon"
/> />
<span>{{ format(up) }}</span> <span>{{ format(up) }}</span>
</div> </div>
<div id="status-key" class="status-item"> <div id="status-key" class="status-item status-item-bold">
<span style="color: #fca; padding-left: 10%">{{ <span style="color: #fca; padding-left: 10%">{{
keys[0]?.toString().padStart(2, '0') keys[0]?.toString().padStart(2, '0')
}}</span> }}</span>
@ -97,7 +105,9 @@ import { status } from '../plugin/ui/statusBar';
import { isMobile } from '../plugin/use'; import { isMobile } from '../plugin/use';
import { has } from '../plugin/utils'; import { has } from '../plugin/utils';
const width = ref(isMobile ? window.innerWidth - 100 : 300); const width = ref(
isMobile ? window.innerWidth - 100 : window.innerWidth * 0.175
);
const height = ref(isMobile ? 250 : window.innerHeight - 100); const height = ref(isMobile ? 250 : window.innerHeight - 100);
const updateStatus = ref(false); const updateStatus = ref(false);
const format = core.formatBigNumber; const format = core.formatBigNumber;
@ -163,8 +173,8 @@ function update() {
.status-item { .status-item {
position: relative; position: relative;
max-width: 300px; max-width: 17.5vw;
font-size: 32px; font-size: 1.9vw;
width: 100%; width: 100%;
margin-bottom: 1vh; margin-bottom: 1vh;
text-shadow: 3px 2px 3px #000, 0px 0px 3px #111; text-shadow: 3px 2px 3px #000, 0px 0px 3px #111;
@ -173,9 +183,13 @@ function update() {
align-items: center; align-items: center;
} }
.status-item-bold {
font-weight: bold;
}
.status-icon { .status-icon {
width: 48px; width: 2.8vw;
height: 48px; height: 2.8vw;
margin-right: 10%; margin-right: 10%;
margin-left: 10%; margin-left: 10%;
} }
@ -195,15 +209,15 @@ function update() {
} }
#status-floor { #status-floor {
max-width: 300px; max-width: 17.5vw;
font-size: 28px; font-size: 1.9vw;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
#status-lv { #status-lv {
max-width: 300px; max-width: 17.5vw;
font-size: 28px; font-size: 1.9vw;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@ -212,22 +226,22 @@ function update() {
position: absolute; position: absolute;
right: 15%; right: 15%;
bottom: 0; bottom: 0;
font-size: 24px; font-size: 1.6vw;
} }
#status-mana { #status-mana {
line-height: 1; line-height: 1;
text-shadow: 1px 0 0 #c66, 0 1px 0 #c66, -1px 0 0 #c66, 0 -1px 0 #c66; color: rgb(255, 211, 211);
} }
#status-hpmax { #status-hpmax {
line-height: 1; line-height: 1;
text-shadow: 1px 0 0 #0c0, 0 1px 0 #0c0, -1px 0 0 #0c0, 0 -1px 0 #0c0; color: rgb(167, 255, 167);
} }
#status-spring { #status-spring {
line-height: 0; line-height: 0;
text-shadow: 1px 0 0 #0c0, 0 1px 0 #0c0, -1px 0 0 #0c0, 0 -1px 0 #0c0; color: rgb(167, 255, 167);
} }
#status-key { #status-key {