36 changed files with 472 additions and 543 deletions
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,24 @@
@@ -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 @@
@@ -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 @@
@@ -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,52 @@
@@ -0,0 +1,52 @@
|
||||
<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; |
||||
} |
||||
|
||||
.entry { |
||||
padding-left: 1rem; |
||||
font-size: 1.2rem; |
||||
line-height: 3.5rem; |
||||
text-align: left; |
||||
color: white; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,128 @@
@@ -0,0 +1,128 @@
|
||||
<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')]" 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(() => { |
||||
return (level.value + 1) * 100000000; |
||||
}) |
||||
|
||||
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.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 (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 @@
@@ -0,0 +1,3 @@
|
||||
import Fusion from "./fusion.vue"; |
||||
|
||||
export default Fusion; |
||||
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
import EquipMenu from './equip-menu.vue'; |
||||
|
||||
export default EquipMenu; |
||||
Loading…
Reference in new issue