diff --git a/frontend/src/components/dnf/Equipment/List/index.vue b/frontend/src/components/dnf/Equipment/List/index.vue
index 53f70b14..dacca485 100644
--- a/frontend/src/components/dnf/Equipment/List/index.vue
+++ b/frontend/src/components/dnf/Equipment/List/index.vue
@@ -1,15 +1,63 @@
 <template>
-  <div class="h-160px bg-red" :style="{background: `url(${getImageURL('/common/equ-back.png')}) no-repeat center`}"></div>
+  <div class="h-180px pos-relative">
+    <template v-for="part in infoStore.parts" :key="part">
+      <div
+        class="pos-absolute text-white w-26px h-26px border-1px border-solid border-#7a7a7a/50 flex items-center justify-center"
+        :style="infoStyle(part)"
+        @click="choosePart(part)"
+      >
+        {{ partName(part) }}
+      </div>
+    </template>
+  </div>
 </template>
 
-
 <script lang="ts" setup name="EquList">
-
 import { getImageURL } from '@/utils/images'
+import { useVModel } from '@vueuse/core'
+import { useInfoStore, useConfigStore } from '@/stores'
+
+const props = defineProps({
+  part: {
+    type: String,
+    default: '',
+  }
+})
+const partModelValue = useVModel(props, 'part')
+const infoStore = useInfoStore()
+
+const infoStyle = (part: string) => {
+  let x = 28
+  let y = 5
+  let index = infoStore.parts.findIndex((p) => p == part)
+  if (index == 13) {
+    index -= 7
+  } else if (index >= 5 && index <= 12) {
+    x += 179
+    index -= 5
+  }
+
+  x += (index % 2) * 39
+  y += Math.floor(index / 2) * 34
+
+  const style = {
+    left: `${x}px`,
+    top: `${y}px`,
+    zIndex: 6,
+    fontWeight: 900,
+  }
+  return style
+}
+
+const choosePart = (part: string) => {
+  partModelValue.value = part
+}
+
+const partName = (part: string) => {
+  if (part == '辅助装备') return '左槽'
+  if (part == '魔法石') return '右槽'
+  return part
+}
 </script>
 
-
-<style lang="scss" scoped>
-
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/pages/Character/Forge/components/equipment.vue b/frontend/src/pages/Character/Forge/components/equipment.vue
index abd4c308..f4b63e03 100644
--- a/frontend/src/pages/Character/Forge/components/equipment.vue
+++ b/frontend/src/pages/Character/Forge/components/equipment.vue
@@ -5,27 +5,22 @@ import { useInfoStore, useConfigStore } from '@/stores'
 import EquList from '@/components/dnf/Equipment/List/index.vue'
 export default defineComponent({
   name: 'Equip',
-  props: {
-    part: {
-      type: String,
-      default: '头肩',
-    },
-  },
   setup(props) {
     const configStore = useConfigStore()
+    const part = ref('头肩')
     const can_upgrade = computed(() => {
-      return !['称号', '宠物'].includes(props.part as string)
+      return !['称号', '宠物'].includes(part.value as string)
     })
 
     // const globalStore = useGlobalStore()
 
     /** 是否有徽章 */
     const has_socket = computed(
-      () => !['称号', '宠物', '耳环', '武器'].includes(props.part as string),
+      () => !['称号', '宠物', '耳环', '武器'].includes(part.value as string),
     )
     /** 是否有右侧徽章 */
     const has_emblem_1 = computed(
-      () => has_socket.value && !['辅助装备', '魔法石'].includes(props.part as string),
+      () => has_socket.value && !['辅助装备', '魔法石'].includes(part.value as string),
     )
     const basicInfoStore = useInfoStore()
 
@@ -33,7 +28,7 @@ export default defineComponent({
       return basicInfoStore.enchants
         ?.filter(
           (item) =>
-            item.position.includes(props.part) &&
+            item.position.includes(part.value) &&
             !item.position.includes('武器装扮') &&
             !item.position.includes('宠物装备'),
         )
@@ -41,7 +36,7 @@ export default defineComponent({
     })
 
     const emblem_list = computed<IEnchantingInfo[] | undefined>(() => {
-      return basicInfoStore.emblems.filter((item) => item.position.includes(props.part))
+      return basicInfoStore.emblems.filter((item) => item.position.includes(part.value))
     })
 
     const global_change = ref(false)
@@ -50,7 +45,7 @@ export default defineComponent({
       return computed<string | number>({
         get() {
           return (
-            (configStore.config.equips?.[props.part] as Record<string, any>)?.[name] ??
+            (configStore.config.equips?.[part.value] as Record<string, any>)?.[name] ??
             defaultValue ??
             0
           )
@@ -60,7 +55,7 @@ export default defineComponent({
             return
           }
           if (name == 'emblem_1' && !has_emblem_1.value) {
-            // configStore.setForge(props.part, name, 0)
+            // configStore.setForge(part.value, name, 0)
             return
           }
 
@@ -89,7 +84,7 @@ export default defineComponent({
               parts = basicInfoStore.parts.filter((e) => !['称号', '宠物'].includes(e))
             }
           } else {
-            parts = [props.part]
+            parts = [part.value]
           }
           for (const part of parts) {
             if (configStore.config.equips[part]) {
@@ -134,11 +129,11 @@ export default defineComponent({
     return () => {
       return (
         <>
-        <EquList/>
+        <EquList v-model:part={part.value}/>
         <div class="flex flex-wrap equ-profile">
           <div class="equ-profile-item">
             <div class="mr-10px row-name">当前部位</div>
-            <span> {props.part}</span>
+            <span> {part.value}</span>
             {can_upgrade.value ? (
               <calc-checkbox
                 style="margin-left:auto"
@@ -161,7 +156,7 @@ export default defineComponent({
                   <calc-option value={i - 1}>{i - 1}</calc-option>
                 ))}
               </calc-select>
-              {props.part == '武器' && (
+              {part.value == '武器' && (
                 <calc-select v-model={dz_number.value} class="flex-1 !h-20px">
                   {renderList(9, (i) => (
                     <calc-option value={i - 1}>锻造+ {i - 1}</calc-option>
diff --git a/frontend/src/stores/info.ts b/frontend/src/stores/info.ts
index 4344f4bd..7f93ca8b 100644
--- a/frontend/src/stores/info.ts
+++ b/frontend/src/stores/info.ts
@@ -1,27 +1,41 @@
-import api from "@/api"
-import type { ICharacterInfo } from "@/api/info/type"
-import { defineStore } from "pinia"
+import api from '@/api'
+import type { ICharacterInfo } from '@/api/info/type'
+import { defineStore } from 'pinia'
 
-export const useInfoStore = defineStore("infoStore", ()=>{
-
-  const alter_token = ref<string>("")
+export const useInfoStore = defineStore('infoStore', () => {
+  const alter_token = ref<string>('')
   const infos = ref<ICharacterInfo | null>(null)
 
-  const skills = computed(()=>infos.value?.skills ?? [])
+  const skills = computed(() => infos.value?.skills ?? [])
 
-  const equips = computed(()=>infos.value?.equips ?? [])
+  const equips = computed(() => infos.value?.equips ?? [])
 
-  const suits = computed(()=>infos.value?.suits ?? [])
+  const suits = computed(() => infos.value?.suits ?? [])
 
-  const enchants = computed(()=>infos.value?.enchants ?? [])
+  const enchants = computed(() => infos.value?.enchants ?? [])
 
-  const emblems = computed(()=>infos.value?.emblems?? [])
+  const emblems = computed(() => infos.value?.emblems ?? [])
 
-  const parts = ['上衣', '头肩', '下装', '腰带', '鞋', '手镯', '项链', '戒指', '耳环', '辅助装备', '魔法石', '武器']
+  const parts = [
+    '头肩',
+    '上衣',
+    '下装',
+    '腰带',
+    '鞋',
+    '武器',
+    '称号',
+    '手镯',
+    '项链',
+    '辅助装备',
+    '戒指',
+    '耳环',
+    '魔法石',
+    '宠物',
+  ]
 
   const createCharacter = async (alter: string, equVersion?: string) => {
     const time = new Date().getTime()
-    alter_token.value = btoa(JSON.stringify({alter, equVersion, time}))
+    alter_token.value = btoa(JSON.stringify({ alter, equVersion, time }))
     infos.value = await api.characterInfo()
   }
 
@@ -34,6 +48,6 @@ export const useInfoStore = defineStore("infoStore", ()=>{
     createCharacter,
     enchants,
     emblems,
-    parts
+    parts,
   }
 })