diff --git a/frontend/src/api/info/type.ts b/frontend/src/api/info/type.ts index f2b3e0a4..22e9d098 100644 --- a/frontend/src/api/info/type.ts +++ b/frontend/src/api/info/type.ts @@ -84,7 +84,7 @@ export interface ISkill { maxLv: number bind: boolean hasVP: boolean - hasReinforce: boolean + hasUP: boolean vps: { name: string desc: string diff --git a/frontend/src/assets/img/icon/exchange.png b/frontend/src/assets/img/icon/exchange.png index 8ce035c8..8d1279ae 100644 Binary files a/frontend/src/assets/img/icon/exchange.png and b/frontend/src/assets/img/icon/exchange.png differ diff --git a/frontend/src/assets/img/icon/exchange.svg b/frontend/src/assets/img/icon/exchange.svg new file mode 100644 index 00000000..5c6a0614 --- /dev/null +++ b/frontend/src/assets/img/icon/exchange.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/icon/exchange_active.png b/frontend/src/assets/img/icon/exchange_active.png index 7e5fa308..6de8ffaf 100644 Binary files a/frontend/src/assets/img/icon/exchange_active.png and b/frontend/src/assets/img/icon/exchange_active.png differ diff --git a/frontend/src/assets/img/icon/exchange_active.svg b/frontend/src/assets/img/icon/exchange_active.svg new file mode 100644 index 00000000..83847eb5 --- /dev/null +++ b/frontend/src/assets/img/icon/exchange_active.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/icon/exchange_disabled.png b/frontend/src/assets/img/icon/exchange_disabled.png new file mode 100644 index 00000000..d701bb6b Binary files /dev/null and b/frontend/src/assets/img/icon/exchange_disabled.png differ diff --git a/frontend/src/assets/img/icon/exchange_disabled.svg b/frontend/src/assets/img/icon/exchange_disabled.svg new file mode 100644 index 00000000..4438229c --- /dev/null +++ b/frontend/src/assets/img/icon/exchange_disabled.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/icon/exchange_hover.png b/frontend/src/assets/img/icon/exchange_hover.png index 0c60acce..ba963c97 100644 Binary files a/frontend/src/assets/img/icon/exchange_hover.png and b/frontend/src/assets/img/icon/exchange_hover.png differ diff --git a/frontend/src/assets/img/icon/exchange_hover.svg b/frontend/src/assets/img/icon/exchange_hover.svg new file mode 100644 index 00000000..43a5a168 --- /dev/null +++ b/frontend/src/assets/img/icon/exchange_hover.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/pages/Character/Skill/components/SkillReinforce/index.tsx b/frontend/src/pages/Character/Skill/components/SkillReinforce/index.tsx deleted file mode 100644 index b6ddb500..00000000 --- a/frontend/src/pages/Character/Skill/components/SkillReinforce/index.tsx +++ /dev/null @@ -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, - default: () => [], - }, - lvInfo: { - type: Object as PropType>, - 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({ - 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 ? ( -
-
-
- {renderList(3, (index) => ( - <> -
-
- - {renderList(skills(index).value, (item) => ( - <> - - {item.name} - - - ))} - -
- exchange(index)}> -
- - {renderList(skills(index).value, (item) => ( - <> - - {item.name} - - - ))} - -
-
- - ))} -
-
-
- {renderList(skills().value, (item) => ( -
- {item.name} -
- ))} - {renderList(36 - skills().value.length, (item) => ( -
- ))} -
-
- {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}%
技能冷却时间 -15%` - } - } - - return skill ? ( -
-
- {skill.name} -
-
-
- ) : ( - <> - ) - }, - )} -
-
-
-
- ) : ( - <> - )} - - ) - }, -}) diff --git a/frontend/src/pages/Character/Skill/components/SkillReinforce/style.scss b/frontend/src/pages/Character/Skill/components/SkillReinforce/style.scss deleted file mode 100644 index 8219755d..00000000 --- a/frontend/src/pages/Character/Skill/components/SkillReinforce/style.scss +++ /dev/null @@ -1,7 +0,0 @@ -.skill-reinforce { - width: 620px; - height: 334px; - background-image: url('./img/bg.png'); - background-size: 100% 100%; - background-color: black; -} diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/106.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/106.png new file mode 100644 index 00000000..c01bbc9d Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/106.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/107.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/107.png new file mode 100644 index 00000000..9a1e4cd0 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/107.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/108.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/108.png new file mode 100644 index 00000000..199703d9 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/108.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/attack.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/attack.png new file mode 100644 index 00000000..4201749d Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/attack.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillReinforce/img/bg.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/bg.png similarity index 100% rename from frontend/src/pages/Character/Skill/components/SkillReinforce/img/bg.png rename to frontend/src/pages/Character/Skill/components/SkillUP/img/bg.png diff --git a/frontend/src/pages/Character/Skill/components/SkillReinforce/img/bgBack.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/bgBack.png similarity index 100% rename from frontend/src/pages/Character/Skill/components/SkillReinforce/img/bgBack.png rename to frontend/src/pages/Character/Skill/components/SkillUP/img/bgBack.png diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/cd.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/cd.png new file mode 100644 index 00000000..8c25d6e1 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/cd.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/title.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/title.png new file mode 100644 index 00000000..1a88807b Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/title.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/up_1.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/up_1.png new file mode 100644 index 00000000..33194445 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/up_1.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/up_2.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/up_2.png new file mode 100644 index 00000000..5b6659a9 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/up_2.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/up_3.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/up_3.png new file mode 100644 index 00000000..7c48850a Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/up_3.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/img/up_active.png b/frontend/src/pages/Character/Skill/components/SkillUP/img/up_active.png new file mode 100644 index 00000000..34c19b9b Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillUP/img/up_active.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/index.tsx b/frontend/src/pages/Character/Skill/components/SkillUP/index.tsx new file mode 100644 index 00000000..d29808b0 --- /dev/null +++ b/frontend/src/pages/Character/Skill/components/SkillUP/index.tsx @@ -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, + default: () => [], + }, + lvInfo: { + type: Object as PropType>, + 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({ + 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 ? ( +
+
+
+
+
+
+
+
技能攻击力增加
+
+
+
+
+ 技能冷却时间减少 +
+ 技能攻击力增加 +
+
+
+
+ {renderList(3, (index) => ( + <> +
+
+ + {renderList(skills(index).value, (item) => ( + <> + + {item.name} + + + ))} + +
+ exchange(index)}> +
+ + {renderList(skills(index).value, (item) => ( + <> + + {item.name} + + + ))} + +
+
+ + ))} +
+ +
+
+
+
目标技能
+
+ {renderList(skills().value, (item) => ( +
+ {item.name} +
+ ))} + {renderList(35 - skills().value.length, (item) => ( +
+ ))} +
+
+ {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%
技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%` + } + } + + return skill ? ( +
+
+ {skill.name} +
+
+
+ ) : ( + <> + ) + }, + )} +
+
+ {/*
+ {renderList(3, (index) => ( + <> +
+
+ + {renderList(skills(index).value, (item) => ( + <> + + {item.name} + + + ))} + +
+ exchange(index)}> +
+ + {renderList(skills(index).value, (item) => ( + <> + + {item.name} + + + ))} + +
+
+ + ))} +
+
+
+ {renderList(skills().value, (item) => ( +
+ {item.name} +
+ ))} + {renderList(36 - skills().value.length, (item) => ( +
+ ))} +
+
+ {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}%
技能冷却时间 -15%` + } + } + + return skill ? ( +
+
+ {skill.name} +
+
+
+ ) : ( + <> + ) + }, + )} +
+
*/} +
+
+ ) : ( + <> + )} + + ) + }, +}) diff --git a/frontend/src/pages/Character/Skill/components/SkillUP/style.scss b/frontend/src/pages/Character/Skill/components/SkillUP/style.scss new file mode 100644 index 00000000..2daf6b2e --- /dev/null +++ b/frontend/src/pages/Character/Skill/components/SkillUP/style.scss @@ -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; + } +} diff --git a/frontend/src/pages/Character/Skill/components/SkillVP/img/106.png b/frontend/src/pages/Character/Skill/components/SkillVP/img/106.png new file mode 100644 index 00000000..10485dff Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillVP/img/106.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillVP/img/108.png b/frontend/src/pages/Character/Skill/components/SkillVP/img/108.png new file mode 100644 index 00000000..199703d9 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillVP/img/108.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillVP/img/bg.png b/frontend/src/pages/Character/Skill/components/SkillVP/img/bg.png old mode 100644 new mode 100755 index e8019bfb..1404d6b8 Binary files a/frontend/src/pages/Character/Skill/components/SkillVP/img/bg.png and b/frontend/src/pages/Character/Skill/components/SkillVP/img/bg.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillVP/img/selected.png b/frontend/src/pages/Character/Skill/components/SkillVP/img/selected.png new file mode 100644 index 00000000..9a1e4cd0 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillVP/img/selected.png differ diff --git a/frontend/src/pages/Character/Skill/components/SkillVP/index.tsx b/frontend/src/pages/Character/Skill/components/SkillVP/index.tsx index 40453db3..66f434be 100644 --- a/frontend/src/pages/Character/Skill/components/SkillVP/index.tsx +++ b/frontend/src/pages/Character/Skill/components/SkillVP/index.tsx @@ -57,7 +57,7 @@ export default defineComponent({ {renderList(skills.value, (item) => (
{item.learnLv}
-
+
{item.name}
@@ -66,7 +66,7 @@ export default defineComponent({ {renderList(2, (index) => (
{ @@ -75,8 +75,9 @@ export default defineComponent({ index, ).value }} - > -
+ >
+
+
+
-
{item.vps[index - 1]?.name}
+
{item.vps[index - 1]?.name}
{renderList(item.vps[index - 1]?.desc.split('
') ?? [], (desc) => ( -
{desc}
+
{desc}
))} +
))}
diff --git a/frontend/src/pages/Character/Skill/components/SkillVP/style.scss b/frontend/src/pages/Character/Skill/components/SkillVP/style.scss index 41c1df12..4cd7d58e 100644 --- a/frontend/src/pages/Character/Skill/components/SkillVP/style.scss +++ b/frontend/src/pages/Character/Skill/components/SkillVP/style.scss @@ -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); + } } diff --git a/frontend/src/pages/Character/Skill/components/img/up_1.png b/frontend/src/pages/Character/Skill/components/img/up_1.png new file mode 100644 index 00000000..3ee58261 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/img/up_1.png differ diff --git a/frontend/src/pages/Character/Skill/components/img/up_2.png b/frontend/src/pages/Character/Skill/components/img/up_2.png new file mode 100644 index 00000000..86c62218 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/img/up_2.png differ diff --git a/frontend/src/pages/Character/Skill/components/img/vp_1.png b/frontend/src/pages/Character/Skill/components/img/vp_1.png new file mode 100644 index 00000000..afda59f9 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/img/vp_1.png differ diff --git a/frontend/src/pages/Character/Skill/components/img/vp_2.png b/frontend/src/pages/Character/Skill/components/img/vp_2.png new file mode 100644 index 00000000..a345f1b9 Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/img/vp_2.png differ diff --git a/frontend/src/pages/Character/Skill/index.vue b/frontend/src/pages/Character/Skill/index.vue index c33af03e..54f00739 100644 --- a/frontend/src/pages/Character/Skill/index.vue +++ b/frontend/src/pages/Character/Skill/index.vue @@ -14,7 +14,7 @@ @click="tab = 1" :class="{ active: tab === 1 }" > - 技能VP + 技能定制
-
+
- 技能进化
+ + > +
技能突破
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts index c3061eae..cd76774c 100644 --- a/frontend/src/stores/config.ts +++ b/frontend/src/stores/config.ts @@ -32,7 +32,7 @@ export interface IConfigEquip { } export interface IConfig { - skills: Record + skills: Record equips: Record jades: Record< string, @@ -161,7 +161,7 @@ export const useConfigStore = defineStore('configStore', () => { (config.value.skills[id] = { lv: infoStore.skills.find((skill) => skill.id.toString() === id)?.maxLearnLv ?? 0, vp: 0, - reinforce: 0, + up: 0, }) }) ;( diff --git a/frontend/src/style/icon.scss b/frontend/src/style/icon.scss index 7624da1f..3eef5864 100644 --- a/frontend/src/style/icon.scss +++ b/frontend/src/style/icon.scss @@ -3,9 +3,10 @@ $width: 20px, $height: 20px, $size: 100% 100%, - $position: center center + $position: center center, + $img-type: 'png' ) { - background-image: url('@/assets/img/icon/#{$icon-name}.png') !important; + background-image: url('@/assets/img/icon/#{$icon-name}.#{$img-type}') !important; background-repeat: no-repeat !important; background-size: $size !important; background-position: $position !important; @@ -13,13 +14,14 @@ height: $height !important; &:hover { - background-image: url('@/assets/img/icon/#{$icon-name}_hover.png') !important; + background-image: url('@/assets/img/icon/#{$icon-name}_hover.#{$img-type}') !important; } &:active { - background-image: url('@/assets/img/icon/#{$icon-name}_active.png') !important; + background-image: url('@/assets/img/icon/#{$icon-name}_active.#{$img-type}') !important; + height: $height - 2px !important; } &:disabled { - background-image: url('@/assets/img/icon/#{$icon-name}_disabled.png') !important; + background-image: url('@/assets/img/icon/#{$icon-name}_disabled.#{$img-type}') !important; } } @@ -112,7 +114,7 @@ } .icon-exchange { - @include icon-style('exchange', 20px, 20px, auto 100%); + @include icon-style('exchange', 22px, 20px, auto 100%, center center, svg); }