Skip to content

B
BCDH-APP
Commit a486942c authored by 罗新东's avatar 罗新东
Browse files
Options

app端tabbar覆盖页面其他位置。

parent 2e9d61e4
Pipeline #7353 passed with stage
    in 9 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 112 additions and 94 deletions
    src/App.vue
    View file @ a486942c
    ......@@ -7,77 +7,84 @@
    * 版权所有，侵权必究！
    *
    -->
    <template>
    <div id="app" :style="{height:appHeight}">
    <transition :name="transitionName">
    <keep-alive :include="cachePage">
    <router-view class="router-view" />
    </keep-alive>
    </transition>
    <div :style="{height:tabH}"></div>
    <tab-bar v-if="showTab"></tab-bar>
    </div>
    <div id="app">
    <div :style="{ height: showTab ?appHeight:'100%' }" id="app-content">
    <transition :name="transitionName">
    <keep-alive :include="cachePage">
    <router-view class="router-view" />
    </keep-alive>
    </transition>
    </div>
    <tab-bar v-if="showTab"></tab-bar>
    </div>
    </template>
    <script>
    import tabBar from "@/components/TabBar";
    export default {
    components: {
    tabBar,
    },
    data() {
    return {
    appHeight: "",
    tabH: "",
    rempx:0,
    headH:'',
    screenH: "",
    transitionName: "slide-left",
    cachePage: [
    "add-danger",
    "change-info",
    "affirm-danger",
    "risk-affirm",
    "manager-survey",
    "super-survey",
    "major-survey",
    "risk-add",
    "noticeList",
    "confirmNote",
    ],
    };
    },
    mounted() {
    let tabH =
    document.getElementsByTagName("html")[0].style.fontSize.split("px")[0] *
    1.33333;
    let sH = window.screen.height;
    this.headH=document.getElementsByTagName("html")[0].style.fontSize.split("px")[0] *
    1.5;+'px'
    this.appHeight = sH - tabH + "px";
    this.tabH = tabH + "px";
    this.screenH = sH + "px";
    },
    computed: {
    showTab() {
    return !["login", "login2","choose-people"].includes(this.$route.name);
    components: {
    tabBar,
    },
    data() {
    return {
    appHeight: "",
    tabH: "",
    rempx: 0,
    headH: "",
    screenH: "",
    transitionName: "slide-left",
    cachePage: [
    "add-danger",
    "change-info",
    "affirm-danger",
    "risk-affirm",
    "manager-survey",
    "super-survey",
    "major-survey",
    "risk-add",
    "noticeList",
    "confirmNote",
    ],
    };
    },
    mounted() {
    let tabH =
    document
    .getElementsByTagName("html")[0]
    .style.fontSize.split("px")[0] * 1.33333;
    let sH = document.documentElement.clientHeight;
    this.headH =
    document
    .getElementsByTagName("html")[0]
    .style.fontSize.split("px")[0] * 1.5;
    +"px";
    this.appHeight = sH - tabH + "px";
    this.tabH = tabH + "px";
    this.screenH = sH + "px";
    },
    computed: {
    showTab() {
    return !["login", "login2", "choose-people"].includes(
    this.$route.name
    );
    },
    },
    },
    watch: {
    $route(to, from) {
    // 有主级到次级
    if (to.meta.index > from.meta.index) {
    this.transitionName = "slide-left"; // 向左滑动
    } else if (to.meta.index < from.meta.index) {
    // 由次级到主级
    this.transitionName = "slide-right";
    } else {
    this.transitionName = ""; //同级无过渡效果
    }
    watch: {
    $route(to, from) {
    // 有主级到次级
    if (to.meta.index > from.meta.index) {
    this.transitionName = "slide-left"; // 向左滑动
    } else if (to.meta.index < from.meta.index) {
    // 由次级到主级
    this.transitionName = "slide-right";
    } else {
    this.transitionName = ""; //同级无过渡效果
    }
    },
    },
    },
    };
    </script>
    ......@@ -86,54 +93,65 @@ export default {
    // overflow: hidden;
    // }
    #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    // text-align: center;
    color: #2c3e50;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    // z-index:999999999999
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    // text-align: center;
    color: #2c3e50;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    height: 100vh;
    // z-index:999999999999
    }
    #app-content {
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    z-index: 99999999;
    }
    .router-view {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    background-color: #f0f1f5;
    overflow: auto;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    background-color: #f0f1f5;
    overflow: auto;
    }
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
    height: 100%;
    will-change: transform;
    transition: all 500ms;
    position: absolute;
    backface-visibility: hidden;
    height: 100%;
    will-change: transform;
    transition: all 500ms;
    position: absolute;
    backface-visibility: hidden;
    }
    .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    }
    </style>
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment