init
This commit is contained in:
@@ -1,7 +1,11 @@
|
||||
import { getImageURL } from '@/utils/images'
|
||||
import type { ISkill } from '@/api/info/type'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import CalcButton from '@/components/calc/button/index.vue'
|
||||
import { UiButton } from '@/components/ui/button'
|
||||
import addIcon from './img/add.svg'
|
||||
import maxIcon from './img/max.svg'
|
||||
import minIcon from './img/min.svg'
|
||||
import subIcon from './img/sub.svg'
|
||||
import './style.scss'
|
||||
|
||||
export default defineComponent({
|
||||
@@ -101,17 +105,14 @@ export default defineComponent({
|
||||
if (info?.lv > skill.maxLearnLv) color = '#58E0FC'
|
||||
return (
|
||||
<>
|
||||
<div class="relative w-35px h-55px">
|
||||
<div class="flex w-full items-center justify-center gap-2px absolute top--18px left-1px">
|
||||
<div class="skill-tree__slot">
|
||||
<div class="skill-tree__enhancements">
|
||||
{info?.vp > 0 && <div class={`vp_${info.vp}`}></div>}
|
||||
{info?.up > 0 && <div class={`up_${info.up}`}></div>}
|
||||
</div>
|
||||
{activeSkill.value == skill.id && renderSkillAction(skill)}
|
||||
<div
|
||||
class={[
|
||||
'w-36px absolute h-48px flex flex-col box-border items-center py-3px z-2',
|
||||
skill.learnLv == 100 && skill.bind ? '' : 'skill',
|
||||
]}
|
||||
class={['skill-tree__skill', skill.learnLv == 100 && skill.bind ? '' : 'skill']}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
chooseSkill(skill)
|
||||
@@ -124,42 +125,30 @@ export default defineComponent({
|
||||
key={index}
|
||||
>
|
||||
<img
|
||||
class={['h-28px w-28px', skill.type === 'passive' ? 'passive' : '']}
|
||||
class={['skill-tree__icon', skill.type === 'passive' ? 'passive' : '']}
|
||||
src={getImageURL(skill.icon)}
|
||||
alt={skill.name}
|
||||
></img>
|
||||
<div class="w-100% flex flex-1 justify-center" style={{ color }}>
|
||||
<div class="skill-tree__level" style={{ color }}>
|
||||
{info?.lv ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
{skill.learnLv == 100 && skill.bind && (
|
||||
<>
|
||||
<div
|
||||
class={`pos-absolute w-196px h-54px box-border translate-x--50% left-18px top--3px flex justify-between items-center py-2px px-3px awake_${bindAwake.value}`}
|
||||
>
|
||||
<div
|
||||
class="w-36px flex flex-col box-border items-center py-2px z-2"
|
||||
onClick={() => chooseBindAwake(50)}
|
||||
>
|
||||
<div class={`skill-tree__awake awake_${bindAwake.value}`}>
|
||||
<div class="skill-tree__awake-option" onClick={() => chooseBindAwake(50)}>
|
||||
<img
|
||||
class="h-28px w-28px mt-2px"
|
||||
class="skill-tree__icon skill-tree__awake-icon"
|
||||
src={getImageURL(awakeSkill_1.value?.icon ?? '')}
|
||||
></img>
|
||||
<div class="w-100% mt-1px flex items-center justify-center text-#ffc701">
|
||||
1次
|
||||
</div>
|
||||
<div class="skill-tree__awake-label">1次</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-36px flex flex-col box-border items-center py-2px z-2"
|
||||
onClick={() => chooseBindAwake(85)}
|
||||
>
|
||||
<div class="skill-tree__awake-option" onClick={() => chooseBindAwake(85)}>
|
||||
<img
|
||||
class="h-28px w-28px mt-1px"
|
||||
class="skill-tree__icon skill-tree__awake-icon"
|
||||
src={getImageURL(awakeSkill_2.value?.icon ?? '')}
|
||||
></img>
|
||||
<div class="w-100% mt-1px flex items-center justify-center text-#ffc701">
|
||||
2次
|
||||
</div>
|
||||
<div class="skill-tree__awake-label">2次</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@@ -172,39 +161,55 @@ export default defineComponent({
|
||||
const renderSkillAction = (skill: ISkill) => (
|
||||
<>
|
||||
<>
|
||||
<div class="absolute skill-active w-88px h-78px translate-x--50% left-16px top--1px z-5">
|
||||
<div class="flex justify-between items-center px-5px relative top-54px">
|
||||
<CalcButton
|
||||
icon="min"
|
||||
<div class="skill-active skill-tree__actions">
|
||||
<div class="skill-tree__action-list">
|
||||
<UiButton
|
||||
size="icon"
|
||||
class="skill-action-button"
|
||||
aria-label="技能等级归零"
|
||||
disabled={lvInfo.value[skill.id.toString()]?.lv == 0}
|
||||
onClick={(e: Event) => {
|
||||
e.stopPropagation()
|
||||
actionSkillLv(skill, 'subMax')
|
||||
}}
|
||||
></CalcButton>
|
||||
<CalcButton
|
||||
icon="reduce"
|
||||
>
|
||||
<img data-icon src={minIcon} alt="" />
|
||||
</UiButton>
|
||||
<UiButton
|
||||
size="icon"
|
||||
class="skill-action-button"
|
||||
aria-label="技能等级减一"
|
||||
disabled={lvInfo.value[skill.id.toString()]?.lv == 0}
|
||||
onClick={(e: Event) => {
|
||||
e.stopPropagation()
|
||||
actionSkillLv(skill, 'sub')
|
||||
}}
|
||||
></CalcButton>
|
||||
<CalcButton
|
||||
icon="increase"
|
||||
>
|
||||
<img data-icon src={subIcon} alt="" />
|
||||
</UiButton>
|
||||
<UiButton
|
||||
size="icon"
|
||||
class="skill-action-button"
|
||||
aria-label="技能等级加一"
|
||||
onClick={(e: Event) => {
|
||||
e.stopPropagation()
|
||||
actionSkillLv(skill, 'add')
|
||||
}}
|
||||
></CalcButton>
|
||||
<CalcButton
|
||||
icon="max"
|
||||
>
|
||||
<img data-icon src={addIcon} alt="" />
|
||||
</UiButton>
|
||||
<UiButton
|
||||
size="icon"
|
||||
class="skill-action-button"
|
||||
aria-label="技能等级加满"
|
||||
disabled={lvInfo.value[skill.id.toString()]?.lv >= skill.maxLearnLv}
|
||||
onClick={(e: Event) => {
|
||||
e.stopPropagation()
|
||||
actionSkillLv(skill, 'addMax')
|
||||
}}
|
||||
></CalcButton>
|
||||
>
|
||||
<img data-icon src={maxIcon} alt="" />
|
||||
</UiButton>
|
||||
{/* <img
|
||||
src={`${new URL('./img/min.svg', import.meta.url).href}`}
|
||||
onClick={(e: Event) => {
|
||||
@@ -241,11 +246,11 @@ export default defineComponent({
|
||||
|
||||
return () => (
|
||||
<>
|
||||
<div onClick={() => (activeSkill.value = -1)}>
|
||||
<div class="skill-tree" onClick={() => (activeSkill.value = -1)}>
|
||||
{((getSkill(0, 15, -1) ?? []) as ISkill[]).length > 0 && (
|
||||
<>
|
||||
<div class="skill-tree-line flex items-center gap-8px px-5px">
|
||||
<div class="w-34px h-34px flex items-center justify-center text-white">
|
||||
<div class="skill-tree-line">
|
||||
<div class="skill-tree__row-label">
|
||||
其<br />余
|
||||
</div>
|
||||
{((getSkill(0, 15, -1) ?? []) as ISkill[])?.map((skill, index) =>
|
||||
@@ -257,17 +262,21 @@ export default defineComponent({
|
||||
|
||||
{lvList.map((lv, index) =>
|
||||
((getSkill(lv, lvList[index + 1] ?? 150, -1) as ISkill[])?.length ?? 0) > 0 ? (
|
||||
<div class="skill-tree-line flex items-center gap-8px px-5px" key={index}>
|
||||
<div class="skill-tree-line" key={index}>
|
||||
{lv == 1 || lv % 10 == 0 ? (
|
||||
<div class="w-34px h-34px flex items-center justify-center text-white">{lv}</div>
|
||||
<div class="skill-tree__row-label">{lv}</div>
|
||||
) : (
|
||||
<div class="w-34px h-34px"></div>
|
||||
<div class="skill-tree__placeholder"></div>
|
||||
)}
|
||||
{columns.map((column) => {
|
||||
const skill = getSkill(lv, lvList[index + 1] ?? 150, column) as ISkill
|
||||
return skill ? renderSkill(skill, index) : <div class="w-34px h-34px"></div>
|
||||
return skill ? (
|
||||
renderSkill(skill, index)
|
||||
) : (
|
||||
<div class="skill-tree__placeholder"></div>
|
||||
)
|
||||
})}
|
||||
<div class="w-5px h-34px" onClick={() => (activeSkill.value = -1)}></div>
|
||||
<div class="skill-tree__row-end" onClick={() => (activeSkill.value = -1)}></div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
|
||||
Reference in New Issue
Block a user