Compare commits
No commits in common. '14458d31c3ffd922d48496b39d267d98d52d59d1' and '177a4dfe324841d4b89e53263ac3fd047af5dc97' have entirely different histories.
14458d31c3
...
177a4dfe32
20 changed files with 46 additions and 397 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@ -1,228 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="inherited" v-if="target && source"> |
|
||||||
<div class="coins"> |
|
||||||
{{ t('coins.0') }}:{{ useCoins }} |
|
||||||
</div> |
|
||||||
<div class="message"> |
|
||||||
<p>{{ t('inherited.1') + needCoins }}</p> |
|
||||||
<div class="tips"> |
|
||||||
<p>- {{ t('inherited.2') }}</p> |
|
||||||
<p>- {{ t('inherited.3') }}</p> |
|
||||||
<p>- {{ t('inherited.4') }}</p> |
|
||||||
</div> |
|
||||||
<div class='btn-div'> |
|
||||||
<button class="button" @click="inherited">{{ t('inheritedConfirm.0') }}</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="equip"> |
|
||||||
<EquipIcon :equip="target" /> |
|
||||||
<div class='name' :style="{ color: target.quality.color }"> |
|
||||||
{{ t(target.type + '.' + target.base.name + '.0') }} |
|
||||||
{{ '(+' + target.strengthenLv + ')' }} |
|
||||||
<span>➡</span> |
|
||||||
{{ '(+' + source.strengthenLv + ')' }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="entry"> |
|
||||||
<div> |
|
||||||
<div v-for="v in target.base.entry" :key="v.id"> |
|
||||||
{{ t(v.type + '.0') }} : + {{ strengthenValue(v.value, target.strengthenLv) }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="arror">➡</div> |
|
||||||
<div> |
|
||||||
<div v-for="v in target.base.entry" :key="v.id"> |
|
||||||
<span>{{ strengthenValue(v.value, source.strengthenLv) }}</span> |
|
||||||
<span class="set"> |
|
||||||
⬆({{ strengthenValue(v.value, source.strengthenLv) - |
|
||||||
strengthenValue(v.value, target.strengthenLv) }}) |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="equip"> |
|
||||||
<EquipIcon :equip="source" /> |
|
||||||
<div class='name' :style="{ color: source.quality.color }"> |
|
||||||
{{ t(source.type + '.' + source.base.name + '.0') }} |
|
||||||
{{ '(+' + source.strengthenLv + ')' }} |
|
||||||
<span>➡</span> |
|
||||||
{{ '(+0)' }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="entry"> |
|
||||||
<div> |
|
||||||
<div v-for="v in source.base.entry" :key="v.id"> |
|
||||||
{{ t(v.type + '.0') }} : + {{ strengthenValue(v.value, source.strengthenLv) }} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="arror">➡</div> |
|
||||||
<div> |
|
||||||
<div v-for="v in source.base.entry" :key="v.id"> |
|
||||||
<span>{{ strengthenValue(v.value, 0) }}</span> |
|
||||||
<span class="down"> |
|
||||||
⬇({{ strengthenValue(v.value, source.strengthenLv) - strengthenValue(v.value, 0) }}) |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<Confirm ref="confirm" width="8rem" :tip="t('inheritedConfirm.1')" :confirm="t('inheritedConfirm.2')" |
|
||||||
:cancel="t('inheritedConfirm.3')" @confirm="confirmInherited" /> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { useStore } from "vuex"; |
|
||||||
import { computed, onMounted, ref } from "vue"; |
|
||||||
import { useI18n } from "vue3-i18n"; |
|
||||||
import { strengthenAvgCoins, strengthenValue } from "@/tool"; |
|
||||||
import { EquipIcon, Confirm } from "@/components"; |
|
||||||
|
|
||||||
|
|
||||||
const { t } = useI18n(); |
|
||||||
const { state, commit, dispatch } = useStore(); |
|
||||||
const useCoins = computed(() => { |
|
||||||
return state.playerAttribute.coins; |
|
||||||
}) |
|
||||||
const needCoins = computed(() => { |
|
||||||
const need = strengthenAvgCoins(prop.target.lv, prop.source.strengthenLv) |
|
||||||
const used = strengthenAvgCoins(prop.source.lv, prop.source.strengthenLv) |
|
||||||
return need > used ? need - used : 0; |
|
||||||
}) |
|
||||||
const confirm = ref(); |
|
||||||
const emit = defineEmits(['close']) |
|
||||||
|
|
||||||
const prop = defineProps({ |
|
||||||
target: { |
|
||||||
type: Object, |
|
||||||
default: null |
|
||||||
}, |
|
||||||
source: { |
|
||||||
type: Object, |
|
||||||
default: null |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
const inherited = (e) => { |
|
||||||
confirm.value.open(0, e) |
|
||||||
} |
|
||||||
|
|
||||||
const confirmInherited = () => { |
|
||||||
if (useCoins.value < needCoins.value) { |
|
||||||
commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", }); |
|
||||||
return |
|
||||||
} |
|
||||||
prop.target.strengthenLv = prop.source.strengthenLv; |
|
||||||
prop.source.strengthenLv = 0; |
|
||||||
commit("set_sys_info", { msg: t('inheritedConfirm.4'), type: "win", }); |
|
||||||
emit('close'); |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { }); |
|
||||||
</script> |
|
||||||
<style lang="scss" scoped> |
|
||||||
.inherited { |
|
||||||
color: #f1f1f1; |
|
||||||
width: 25rem; |
|
||||||
height: auto; |
|
||||||
background: rgba(0, 0, 0, 0.2); |
|
||||||
border: #393839; |
|
||||||
border-radius: 0.4rem; |
|
||||||
padding: 0 1rem; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.coins { |
|
||||||
display: flex; |
|
||||||
align-items: center !important; |
|
||||||
justify-content: center; |
|
||||||
font-size: 1.1rem; |
|
||||||
color: #2fe20f; |
|
||||||
} |
|
||||||
|
|
||||||
.message { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
border-bottom: 1px solid #ccc; |
|
||||||
padding-bottom: 0.8rem; |
|
||||||
|
|
||||||
p { |
|
||||||
margin: 0.7rem; |
|
||||||
} |
|
||||||
|
|
||||||
.tips { |
|
||||||
padding-left: 1.3rem; |
|
||||||
|
|
||||||
p { |
|
||||||
color: #999; |
|
||||||
font-size: 0.8rem; |
|
||||||
margin: 0rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.btn-div { |
|
||||||
padding: 0.1rem; |
|
||||||
display: flex; |
|
||||||
justify-content: flex-end; |
|
||||||
padding-right: 2rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.equip { |
|
||||||
display: flex; |
|
||||||
width: 100%; |
|
||||||
justify-content: center; |
|
||||||
margin-top: 1rem; |
|
||||||
|
|
||||||
.name { |
|
||||||
height: 3.5rem; |
|
||||||
line-height: 3.5rem; |
|
||||||
margin-left: 1.6rem; |
|
||||||
font-size: 1.2rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.entry { |
|
||||||
width: 100%; |
|
||||||
padding: 1rem; |
|
||||||
display: flex; |
|
||||||
justify-content: space-around; |
|
||||||
font-size: 1.2rem; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
div { |
|
||||||
text-align: left; |
|
||||||
|
|
||||||
&>div { |
|
||||||
height: 2rem; |
|
||||||
} |
|
||||||
|
|
||||||
.set { |
|
||||||
color: #2fe20f; |
|
||||||
margin-left: 0.7rem; |
|
||||||
} |
|
||||||
|
|
||||||
.down { |
|
||||||
color: #f70d05; |
|
||||||
margin-left: 0.7rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) { |
|
||||||
.inherited { |
|
||||||
width: 23rem; |
|
||||||
} |
|
||||||
|
|
||||||
.equip .name { |
|
||||||
height: 2.5rem; |
|
||||||
line-height: 2.5rem; |
|
||||||
margin-left: 1rem; |
|
||||||
font-size: 1rem; |
|
||||||
} |
|
||||||
|
|
||||||
.entry { |
|
||||||
font-size: 1rem; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,6 +1,4 @@ |
|||||||
const { defineConfig } = require('@vue/cli-service'); |
const { defineConfig } = require('@vue/cli-service') |
||||||
module.exports = defineConfig({ |
module.exports = defineConfig({ |
||||||
productionSourceMap: false, |
transpileDependencies: true |
||||||
transpileDependencies: true, |
}) |
||||||
}); |
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in new issue