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 @@ ...@@ -7,77 +7,84 @@
    * 版权所有，侵权必究！ * 版权所有，侵权必究！
    * *
    --> -->
    <template> <template>
    <div id="app" :style="{height:appHeight}"> <div id="app">
    <transition :name="transitionName"> <div :style="{ height: showTab ?appHeight:'100%' }" id="app-content">
    <keep-alive :include="cachePage"> <transition :name="transitionName">
    <router-view class="router-view" /> <keep-alive :include="cachePage">
    </keep-alive> <router-view class="router-view" />
    </transition> </keep-alive>
    <div :style="{height:tabH}"></div> </transition>
    <tab-bar v-if="showTab"></tab-bar> </div>
    </div> <tab-bar v-if="showTab"></tab-bar>
    </div>
    </template> </template>
    <script> <script>
    import tabBar from "@/components/TabBar"; import tabBar from "@/components/TabBar";
    export default { export default {
    components: { components: {
    tabBar, tabBar,
    }, },
    data() { data() {
    return { return {
    appHeight: "", appHeight: "",
    tabH: "", tabH: "",
    rempx:0, rempx: 0,
    headH:'', headH: "",
    screenH: "", screenH: "",
    transitionName: "slide-left", transitionName: "slide-left",
    cachePage: [ cachePage: [
    "add-danger", "add-danger",
    "change-info", "change-info",
    "affirm-danger", "affirm-danger",
    "risk-affirm", "risk-affirm",
    "manager-survey", "manager-survey",
    "super-survey", "super-survey",
    "major-survey", "major-survey",
    "risk-add", "risk-add",
    "noticeList", "noticeList",
    "confirmNote", "confirmNote",
    ], ],
    }; };
    }, },
    mounted() {
    let tabH = mounted() {
    document.getElementsByTagName("html")[0].style.fontSize.split("px")[0] * let tabH =
    1.33333; document
    let sH = window.screen.height; .getElementsByTagName("html")[0]
    this.headH=document.getElementsByTagName("html")[0].style.fontSize.split("px")[0] * .style.fontSize.split("px")[0] * 1.33333;
    1.5;+'px' let sH = document.documentElement.clientHeight;
    this.appHeight = sH - tabH + "px"; this.headH =
    this.tabH = tabH + "px"; document
    this.screenH = sH + "px"; .getElementsByTagName("html")[0]
    }, .style.fontSize.split("px")[0] * 1.5;
    computed: { +"px";
    showTab() { this.appHeight = sH - tabH + "px";
    return !["login", "login2","choose-people"].includes(this.$route.name); this.tabH = tabH + "px";
    this.screenH = sH + "px";
    },
    computed: {
    showTab() {
    return !["login", "login2", "choose-people"].includes(
    this.$route.name
    );
    },
    }, },
    }, watch: {
    watch: { $route(to, from) {
    $route(to, from) { // 有主级到次级
    // 有主级到次级 if (to.meta.index > from.meta.index) {
    if (to.meta.index > from.meta.index) { this.transitionName = "slide-left"; // 向左滑动
    this.transitionName = "slide-left"; // 向左滑动 } else if (to.meta.index < from.meta.index) {
    } else if (to.meta.index < from.meta.index) { // 由次级到主级
    // 由次级到主级 this.transitionName = "slide-right";
    this.transitionName = "slide-right"; } else {
    } else { this.transitionName = ""; //同级无过渡效果
    this.transitionName = ""; //同级无过渡效果 }
    } },
    }, },
    },
    }; };
    </script> </script>
    ...@@ -86,54 +93,65 @@ export default { ...@@ -86,54 +93,65 @@ export default {
    // overflow: hidden; // overflow: hidden;
    // } // }
    #app { #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif; font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
    // text-align: center; // text-align: center;
    color: #2c3e50; color: #2c3e50;
    box-sizing: border-box; box-sizing: border-box;
    overflow: hidden; overflow: hidden;
    position: relative; position: relative;
    overflow: hidden; overflow: hidden;
    // z-index:999999999999 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 { .router-view {
    width: 100%; width: 100%;
    height: auto; height: auto;
    position: absolute; position: absolute;
    top: 0; top: 0;
    bottom: 0; bottom: 0;
    margin: 0 auto; margin: 0 auto;
    -webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
    background-color: #f0f1f5; background-color: #f0f1f5;
    overflow: auto; overflow: auto;
    } }
    .slide-right-enter-active, .slide-right-enter-active,
    .slide-right-leave-active, .slide-right-leave-active,
    .slide-left-enter-active, .slide-left-enter-active,
    .slide-left-leave-active { .slide-left-leave-active {
    height: 100%; height: 100%;
    will-change: transform; will-change: transform;
    transition: all 500ms; transition: all 500ms;
    position: absolute; position: absolute;
    backface-visibility: hidden; backface-visibility: hidden;
    } }
    .slide-right-enter { .slide-right-enter {
    opacity: 0; opacity: 0;
    transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
    } }
    .slide-right-leave-active { .slide-right-leave-active {
    opacity: 0; opacity: 0;
    transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
    } }
    .slide-left-enter { .slide-left-enter {
    opacity: 0; opacity: 0;
    transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
    } }
    .slide-left-leave-active { .slide-left-leave-active {
    opacity: 0; opacity: 0;
    transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
    } }
    </style> </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