init

frontend-ui/src/components/dnf/Equipment/Oath/index.vue

@@ -1,14 +1,10 @@
 <template>
   <div
-    class="pos-relative w-264px h-full"
+    class="equipment-oath"
     :style="{ backgroundImage: withBg ? `url(${getImageURL('/common/oath/head.png')})` : 'none' }"
   >
     <template v-for="part in parts" :key="part">
-      <div
-        class="pos-absolute text-white/50 w-26px h-26px border-1px border-solid border-#7a7a7a/50 flex items-center justify-center"
-        :style="infoStyle(part)"
-        @click="choosePart(part)"
-      >
+      <div class="equipment-oath__slot" :style="infoStyle(part)" @click="choosePart(part)">
         <template v-if="detail?.[part]?.id">
           <EquipmentIcon :equipment="equ(detail[part].id, part)" useDisplayUrl />
         </template>
@@ -16,16 +12,7 @@
           {{ part != '11' ? '星蕴' : '誓约' }}
         </template>
       </div>
-      <!-- <div v-if="detail?.[part]?.fusion" class="pos-absolute" :style="fusionStyle(part)">
-        <EquipmentIcon :equipment="oaths(detail[part].fusion)" />
-      </div> -->
     </template>
-    <!-- <img
-      v-if="props.avatar"
-      :src="props.avatar"
-      alt="Avatar"
-      class="pos-absolute w-70% left-1/2 translate-x--1/2 -bottom-10px"
-    /> -->
   </div>
 </template>
 
@@ -158,20 +145,12 @@ const positionSimple = [
 ]
 
 const infoStyle = (part: string) => {
-  if (props.withBg)
-    return {
-      left: `${position[parseInt(part)].x}px`,
-      top: `${position[parseInt(part)].y}px`,
-      zIndex: 6,
-      // fontWeight: 900,
-    }
-  else
-    return {
-      left: `${positionSimple[parseInt(part)].x}px`,
-      top: `${positionSimple[parseInt(part)].y}px`,
-      zIndex: 6,
-      // fontWeight: 900,
-    }
+  const coordinates = (props.withBg ? position : positionSimple)[Number.parseInt(part)]
+
+  return {
+    '--ui-equipment-slot-left': `${coordinates.x}px`,
+    '--ui-equipment-slot-top': `${coordinates.y}px`,
+  }
 }
 
 const choosePart = (part: string) => {
@@ -179,4 +158,32 @@ const choosePart = (part: string) => {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.equipment-oath {
+  position: relative;
+  width: var(--ui-equipment-board-inline-size, 264px);
+  height: 100%;
+  flex: 0 0 auto;
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: var(--ui-equipment-board-inline-size, 264px) auto;
+
+  &__slot {
+    position: absolute;
+    z-index: var(--ui-equipment-slot-z-index, 6);
+    left: var(--ui-equipment-slot-left);
+    top: var(--ui-equipment-slot-top);
+    box-sizing: border-box;
+    display: flex;
+    width: var(--ui-equipment-slot-size, 26px);
+    height: var(--ui-equipment-slot-size, 26px);
+    align-items: center;
+    justify-content: center;
+    border: var(--ui-component-stroke-size) solid var(--ui-equipment-slot-border, var(--ui-border));
+    color: var(--ui-equipment-slot-foreground, var(--ui-muted-foreground));
+    font-size: var(--ui-equipment-preview-slot-font-size, 12px);
+    line-height: 1;
+    white-space: nowrap;
+  }
+}
+</style>