dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

init

Browse Source
This commit is contained in:
imelon
2026-08-09 00:33:21 +08:00
parent 6be5ebc8f7
commit 9ea606b175
133 changed files with 7300 additions and 6289 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-ui/src/pages/Character/Skill/components/SkillVP/index.tsx
+19 -27
View File
@@ -1,7 +1,7 @@
import { getImageURL } from '@/utils/images'
import type { ISkill } from '@/api/info/type'
import { useVModel } from '@vueuse/core'
import CalcCheckbox from '@/components/calc/checkbox/index.vue'
import { UiCheckbox } from '@/components/ui/checkbox'
import { renderList } from 'vue'
import './style.scss'
export default defineComponent({
@@ -54,22 +54,19 @@ export default defineComponent({
return () => (
<>
<div class="h-auto py-2 flex flex-col bg-#080808 box-content">
<div class="skill-vp-list">
{renderList(skills.value, (item) => (
<div class="h-140px flex items-center vp pl-26px pr-16px box-content">
<div class="w-30px text-center text-#816f4c">{item.learnLv}</div>
<div class="w-150px flex gap-5px items-center">
<div class="border-1px border-solid border-#3F382E rounded-4px w-28px h-28px">
<img class="w-28px h-28px" src={getImageURL(item.icon)} alt={item.name} />
<div class="vp skill-vp-list__row">
<div class="skill-vp-list__learn-level">{item.learnLv}</div>
<div class="skill-vp-list__identity">
<div class="skill-vp-list__icon-frame">
<img src={getImageURL(item.icon)} alt={item.name} />
</div>
<div class="skill-name">{item.name}</div>
</div>
{renderList(2, (index) => (
<div
class={[
'flex items-center flex-col vp-item py-10px',
index == 1 ? 'ml-auto' : 'ml-2px',
]}
class={['vp-item', index == 1 ? 'vp-item--first' : '']}
onClick={() => {
emit('chooseSkill', item.id)
itemChecked(item.id.toString(), index).value = !itemChecked(
@@ -81,43 +78,38 @@ export default defineComponent({
{' '}
<div
class={[
'box-border w-full h-full pt-5px m-2px',
'vp-item__content',
itemChecked(item.id.toString(), index).value ? 'selected' : '',
]}
>
<div class="flex justify-between w-full h-30px px-10px box-border">
<div class="flex items-start">
<CalcCheckbox
<div class="vp-item__header">
<div class="vp-item__checkbox">
<UiCheckbox
modelValue={itemChecked(item.id.toString(), index).value}
disabled={
currentUsedVP.value >= 5 && lvInfo.value[item.id.toString()]?.vp == 0
}
/>
</div>
<div class="relative inline-block border-1px border-solid border-#3F382E rounded-4px w-28px h-28px">
<div
class="bg-#a128f4 w-26px h-26px top-1px left-1px absolute z-5"
style="mix-blend-mode: hue;"
></div>
<div class="vp-item__icon-frame">
<div class="vp-item__icon-tint" style="mix-blend-mode: hue;"></div>
<img
style="filter:brightness(1) contrast(1) saturate(1.5)"
class="w-28px h-28px"
class="vp-item__icon"
src={getImageURL(item.icon)}
alt={item.name}
/>
<div class={`vp_${index} absolute bottom--8px left-5px z-10`}></div>
<div class={`vp_${index} vp-item__badge`}></div>
</div>
<div class="w-16px"></div>
</div>
<div class="text-13px mt-5px text-center selected-name">
{item.vps[index - 1]?.name}
<div class="vp-item__balance"></div>
</div>
<div class="vp-item__name selected-name">{item.vps[index - 1]?.name}</div>
{renderList(
item.vps[index - 1]?.desc
? item.vps[index - 1].desc.replace(/<br\/>/g, '\n').split('\n')
: [],
(desc) => (
<div class="text-12px text-#816f4c text-center leading-none">{desc}</div>
<div class="vp-item__description">{desc}</div>
),
)}
</div>