165 lines
3.6 KiB
Vue
165 lines
3.6 KiB
Vue
<template>
|
||
<router-view v-slot="{ Component }">
|
||
<transition :name="transitionName">
|
||
<keep-alive :exclude="store.excludeRoutes">
|
||
<component :is="Component" />
|
||
</keep-alive>
|
||
</transition>
|
||
</router-view>
|
||
<BaseMask v-if="!isMobile" />
|
||
<div v-if="!isMobile" class="guide">
|
||
<Icon icon="mynaui:danger-triangle" />
|
||
<div class="txt">
|
||
<h2>切换至手机模式才可正常使用</h2>
|
||
<h3>1. 按 F12 调出控制台</h3>
|
||
<h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
|
||
</div>
|
||
<img src="@/assets/img/guide.png" alt="" />
|
||
</div>
|
||
<Call />
|
||
</template>
|
||
<script setup lang="ts">
|
||
/*
|
||
* try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
|
||
try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
|
||
* */
|
||
import routes from './router/routes'
|
||
import Call from './components/Call.vue'
|
||
import { useBaseStore } from '@/store/pinia.js'
|
||
import { onMounted, ref, watch } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import type { RouteRecordRaw } from 'vue-router'
|
||
import BaseMask from '@/components/BaseMask.vue'
|
||
import { BASE_URL } from '@/config'
|
||
|
||
const store = useBaseStore()
|
||
const route = useRoute()
|
||
const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
|
||
const transitionName = ref('go')
|
||
|
||
// watch $route 决定使用哪种过渡
|
||
watch(
|
||
() => route.path,
|
||
(to, from) => {
|
||
store.setMaskDialog({ state: false, mode: store.maskDialogMode })
|
||
//footer下面的5个按钮，对跳不要用动画
|
||
let noAnimation = [
|
||
'/',
|
||
'/home',
|
||
'/slide',
|
||
'/me',
|
||
'/shop',
|
||
'/message',
|
||
'/publish',
|
||
'/home/live',
|
||
'slide',
|
||
'/test'
|
||
]
|
||
if (noAnimation.indexOf(from) !== -1 && noAnimation.indexOf(to) !== -1) {
|
||
return (transitionName.value = '')
|
||
}
|
||
const toDepth = routes.findIndex((v: RouteRecordRaw) => v.path === to)
|
||
const fromDepth = routes.findIndex((v: RouteRecordRaw) => v.path === from)
|
||
transitionName.value = toDepth > fromDepth ? 'go' : 'back'
|
||
}
|
||
)
|
||
|
||
function setVh() {
|
||
let vh = window.innerHeight * 0.01
|
||
document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||
}
|
||
|
||
onMounted(() => {
|
||
store.init()
|
||
setVh()
|
||
// 监听resize事件 视图大小发生变化就重新计算1vh的值
|
||
window.addEventListener('resize', () => {
|
||
location.href = BASE_URL + '/'
|
||
setVh()
|
||
})
|
||
//禁止选中文字
|
||
document.onselectstart = new Function('return false') as any
|
||
})
|
||
</script>
|
||
|
||
<style lang="less">
|
||
@import './assets/less/index';
|
||
|
||
#app {
|
||
height: 100%;
|
||
width: 100%;
|
||
position: relative;
|
||
font-size: 14rem;
|
||
}
|
||
|
||
.guide {
|
||
color: white;
|
||
z-index: 999;
|
||
background: var(--active-main-bg);
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 16rem;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
|
||
svg {
|
||
margin-top: 10rem;
|
||
font-size: 40rem;
|
||
color: red;
|
||
}
|
||
|
||
.txt {
|
||
text-align: left;
|
||
padding: 0 24rem;
|
||
}
|
||
|
||
img {
|
||
display: block;
|
||
width: 350rem;
|
||
}
|
||
}
|
||
|
||
.go-enter-from {
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
|
||
//最终状态
|
||
.back-enter-to,
|
||
.back-enter-from,
|
||
.go-enter-to,
|
||
.go-leave-from {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
.go-leave-to {
|
||
transform: translate3d(-100%, 0, 0);
|
||
}
|
||
|
||
.go-enter-active,
|
||
.go-leave-active,
|
||
.back-enter-active,
|
||
.back-leave-active {
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.back-enter-from {
|
||
transform: translate3d(-100%, 0, 0);
|
||
}
|
||
|
||
.back-leave-to {
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
opacity: 0;
|
||
}
|
||
</style>
|