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

道具栏完善

Browse Source
This commit is contained in:
unanmed 2022-11-21 21:21:51 +08:00
parent 9b2c56f829
commit 1dc79595e8
2 changed files with 121 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/ui/book.vue
View File

@ -218,6 +218,7 @@ onUnmounted(async () => {
} }
.tools { .tools {
border-bottom: 1px solid #ddd4;
cursor: pointer; cursor: pointer;
transition: color 0.2s linear; transition: color 0.2s linear;
} }

204
src/ui/toolbox.vue
View File

@ -1,99 +1,109 @@
<template> <template>
<span id="back" class="item-type-mobile" @click="exit"
><left-outlined />返回游戏</span
>
<div id="toolbox"> <div id="toolbox">
<div v-for="cls of toShow" class="item-main"> <div id="tools">
<div class="item-info"> <span class="item-type-mobile tools" @click="exit"
<div class="item-type" v-if="!isMobile"> ><left-outlined /> 返回游戏</span
{{ getClsName(cls) }} >
</div> <span class="item-type-mobile tools" @click="exit"
<div v-else id="item-type-mobile"> >装备栏 <right-outlined
<span /></span>
class="item-type-mobile" </div>
@click="mode = 'tools'" <div id="toolbox-main">
:selected="mode === 'tools'" <div v-for="cls of toShow" class="item-main">
>消耗道具</span <div class="item-info">
> <div class="item-type" v-if="!isMobile">
{{ getClsName(cls) }}
</div>
<div v-else id="item-type-mobile">
<span
class="item-type-mobile"
@click="mode = 'tools'"
:selected="mode === 'tools'"
>消耗道具</span
>
<a-divider
dashed
style="border-color: #ddd4; height: 100%"
type="vertical"
></a-divider>
<span
class="item-type-mobile"
@click="mode = 'constants'"
:selected="mode === 'constants'"
>永久道具</span
>
</div>
<a-divider <a-divider
dashed dashed
style="border-color: #ddd4; height: 100%" style="margin: 1vh 0 1vh 0; border-color: #ddd4"
type="vertical"
></a-divider> ></a-divider>
<span <Scroll class="item-list" :width="10">
class="item-type-mobile" <div
@click="mode = 'constants'" class="item"
:selected="mode === 'constants'" v-for="[id, num] of items[cls]"
>永久道具</span :selected="selected === id"
> @click="
mode = cls;
select(id);
"
>
<div class="item-icon">
<BoxAnimate
:id="id"
:width="32"
:height="32"
:noborder="true"
></BoxAnimate>
<span class="item-name">{{
all[id].name
}}</span>
</div>
<span>×&nbsp;{{ num }}</span>
</div>
</Scroll>
</div> </div>
<a-divider <a-divider
dashed dashed
style="margin: 1vh 0 1vh 0; border-color: #ddd4" :type="isMobile ? 'horizontal' : 'vertical'"
class="divider"
style="border-color: #ddd4; margin: 1%"
></a-divider> ></a-divider>
<Scroll class="item-list" :width="10">
<div
class="item"
v-for="[id, num] of items[cls]"
:selected="selected === id"
@click="
mode = cls;
select(id);
"
>
<div class="item-icon">
<BoxAnimate
:id="id"
:width="32"
:height="32"
:noborder="true"
></BoxAnimate>
<span class="item-name">{{ all[id].name }}</span>
</div>
<span>×&nbsp;{{ num }}</span>
</div>
</Scroll>
</div> </div>
<a-divider <div id="detail">
dashed <div id="info">
:type="isMobile ? 'horizontal' : 'vertical'" <BoxAnimate
class="divider" :id="selected"
style="border-color: #ddd4; margin: 1%" :width="32"
></a-divider> :height="32"
</div> ></BoxAnimate>
<div id="detail"> <div id="basic-info">
<div id="info"> <span style="border-bottom: 1px solid #ddd4">{{
<BoxAnimate all[selected]?.name ?? '没有道具'
:id="selected" }}</span>
:width="32" <span>{{
:height="32" getClsName(all[selected]?.cls as ItemMode) ??
></BoxAnimate> '永久道具'
<div id="basic-info"> }}</span>
<span style="border-bottom: 1px solid #ddd4">{{ </div>
all[selected]?.name ?? '没有道具' </div>
}}</span> <span style="margin-top: 2vh">点击该物品以使用</span>
<span>{{ <a-divider dashed style="border-color: #ddd4"></a-divider>
getClsName(all[selected]?.cls as ItemMode) ?? '永久道具' <div id="desc">
}}</span> <span style="border-bottom: 1px solid #ddd4">道具描述</span>
<Scroll id="desc-text">
<div v-if="!descText.value.startsWith('!!html')">
{{ descText.value }}
</div>
<div v-else v-html="descText.value.slice(6)"></div>
</Scroll>
</div> </div>
</div>
<span style="margin-top: 2vh">点击该物品以使用</span>
<a-divider dashed style="border-color: #ddd4"></a-divider>
<div id="desc">
<span style="border-bottom: 1px solid #ddd4">道具描述</span>
<Scroll id="desc-text">
<div v-if="!descText.value.startsWith('!!html')">
{{ descText.value }}
</div>
<div v-else v-html="descText.value.slice(6)"></div>
</Scroll>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { LeftOutlined } from '@ant-design/icons-vue'; import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'; import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import Scroll from '../components/scroll.vue'; import Scroll from '../components/scroll.vue';
import BoxAnimate from '../components/boxAnimate.vue'; import BoxAnimate from '../components/boxAnimate.vue';
@ -227,8 +237,15 @@ onUnmounted(() => {
<style lang="less" scoped> <style lang="less" scoped>
#toolbox { #toolbox {
display: flex;
flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
#toolbox-main {
width: 100%;
height: 85vh;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -237,11 +254,19 @@ onUnmounted(() => {
user-select: none; user-select: none;
} }
#back { #tools {
position: absolute; width: 100%;
left: 2%; display: flex;
font-size: 2em; flex-direction: row;
font-family: 'normal'; font-family: 'normal';
font-size: 2em;
height: 5vh;
justify-content: space-between;
.tools {
white-space: nowrap;
border-bottom: 1px solid #ddd4;
}
} }
.item-main { .item-main {
@ -379,10 +404,21 @@ onUnmounted(() => {
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
#toolbox { #toolbox {
flex-direction: column-reverse;
padding: 5%; padding: 5%;
} }
#tools {
span {
margin: 0;
}
}
#toolbox-main {
flex-direction: column-reverse;
height: 100%;
border-top: 1px solid #ddd4;
}
.item-list { .item-list {
width: 100%; width: 100%;
height: 100%; height: 100%;