diff --git a/backend/core/basic/character.py b/backend/core/basic/character.py
index 4549cb2c..170a672e 100644
--- a/backend/core/basic/character.py
+++ b/backend/core/basic/character.py
@@ -349,7 +349,7 @@ class Character:
         info['alter'] = self.实际名称
         info['equVersion'] = self.equVersion
         info['name'] = self.名称
-        info['weaopns'] = self.武器选项
+        info['weapons'] = self.武器选项
         skillInfo = []
         for skill in self.skills:
             skillInfo.append(
diff --git a/backend/core/character/GF/gunner_female/spitfire_female.py b/backend/core/character/GF/gunner_female/spitfire_female.py
index bfb169d8..bba41c74 100644
--- a/backend/core/character/GF/gunner_female/spitfire_female.py
+++ b/backend/core/character/GF/gunner_female/spitfire_female.py
@@ -123,7 +123,7 @@ class classChange(Character):
 
         # 用来筛CP武器的
         # self.转职 = '弹药专家(女)'
-        self.武器选项 = ['手弩', '步枪']
+        self.武器选项 = ['手弩', '步枪','左轮枪','自动手枪','手炮']
         self.输出类型选项 = ['魔法固伤', '物理固伤']
         self.防具精通属性 = ['智力', '力量']
         self.类型 = '魔法固伤'
diff --git a/frontend/src/api/info/type.ts b/frontend/src/api/info/type.ts
index a7e2017c..ab59e2b7 100644
--- a/frontend/src/api/info/type.ts
+++ b/frontend/src/api/info/type.ts
@@ -17,7 +17,7 @@ export interface IAlterInfo {
   options?: IAlterOption[]
   open?: boolean
   comment?: string
-  class?:string
+  class?: string
 }
 
 export interface ICharacterInfo {
@@ -30,14 +30,20 @@ export interface ICharacterInfo {
   suits: ISuit[]
 }
 
-export interface IEquipment {}
+export interface IEquipment {
+  id: string
+  imageUrl: string
+  itemType: string
+  itemDetailType: string
+  name: string
+}
 
 export interface ISkill {
   icon: string
   name: string
   id: number
-  learnLv:number
-  positon:number
+  learnLv: number
+  positon: number
 }
 
 export interface ISuit {}
diff --git a/frontend/src/pages/Character/Equipment/Stone.vue b/frontend/src/pages/Character/Equipment/Stone.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/pages/Character/Equipment/Suit.vue b/frontend/src/pages/Character/Equipment/Suit.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/pages/Character/Equipment/Weapon.vue b/frontend/src/pages/Character/Equipment/Weapon.vue
new file mode 100644
index 00000000..ca64e677
--- /dev/null
+++ b/frontend/src/pages/Character/Equipment/Weapon.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="flex flex-wrap gap-2px">
+    <template v-for="weapon in weapons" :key="weapon.id">
+      <div class="w-34px h-34px bg-#2c2d2c rounded-2px flex flex-col items-center">
+        <img class="w-30px h-30px" :src="getImageURL('equipment/'+weapon.imageUrl)" :alt="weapon.name" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useInfoStore } from '@/stores';
+import { getImageURL } from '@/utils/images';
+
+const infoStore = useInfoStore()
+
+const weapons = computed(()=>infoStore.equips.filter((equip) => equip.itemType === '武器' && infoStore.infos?.weapons.includes(equip.itemDetailType)))
+</script>
diff --git a/frontend/src/pages/Character/Index.vue b/frontend/src/pages/Character/Index.vue
index 37bec737..d0fd219c 100644
--- a/frontend/src/pages/Character/Index.vue
+++ b/frontend/src/pages/Character/Index.vue
@@ -1,14 +1,24 @@
 <template>
-  <div class="h-90vh w-560px overflow-y-auto overflow-x-hidden">
-    <SkillTree></SkillTree>
-  </div>
+  <div class="w-100% h-100% main" :class="props.alter.split('.').slice(-1)">
+    <div class="header"></div>
+    <div class="content flex">
+      <Weapon></Weapon>
+      <div class="h-90vh w-560px overflow-y-auto overflow-x-hidden">
 
+      <SkillTree></SkillTree>
+
+  </div>
+    </div>
+
+
+  </div>
 </template>
 
 <script lang="ts" setup name="Index">
 import { useInfoStore } from '@/stores/info'
 import { getImageURL } from '@/utils/images'
 import SkillTree from './Skill/SkillTree.vue';
+import Weapon from './Equipment/Weapon.vue';
 const props = defineProps<{
   alter: string
 }>()
@@ -17,3 +27,51 @@ onMounted(() => {
   infoStore.createCharacter(props.alter, '0')
 })
 </script>
+
+<style lang="scss">
+  .main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: black;
+
+    color: #e9c558;
+    // font-size: 12px;
+
+    .header {
+      display: flex;
+      align-items: flex-end;
+      z-index: 2;
+      height: 26px;
+    }
+
+    .footer {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      z-index: 2;
+      height: 40px;
+    }
+
+    .content {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      z-index: 2;
+      width: 100%;
+    }
+  }
+
+  .main::after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(50, 50, 50, 0.75);
+  }
+</style>