diff --git a/frontend/src/pages/Character/EquipmentDictionary/Index.vue b/frontend/src/pages/Character/EquipmentDictionary/Index.vue
index 59a64c38..5b779714 100644
--- a/frontend/src/pages/Character/EquipmentDictionary/Index.vue
+++ b/frontend/src/pages/Character/EquipmentDictionary/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-340px bg-black flex flex-col h-90vh">
+  <div class="w-340px bg-black flex flex-col">
     <calc-dialog lazy header="装备条件" v-model:visible="triggerVisible">
       <options />
     </calc-dialog>
@@ -70,7 +70,7 @@
       </template>
     </div>
   </div>
-  <div class="px-5px flex flex-col h-90vh">
+  <div class="px-5px flex flex-col">
     <div class="flex flex-col overflow-hidden bg-black" v-if="curEquInfo">
       <div class="item-head">基础信息</div>
       <div class="flex-1 overflow-y-auto overflow-x-hidden bg-black w-240px">
diff --git a/frontend/src/pages/Character/Forge/index.vue b/frontend/src/pages/Character/Forge/index.vue
index 02e615f6..c3c49b79 100644
--- a/frontend/src/pages/Character/Forge/index.vue
+++ b/frontend/src/pages/Character/Forge/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-420px">
+  <div class="w-420px overflow-auto">
     <calc-collapse class="w-100%" title="装备/时装打造(点击部位切换)">
       <calc-tabs v-model="partTab" class="!mb-2">
         <calc-tab :value="0">装备栏</calc-tab>
diff --git a/frontend/src/pages/Character/Index.vue b/frontend/src/pages/Character/Index.vue
index 429f7713..72d6e5d8 100644
--- a/frontend/src/pages/Character/Index.vue
+++ b/frontend/src/pages/Character/Index.vue
@@ -7,11 +7,14 @@
         <calc-tab :value="`/character/forge/${props.alter}`">打造设置</calc-tab>
       </calc-tabs>
     </div>
-    <div class="content flex">
-      <div class="flex h-auto p-1 overflow-y-hidden" v-if="!!infoStore.infos?.alter">
+    <div class="content flex gap-1">
+      <div
+        class="flex h-auto p-1 overflow-y-hidden flex-1 box-border"
+        v-if="!!infoStore.infos?.alter"
+      >
         <RouterView></RouterView>
       </div>
-      <div class="p-1 ml-auto h-auto overflow-x-hidden z-2">
+      <div class="m-1 ml-auto h-auto overflow-x-auto z-2 box-border">
         <Result></Result>
       </div>
     </div>
diff --git a/frontend/src/pages/Character/Skill/components/SkillDetail/img/skill_title.svg b/frontend/src/pages/Character/Skill/components/SkillDetail/img/skill_title.svg
deleted file mode 100644
index 1c52c87e..00000000
--- a/frontend/src/pages/Character/Skill/components/SkillDetail/img/skill_title.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg width="222" height="19" viewBox="0 0 222 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="221" height="18" fill="url(#paint0_linear_142_155)" stroke="url(#paint1_linear_142_155)"/>
-<rect x="1" y="9" width="220" height="9" fill="url(#paint2_linear_142_155)"/>
-<defs>
-<linearGradient id="paint0_linear_142_155" x1="0" y1="9.5" x2="222" y2="9.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#563E02"/>
-<stop offset="1" stop-color="#121212"/>
-</linearGradient>
-<linearGradient id="paint1_linear_142_155" x1="0" y1="9.5" x2="222" y2="9.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7D5F07"/>
-<stop offset="1" stop-color="#2E302E"/>
-</linearGradient>
-<linearGradient id="paint2_linear_142_155" x1="1" y1="13.5" x2="221" y2="13.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#281E06"/>
-<stop offset="1" stop-color="#121212"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx b/frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx
index e0126c21..814085c8 100644
--- a/frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx
+++ b/frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx
@@ -127,7 +127,7 @@ export default defineComponent({
             {skillInfo.value?.evolution?.map((item) => (
               <>
               <div class="flex flex-col gap-2px">
-                <div class="skill_vp_skill_title">{item.name}</div>
+                <div class="skill_vp_title">{item.name}</div>
                 <div class="skill_title">技能描述</div>
                 <div class="h-auto max-h-200px">
                   <div class="h-full bg-#161816 p-2px" style="white-space: pre-wrap;">
diff --git a/frontend/src/pages/Character/Skill/components/img/detail.png b/frontend/src/pages/Character/Skill/components/img/detail.png
new file mode 100644
index 00000000..4bb3f092
Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/img/detail.png differ
diff --git a/frontend/src/pages/Character/Skill/index.vue b/frontend/src/pages/Character/Skill/index.vue
index 6b0cbd93..1aa134e5 100644
--- a/frontend/src/pages/Character/Skill/index.vue
+++ b/frontend/src/pages/Character/Skill/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="flex relative" ref="skillTreeRef">
     <div class="flex flex-col">
       <div class="flex bg-#101012 h-40px text-#6C5E4A font-bold">
         <div
@@ -48,26 +48,34 @@
         </div>
       </div>
     </div>
+
     <div
-      class="bg-#101012 w-250px h-full overflow-x-auto"
-      v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0"
+      class="absolute right--60px"
+      v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && !showSkillDetail"
     >
-      <SkillDetail :skillId="curCurrentSkill.skillId" :level="curCurrentSkill.level"></SkillDetail>
-    </div>
-    <!-- <div class="absolute right--60px">
-      <div class="text-#AE8D5A h-60px bg-black p-1px box-border flex pl-2">
+      <div class="text-#AE8D5A p-1px box-border flex pl-2 w-auto">
         <div
           class="border-1px border-solid border-#322E20 border-l-none flex p-1px box-border pl-0"
         >
           <div
-            class="border-1px border-#514531 border-solid rounded-2px"
+            class="border-1px border-#514531 border-solid rounded-2px flex flex-col items-center justify-center p-5px"
             style="background: linear-gradient(to bottom, #313330 0%, #0f110f 100%)"
+            @click="showSkillDetail = true"
           >
-            技能详细
+            <img class="w-30px h-30px" src="./components/img/detail.png" />
+            技能详情
           </div>
         </div>
       </div>
-    </div> -->
+    </div>
+  </div>
+  <div
+    class="bg-#101012 w-300px h-full absolute"
+    :style="style"
+    ref="SkillDetailRef"
+    v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && showSkillDetail"
+  >
+    <SkillDetail :skillId="curCurrentSkill.skillId" :level="curCurrentSkill.level"></SkillDetail>
   </div>
 </template>
 
@@ -78,6 +86,7 @@ import SkillVP from './components/SkillVP'
 import SkillUP from './components/SkillUP'
 import { useConfigStore } from '@/stores'
 import SkillDetail from './components/SkillDetail'
+import { onClickOutside } from '@vueuse/core'
 const props = defineProps<{
   alter: string
 }>()
@@ -95,13 +104,26 @@ const curCurrentSkill = computed(() => {
   }
 })
 
+const showSkillDetail = ref(false)
+
+const skillTreeRef = ref<HTMLHtmlElement>()
+const SkillDetailRef = ref<HTMLHtmlElement>()
+
+const style = computed(() => {
+  return {
+    zIndex: 99,
+    height: `${skillTreeRef.value?.clientHeight ?? 0}px`,
+    left: `${(skillTreeRef.value?.clientWidth ?? 0) + 5}px`,
+  }
+})
+
 const setCurrentSkill = (skillId: number) => {
   curSkillId.value = infoStore.skills.find((skill) => skill.id === skillId)?.uuid || ''
 }
 
-const linkColg = () => {
-  window.open('https://bbs.colg.cn/page_collect/330.html', '_blank')
-}
+onClickOutside(SkillDetailRef, (event) => {showSkillDetail.value = false}, {
+  ignore: [skillTreeRef],
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/pages/IndexView.vue b/frontend/src/pages/IndexView.vue
index 2fe3f1b7..2eb686cd 100644
--- a/frontend/src/pages/IndexView.vue
+++ b/frontend/src/pages/IndexView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full overflow-y-auto mt-0 h-100%">
+  <div class="w-full overflow-y-auto mt-0 h-100%" :style="`zoom:${zoom}`">
     <Suspense>
       <RouterView></RouterView>
     </Suspense>
@@ -8,6 +8,7 @@
 </template>
 
 <script lang="ts" name="index" setup>
+const zoom = computed(() => /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent || navigator.vendor || (window as any).opera) ? 1 :(window.screen.width / 1800 / 0.85).toFixed(2))
 import { useDialog } from '@/components/hooks/dialog'
 
 const { render } = useDialog()