footer.vue 1.57 KB
<!-- 如果有通栏按钮 则: <v-footer :full-btn = "true"></v-footer>-->
<!-- 如果无通栏按钮 则: <v-footer></v-footer> -->
<template>
    <div id="mt-footer" :class="{'full-btn':fullBtn}">
        <div class="mt-footer-ct">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        fullBtn: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {

        }
    },
    watch: {

    },
    mounted() {

    },
    methods: {

    }
}
</script>
<style lang="scss" scoped>
.mt-footer-ct {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #444;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    height: 52px;
    line-height: 1;
    padding: 0 15px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    // -moz-box-shadow: 0px -2px 19px #DBDBDB;
    // -webkit-box-shadow: 0px -2px 19px #DBDBDB;
    // box-shadow: 0px -2px 19px #DBDBDB;
    
    -moz-box-shadow: 0px -3px 5px rgba(0,0,0,0.05);;
    -webkit-box-shadow: 0px -3px 5px rgba(0,0,0,0.05);;
    box-shadow: 0px -3px 5px rgba(0,0,0,0.05);
    bottom: 0;

    right: 0;
    left: 0;
    position: fixed;
    z-index: 1;
    justify-content: center;
    z-index: 2000;

}
.is-ipx{
    .mt-footer-ct {
        height: 72px;
        padding-bottom: 20px;
    }
}
.full-btn {
    .mt-footer-ct {

        padding: 0;
    }
}
</style>