<template> <div id="app"> <router-view class="page" /> </div> </template> <script > import { Debounce, throttle } from '@/utils/publicMethods'; import Vue from 'vue' export default { name: 'App', data() { return { flag: false, isMobile: false, }; }, created() { window.addEventListener("resize", Debounce( this.updateWindowWidth,10)); }, beforeDestroy() { window.removeEventListener("resize", this.updateWindowWidth); // 移除监听器 }, methods:{ updateWindowWidth(){ console.log(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) //取到了屏幕宽度 const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; const isNarrowScreen = screenWidth < 1280; Vue.prototype.$isMobile = isNarrowScreen location.reload(); } } } </script> <style lang="scss"> :root { --background-color: #ffffff; --text-color: #000000; } .dark-mode { --background-color: #000000; --text-color: #ffffff; } *{ margin: 0; padding: 0; box-sizing: border-box; } html,body{ //隐藏滚动条 scrollbar-width: none; -ms-overflow-style: none; border-right: none; box-sizing: border-box; overflow: hidden; } #app { // font-family: Avenir, Helvetica, Arial, sans-serif; // -webkit-font-smoothing: antialiased; // -moz-osx-font-smoothing: grayscale; // text-align: center; // color: #2c3e50; overflow-x: hidden; // font-size: 1.1em; /* 滚动条整体部分 */ font-size: 1rem; ::-webkit-scrollbar { width: 5PX; /* 宽度 */ height: 6px; /* 高度 */ } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { background-color: #D2C3E9; /* 滑块颜色 */ border-radius: 20PX; /* 圆角 */ } /* 滚动条轨道 */ ::-webkit-scrollbar-track { background-color: #f0f0f0; /* 轨道颜色 */ } /* input type="number" 时去除上下按钮样式 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } } .el-message{ //提示信息的层级设置 z-index: 99999 !important; min-width: 300px !important; } </style>