You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.3 KiB
104 lines
2.3 KiB
<template> |
|
<div class='sysInfo' ref="sysInfo"> |
|
<div :class="['info', v.type]" v-for="(v, k) in state.sysInfo" :key="k"> |
|
<span>{{ t('sys') }}</span> |
|
<i class="time" v-if="v.time">({{ v.time }})</i>： |
|
<span class="msg">{{ v.msg }}</span> |
|
<a v-if="v.bouts" @click="bouts = v.bouts; showBouts = true;" class="bouts-link">{{ t('bouts.0') }}</a> |
|
<span v-if="v.equips" v-for="(o, p) in v.equips" :key="p"> |
|
<a :style="{ color: o.quality.color }" @mouseleave="commit('close_equip_tip')" |
|
@mouseover="commit('show_equip_tip', { equip: o, compare: true, e: $event })"> |
|
<span v-if="o.quality.quality == qualitys[4]">{{ t('uniqueBooty') }}：</span> |
|
{{ t(o.type + '.' + o.base.name + '.0') }} |
|
</a> |
|
</span> |
|
</div> |
|
</div> |
|
|
|
<Drawer v-model="showBouts" width="30%"> |
|
<Bouts :bouts="bouts"></Bouts> |
|
</Drawer> |
|
|
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { useStore } from "vuex"; |
|
import { watch, nextTick, onMounted, ref } from "vue"; |
|
import { useI18n } from "vue3-i18n"; |
|
import { qualitys } from "@/config"; |
|
import { Drawer, Tooltip } from "@/components"; |
|
import Bouts from "./bouts.vue"; |
|
|
|
const { t } = useI18n(); |
|
const { state, commit, dispatch } = useStore(); |
|
const sysInfo = ref(); |
|
const showBouts = ref(false) |
|
const bouts = ref<any>([]) |
|
|
|
watch(state.sysInfo, () => { |
|
nextTick(() => { |
|
const scrollElem = sysInfo.value; |
|
scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' }); |
|
}) |
|
}); |
|
|
|
onMounted(() => { }); |
|
</script> |
|
<style lang="scss" scoped> |
|
.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; |
|
} |
|
|
|
.time { |
|
font-size: 0.8rem; |
|
} |
|
|
|
a { |
|
cursor: pointer; |
|
text-decoration: underline; |
|
margin-left: 0.3rem; |
|
} |
|
|
|
.warning>.msg { |
|
color: #f90202; |
|
} |
|
|
|
.battle>.msg { |
|
color: #de8618; |
|
} |
|
|
|
.win>.msg { |
|
color: #24c4de; |
|
} |
|
|
|
.booty>.msg { |
|
color: #2fe20f; |
|
} |
|
|
|
.bouts-link { |
|
color: aqua; |
|
padding-left: 0.3rem; |
|
} |
|
|
|
@media only screen and (max-width: 768px) { |
|
.sysInfo{ |
|
font-size: 0.8rem; |
|
} |
|
.time{ |
|
font-size: 0.6rem; |
|
} |
|
|
|
} |
|
</style> |