道具栏完善

src/ui/book.vue

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

src/ui/toolbox.vue

@@ -1,8 +1,14 @@
 <template>
-    <span id="back" class="item-type-mobile" @click="exit"
-        ><left-outlined />返回游戏</span
-    >
     <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 class="item-info">
                     <div class="item-type" v-if="!isMobile">
@@ -48,7 +54,9 @@
                                     :height="32"
                                     :noborder="true"
                                 ></BoxAnimate>
-                            <span class="item-name">{{ all[id].name }}</span>
+                                <span class="item-name">{{
+                                    all[id].name
+                                }}</span>
                             </div>
                             <span>×&nbsp;{{ num }}</span>
                         </div>
@@ -73,7 +81,8 @@
                             all[selected]?.name ?? '没有道具'
                         }}</span>
                         <span>{{
-                        getClsName(all[selected]?.cls as ItemMode) ?? '永久道具'
+                            getClsName(all[selected]?.cls as ItemMode) ??
+                            '永久道具'
                         }}</span>
                     </div>
                 </div>
@@ -90,10 +99,11 @@
                 </div>
             </div>
         </div>
+    </div>
 </template>
 
 <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 Scroll from '../components/scroll.vue';
 import BoxAnimate from '../components/boxAnimate.vue';
@@ -227,8 +237,15 @@ onUnmounted(() => {
 
 <style lang="less" scoped>
 #toolbox {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
+}
+
+#toolbox-main {
+    width: 100%;
+    height: 85vh;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -237,11 +254,19 @@ onUnmounted(() => {
     user-select: none;
 }
 
-#back {
-    position: absolute;
-    left: 2%;
-    font-size: 2em;
+#tools {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
     font-family: 'normal';
+    font-size: 2em;
+    height: 5vh;
+    justify-content: space-between;
+
+    .tools {
+        white-space: nowrap;
+        border-bottom: 1px solid #ddd4;
+    }
 }
 
 .item-main {
@@ -379,10 +404,21 @@ onUnmounted(() => {
 
 @media screen and (max-width: 600px) {
     #toolbox {
-        flex-direction: column-reverse;
         padding: 5%;
     }
 
+    #tools {
+        span {
+            margin: 0;
+        }
+    }
+
+    #toolbox-main {
+        flex-direction: column-reverse;
+        height: 100%;
+        border-top: 1px solid #ddd4;
+    }
+
     .item-list {
         width: 100%;
         height: 100%;