AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-31 23:29:27 +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;
} }

58
src/ui/toolbox.vue
View File

@ -1,8 +1,14 @@
<template> <template>
<span id="back" class="item-type-mobile" @click="exit"
><left-outlined />返回游戏</span
>
<div id="toolbox"> <div id="toolbox">
<div id="tools">
<span class="item-type-mobile tools" @click="exit"
><left-outlined /> 返回游戏</span
>
<span class="item-type-mobile tools" @click="exit"
>装备栏 <right-outlined
/></span>
</div>
<div id="toolbox-main">
<div v-for="cls of toShow" class="item-main"> <div v-for="cls of toShow" class="item-main">
<div class="item-info"> <div class="item-info">
<div class="item-type" v-if="!isMobile"> <div class="item-type" v-if="!isMobile">
@ -48,7 +54,9 @@
:height="32" :height="32"
:noborder="true" :noborder="true"
></BoxAnimate> ></BoxAnimate>
<span class="item-name">{{ all[id].name }}</span> <span class="item-name">{{
all[id].name
}}</span>
</div> </div>
<span>×&nbsp;{{ num }}</span> <span>×&nbsp;{{ num }}</span>
</div> </div>
@ -73,7 +81,8 @@
all[selected]?.name ?? '没有道具' all[selected]?.name ?? '没有道具'
}}</span> }}</span>
<span>{{ <span>{{
getClsName(all[selected]?.cls as ItemMode) ?? '永久道具' getClsName(all[selected]?.cls as ItemMode) ??
'永久道具'
}}</span> }}</span>
</div> </div>
</div> </div>
@ -90,10 +99,11 @@
</div> </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%;