dev

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 {}

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>

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>