装备栏、技能栏

2025-03-15 11:13:34 +08:00
parent 5d5dc59526
commit 8be0aa2a5a
83 changed files with 353 additions and 60 deletions
@@ -0,0 +1,81 @@
+<template>
+  <template v-if="props.equipment">
+    <div class="relative" :class="{inactive: props.inactive}">
+      <div class="w-28px h-28px " :style="{ backgroundImage: `url(${getImageURL('equipment' + props.equipment?.imageUrl)})` }">
+      <img :src="getLocalImageURL(`./rarity/${rarity}.png`)" />
+    </div>
+    </div>
+  </template>
+  <template v-else>
+    <div class="w-26px h-26px border-1px border-solid  border-#7a7a7a/50"></div>
+  </template>
+
+</template>
+
+
+<script lang="ts" setup>
+import type { IEquipment } from '@/api/info/type';
+import { getImageURL } from '@/utils/images'
+
+const props = defineProps<{
+  equipment?: IEquipment
+  inactive?: boolean
+}>()
+
+const rarity = computed(()=>{
+  switch(props.equipment?.rarity){
+    case '稀有':
+      return 'rare'
+    case '神器':
+      return 'artifact'
+    case '传说':
+      return 'legend'
+    case '史诗':
+      return 'epic'
+    case '太初':
+      return 'primeval'
+    default:
+      return ''
+  }
+})
+
+const getLocalImageURL = (url:string)=>{
+  return new URL(url, import.meta.url).href
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+// @keyframes primeval {
+//   @for $i from 0 through 29 {
+//     #{percentage($i / 29)} {
+//       background-image: url("./effect/primeval/#{$i}.png");
+//     }
+//   }
+// }
+
+// .primeval_effect {
+//   width: 28px;
+//   height: 28px;
+//   background-size: cover;
+//   animation: primeval 2s infinite;
+//   //  设置动画名称，持续时间，和循环次数
+//   mix-blend-mode: color-dodge;
+// }
+
+.inactive {
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 28px;
+    height: 28px;
+    background-color: #00000060;
+  }
+}
+
+</style>
@@ -0,0 +1,40 @@
+<template>
+  <div class="flex gap-8px">
+    <template v-for="(rarity,_) in rarities" :key="_">
+      <div class="w-14px h-14px shadow-[0px_0px_3px_#ffffff_inset,0px_0px_1px_#ffffff40]" :style="{background: rarity.background}" @click="value=rarity.value">
+        <div class="w-14px h-14px" :class="{'active': value === rarity.value}"></div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const value = defineModel<string>()
+
+const rarities = [{
+  value: '稀有',
+  background: '#d06eff',
+},{
+  value: '神器',
+  background: '#fe11ff',
+},{
+  value: '传说',
+  background: '#fc8711',
+},{
+  value: '史诗',
+  background: '#feca11',
+},{
+  value: '太初',
+  background: 'linear-gradient(180deg, #70faa7 0%, #7bfefe 100%)',
+}]
+
+</script>
+
+<style lang="scss" scoped>
+
+.active{
+  background: url('@/assets/img/control/item_checked.png') no-repeat center;
+  background-size: 12px 10px;
+}
+</style>