|
@@ -0,0 +1,146 @@
|
|
|
+<template>
|
|
|
+ <!-- <div id="app">
|
|
|
+ <nav>
|
|
|
+ <router-link to="/">Home</router-link> |
|
|
|
+ <router-link to="/about">About</router-link>
|
|
|
+ <div class="orientation-tip" v-if="isMobile"></div>
|
|
|
+ <div>
|
|
|
+ <img :src="require('@/assets/img/landtip.png')" alt="" />
|
|
|
+ <p>请在竖屏模式观看</p>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ <router-view />
|
|
|
+ </div> -->
|
|
|
+ <div class="vvvv" id="app">
|
|
|
+ <router-view />
|
|
|
+ <div class="orientation-tip" v-if="isMobile">
|
|
|
+ <div>
|
|
|
+ <img src='./assets/img/landtip.png' alt="" />
|
|
|
+ <p>请在竖屏模式观看</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import browser from '@/utils/browser'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isMobile: browser.mobile,
|
|
|
+ time: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ // console.log('dataAll数据', dataAll)
|
|
|
+
|
|
|
+ // 存入静态数据到仓库中
|
|
|
+ this.$store.dispatch('changeDataAll', dataAll);
|
|
|
+ const dom = document.querySelector("#app");
|
|
|
+ if (dom && document.documentElement.clientWidth < 480) {
|
|
|
+ dom.style.height = document.documentElement.clientHeight + "px";
|
|
|
+ }
|
|
|
+ // 移动端
|
|
|
+ window.addEventListener(
|
|
|
+ "resize",
|
|
|
+ () => {
|
|
|
+ //@ts-ignore
|
|
|
+ clearTimeout(this.time);
|
|
|
+ //@ts-ignore
|
|
|
+ this.time = window.setTimeout(() => {
|
|
|
+ // 根元素
|
|
|
+ const dom = document.querySelector("#app");
|
|
|
+ if (dom && document.documentElement.clientWidth < 480) {
|
|
|
+ dom.style.height = document.documentElement.clientHeight + "px";
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ },
|
|
|
+ true
|
|
|
+ );
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
+ destroyed() { }, //生命周期 - 销毁完成
|
|
|
+ activated() { }, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@font-face {
|
|
|
+ font-family: 'SourceHanSansCN-Regular';
|
|
|
+ src: url('./assets/fonts/SourceHanSansCN-Regular.otf');
|
|
|
+}
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: 'SourceHanSansCN-Bold';
|
|
|
+ src: url('./assets/fonts/SourceHanSansCN-Bold.otf');
|
|
|
+}
|
|
|
+
|
|
|
+#app {
|
|
|
+ height: 100%;
|
|
|
+ max-width: 500px;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 横屏体验
|
|
|
+.orientation-tip {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 10000;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: none;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ width: 100%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ >img {
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+
|
|
|
+ >p {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*竖屏*/
|
|
|
+@media screen and (orientation: portrait) {
|
|
|
+ .orientation-tip {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*横屏*/
|
|
|
+@media screen and (orientation: landscape) {
|
|
|
+ .orientation-tip {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|