32 changed files with 591 additions and 466 deletions
@ -1,318 +0,0 @@
@@ -1,318 +0,0 @@
|
||||
* { |
||||
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); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,45 +0,0 @@
@@ -1,45 +0,0 @@
|
||||
<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,12 +1,11 @@
@@ -1,12 +1,11 @@
|
||||
import Tooltip from './tooltip.vue'; |
||||
import Equip from './equip.vue'; |
||||
import EquipTip from './equip-tip.vue'; |
||||
import EquipTips from './equip-tips.vue'; |
||||
import EquipIcon from './equip-icon.vue'; |
||||
import Dialog from './dialog.vue'; |
||||
import Drawer from './drawer.vue'; |
||||
import PopoverMenu from './popover-menu.vue'; |
||||
import Confirm from './confirm.vue'; |
||||
export { Tooltip, Equip, EquipTip, EquipTips, EquipIcon, Dialog, Drawer, PopoverMenu, Confirm }; |
||||
export { Tooltip, Equip, EquipTips, EquipIcon, Dialog, Drawer, PopoverMenu, Confirm }; |
||||
|
||||
export * from './tabs'; |
||||
|
||||
Loading…
Reference in new issue