vue-idle-game/src/views/index.vue

<template>
    <div id="main" class="main" @click="playBackgound; commit('close_equip_tip')"
        @contextmenu.prevent="playBackgound()">
        <div class="infomation">
            <Message />
        </div>
        <Menu />
    </div>
    <EquipTips />
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import Message from "./message";
import Menu from "./menu.vue";
import { EquipTips } from "@/components";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const playFlag = ref(false);

const playBackgound = () => {
    if (!playFlag.value) {
        dispatch('play_music', 'backgound')
        playFlag.value = true;
    }
}

onMounted(() => {
});
</script>
<style lang="scss" scoped>
* {
    box-sizing: border-box;
    user-select: none;
}

.main {
    background: #111;
    box-sizing: border-box;
    margin: 0;
    padding: 0.5vh 0.5vw;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #eee;
    height: 100%;
    overflow: scroll;
}

.infomation {
    height: calc(100% - 1vh);
    width: 40vw;
    position: absolute;
}

@media only screen and (max-width: 768px) {

    .infomation {
        height: calc(100% - 1vh);
        width: calc(100% - 1vw);
        position: absolute;
    }
}
</style>