vue-idle-game/src/views/message/sys-info.vue

<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>