<!-- 如果有通栏按钮 则: <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>