Compare commits
No commits in common. '336125dd89eba18f95b66570070806f7f4c50be3' and 'd9e640c0a3a17df332421596a972df07c23610fc' have entirely different histories.
336125dd89
...
d9e640c0a3
36 changed files with 531 additions and 639 deletions
@ -0,0 +1,318 @@ |
|||||||
|
* { |
||||||
|
box-sizing: border-box; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
a { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.main { |
||||||
|
background: #111; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
color: #eee; |
||||||
|
height: 100%; |
||||||
|
.user-status { |
||||||
|
position: absolute; |
||||||
|
top: 0.1rem; |
||||||
|
left: 0.1rem; |
||||||
|
border: 2px solid #ccc; |
||||||
|
height: 4rem; |
||||||
|
width: 4rem; |
||||||
|
padding: 0.1rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.hp { |
||||||
|
cursor: pointer; |
||||||
|
height: 0.7rem; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
border: 2px solid #ccc; |
||||||
|
align-items: center; |
||||||
|
padding-left: 0.2rem; |
||||||
|
margin-bottom: 0.1rem; |
||||||
|
img { |
||||||
|
width: 0.5rem; |
||||||
|
height: 0.5rem; |
||||||
|
} |
||||||
|
.value { |
||||||
|
font-size: 0.26rem; |
||||||
|
font-weight: bold; |
||||||
|
text-align: center; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.lv { |
||||||
|
cursor: pointer; |
||||||
|
height: 0.7rem; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
border: 2px solid #ccc; |
||||||
|
align-items: center; |
||||||
|
padding-left: 0.2rem; |
||||||
|
margin-bottom: 0.1rem; |
||||||
|
img { |
||||||
|
width: 0.5rem; |
||||||
|
height: 0.5rem; |
||||||
|
} |
||||||
|
.value { |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
font-size: 0.26rem; |
||||||
|
font-weight: bold; |
||||||
|
text-align: center; |
||||||
|
flex: 1; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
} |
||||||
|
.other { |
||||||
|
img { |
||||||
|
width: 0.35rem !important; |
||||||
|
height: 0.35rem !important; |
||||||
|
} |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
padding: 0.1rem; |
||||||
|
border: 2px solid #ccc; |
||||||
|
flex-wrap: wrap; |
||||||
|
& > div, |
||||||
|
.item { |
||||||
|
cursor: pointer; |
||||||
|
width: 33.3%; |
||||||
|
height: 50%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-start; |
||||||
|
padding-top: 0.05rem; |
||||||
|
flex-direction: column; |
||||||
|
.value { |
||||||
|
margin-top: 0.06rem; |
||||||
|
font-size: 0.23rem; |
||||||
|
font-weight: normal; |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
} |
||||||
|
.item { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.user-item { |
||||||
|
position: absolute; |
||||||
|
top: 0.1rem; |
||||||
|
left: 4.2rem; |
||||||
|
border: 2px solid #ccc; |
||||||
|
height: 4rem; |
||||||
|
width: 4rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-around; |
||||||
|
padding: 0.2rem 0; |
||||||
|
padding-top: 0.1rem; |
||||||
|
cursor: pointer; |
||||||
|
& > div { |
||||||
|
background: rgba(0, 0, 0, 0.7); |
||||||
|
width: calc(100% - 0.4rem); |
||||||
|
margin: 0 20rem; |
||||||
|
} |
||||||
|
.uii { |
||||||
|
display: flex; |
||||||
|
width: calc(100% -0.4rem); |
||||||
|
} |
||||||
|
.gold { |
||||||
|
cursor: pointer; |
||||||
|
height: 0.7rem; |
||||||
|
margin: 0.1rem; |
||||||
|
margin-top: 0.08rem; |
||||||
|
width: calc(100%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding-left: 0.1rem; |
||||||
|
font-size: 0.22rem; |
||||||
|
span { |
||||||
|
font-size: 0.2rem; |
||||||
|
font-weight: bold; |
||||||
|
text-align: right; |
||||||
|
flex: 1; |
||||||
|
padding: 0.1rem 0.08rem; |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
} |
||||||
|
.title { |
||||||
|
display: flex; |
||||||
|
padding: 0.05rem; |
||||||
|
width: 100%; |
||||||
|
.icon { |
||||||
|
width: 0.56rem; |
||||||
|
height: 0.56rem; |
||||||
|
background-color: #000; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 0.04rem; |
||||||
|
} |
||||||
|
.name { |
||||||
|
font-size: 0.2rem; |
||||||
|
height: 0.46rem; |
||||||
|
margin-left: 0.2rem; |
||||||
|
line-height: 0.46rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.sys-info { |
||||||
|
position: absolute; |
||||||
|
border: 2px solid #ccc; |
||||||
|
height: calc(100% - 4.4rem); |
||||||
|
width: 8.1rem; |
||||||
|
bottom: 0.1rem; |
||||||
|
left: 0.1rem; |
||||||
|
|
||||||
|
transition: 0.2s; |
||||||
|
padding: 0.2rem; |
||||||
|
.clear { |
||||||
|
position: absolute; |
||||||
|
top: 0.2rem; |
||||||
|
right: 0.2rem; |
||||||
|
cursor: pointer; |
||||||
|
&:hover { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
} |
||||||
|
#sysInfo { |
||||||
|
overflow-y: auto; |
||||||
|
transition: 0.2s; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
.info { |
||||||
|
margin: 0.03rem 0; |
||||||
|
} |
||||||
|
a { |
||||||
|
cursor: pointer; |
||||||
|
text-decoration: underline; |
||||||
|
margin-left: 0.05rem; |
||||||
|
} |
||||||
|
.warning > span { |
||||||
|
color: #f90202; |
||||||
|
} |
||||||
|
.battle > span { |
||||||
|
color: #de8618; |
||||||
|
} |
||||||
|
.win > span { |
||||||
|
color: #24c4de; |
||||||
|
} |
||||||
|
.trophy > span { |
||||||
|
color: #2fe20f; |
||||||
|
} |
||||||
|
} |
||||||
|
.map { |
||||||
|
position: absolute; |
||||||
|
right: 0.1rem; |
||||||
|
left: 8.3rem; |
||||||
|
top: 0.1rem; |
||||||
|
bottom: 0.1rem; |
||||||
|
border: 2px solid #ccc; |
||||||
|
background-image: url(../img/map.jpg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: 100% 100%; |
||||||
|
.plan { |
||||||
|
position: absolute; |
||||||
|
top: 0.1rem; |
||||||
|
width: calc(100% - 0.3rem); |
||||||
|
left: 0.15rem; |
||||||
|
height: 1rem; |
||||||
|
background: rgba(54, 121, 176, 0.68); |
||||||
|
text-align: center; |
||||||
|
font-size: 0.4rem; |
||||||
|
line-height: 1rem; |
||||||
|
} |
||||||
|
.eventEnd { |
||||||
|
position: absolute; |
||||||
|
top: 1.1rem; |
||||||
|
right: 0rem; |
||||||
|
height: 0.4rem; |
||||||
|
font-size: 0.16rem; |
||||||
|
line-height: initial; |
||||||
|
} |
||||||
|
.event-icon { |
||||||
|
position: absolute; |
||||||
|
cursor: pointer; |
||||||
|
width: 0.55rem; |
||||||
|
height: 0.75rem; |
||||||
|
border: 1px solid #111; |
||||||
|
background: rgba(0, 0, 0, 0.5); |
||||||
|
border-radius: 4px; |
||||||
|
box-shadow: 0 0 4px 4px rgba(100, 255, 36, 0.5); |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
.icon-image { |
||||||
|
width: 0.45rem; |
||||||
|
height: 0.45rem; |
||||||
|
border-radius: 50%; |
||||||
|
background-image: url(../icons/menu/d1.png); |
||||||
|
background-color: rgba(100, 255, 36, 0.6); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center center; |
||||||
|
background-size: 30px 29px; |
||||||
|
} |
||||||
|
span { |
||||||
|
text-shadow: 1px 1px 3px rgb(0, 0, 0); |
||||||
|
white-space: nowrap; |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
border-top: 1px solid rgba(100, 255, 36, 0.6); |
||||||
|
margin-top: 0.03rem; |
||||||
|
font-size: 0.14rem; |
||||||
|
} |
||||||
|
} |
||||||
|
.low-level { |
||||||
|
} |
||||||
|
.h-level { |
||||||
|
box-shadow: 0 0 4px 4px rgba(245, 241, 0, 0.5); |
||||||
|
.icon-image { |
||||||
|
background-image: url(../icons/menu/d2.png); |
||||||
|
background-color: rgba(245, 241, 0, 0.6); |
||||||
|
} |
||||||
|
span { |
||||||
|
border-top: 1px solid rgba(245, 241, 0, 0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
.boss { |
||||||
|
box-shadow: 0 0 4px 4px rgba(245, 54, 54, 0.5); |
||||||
|
.icon-image { |
||||||
|
background-image: url(../icons/menu/d3.png); |
||||||
|
background-color: rgba(245, 54, 54, 0.6); |
||||||
|
} |
||||||
|
span { |
||||||
|
border-top: 1px solid rgba(245, 54, 54, 0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
.endless { |
||||||
|
box-shadow: 0 0 4px 4px rgba(245, 69, 0, 0.5); |
||||||
|
.icon-image { |
||||||
|
background-image: url(../icons/endless.png); |
||||||
|
background-color: rgba(245, 69, 0, 0.6); |
||||||
|
} |
||||||
|
span { |
||||||
|
border-top: 1px solid rgba(245, 69, 0, 0.6); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
<template> |
||||||
|
<span class="equip-tip"> |
||||||
|
<span class="content" @mouseover="showTips" @mouseleave="close"> |
||||||
|
<slot></slot> |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { useStore } from "vuex"; |
||||||
|
import { computed, onMounted, ref } from "vue"; |
||||||
|
import { useI18n } from "vue3-i18n"; |
||||||
|
import Equip from "./equip.vue" |
||||||
|
|
||||||
|
const { t } = useI18n(); |
||||||
|
const { state, commit, dispatch } = useStore(); |
||||||
|
|
||||||
|
const prop = defineProps({ |
||||||
|
equip: { |
||||||
|
type: Object, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
compare: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const showTips = (e) => { |
||||||
|
commit('show_equip_tip', { equip: prop.equip, compare: prop.compare, e: e }) |
||||||
|
} |
||||||
|
const close = () => { |
||||||
|
commit('close_equip_tip') |
||||||
|
} |
||||||
|
defineExpose({ close }) |
||||||
|
|
||||||
|
onMounted(() => { }); |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.equip-tip, |
||||||
|
.content { |
||||||
|
width: 100%; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,11 +1,12 @@ |
|||||||
import Tooltip from './tooltip.vue'; |
import Tooltip from './tooltip.vue'; |
||||||
import Equip from './equip.vue'; |
import Equip from './equip.vue'; |
||||||
|
import EquipTip from './equip-tip.vue'; |
||||||
import EquipTips from './equip-tips.vue'; |
import EquipTips from './equip-tips.vue'; |
||||||
import EquipIcon from './equip-icon.vue'; |
import EquipIcon from './equip-icon.vue'; |
||||||
import Dialog from './dialog.vue'; |
import Dialog from './dialog.vue'; |
||||||
import Drawer from './drawer.vue'; |
import Drawer from './drawer.vue'; |
||||||
import PopoverMenu from './popover-menu.vue'; |
import PopoverMenu from './popover-menu.vue'; |
||||||
import Confirm from './confirm.vue'; |
import Confirm from './confirm.vue'; |
||||||
export { Tooltip, Equip, EquipTips, EquipIcon, Dialog, Drawer, PopoverMenu, Confirm }; |
export { Tooltip, Equip, EquipTip, EquipTips, EquipIcon, Dialog, Drawer, PopoverMenu, Confirm }; |
||||||
|
|
||||||
export * from './tabs'; |
export * from './tabs'; |
||||||
|
|||||||
@ -1,50 +1,49 @@ |
|||||||
// const root = 'http://assets.xumy.vip';
|
const netUrl = window.location.protocol + '//' + window.location.host; |
||||||
const root = process.env.VUE_APP_BASE_URL ? '' : 'http://assets.xumy.vip'; |
|
||||||
|
|
||||||
export const audio_mp3 = { |
export const audio_mp3 = { |
||||||
background: root + '/audio/backgound.mp3', |
background:'/audio/backgound.mp3', |
||||||
battle: root + '/audio/battle.mp3', |
battle:'/audio/battle.mp3', |
||||||
}; |
} |
||||||
|
|
||||||
export const menu_icons = { |
export const menu_icons = { |
||||||
backpack: root + '/img/menu/quest_icon_02.png', |
backpack: '/img/menu/quest_icon_02.png', |
||||||
shop: root + '/img/menu/quest_icon_03.png', |
shop: '/img/menu/quest_icon_03.png', |
||||||
dungeon: root + '/img/menu/refresh_de.png', |
dungeon: '/img/menu/refresh_de.png', |
||||||
reborn: root + '/img/menu/quest_icon_00.png', |
reborn: '/img/menu/quest_icon_00.png', |
||||||
saveGame: root + '/img/menu/icon_save.png', |
saveGame: '/img/menu/icon_save.png', |
||||||
exportGame: root + '/img/menu/icon-export.png', |
exportGame: '/img/menu/icon-export.png', |
||||||
importGame: root + '/img/menu/icon-import.png', |
importGame: '/img/menu/icon-import.png', |
||||||
musicPlay: root + '/img/menu/music-play.png', |
musicPlay: '/img/menu/music-play.png', |
||||||
musicPause: root + '/img/menu/music-pause.png', |
musicPause: '/img/menu/music-pause.png', |
||||||
illustrated: root + '/img/menu/illustrated.png', |
illustrated: '/img/menu/illustrated.png', |
||||||
extras: root + '/img/menu/extras.png', |
extras: '/img/menu/extras.png', |
||||||
setting: root + '/img/menu/setting.png', |
setting: '/img/menu/setting.png', |
||||||
}; |
}; |
||||||
|
|
||||||
export const attr_icon_urls = { |
export const attr_icon_urls = { |
||||||
hp: root + '/img/attribute/S_Holy01.png', |
hp: '/img/attribute/S_Holy01.png', |
||||||
atk: root + '/img/attribute/ATK.png', |
atk: '/img/attribute/ATK.png', |
||||||
crit: root + '/img/attribute/CRIT.png', |
crit: '/img/attribute/CRIT.png', |
||||||
critDmg: root + '/img/attribute/CRITDMG.png', |
critDmg: '/img/attribute/CRITDMG.png', |
||||||
def: root + '/img/attribute/icon_11.png', |
def: '/img/attribute/icon_11.png', |
||||||
eva: root + '/img/attribute/S_EVA.png', |
eva: '/img/attribute/S_EVA.png', |
||||||
bloc: root + '/img/attribute/S_BLOC.png', |
bloc: '/img/attribute/S_BLOC.png', |
||||||
moveSpeed: root + '/img/attribute/S_EVA.png', |
moveSpeed: '/img/attribute/S_EVA.png', |
||||||
battleSpeed: root + '/img/attribute/S_EVA.png', |
battleSpeed: '/img/attribute/S_EVA.png', |
||||||
}; |
}; |
||||||
export const tips_icon = root + '/img/tips.png'; |
export const tips_icon = '/img/tips.png'; |
||||||
export const equips_icon_path = root + '/img/equips/'; |
export const equips_icon_path = "/img/equips/" |
||||||
export const lock_icon = root + '/img/lock.png'; |
export const lock_icon = '/img/lock.png'; |
||||||
export const used_icon = root + '/img/used.png'; |
export const used_icon = '/img/used.png'; |
||||||
export const close_icon = root + '/img/close.png'; |
export const close_icon = '/img/close.png'; |
||||||
export const refresh_icon = root + '/img/re.png'; |
export const refresh_icon = '/img/re.png'; |
||||||
export const playerImg = root + '/img/player.png'; |
export const playerImg = '/img/player.png'; |
||||||
export const playerImg2 = root + '/img/player2.png'; |
export const playerImg2 = '/img/player2.png'; |
||||||
|
|
||||||
export const warning_icon = root + '/img/tip/warning.png'; |
export const warning_icon = '/img/tip/warning.png'; |
||||||
|
|
||||||
export const dungeon_icon = { |
export const dungeon_icon = { |
||||||
player: root + '/img/map/player-s.png', |
player: '/img/map/player-s.png', |
||||||
monster: root + '/img/map/monster.png', |
monster: '/img/map/monster.png', |
||||||
boss: root + '/img/map/boss.png', |
boss: '/img/map/boss.png', |
||||||
}; |
}; |
||||||
|
|||||||
@ -0,0 +1,24 @@ |
|||||||
|
const data: any = {}; |
||||||
|
export const getAssets = (url) => { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
if (data[url]) { |
||||||
|
resolve(data[url]); |
||||||
|
} else { |
||||||
|
const xhr = new XMLHttpRequest(); |
||||||
|
xhr.open('GET', url, true); |
||||||
|
xhr.responseType = 'blob'; |
||||||
|
xhr.onload = function () { |
||||||
|
const blob = xhr.response; |
||||||
|
const file = new File([blob!], url, { type: blob!.type }); |
||||||
|
console.log(file); |
||||||
|
data[url] = URL.createObjectURL(file); |
||||||
|
console.log(data[url]); |
||||||
|
resolve(data[url]); |
||||||
|
// } else {
|
||||||
|
// resolve(null);
|
||||||
|
// }
|
||||||
|
}; |
||||||
|
xhr.send(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
Loading…
Reference in new issue