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

dev

Browse Source
This commit is contained in:
imelon
2025-05-21 01:59:08 +08:00
parent 1b883e74b9
commit e827f98cef
38 changed files with 580 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Character/Skill/components/SkillReinforce/index.tsx
-178
View File
@@ -1,178 +0,0 @@
import { getImageURL, getLocalImageURL } from '@/utils/images'
import type { ISkill } from '@/api/info/type'
import { useVModel } from '@vueuse/core'
import CalcButton from '@/components/calc/button/index.vue'
import CalcCheckbox from '@/components/calc/checkbox/index.vue'
import CaclIconSelect from '@/components/calc/iconselect/index.vue'
import CalcOption from '@/components/calc/option/index.vue'
import { render, renderList } from 'vue'
import './style.scss'
export default defineComponent({
name: 'SkillTree',
props: {
skills: {
type: Array as PropType<ISkill[]>,
default: () => [],
},
lvInfo: {
type: Object as PropType<Record<string, { lv: number; reinforce: number }>>,
default: () => ({}),
},
},
setup(props) {
const lvInfo = useVModel(props, 'lvInfo')
const skills = (index: number = 0) => {
index -= 1
const reinforceList = Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
)
const currentReinforceSkill = index >= 0 ? reinforceList[index] : undefined
return computed(() =>
props.skills
.filter(
(a) =>
a.id.toString() === currentReinforceSkill ||
(a.hasReinforce &&
(!lvInfo.value[a.id]?.reinforce || lvInfo.value[a.id]?.reinforce == 0) && lvInfo.value[a.id].lv > 0),
)
.sort((a, b) => a.learnLv - b.learnLv),
)
}
const itemChecked = (index: number, reinforce: number) => {
index -= 1
return computed<string | undefined>({
get() {
const reinforceList = Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
)
const currentReinforceSkill = reinforceList[index]
const currentReinforce = lvInfo.value[currentReinforceSkill]?.reinforce
console.log(currentReinforce, reinforce)
return currentReinforce == reinforce ? currentReinforceSkill : undefined
},
set(value: string | undefined) {
if (!value) return
const reinforceList = Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
)
const currentReinforceSkill = reinforceList[index]
currentReinforceSkill && (lvInfo.value[currentReinforceSkill].reinforce = 0)
if (!value) {
currentReinforceSkill && (lvInfo.value[currentReinforceSkill].reinforce = 0)
} else {
lvInfo.value[value].reinforce = reinforce
}
},
})
}
const exchange = (index: number) => {
const skill = itemChecked(index, 1).value || itemChecked(index, 2).value
if (!skill) return
lvInfo.value[skill].reinforce = lvInfo.value[skill].reinforce == 1 ? 2 : 1
}
return () => (
<>
{lvInfo.value && Object.keys(lvInfo.value).length > 0 ? (
<div class="flex pt-10px bg-black">
<div class="skill-reinforce relative">
<div class="absolute left-76px top-137px w-250px flex flex-col gap-21.5px">
{renderList(3, (index) => (
<>
<div class="w-169px h-36px flex items-center justify-between">
<div class="m-4px w-28px h-28px">
<CaclIconSelect
v-model:modelValue={itemChecked(index, 1).value}
class="!bg-white/0 !border-white/0 m-4px"
columnNum={4}
>
{renderList(skills(index).value, (item) => (
<>
<CalcOption value={item.id.toString()}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
</div>
<CalcButton icon="exchange" onClick={() => exchange(index)}></CalcButton>
<div class="m-4px w-28px h-28px">
<CaclIconSelect
v-model:modelValue={itemChecked(index, 2).value}
class=" !bg-white/0 !border-white/0"
columnNum={4}
>
{renderList(skills(index).value, (item) => (
<>
<CalcOption value={item.id.toString()}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
</div>
</div>
</>
))}
</div>
<div class="absolute top-70px left-310px w-320px h-270px py-5px px-30px box-border flex flex-col">
<div class="flex flex-wrap gap-10px content-start h-120px overflow-y-auto mb-10px">
{renderList(skills().value, (item) => (
<div
key={item.id}
class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
>
<img src={getImageURL(item.icon)} alt={item.name} />
</div>
))}
{renderList(36 - skills().value.length, (item) => (
<div
key={item}
class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
></div>
))}
</div>
<div class="flex flex-col gap-10px">
{renderList(
Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
),
(index) => {
const skill = props.skills.find((a) => a.id.toString() === index)
let tooltip = ''
if (skill) {
if (lvInfo.value[skill.id.toString()].reinforce == 1) {
tooltip = `技能攻击力 +${skill.learnLv < 35 ? '60' : 55}%`
}
if (lvInfo.value[skill.id.toString()].reinforce == 2) {
tooltip = `技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%<br/>技能冷却时间 -15%`
}
}
return skill ? (
<div class="flex gap-5px items-center">
<div class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px">
<img src={getImageURL(skill?.icon)} alt={skill.name} />
</div>
<div class="text-#947E4E" v-html={tooltip}></div>
</div>
) : (
<></>
)
},
)}
</div>
</div>
</div>
</div>
) : (
<></>
)}
</>
)
},
})
frontend/src/pages/Character/Skill/components/SkillReinforce/style.scss
-7
View File
@@ -1,7 +0,0 @@
.skill-reinforce {
width: 620px;
height: 334px;
background-image: url('./img/bg.png');
background-size: 100% 100%;
background-color: black;
}
frontend/src/pages/Character/Skill/components/SkillUP/img/106.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

frontend/src/pages/Character/Skill/components/SkillUP/img/107.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 724 B

frontend/src/pages/Character/Skill/components/SkillUP/img/108.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

frontend/src/pages/Character/Skill/components/SkillUP/img/attack.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

frontend/src/pages/Character/Skill/components/SkillReinforce/img/bg.png → frontend/src/pages/Character/Skill/components/SkillUP/img/bg.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 77 KiB

frontend/src/pages/Character/Skill/components/SkillReinforce/img/bgBack.png → frontend/src/pages/Character/Skill/components/SkillUP/img/bgBack.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 95 KiB

frontend/src/pages/Character/Skill/components/SkillUP/img/cd.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

frontend/src/pages/Character/Skill/components/SkillUP/img/title.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

frontend/src/pages/Character/Skill/components/SkillUP/img/up_1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

frontend/src/pages/Character/Skill/components/SkillUP/img/up_2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

frontend/src/pages/Character/Skill/components/SkillUP/img/up_3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

frontend/src/pages/Character/Skill/components/SkillUP/img/up_active.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

frontend/src/pages/Character/Skill/components/SkillUP/index.tsx
+285
View File
@@ -0,0 +1,285 @@
import { getImageURL, getLocalImageURL } from '@/utils/images'
import type { ISkill } from '@/api/info/type'
import { useVModel } from '@vueuse/core'
import CalcButton from '@/components/calc/button/index.vue'
import CalcCheckbox from '@/components/calc/checkbox/index.vue'
import CaclIconSelect from '@/components/calc/iconselect/index.vue'
import CalcOption from '@/components/calc/option/index.vue'
import { render, renderList } from 'vue'
import './style.scss'
export default defineComponent({
name: 'SkillTree',
props: {
skills: {
type: Array as PropType<ISkill[]>,
default: () => [],
},
lvInfo: {
type: Object as PropType<Record<string, { lv: number; up: number }>>,
default: () => ({}),
},
},
setup(props) {
const lvInfo = useVModel(props, 'lvInfo')
const skills = (index: number = 0) => {
index -= 1
const upList = Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
)
const currentUPSkill = index >= 0 ? upList[index] : undefined
return computed(() =>
props.skills
.filter(
(a) =>
a.id.toString() === currentUPSkill ||
(a.hasUP &&
(!lvInfo.value[a.id]?.up || lvInfo.value[a.id]?.up == 0) &&
lvInfo.value[a.id].lv > 0),
)
.sort((a, b) => a.learnLv - b.learnLv),
)
}
const itemChecked = (index: number, up: number) => {
index -= 1
return computed<string | undefined>({
get() {
const upList = Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
)
const currentUPSkill = upList[index]
const currentUP = lvInfo.value[currentUPSkill]?.up
return currentUP == up ? currentUPSkill : undefined
},
set(value: string | undefined) {
if (!value) return
const upList = Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
)
const currentUPSkill = upList[index]
currentUPSkill && (lvInfo.value[currentUPSkill].up = 0)
if (!value) {
currentUPSkill && (lvInfo.value[currentUPSkill].up = 0)
} else {
lvInfo.value[value].up = up
}
},
})
}
const exchange = (index: number) => {
const skill = itemChecked(index, 1).value || itemChecked(index, 2).value
if (!skill) return
lvInfo.value[skill].up = lvInfo.value[skill].up == 1 ? 2 : 1
}
return () => (
<>
{lvInfo.value && Object.keys(lvInfo.value).length > 0 ? (
<div class="flex bg-black">
<div class="skill-up flex justify-between">
<div class="left">
<div class="w-full">
<div class="flex justify-between">
<div class="up_head_1">
<div class="icon"></div>
<div class="text-14px font-bold text-center">技能攻击力增加</div>
</div>
<div class="up_head_2">
<div class="icon"></div>
<div class="text-14px font-bold text-center">
技能冷却时间减少
<br />
技能攻击力增加
</div>
</div>
</div>
<div class="flex flex-col gap-5px px-20px py-10px">
{renderList(3, (index) => (
<>
<div class="flex items-center w-full justify-between">
<div class={ `up_${!itemChecked(index, 1).value ? index : 'active'}`}>
<CaclIconSelect
v-model:modelValue={itemChecked(index, 1).value}
class="!bg-white/0 !border-white/0"
columnNum={4}
>
{renderList(skills(index).value, (item) => (
<>
<CalcOption value={item.id.toString()}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
</div>
<CalcButton icon="exchange" onClick={() => exchange(index)}></CalcButton>
<div class={ `up_${!itemChecked(index, 2).value ? index : 'active'}`}>
<CaclIconSelect
v-model:modelValue={itemChecked(index, 2).value}
class=" !bg-white/0 !border-white/0"
columnNum={4}
>
{renderList(skills(index).value, (item) => (
<>
<CalcOption value={item.id.toString()}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
</div>
</div>
</>
))}
</div>
</div>
</div>
<div class="right">
<div class="title text-16px text-center leading-48px">目标技能</div>
<div class="flex flex-wrap gap-8px content-start h-110px overflow-y-auto mb-8px w-275px">
{renderList(skills().value, (item) => (
<div
key={item.id}
class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
>
<img src={getImageURL(item.icon)} alt={item.name} />
</div>
))}
{renderList(35 - skills().value.length, (item) => (
<div
key={item}
class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
></div>
))}
</div>
<div class="flex flex-col gap-10px">
{renderList(
Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
),
(index) => {
const skill = props.skills.find((a) => a.id.toString() === index)
let tooltip = ''
if (skill) {
if (lvInfo.value[skill.id.toString()].up == 1) {
tooltip = `技能攻击力 +${skill.learnLv < 35 ? '60' : 55}%`
}
if (lvInfo.value[skill.id.toString()].up == 2) {
tooltip = `技能冷却时间 -15%<br/>技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%`
}
}
return skill ? (
<div class="flex gap-10px items-center bg-[linear-gradient(180deg,_#1b1c1c_0%,_#000000_100%)] rounded-4px p-5px border-1px border-solid border-#2E2E2E">
<div class="up_1 !w-38px !h-38px">
<img src={getImageURL(skill?.icon)} alt={skill.name} />
</div>
<div class="text-#947E4E" v-html={tooltip}></div>
</div>
) : (
<></>
)
},
)}
</div>
</div>
{/* <div class="absolute left-76px top-137px w-250px flex flex-col gap-21.5px">
{renderList(3, (index) => (
<>
<div class="w-169px h-36px flex items-center justify-between">
<div class="m-4px w-28px h-28px">
<CaclIconSelect
v-model:modelValue={itemChecked(index, 1).value}
class="!bg-white/0 !border-white/0 m-4px"
columnNum={4}
>
{renderList(skills(index).value, (item) => (
<>
<CalcOption value={item.id.toString()}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
</div>
<CalcButton icon="exchange" onClick={() => exchange(index)}></CalcButton>
<div class="m-4px w-28px h-28px">
<CaclIconSelect
v-model:modelValue={itemChecked(index, 2).value}
class=" !bg-white/0 !border-white/0"
columnNum={4}
>
{renderList(skills(index).value, (item) => (
<>
<CalcOption value={item.id.toString()}>
<img src={getImageURL(item.icon)} alt={item.name} />
</CalcOption>
</>
))}
</CaclIconSelect>
</div>
</div>
</>
))}
</div>
<div class="absolute top-70px left-310px w-320px h-270px py-5px px-30px box-border flex flex-col">
<div class="flex flex-wrap gap-10px content-start h-120px overflow-y-auto mb-10px">
{renderList(skills().value, (item) => (
<div
key={item.id}
class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
>
<img src={getImageURL(item.icon)} alt={item.name} />
</div>
))}
{renderList(36 - skills().value.length, (item) => (
<div
key={item}
class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
></div>
))}
</div>
<div class="flex flex-col gap-10px">
{renderList(
Object.keys(lvInfo.value).filter(
(a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
),
(index) => {
const skill = props.skills.find((a) => a.id.toString() === index)
let tooltip = ''
if (skill) {
if (lvInfo.value[skill.id.toString()].up == 1) {
tooltip = `技能攻击力 +${skill.learnLv < 35 ? '60' : 55}%`
}
if (lvInfo.value[skill.id.toString()].up == 2) {
tooltip = `技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%<br/>技能冷却时间 -15%`
}
}
return skill ? (
<div class="flex gap-5px items-center">
<div class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px">
<img src={getImageURL(skill?.icon)} alt={skill.name} />
</div>
<div class="text-#947E4E" v-html={tooltip}></div>
</div>
) : (
<></>
)
},
)}
</div>
</div> */}
</div>
</div>
) : (
<></>
)}
</>
)
},
})
frontend/src/pages/Character/Skill/components/SkillUP/style.scss
+75
View File
@@ -0,0 +1,75 @@
.skill-up {
width: 550px;
// height: 334px;
// background-image: url('./img/bg.png');
// background-size: 100% 100%;
padding: 5px 10px;
padding-bottom: 10px;
background-color: black;
.left {
width: 240px;
height: 325px;
border-radius: 2px;
border: 1px solid #2E2E2E;
background: linear-gradient(to bottom, #1c1c1c 0%, #0a0d0a 100%);
display: flex;
padding: 5px 10px;
.up_head_1,
.up_head_2 {
display: flex;
flex-direction: column;
align-items: center;
.icon {
width: 80px;
height: 80px;
background-position: center center;
}
}
.up_head_1 .icon {
background-image: url('./img/attack.png');
}
.up_head_2 .icon {
background-image: url('./img/cd.png');
}
}
.right {
.title {
width: 271px;
height: 48px;
background: url('./img/title.png') no-repeat center center;
}
}
.up_1,
.up_2,
.up_3,
.up_active {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
}
.up_1 {
background: url('./img/up_1.png') no-repeat center center;
}
.up_2 {
background: url('./img/up_2.png') no-repeat center center;
}
.up_3 {
background: url('./img/up_3.png') no-repeat center center;
}
.up_active {
background: url('./img/up_active.png') no-repeat center center;
}
}
frontend/src/pages/Character/Skill/components/SkillVP/img/106.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

frontend/src/pages/Character/Skill/components/SkillVP/img/108.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

frontend/src/pages/Character/Skill/components/SkillVP/img/bg.png
Regular → Executable
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

frontend/src/pages/Character/Skill/components/SkillVP/img/selected.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 724 B

frontend/src/pages/Character/Skill/components/SkillVP/index.tsx
+9 -6
View File
@@ -57,7 +57,7 @@ export default defineComponent({
{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-200px flex gap-5px items-center">
<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>
@@ -66,7 +66,7 @@ export default defineComponent({
{renderList(2, (index) => (
<div
class={[
'flex items-center flex-col vp-item',
'flex items-center flex-col vp-item py-10px',
index == 1 ? 'ml-auto' : 'ml-2px',
]}
onClick={() => {
@@ -75,8 +75,9 @@ export default defineComponent({
index,
).value
}}
>
<div class="flex justify-between w-full h-30px px-5px">
> <div class={["box-border w-full h-full pt-5px m-2px",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
modelValue={itemChecked(item.id.toString(), index).value}
@@ -96,13 +97,15 @@ export default defineComponent({
src={getImageURL(item.icon)}
alt={item.name}
/>
<div class={`vp_${index} absolute bottom--8px left-5px z-10`}></div>
</div>
<div class="w-16px"></div>
</div>
<div class="text-14px">{item.vps[index - 1]?.name}</div>
<div class="text-13px mt-5px text-center">{item.vps[index - 1]?.name}</div>
{renderList(item.vps[index - 1]?.desc.split('<br/>') ?? [], (desc) => (
<div class="text-12px text-#816f4c flex items-center">{desc}</div>
<div class="text-12px text-#816f4c text-center leading-none">{desc}</div>
))}
</div>
</div>
))}
</div>
frontend/src/pages/Character/Skill/components/SkillVP/style.scss
+30 -3
View File
@@ -7,10 +7,37 @@
}
.vp-item {
height: 124px;
width: 152px;
height: 120px;
width: 148px;
padding:1px;
display: flex;
align-items: center;
justify-content: center;
background-image: url(./img/bg.png);
padding:5px 10px ;
// padding:5px 10px ;
box-sizing: border-box;
}
.selected {
background-image: url(./img/selected.png);
background-repeat: no-repeat;
background-position: center center;
background-size: calc(100% - 2.5px) calc(100% + 2.5px);
}
.vp_1{
width: 18px;
height: 18px;
background-position: center center;
background-repeat: no-repeat;
background-image: url(../img/vp_1.png);
}
.vp_2 {
width: 18px;
height: 18px;
background-position: center center;
background-repeat: no-repeat;
background-image: url(../img/vp_2.png);
}
}
frontend/src/pages/Character/Skill/components/img/up_1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1001 B

frontend/src/pages/Character/Skill/components/img/up_2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

frontend/src/pages/Character/Skill/components/img/vp_1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 736 B

frontend/src/pages/Character/Skill/components/img/vp_2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 681 B

frontend/src/pages/Character/Skill/index.vue
+14 -5
View File
@@ -14,7 +14,7 @@
@click="tab = 1"
:class="{ active: tab === 1 }"
>
技能VP
技能定制
</div>
<!-- <div class="w-auto text-18px flex items-center justify-center !font-normal">|</div>
<div
@@ -30,7 +30,7 @@
<calc-tab :value="1">技能VP</calc-tab>
<calc-tab :value="2">技能突破</calc-tab>
</calc-tabs> -->
<div class="h-90vh w-620px overflow-x-hidden bg-#202020">
<div class="h-90vh w-570px overflow-x-hidden bg-#101012">
<div class="overflow-y-auto h-full" v-if="tab === 0">
<SkillTree
:skills="infoStore.skills"
@@ -39,12 +39,14 @@
></SkillTree>
</div>
<div v-if="tab === 1" class="flex flex-col overflow-y-hidden h-full">
<SkillReinforce
<div class="item-head">技能进化</div>
<SkillUP
class="flex-1"
:skills="infoStore.skills"
v-model:lvInfo="configStore.config.skills"
v-model:bindAwake="configStore.config.bindAwake"
></SkillReinforce>
></SkillUP>
<div class="item-head">技能突破</div>
<div class="flex-1 overflow-y-auto w-full">
<SkillVP
:skills="infoStore.skills"
@@ -61,7 +63,7 @@
import { useInfoStore } from '@/stores/info'
import SkillTree from './components/SkillTree'
import SkillVP from './components/SkillVP'
import SkillReinforce from './components/SkillReinforce'
import SkillUP from './components/SkillUP'
import { useConfigStore } from '@/stores'
const props = defineProps<{
alter: string
@@ -97,4 +99,11 @@ const configStore = useConfigStore()
transform: translate(0, 50%);
}
}
.item-head {
background: linear-gradient(#2b2817, #171407);
border-top: 1px solid #423d2c;
border-bottom: 1px solid #211d15;
text-align: center;
}
</style>