diff --git a/src/components/box.vue b/src/components/box.vue
index 0c0d888..8fcd0d9 100644
--- a/src/components/box.vue
+++ b/src/components/box.vue
@@ -80,8 +80,8 @@ const width = ref(
     isMobile ? window.innerWidth - 100 : window.innerWidth * 0.175
 );
 const height = ref(isMobile ? 250 : window.innerHeight - 100);
-const left = ref(50);
-const top = ref(50);
+const left = ref(isMobile ? 30 : 50);
+const top = ref(isMobile ? 30 : 50);
 
 watch(left, n => emits('update:left', n));
 watch(top, n => emits('update:top', n));
diff --git a/src/data/desc.json b/src/data/desc.json
index bb6c35e..2979ce7 100644
--- a/src/data/desc.json
+++ b/src/data/desc.json
@@ -14,11 +14,12 @@
             "同时每次增加新内容时都会有提示。",
             "<br>",
             "<br>",
-            "3. 背包中的系统设置同样非常重要，有些问题可以在那里找到原因。例如当你获得技能时可能会发现开启不了技能，",
-            "就是因为你打开了自动切换技能的功能，在系统设置里面有说。",
+            "3. <span style=\"color: gold\">背包中的系统设置同样非常重要，有些问题可以在那里找到原因</span>。",
+            "例如当你获得技能时可能会发现开启不了技能，",
+            "就是因为你打开了<span style=\"color: gold\">自动切换技能</span>的功能，在系统设置里面有说。",
             "<br>",
             "<br>",
-            "4. 本塔中<span style=\"color: gold\">几乎所有 ui </span>都可以纵向滚动，如果发现显示不全，",
+            "4. 本塔中<span style=\"color: gold\">几乎所有 ui 都可以纵向滚动</span>，如果发现显示不全，",
             "可以尝试上下拖动，就像浏览网页一样。电脑端还可以使用滚轮上下滚动。",
             "大部分可以纵向滚动的 ui 都会在右方有一个滚动条，也可以拖动它进行滚动，例如本百科全书的条目列表和",
             "条目说明都是可以通过上述方式滚动的。",
@@ -64,9 +65,9 @@
             "<br>",
             "<span style=\"color: gold\">特别说明：素材与音乐均来自网络，不得用于商业用途，仅用于参考与学习</span>",
             "<br>",
-            "特别鸣谢：无名甲烷菌（提供部分特殊属性与机制想法）",
+            "特别鸣谢（排名不分先后）：无名甲烷菌（提供部分特殊属性与机制想法）",
             "<br>",
-            "测试："
+            "测试（排名不分先后）："
         ]
     },
     "tutorial": {
@@ -233,14 +234,15 @@
         "text": "状态栏",
         "condition": "true",
         "desc": [
-            "在本塔中，状态栏与游戏画面是分开的。你可以自由拖动状态栏，也可以修改其大小。",
+            "在本塔中，状态栏与游戏画面是分开的。<span style=\"color: gold\">你可以自由拖动状态栏，也可以修改其大小</span>。",
             "具体方法如下：点击一下状态栏之后，左上角的拖拽图标会放大，此时你可以按住它拖动状态栏。",
             "你可以直接将鼠标放到状态栏的边框上，然后直接拖动以改变状态栏的大小。手机端可以先点击一下状态栏使边框",
             "变宽，然后拖动。电脑端点击状态栏也可以使边框变宽。如果你想折叠状态栏，完全可以拖动状态栏的下边框，",
             "然后直接拖动至上方，这时状态栏便会变成一条线，相当于折叠了状态栏",
             "<br>",
             "<br>",
-            "状态栏可以纵向滚动，如果你发现状态栏显示不全，可以尝试拉大状态栏，或者纵向拖动状态栏，就像网页上下滚动一样。",
+            "<span style=\"color: gold\">状态栏可以纵向滚动</span>，",
+            "如果你发现状态栏显示不全，可以尝试拉大状态栏，或者纵向拖动状态栏，就像网页上下滚动一样。",
             "电脑端还可以使用滚轮上下滚动。",
             "<br>",
             "<br>",
@@ -256,29 +258,30 @@
             "状态栏显示项依次为：",
             "<br>",
             "<br>",
-            "1. 楼层名，点击后进入浏览地图界面",
+            "1. <span style=\"color: gold\">楼层名</span>，点击后进入浏览地图界面",
             "<br>",
-            "2. 勇士等级",
+            "2. <span style=\"color: gold\">勇士等级</span>",
             "<br>",
-            "3. 当前开启的技能",
+            "3. <span style=\"color: gold\">当前开启的技能</span>",
             "<br>",
-            "4. 当前勇士生命值，右方偏下为每回合回复的生命值，当点开治愈之泉技能时，右方偏上会显示距离增加生命回复剩余血瓶数",
+            "4. <span style=\"color: lightgreen\">当前勇士生命值</span>，右方偏下为每回合回复的生命值",
+            "，当点开治愈之泉技能时，右方偏上会显示距离增加生命回复剩余血瓶数",
             "<br>",
-            "5. 当前勇士的攻击，右方偏下为勇士的额外攻击",
+            "5. <span style=\"color: lightcoral\">当前勇士的攻击</span>，右方偏下为勇士的额外攻击",
             "<br>",
-            "6. 当前勇士的防御",
+            "6. <span style=\"color: lightblue\">当前勇士的防御</span>",
             "<br>",
-            "7. 当前勇士的智慧，可以用于智慧加点等",
+            "7. <span style=\"color: lightgreen\">当前勇士的智慧</span>，可以用于智慧加点等",
             "<br>",
-            "8. 当前勇士的金币",
+            "8. <span style=\"color: gold\">当前勇士的金币</span>",
             "<br>",
-            "9. 当前勇士距离升级剩余经验数",
+            "9. <span style=\"color: lightgreen\">当前勇士距离升级剩余经验数</span>",
             "<br>",
-            "10. 三色钥匙",
+            "10. <span style=\"color: gold\">三色钥匙</span>",
             "<br>",
-            "11. 打开技能树（进入第一章后开启）",
+            "11. <span style=\"color: gold\">打开技能树</span>（进入第一章后开启）",
             "<br>",
-            "12. 查看勇士的技能（进入第一章后开启）"
+            "12. <span style=\"color: gold\">查看勇士的技能</span>（进入第一章后开启）"
         ]
     },
     "markEnemy": {
@@ -296,7 +299,7 @@
             "手机端暂时没有快速标记怪物的方式。",
             "<br>",
             "<br>",
-            "当一个怪物被标记后，怪物会有以下行为：",
+            "<span style=\"color: gold\">当一个怪物被标记后，怪物会有以下行为</span>：",
             "<br>",
             "1. 当勇士恰好能打败怪物时，会进行提示",
             "<br>",
@@ -313,7 +316,7 @@
             "这个功能可以用于标记boss或者较强的挡路怪，当这些怪能够攻击时你可以直接收到信息，不需要再时刻费心注意怪物的伤害。",
             "<br>",
             "<br>",
-            "注意，标记的怪物是不计入存档的，同时标记的怪物只在本次游戏中有效，刷新页面后便会消失。"
+            "<span style=\"color: gold\">注意，标记的怪物是不计入存档的，同时标记的怪物只在本次游戏中有效，刷新页面后便会消失。</span>"
         ]
     },
     "book": {
@@ -333,7 +336,8 @@
             "<br>",
             "<br>",
             "打开怪物手册后，怪物手册的布局与样板自带的类似。与样板不同的是，这里的怪物手册不再是翻页式结构。",
-            "这里的怪物手册是滚动式结构，你可以像浏览网页一样，用手指或鼠标上下滚动或者拖动右边的滚动条，电脑端还可以使用滚轮。",
+            "<span style=\"color: gold\">这里的怪物手册是滚动式结构</span>，",
+            "你可以像浏览网页一样，用手指或鼠标上下滚动或者拖动右边的滚动条，电脑端还可以使用滚轮。",
             "对于电脑端，还可以使用键盘操作。上和下可以上下选择怪物，左和右可以向上或向下移动5个怪物。这些操作与样板都类似。",
             "<br>",
             "<br>",
@@ -343,7 +347,8 @@
             "是怪物的临界表，可以粗略地查看怪物的临界信息。在下方，你可以点击详细临界信息进入详细临界栏。",
             "<br>",
             "<br>",
-            "在详细临界栏中，怪物的伤害会以可视化折线图的方式显示出来，从而你可以更为清晰地看出怪物减伤趋势。",
+            "在详细临界栏中，怪物的伤害会以<span style=\"color: gold\">可视化折线图</span>的方式显示出来，",
+            "从而你可以更为清晰地看出怪物减伤趋势。",
             "除了查看怪物伤害曲线，你还可以规划宝石。每个折线图下方都有一个滑动条，你可以拖动来模拟吃宝石。",
             "注意，拖动时，滑动条左边会显示当前的加攻或加防次数，这个数值指的是在勇士所在地图中需要吃的最弱的宝石数量。",
             "例如，当前勇士所在地图中最弱的宝石加2点攻击，加攻次数为3，那么勇士的攻击增加量就为6。",
@@ -353,7 +358,8 @@
             "<br>",
             "<br>",
             "在特殊属性栏，点击下方的怪物更多信息可以进入更多信息栏。此栏中，你可以查看怪物描述。但这不是这一栏的核心功能。",
-            "这一栏的核心功能是标记怪物。被标记的怪物会有一些非常方便的行为，这些行为可以在“标记怪物”条目中查看。",
+            "这一栏的核心功能是标记怪物。被标记的怪物会有一些非常方便的行为，这些行为可以在“",
+            "<span style=\"color: gold\">标记怪物</span>”条目中查看。",
             "<br>",
             "<br>",
             "注意，在怪物详细信息中，除详细临界栏外均可以通过点击屏幕返回到怪物手册界面。",
@@ -401,16 +407,18 @@
             "<br>",
             "<br>",
             "本塔的装备栏手机和电脑端不同，电脑端比手机端多了一个勇士属性的显示。在装备栏的装备列表栏，",
-            "上方有两个选择框与一个排序方式的选项。这三个可以筛选你拥有的装备并进行排序，从而让你能够更清楚地知道哪个装备更强。",
+            "<span style=\"color: gold\">上方有两个选择框与一个排序方式的选项</span>。",
+            "这三个可以筛选你拥有的装备并进行排序，从而让你能够更清楚地知道哪个装备更强。",
             "第一个选择框可以筛选装备增加的属性，如果装备不增加选择的属性，那么会不显示。第二个选择框可以筛选增加的属性的方式，",
             "有数值增加和百分比增加两种。在这个选择框右边有一个图标，这个图标可以改变武器的排序方式，有升序和降序两种，默认为升序。",
             "例如，你拥有两个装备，分别增加10攻击和20攻击，三者你分别选择了攻击，数值，升序，那么增加10攻击的装备会排在上面，",
             "而增加20攻击的装备会排在下面。",
             "<br>",
             "<br>",
-            "对于电脑端，如果你想装装备，可以直接拖动装备至装备孔，也可以选中装备后再次点击。手机端暂时无法拖动装备。当选中一个装备后，",
-            "电脑端和手机端均会显示装备增加或减少的属性，注意有的装备可能不增加属性但是有特殊功能。对于电脑端，",
-            "还会直接在勇士属性栏显示增加或减少的属性。"
+            "对于电脑端，如果你想装装备，<span style=\"color: gold\">可以直接拖动装备至装备孔</span>，",
+            "也可以选中装备后再次点击。<span style=\"color: gold\">手机端暂时无法拖动装备</span>。当选中一个装备后，",
+            "电脑端和手机端均会显示装备增加或减少的属性，注意有的装备可能<span style=\"color: gold\">不增加属性但是有特殊功能</span>。",
+            "对于电脑端，还会直接在勇士属性栏显示增加或减少的属性。"
         ]
     },
     "achievement": {