Compare commits
22 Commits
| Author | SHA1 | Date |
|---|---|---|
 许孟阳
|
a6388f547a | 3 weeks ago |
|
许孟阳
|
a18345e705 | 3 weeks ago |
|
许孟阳
|
9483e8b64a | 3 weeks ago |
|
许孟阳
|
89365ef6a4 | 3 weeks ago |
|
许孟阳
|
9af8e0fde9 | 3 weeks ago |
|
许孟阳
|
61b04c730a | 3 weeks ago |
|
许孟阳
|
62931caf59 | 3 weeks ago |
|
许孟阳
|
ac65e22398 | 3 weeks ago |
|
许孟阳
|
e239402c0a | 3 weeks ago |
|
许孟阳
|
ce55ae061f | 3 weeks ago |
|
许孟阳
|
c32bfd3771 | 3 weeks ago |
|
许孟阳
|
8b9e5294fa | 3 weeks ago |
|
许孟阳
|
f4e1316d19 | 3 weeks ago |
|
许孟阳
|
24db1bb57a | 3 weeks ago |
|
许孟阳
|
5d6f934d67 | 3 weeks ago |
|
许孟阳
|
342063128d | 3 weeks ago |
|
许孟阳
|
de495a72b7 | 3 weeks ago |
|
许孟阳
|
1c1f3df89b | 3 weeks ago |
|
许孟阳
|
227de3563f | 3 weeks ago |
|
许孟阳
|
25e44ee376 | 3 weeks ago |
|
许孟阳
|
5d0b6716a7 | 3 weeks ago |
|
许孟阳
|
59e0de0f6b | 3 weeks ago |
57 changed files with 882 additions and 715 deletions
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,24 @@ |
|||||||
|
@media only screen and (max-width: 768px) { |
||||||
|
button { |
||||||
|
height: 1.8rem; |
||||||
|
line-height: 1.6rem; |
||||||
|
padding: 0 0.5rem; |
||||||
|
margin-left: 0.2rem; |
||||||
|
margin-right: 0.2rem; |
||||||
|
font-size: 0.8rem; |
||||||
|
} |
||||||
|
//装备相关功能弹框通用样式 |
||||||
|
.equip-dialog { |
||||||
|
width: 23rem; |
||||||
|
.equip .name { |
||||||
|
height: 2.5rem; |
||||||
|
line-height: 2.5rem; |
||||||
|
margin-left: 1rem; |
||||||
|
font-size: 1rem; |
||||||
|
} |
||||||
|
.entry, |
||||||
|
.extraEntry { |
||||||
|
font-size: 1rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,291 +0,0 @@ |
|||||||
@media screen and (max-width: 768px) { |
|
||||||
} |
|
||||||
|
|
||||||
@media screen and (max-width: 768px) { |
|
||||||
.body, |
|
||||||
html, |
|
||||||
#app { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
* { |
|
||||||
user-select: text !important; |
|
||||||
} |
|
||||||
#app { |
|
||||||
-webkit-tap-highlight-color: transparent; |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
bottom: 0; |
|
||||||
right: 0; |
|
||||||
|
|
||||||
.main { |
|
||||||
.user-status { |
|
||||||
width: calc(50% - 0.12rem); |
|
||||||
height: calc(25% - 0.02rem); |
|
||||||
padding: 0.05rem; |
|
||||||
|
|
||||||
.hp { |
|
||||||
padding-left: 0.08rem; |
|
||||||
border: none; |
|
||||||
height: 0.25rem; |
|
||||||
img { |
|
||||||
width: 0.35rem; |
|
||||||
height: 0.35rem; |
|
||||||
} |
|
||||||
|
|
||||||
.value { |
|
||||||
font-size: 0.18rem; |
|
||||||
} |
|
||||||
} |
|
||||||
.lv { |
|
||||||
padding-left: 0.08rem; |
|
||||||
border: none; |
|
||||||
height: 0.25rem; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 0.35rem; |
|
||||||
height: 0.35rem; |
|
||||||
} |
|
||||||
|
|
||||||
.value { |
|
||||||
font-size: 0.18rem; |
|
||||||
justify-content: space-between; |
|
||||||
padding-right: 0.1rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.other { |
|
||||||
margin-top: 0.02rem; |
|
||||||
padding: 0.04rem; |
|
||||||
border: 1px solid #ccc; |
|
||||||
& > div { |
|
||||||
padding-top: 0.02rem; |
|
||||||
} |
|
||||||
|
|
||||||
img { |
|
||||||
width: 0.3rem; |
|
||||||
height: 0.3rem; |
|
||||||
} |
|
||||||
|
|
||||||
.value { |
|
||||||
font-size: 0.18rem; |
|
||||||
margin-top: 0.04rem; |
|
||||||
span { |
|
||||||
font-size: 0.12rem !important; |
|
||||||
transform: scale(0.8); |
|
||||||
margin-top: -0.02rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.user-item { |
|
||||||
margin-top: 0.12rem; |
|
||||||
width: calc(50% - 0.12rem); |
|
||||||
height: calc(25% - 0.02rem); |
|
||||||
top: 25%; |
|
||||||
left: 0.1rem; |
|
||||||
padding: 0; |
|
||||||
|
|
||||||
& > div { |
|
||||||
height: 25%; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
.title { |
|
||||||
padding: 0 0.1rem; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
.icon { |
|
||||||
width: 0.4rem; |
|
||||||
height: 0.4rem; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 0.35rem; |
|
||||||
height: 0.35rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.name { |
|
||||||
font-size: 0.18rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.uii { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
.gold { |
|
||||||
width: 100%; |
|
||||||
height: 50% !important; |
|
||||||
height: auto; |
|
||||||
margin: 0; |
|
||||||
font-size: 0.12rem; |
|
||||||
padding-right: 0.12rem; |
|
||||||
|
|
||||||
span { |
|
||||||
padding: 0; |
|
||||||
font-size: 0.16rem !important; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.sys-info { |
|
||||||
width: calc(50% - 0.12rem); |
|
||||||
height: 50%; |
|
||||||
bottom: auto; |
|
||||||
right: 0.1rem; |
|
||||||
top: 0.1rem; |
|
||||||
left: auto; |
|
||||||
padding: 0.05rem; |
|
||||||
font-size: 0.12rem; |
|
||||||
|
|
||||||
.info { |
|
||||||
i { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.clear { |
|
||||||
top: auto; |
|
||||||
bottom: 0.1rem; |
|
||||||
right: 0.1rem; |
|
||||||
background: #000; |
|
||||||
border: 1px solid #ccc; |
|
||||||
border-radius: 0.06rem; |
|
||||||
padding: 0.02rem 0.04rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.map { |
|
||||||
height: calc(50% - 0.24rem); |
|
||||||
right: 0.8rem; |
|
||||||
left: 0.1rem; |
|
||||||
top: auto; |
|
||||||
bottom: 0.1rem; |
|
||||||
|
|
||||||
.plan { |
|
||||||
height: 0.6rem; |
|
||||||
} |
|
||||||
|
|
||||||
.dungeons { |
|
||||||
img { |
|
||||||
width: 0.35rem; |
|
||||||
height: 0.35rem; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.event-icon { |
|
||||||
width: 0.35rem; |
|
||||||
height: 0.35rem; |
|
||||||
background-size: 100%; |
|
||||||
|
|
||||||
span { |
|
||||||
font-size: 0.13rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.menu { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
left: auto; |
|
||||||
right: 0.1rem; |
|
||||||
top: 52%; |
|
||||||
|
|
||||||
& > div { |
|
||||||
margin: 0.03rem; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 0.35rem; |
|
||||||
height: 0.35rem; |
|
||||||
} |
|
||||||
|
|
||||||
span { |
|
||||||
font-size: 0.22rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.dialog-backpackPanel { |
|
||||||
transform: translate(-50%, -50%) scale(0.8); |
|
||||||
} |
|
||||||
|
|
||||||
.dialog { |
|
||||||
top: 50% !important; |
|
||||||
left: 50% !important; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
|
|
||||||
.item-close { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
.weapon, |
|
||||||
.armor, |
|
||||||
.ring, |
|
||||||
.neck { |
|
||||||
& > div { |
|
||||||
width: 2.2rem; |
|
||||||
font-size: 0.13rem; |
|
||||||
|
|
||||||
.icon { |
|
||||||
width: 0.45rem; |
|
||||||
height: 0.45rem; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 0.4rem; |
|
||||||
height: 0.4rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
padding: 0.06rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.drawer-update { |
|
||||||
width: 100% !important; |
|
||||||
} |
|
||||||
.qa { |
|
||||||
left: 1.5rem; |
|
||||||
width: 0.45rem; |
|
||||||
height: 0.5rem; |
|
||||||
span { |
|
||||||
font-size: 0.12rem !important; |
|
||||||
} |
|
||||||
img { |
|
||||||
width: 0.25rem; |
|
||||||
height: 0.25rem; |
|
||||||
} |
|
||||||
} |
|
||||||
.extras { |
|
||||||
left: 0.8rem; |
|
||||||
width: 0.45rem; |
|
||||||
height: 0.5rem; |
|
||||||
span { |
|
||||||
font-size: 0.12rem !important; |
|
||||||
} |
|
||||||
img { |
|
||||||
width: 0.25rem; |
|
||||||
height: 0.25rem; |
|
||||||
} |
|
||||||
} |
|
||||||
.setting { |
|
||||||
left: 0.1rem; |
|
||||||
width: 0.45rem; |
|
||||||
height: 0.5rem; |
|
||||||
span { |
|
||||||
font-size: 0.12rem !important; |
|
||||||
} |
|
||||||
img { |
|
||||||
width: 0.25rem; |
|
||||||
height: 0.25rem; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<template> |
||||||
|
<div class="equip-select"> |
||||||
|
<Equip v-if="equip" :equip="equip" @click="showSlect = true" /> |
||||||
|
<span v-if="!equip" class="icon" @click="showSlect = true"> |
||||||
|
<span> + </span> |
||||||
|
</span> |
||||||
|
<div v-if="showSlect" class="select"> |
||||||
|
<div class="option" v-for="item in equips" @click="choseEquip(item)"> |
||||||
|
<EquipIcon :equip="item" @mouseleave="commit('close_equip_tip')" |
||||||
|
@mouseover="commit('show_equip_tip', { equip: item, compare: false, e: $event })" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { useStore } from "vuex"; |
||||||
|
import { reactive, onMounted, ref, watch } from "vue"; |
||||||
|
import { useI18n } from "vue3-i18n"; |
||||||
|
import Equip from "./equip.vue"; |
||||||
|
import { EquipIcon } from "@/components"; |
||||||
|
|
||||||
|
const { t } = useI18n(); |
||||||
|
const { state, commit, dispatch } = useStore(); |
||||||
|
const equip = ref<Object>(); |
||||||
|
const showSlect = ref(false); |
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
const prop = defineProps({ |
||||||
|
modelValue: { |
||||||
|
type: Object, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
equips: { |
||||||
|
type: Array as () => Object[], |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}); |
||||||
|
watch(equip, (n, o) => { |
||||||
|
emit('update:modelValue', n); |
||||||
|
if (!n) { |
||||||
|
commit('close_equip_tip'); |
||||||
|
} |
||||||
|
}) |
||||||
|
watch(() => prop.modelValue, (n, o) => { |
||||||
|
equip.value = n; |
||||||
|
}) |
||||||
|
|
||||||
|
const choseEquip = item => { |
||||||
|
equip.value = item; |
||||||
|
showSlect.value = false; |
||||||
|
commit('close_equip_tip'); |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { }); |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.equip-select { |
||||||
|
cursor: pointer; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.select { |
||||||
|
position: absolute; |
||||||
|
top: 3.5rem; |
||||||
|
left: 0; |
||||||
|
width: 5rem; |
||||||
|
height: 15rem; |
||||||
|
z-index: 99; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.icon { |
||||||
|
width: 3.5rem; |
||||||
|
height: 3.5rem; |
||||||
|
background: #000; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 0.3rem; |
||||||
|
box-shadow: inset 0 0 7px 2px #a1a1a1b8; |
||||||
|
font-size: 2rem; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
<template> |
||||||
|
<div class="fusion-equip"> |
||||||
|
<EquipIcon :equip="equip" @mouseleave="commit('close_equip_tip')" @click="emit('click')" |
||||||
|
@mouseover="commit('show_equip_tip', { equip: equip, compare: false, e: $event })"> |
||||||
|
</EquipIcon> |
||||||
|
<div class="entry"> |
||||||
|
<span v-if="entry">{{ t(entry.type + '.0') }} : {{ entry.showVal }}({{ entry.percent }}%)</span> |
||||||
|
<span v-if="!entry">{{ ft('empty') }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { useStore } from "vuex"; |
||||||
|
import { reactive, onMounted, ref, computed } from "vue"; |
||||||
|
import { useI18n } from "vue3-i18n"; |
||||||
|
import { createt } from "@/config/i18n"; |
||||||
|
import { EquipIcon } from "@/components"; |
||||||
|
|
||||||
|
const { t } = useI18n(); |
||||||
|
const ft = createt('fusion.'); |
||||||
|
const { state, commit, dispatch } = useStore(); |
||||||
|
const emit = defineEmits(['click']) |
||||||
|
const entry = computed(() => { |
||||||
|
if (prop.equip) { |
||||||
|
return prop.equip.fusionEntry; |
||||||
|
} |
||||||
|
return null; |
||||||
|
}) |
||||||
|
|
||||||
|
const prop = defineProps({ |
||||||
|
equip: { |
||||||
|
type: Object, |
||||||
|
default: null |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
onMounted(() => { }); |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.fusion-equip { |
||||||
|
display: flex; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.entry { |
||||||
|
padding-left: 1rem; |
||||||
|
font-size: 1.2rem; |
||||||
|
line-height: 3.5rem; |
||||||
|
text-align: left; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,134 @@ |
|||||||
|
<template> |
||||||
|
<div class="equip-dialog" v-if="equip"> |
||||||
|
<div class="coins"> |
||||||
|
{{ t('coins.0') }}:{{ userCoins }} |
||||||
|
</div> |
||||||
|
<Tooltip :infos="[ft('desc.1'), ft('desc.2'), ft('desc.3'), ft('desc.4')]" width="8rem"> |
||||||
|
<div class="descript">- {{ ft('desc.0') }} -</div> |
||||||
|
</Tooltip> |
||||||
|
<Equip :equip="equip" /> |
||||||
|
<EquipSelect v-model="material" :equips="materials" /> |
||||||
|
<div class='btn-div'> |
||||||
|
<button class="button" @click="confirm.open(0, $event)" :disabled="!material"> |
||||||
|
{{ ft('need') }}{{ needCoins }} {{ ft('title') }} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Confirm ref="confirm" width="8rem" :tip="ft('confirm.0')" :confirm="ft('confirm.1')" :cancel="ft('confirm.2')" |
||||||
|
@confirm="confirmFusion" /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { useStore } from "vuex"; |
||||||
|
import { reactive, onMounted, ref, computed, watch } from "vue"; |
||||||
|
import { useI18n } from "vue3-i18n"; |
||||||
|
import { createt } from "@/config/i18n"; |
||||||
|
import { Tooltip, Confirm } from "@/components"; |
||||||
|
import Equip from "./equip.vue"; |
||||||
|
import EquipSelect from "./equip-select.vue"; |
||||||
|
import * as config from "@/config"; |
||||||
|
|
||||||
|
|
||||||
|
const { t } = useI18n(); |
||||||
|
const ft = createt('fusion.'); |
||||||
|
const { state, commit, dispatch } = useStore(); |
||||||
|
const userCoins = computed(() => { |
||||||
|
return state.playerAttribute.coins; |
||||||
|
}) |
||||||
|
const material = ref(); |
||||||
|
const materials = ref<any>([]) |
||||||
|
const confirm = ref(); |
||||||
|
const rase = computed(() => { |
||||||
|
if (!prop.equip || !material.value) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
const f1 = prop.equip.fusion; |
||||||
|
const f2 = material.value.fusion; |
||||||
|
const e1 = prop.equip.fusionEntry; |
||||||
|
const e2 = material.value.fusionEntry; |
||||||
|
if (f1 == 0 || !e1) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
if (f2 == 0 || !e2) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
return f1 == f2 && e1.type == e2.type; |
||||||
|
}); |
||||||
|
|
||||||
|
const level = computed(() => { |
||||||
|
let fusion = prop.equip.fusion; |
||||||
|
return rase.value ? fusion + 1 : fusion; |
||||||
|
}) |
||||||
|
const needCoins = computed(() => { |
||||||
|
let factor = level.value - 1; |
||||||
|
factor < 0 && (factor = 0); |
||||||
|
return 100000000 * (2 ** factor); |
||||||
|
}) |
||||||
|
|
||||||
|
const prop = defineProps({ |
||||||
|
equip: { |
||||||
|
type: Object, |
||||||
|
default: null |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const setMaterils = () => { |
||||||
|
if (level.value >= 3) { |
||||||
|
materials.value = []; |
||||||
|
return; |
||||||
|
} |
||||||
|
materials.value = state.grid.filter(equip => { |
||||||
|
if (!equip) return false; |
||||||
|
if (equip.quality.extraQuality != config.extra_quality[1]) return false; |
||||||
|
if (equip.base.name != prop.equip.base.name) return false; |
||||||
|
if (equip == prop.equip) return false; |
||||||
|
if (prop.equip.fusion > 1 && (equip.fusion <= 1 || equip.fusionEntry.type != prop.equip.fusionEntry.type)) return false; |
||||||
|
return true; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
watch(() => prop.equip, (n) => { |
||||||
|
if (n) { |
||||||
|
setMaterils(); |
||||||
|
material.value = null; |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const confirmFusion = () => { |
||||||
|
if (!material.value) { |
||||||
|
return; |
||||||
|
} |
||||||
|
if (userCoins.value < needCoins.value) { |
||||||
|
commit("set_sys_info", { msg: t('stNoCoins'), type: "warning", }); |
||||||
|
return |
||||||
|
} |
||||||
|
const equip = prop.equip; |
||||||
|
const creator = config[equip.type + 'ExtraEntry']; |
||||||
|
const fusion = level.value; |
||||||
|
const extraQuality = config.extra_quality[fusion - 2]; |
||||||
|
let lv = 100; |
||||||
|
extraQuality && (lv += config.extra_quality_lv); |
||||||
|
const type = fusion > 1 && rase.value ? equip.fusionEntry.type : null; |
||||||
|
const entry = creator(config.qualitys[5], lv, extraQuality, type); |
||||||
|
commit("add_player_coins", -1 * needCoins.value); |
||||||
|
for (let i = 0; i < state.grid.length; i++) { |
||||||
|
const tmp = state.grid[i]; |
||||||
|
if (tmp == material.value) { |
||||||
|
state.grid[i] = null; |
||||||
|
} |
||||||
|
} |
||||||
|
material.value = null; |
||||||
|
equip.fusion = fusion; |
||||||
|
equip.fusionEntry = entry; |
||||||
|
dispatch('saveGame'); |
||||||
|
setMaterils(); |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { }); |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.btn-div { |
||||||
|
width: 100%; |
||||||
|
padding: 1rem; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import Fusion from "./fusion.vue"; |
||||||
|
|
||||||
|
export default Fusion; |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import EquipMenu from './equip-menu.vue'; |
||||||
|
|
||||||
|
export default EquipMenu; |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
import Grid from './grid.vue'; |
||||||
|
|
||||||
|
export default Grid; |
||||||
Loading…
Reference in new issue