拒绝手机端访问

package.json

@@ -34,6 +34,7 @@
     "lodash": "^4.17.21",
     "md5-ts": "^0.1.6",
     "mitt": "^3.0.1",
+    "mobile-detect": "^1.4.5",
     "nanoid": "^4.0.2",
     "number-precision": "^1.6.0",
     "opentype.js": "^1.3.4",

src/assets/styles/common.css

@@ -287,9 +287,7 @@ page {
 	-ms-border-radius: 8px;
 	-o-border-radius: 8px;
 }
-.q-mb-xl{
-	margin-bottom: 30px;
-}
+
 .bg-info{
 	background-color: #f6f7f9;
 }

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import routes from './router'
 import { useUserStore } from '@/store/user';
 import { ElLoading } from 'element-plus';
+import MobileDetect from 'mobile-detect';
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
@@ -9,11 +10,19 @@ const router = createRouter({
 })
 
 
-const whiteList = ['/autoLogin','/login','/notfound','/regist','/','/forgot','/newpass']
+const whiteList = ['/autoLogin','/login','/notfound','/regist','/','/forgot','/newpass','/notsupported']
 const managerMenu = ['/market','/editor_admin']
 
 let loadingInstance:any = null 
 router.beforeEach((to:any, from:any, next:any) => {
+
+  const md = new MobileDetect(window.navigator.userAgent);
+  const isMobile = md.mobile() !== null || md.tablet() !== null;
+  if (isMobile && !to.path.includes('/notsupported')) {
+    // 如果是移动设备，并且访问的不是重定向页面，则重定向到 /mobile-redirect
+    next('/notsupported');
+  }
+
   const user = useUserStore()
   if(!loadingInstance){
     loadingInstance = ElLoading.service({

src/router/router.ts

@@ -74,6 +74,13 @@ const routes: RouteRecordRaw[] = [
       title:'Oops! 出错了'
     }
   },
+  {
+    path: '/notsupported',
+    component: () => import('@/views/Mobile/NotSupported.vue'),
+    meta:{
+      title:'Oops! 我们不支持这样做'
+    }
+  },
   {
     path: '/autoLogin',
     component: () => import('@/views/Auth/AutoLogin.vue'),

src/views/Mobile/NotSupported.vue

+<template>
+  <div class="window-height text-dark column" style="overflow: hidden;padding: 10vw;">
+    <div class="col">
+        <img src="https://imgfile.oytour.com/static/pptdefault1.png" style="width: 12vw;">
+    </div>
+    <div>
+        <div class="q-mb-xl text-center" style="font-size: 24px;">
+            <div class="">暂不支持</div>
+            <div class="text-info" style="font-size: 16px;">Not Supported</div>
+        </div>
+        <div style="font-size: 14px;word-break: break-all;" class="q-mb-xl">
+            <p>尊敬的用户您好：</p>
+            <p style="text-indent: 28px;" class="q-mt-lg">我们目前还不支持手机端的访问和操作，为了您有更好的操作体验，我们不得不让您在电脑端完成相关的设计操作。我们也正在积极的设计和开发适用于手机版本的系统，Travel Design团队感谢您的理解与支持。</p>
+        </div>
+        <div class="q-mt-xl text-center">
+            <el-button size="large" @click="customerService">联系客服</el-button>
+        </div>
+    </div>
+    <div class="col"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { openNewBlank } from "@/utils/common"
+
+
+const customerService = ()=>{
+    openNewBlank('https://work.weixin.qq.com/kfid/kfc378aada578ca8b0e')
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file