diff --git a/public/project/functions.js b/public/project/functions.js
index 806091c..c2a501e 100644
--- a/public/project/functions.js
+++ b/public/project/functions.js
@@ -1394,13 +1394,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
                 values: values,
                 version: core.firstData.version,
                 guid: core.getGuid(),
-                time: new Date().getTime(),
-                tower6: core.saveLoopMap('tower6', [
-                    'tower1',
-                    'tower2',
-                    'tower4',
-                    'tower5'
-                ])
+                time: new Date().getTime()
             };
 
             return data;
@@ -2264,12 +2258,8 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
             // cls为道具类型，只可能是 tools, constants 和 equips
             // 返回一个数组，代表当前某类型道具的显示内容和顺序
             // 默认按id升序排列，您可以取消下面的注释改为按名称排列
-
-            return Object.keys(core.status.hero.items[cls] || {})
-                .filter(function (id) {
-                    return !core.material.items[id].hideInToolbox;
-                })
-                .sort(/*function (id1, id2) { return core.material.items[id1].name <= core.material.items[id2].name ? -1 : 1 }*/);
+            //
+            // 用不到这个东西
         },
         drawStatusBar: function () {
             // 自定义绘制状态栏，需要开启状态栏canvas化
diff --git a/public/project/items.js b/public/project/items.js
index 2cfe404..8cf8845 100644
--- a/public/project/items.js
+++ b/public/project/items.js
@@ -1254,6 +1254,7 @@ var items_296f5d02_12fd_4166_a7c1_b5e830c9ee3a =
 		"cls": "constants",
 		"name": "百科全书",
 		"canUseItemEffect": "true",
-		"text": "一个包含游戏中所有功能详细说明的百科全书，可以查看游戏中所有的功能"
+		"text": "一个包含游戏中所有功能详细说明的百科全书，可以查看游戏中所有的功能",
+		"useItemEffect": "core.plugin.descOpened.value = true;"
 	}
 }
\ No newline at end of file
diff --git a/public/project/plugins.js b/public/project/plugins.js
index 152c950..c9d95c8 100644
--- a/public/project/plugins.js
+++ b/public/project/plugins.js
@@ -415,7 +415,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
         };
 
         /// 能否使用快捷商店
-        this.canUseQuickShop = function (id) {
+        this.canUseQuickShop = function () {
             // 如果返回一个字符串，表示不能，字符串为不能使用的提示
             // 返回null代表可以使用
 
@@ -492,7 +492,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
         core.registerAction(
             'longClick',
             'shops',
-            (x, y, px, py) => {
+            (x, y) => {
                 if (
                     !core.status.lockControl ||
                     !core.hasFlag('@temp@shop') ||
@@ -2906,7 +2906,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
                 );
                 areaSprite[maps[0]] = btn;
                 if (i === nowArea) btn.setCss(`border: 2px solid gold;`);
-                btn.addEventListener('click', e => {
+                btn.addEventListener('click', () => {
                     if (i === nowArea) return;
                     changeArea(i);
                 });
@@ -2924,7 +2924,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
                     transition
                 );
                 areaSprite._area_last_ = last;
-                last.addEventListener('click', e => {
+                last.addEventListener('click', () => {
                     areaPage--;
                     drawAreaList(false);
                 });
@@ -2941,7 +2941,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
                     transition
                 );
                 areaSprite._area_next_ = next;
-                next.addEventListener('click', e => {
+                next.addEventListener('click', () => {
                     areaPage++;
                     drawAreaList(false);
                 });
@@ -5967,13 +5967,13 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
             xhr.open(type, url);
             xhr.send(data);
             const res = await new Promise(res => {
-                xhr.onload = e => {
+                xhr.onload = () => {
                     if (xhr.status !== 200) {
                         console.error(`hot reload: http ${xhr.status}`);
                         res('@error');
                     } else res('success');
                 };
-                xhr.onerror = e => {
+                xhr.onerror = () => {
                     res('@error');
                     console.error(`hot reload: error on connection`);
                 };
@@ -6245,8 +6245,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
             if (core.isReplaying()) showToolbox = true;
             core.plugin.showStatusBar.value = false;
 
-            var statusItems = core.dom.status,
-                toolItems = core.dom.tools;
+            var toolItems = core.dom.tools;
             core.setFlag('hideStatusBar', true);
             core.setFlag('showToolbox', showToolbox || null);
             if (
diff --git a/src/components/scroll.vue b/src/components/scroll.vue
index 65ac76e..7ce3db4 100644
--- a/src/components/scroll.vue
+++ b/src/components/scroll.vue
@@ -10,6 +10,7 @@
 </template>
 
 <script lang="ts" setup>
+import { sleep } from 'mutate-animate';
 import { onMounted, onUnmounted, onUpdated } from 'vue';
 import { cancelGlobalDrag, useDrag, useWheel } from '../plugin/use';
 
@@ -88,27 +89,27 @@ function draw() {
  */
 async function calHeight() {
     await new Promise(res => {
+        const canvas = ctx.canvas;
+        const style2 = getComputedStyle(canvas);
+        canvas.style.width = `${width}px`;
+        canvas.width = width * scale;
+        canvas.height = parseFloat(style2.height) * scale;
+        if (props.noScroll) canvas.style.width = `0px`;
+
+        if (props.type === 'horizontal') {
+            main.style.flexDirection = 'column';
+            canvas.style.height = `${width}px`;
+            canvas.style.width = '98%';
+            canvas.style.margin = '0 1% 0 1%';
+            canvas.width = parseFloat(style2.width) * scale;
+            canvas.height = width * scale;
+            if (props.noScroll) canvas.style.height = `0px`;
+        }
         requestAnimationFrame(() => {
             const style = getComputedStyle(content);
             total = parseFloat(style[canvasAttr]);
+
             res('');
-
-            const canvas = ctx.canvas;
-            const style2 = getComputedStyle(canvas);
-            canvas.style.width = `${width}px`;
-            canvas.width = width * scale;
-            canvas.height = parseFloat(style2.height) * scale;
-            if (props.noScroll) canvas.style.width = `0px`;
-
-            if (props.type === 'horizontal') {
-                main.style.flexDirection = 'column';
-                canvas.style.height = `${width}px`;
-                canvas.style.width = '98%';
-                canvas.style.margin = '0 1% 0 1%';
-                canvas.width = parseFloat(style2.width) * scale;
-                canvas.height = width * scale;
-                if (props.noScroll) canvas.style.height = `0px`;
-            }
         });
     });
 }
diff --git a/src/plugin/uiController.ts b/src/plugin/uiController.ts
index 09e6fb5..bc64672 100644
--- a/src/plugin/uiController.ts
+++ b/src/plugin/uiController.ts
@@ -54,7 +54,8 @@ export default function init() {
         toolOpened,
         equipOpened,
         showStatusBar,
-        settingsOpened
+        settingsOpened,
+        descOpened
     };
 }
 
diff --git a/src/types/plugin.d.ts b/src/types/plugin.d.ts
index c255df3..ad5c758 100644
--- a/src/types/plugin.d.ts
+++ b/src/types/plugin.d.ts
@@ -106,6 +106,9 @@ interface PluginUis {
     /** 章节显示的内容 */
     readonly chapterContent: Ref<boolean>;
 
+    /** 百科全书是否打开了 */
+    readonly descOpened: Ref<boolean>;
+
     /** ui栈 */
     readonly uiStack: Ref<Component[]>;
 
diff --git a/src/ui/desc.vue b/src/ui/desc.vue
index c9ead68..92fee34 100644
--- a/src/ui/desc.vue
+++ b/src/ui/desc.vue
@@ -1,14 +1,134 @@
 <template>
-    <div id="desc"></div>
+    <div id="desc">
+        <div id="tools">
+            <span class="button-text" @click="exit"
+                ><left-outlined /> 返回游戏</span
+            >
+        </div>
+        <div id="desc-main">
+            <Scroll id="desc-left">
+                <div id="desc-list">
+                    <span
+                        v-for="(data, k) in desc"
+                        class="selectable desc-item"
+                        :selected="selected === k"
+                        @click="selected = k"
+                        >{{ data.text }}</span
+                    >
+                </div>
+            </Scroll>
+            <a-divider
+                id="divider"
+                :type="isMobile ? 'horizontal' : 'vertical'"
+            ></a-divider>
+            <div id="desc-right">
+                <Scroll><span v-html="content"></span></Scroll>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import desc from '../data/desc.json';
+import { LeftOutlined } from '@ant-design/icons-vue';
+import Scroll from '../components/scroll.vue';
+import { has } from '../plugin/utils';
+import { isMobile } from '../plugin/use';
+
+type DescKey = keyof typeof desc;
+
+const selected = ref(Object.keys(desc)[0] as DescKey);
+
+function exit() {
+    core.plugin.descOpened.value = false;
+}
+
+const content = computed(() => {
+    return desc[selected.value].desc
+        .map((v, i, a) => {
+            if (/^\d+\./.test(v)) return `${'&nbsp;'.repeat(4)}${v}`;
+            else if (
+                (has(a[i - 1] && v !== '<br>') && a[i - 1] === '<br>') ||
+                i === 0
+            ) {
+                return `${'&nbsp;'.repeat(8)}${v}`;
+            } else return v;
+        })
+        .join('');
+});
 </script>
 
 <style lang="less" scoped>
 #desc {
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-size: 2.7vh;
+    font-family: 'normal';
+    user-select: none;
+}
+
+#desc-main {
+    width: 80%;
+    height: 80%;
+    display: flex;
+    justify-content: center;
+}
+
+#desc-left {
+    flex-basis: 30%;
+}
+
+#desc-list {
+    display: flex;
+    flex-direction: column;
+}
+
+#desc-right {
+    flex-basis: 70%;
+}
+
+#divider {
+    height: 100%;
+}
+
+.desc-item {
+    padding: 1% 3% 1% 3%;
+}
+
+#tools {
+    width: 100%;
+    font-family: 'normal';
+    font-size: 3.2vh;
+    height: 5vh;
+    position: fixed;
+    left: 10vw;
+    top: 5vh;
+}
+
+@media screen and (max-width: 600px) {
+    #desc-main {
+        flex-direction: column;
+        width: 90%;
+        height: 75%;
+    }
+
+    #divider {
+        height: auto;
+        width: 100%;
+        margin: 5% 0 5% 0;
+    }
+
+    #desc-left {
+        height: 40%;
+    }
+
+    #desc-right {
+        height: 50%;
+    }
 }
 </style>
diff --git a/src/ui/settings.vue b/src/ui/settings.vue
index 25853a0..54e2e2f 100644
--- a/src/ui/settings.vue
+++ b/src/ui/settings.vue
@@ -18,7 +18,10 @@
                     >
                 </div>
             </Scroll>
-            <a-divider id="divider" type="vertical"></a-divider>
+            <a-divider
+                id="divider"
+                :type="isMobile ? 'horizontal' : 'vertical'"
+            ></a-divider>
             <div id="setting-right">
                 <Scroll style="height: 100%">
                     <span
@@ -39,6 +42,7 @@ import settingInfo from '../data/settings.json';
 import { type } from '../plugin/utils';
 import Scroll from '../components/scroll.vue';
 import { LeftOutlined } from '@ant-design/icons-vue';
+import { isMobile } from '../plugin/use';
 
 type Settings = typeof settingInfo;
 
@@ -61,7 +65,7 @@ function exit() {
     justify-content: center;
     align-items: center;
     font-family: 'normal';
-    font-size: 24px;
+    font-size: 2.7vh;
     user-select: none;
 }
 
@@ -84,10 +88,12 @@ function exit() {
 
 #setting-left {
     flex-basis: 40%;
+    height: 100%;
 }
 
 #setting-right {
     flex-basis: 60%;
+    height: 100%;
 }
 
 #divider {
@@ -97,10 +103,32 @@ function exit() {
 #tools {
     width: 100%;
     font-family: 'normal';
-    font-size: 1.7em;
+    font-size: 3.2vh;
     height: 5vh;
     position: fixed;
     left: 10vw;
-    top: 10vh;
+    top: 5vh;
+}
+
+@media screen and (max-width: 600px) {
+    #settings-main {
+        flex-direction: column;
+        width: 90%;
+        height: 75%;
+    }
+
+    #divider {
+        height: auto;
+        width: 100%;
+        margin: 5% 0 5% 0;
+    }
+
+    #setting-left {
+        height: 40%;
+    }
+
+    #setting-right {
+        height: 50%;
+    }
 }
 </style>