front-end/km-app/src/components/app-footer.vue

<template>
    <div id="deFooter" class="de-footer">
        <div class="btn-list-wrap">
            <div class="btn_list" v-for="(item, index) in btnData" :key="index" @click="pageTo(item)" v-show="item.judge()">
                <div class="btn_blo active" v-if="index == activeIndex">
                    <div class="btn-img-wrap">
                        <img class="btn_img" :src="constant.imgUrl + item.activeImg" alt mode="widthFix" />
                    </div>
                    <div class="btn_text">{{ item.text }}</div>
                    <!-- <img class="btn_img" :src="constant.imgUrl + item.activeImg" alt mode="widthFix" /> -->
                </div>
                <div class="btn_blo" v-else>
                    <div class="btn-img-wrap">
                        <img class="btn_img" :src="constant.imgUrl + item.img" alt mode="widthFix" />
                    </div>
                    <div class="btn_text">{{ item.text }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { jumpShop } from '@/utils/common'
export default {
	name: 'Defooter',
	components: {},
	props: {
		activeIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			constant: this.$constant,
			btnData: [
				{
					text: '首页',
					url: '/pages/home/index',
					img: 'common/tool_no.png',
					activeImg: 'common/tool_is.png',
					judge: () => true
				},
				{
					text: '分类',
					url: '/pages/category/index',
					img: 'common/tool_no.png',
					activeImg: 'common/tool_is.png',
					judge: () => true
				},
				{
					text: '门店',
					url: '/pages/shop/index',
					img: 'common/member_no.png',
					activeImg: 'common/member_is.png',
					judge: () => true
				},
				{
					text: '我的',
					url: '/pages/center/index',
					img: 'common/center_no.png',
					activeImg: 'common/center_is.png',
					judge: () => true
				}
			]
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	mounted() {
	},
	methods: {}
}
</script>

<style scoped lang="scss">
.de-footer {
    // height: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    background-color: #fff;
    box-shadow: -1px -1px 10px #cccccc; /*no*/
	z-index: 100;
    .btn-list-wrap {
        width: 100%;
        @include disFlex(center, space-around);
        .btn_list {
            width: 30%;
        }
        .btn_blo {
            color: $fontColor3;
            .btn-img-wrap {
                width: 44px !important;
                margin: 0 auto;
            }
            .btn_img {
                width: 100%;
				height: auto;
            }
            .btn_text {
                transform: scale(0.8);
                text-align: center;
            }
        }
        .active {
			.btn_text {
				color: $mainColor;
			}
        }
    }
}
</style>