qjkankan_v1.1.1/packages/qjkankan-kankan-view/src/components/Information/index.vue

<template>
    <div class="information" :class="{ mobile: mobile, disabled: isPlay }">
        <!-- <component :is="page"></component> -->
        <ViewMobile v-if="mobile" />
        <ViewPc v-else />
    </div>
</template>

<script setup>
import ViewPc from './View.Pc.vue'
import ViewMobile from './View.Mobile.vue'
import { ref, markRaw, onMounted, computed, watch } from 'vue'
import { useApp } from '@/app'
import { useStore } from 'vuex'
const store = useStore()

const mobile = ref(false)
// const page = ref(ViewMobile)
const isPlay = computed(() => store.getters['tour/isPlay'])
useApp().then(app => {
    mobile.value = app.config.mobile
    // console.log(app.config)
    // page.value = mobile.value ? ViewMobile : ViewPc
})
</script>

<style lang="scss" scoped>
.information {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    height: 34px;
    border-radius: 0 34px 34px 0;
    pointer-events: all;
    color: rgba(255, 255, 255, 0.88);
    z-index: 100;
    &.mobile {
        position: absolute;
        top: 0;
        left: 0;
        // left: 50%;
        transform: none;
        width: 100%;
        background: none;
        min-height: calc(var(--vh) * 100);
        pointer-events: none;
        &.disabled {
            // position: absolute;
        }
    }
    :deep(.icon) {
        cursor: pointer;
        display: flex;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 24px;
        align-items: center;
        justify-content: flex-start;
        color: inherit;
        i {
            font-size: 14px;
        }
    }
}
</style>