h5-webgl-program/src/App.vue

<template>
	<div id="app">
		<!-- IOS机器会跳转两次到其他路由，当from路由被缓存时，原因未知 -->
		<keep-alive >
			<!-- <transition name="fade"> -->
			<router-view v-if="$route.meta.keepAlive"></router-view>
			<!-- </transition> -->
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>
		<div class="loadingShadow" v-show="loading">
			<div class="loadData">
				<img src="https://skyforest.static.elaber.cn/detail/loading.gif" alt="" />
				<div class="loadingMsg">{{loadingMsg}}</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		getStorage,
		removeItem
	} from '@/utils/localStorage';
	export default {
		name: "App",
		// provide() {
		// 	return {
		// 		reload: this.reload,
		// 	};
		// },
		data() {
			return {
				themeColor: "rgba(0,97,232,1)",
				themeColor2: "rgba(0,97,232,0.2)",
				isRouterAlive: true,
				showAccountView: false, //是否显示用户账号列表
				acountList: [], //弹出层账号列表数据
				selectAccount: null, //选中的账号
				isIOS: false,
				include: []
			};
		},
		created() {
			let userId = this.$route.query.leavePhoneCustomerId ? this.$route.query.leavePhoneCustomerId : '129130';
			if (userId) { //如果存在用户id
				this.$store.dispatch('setUserId', userId);
			}
			let isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
			this.isIOS = isIOS;
			window.addEventListener('error', (error) => {
				// 区分是否是js错误
				if (error.message) {
					alert("error" + message)
				} else {
					alert('监测到E1004错误' + error);
				}
			}, true)
			// window.onerror = function(message,source,line,column,error) {
			// };
		},
		watch: {
			loading: {
				handler(newVal) {
					if (!newVal) {
						this.$store.state.loadingMsg = ''
					}
				}
			},
			
		},
		computed: {
			loading() {
				return this.$store.state.loading;
			},
			loadingMsg() {
				if (this.$store.state.loadingMsg) {
					return this.$store.state.loadingMsg;
				} else {
					return "正在查询，请耐心等待";
				}
			}
		},
		mounted() {
			// 禁止图片单机事件，防止出现图片点击浏览器自动预览功能
			document.body.addEventListener("click", function(e) {
				if (e.target.nodeName.toLowerCase() == "img") {
					e.preventDefault();
				}
			});
		},
		methods: {

		},
	};
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* text-align: center;
		color: #2c3e50;
		margin-top: 60px; */
	}

	body {
		background: #181C28;
	}

	.el-tooltip__popper.is-light {
		backdrop-filter: blur(10.36rem) !important;
		background-color: rgba(255, 255, 255, 0.4) !important;
		border: none !important;
		color: #ffffff !important;
	}


	.el-tooltip__popper .popper__arrow,
	.el-tooltip__popper .popper__arrow::after {
		border-style: none !important;
	}

	.el-picker-panel__body .el-date-picker__header .el-picker-panel__icon-btn {
		color: #FFFFFF;
	}

	.el-picker-panel__body .el-date-picker__header .el-date-picker__header-label {
		color: #FFFFFF;
	}

	.el-picker-panel__body .el-picker-panel__content .el-date-table th {
		color: #FFFFFF;
	}

	.dropdown-view-menu {
		font-size: 14px;
		color: var(--themeColor9);
		/* width: 336rem; */
		box-sizing: border-box;
		padding: 15rem !important;
		margin-top: 3rem;
		backdrop-filter: blur(60px);
		border: none !important;
		background-color: rgba(255, 255, 255, 0.15) !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dropdown-view-menu .active {
		color: #CEF7D1;
	}

	.dropdown-view-text {
		font-family: "Verdana Bold";
		font-weight: 700;
		text-decoration: underline;
		font-size: 14px;
		color: #fff;
	}

	.select-julangview {
		display: none;
	}

	.popper-class-qr {
		padding: 0px !important;
	}

	.BMap_cpyCtrl {
		display: none;
	}

	.anchorBL {
		display: none;
	}

	.amap-logo img {
		display: none;
	}

	.amap-copyright {
		opacity: 0;
	}
</style>
<style lang="scss" scoped>
	@import "./assets/common.scss";
</style>