crm/resources/wechat/src/components/header-list.vue

<template>
    <div class="header-list flex-row">
        <div class="header-item flex-column justify-center align-center" @click="handleTab('1')">
            <img src="../assets/img/indexcaseimg.png" alt="装修案例" class="item-img">
            <span class="font-sm mt-sm">装修案例</span>
        </div>
        <div class="header-item flex-column justify-center align-center" @click="handleTab('2')">
            <img src="../assets/img/indexarticleimg.png" alt="装修指南" class="item-img">
            <span class="font-sm mt-sm">装修指南</span>
        </div>
        <div class="header-item flex-column justify-center align-center" @click="handleTab('3')">
            <img src="../assets/img/indexvideo.png" alt="视频讲装修" class="item-img">
            <span class="font-sm mt-sm">视频讲装修</span>
        </div>
        <div class="header-item flex-column justify-center align-center" @click="handleTab('4')">
            <img src="../assets/img/indexevid.png" alt="业主口碑" class="item-img">
            <span class="font-sm mt-sm">业主口碑</span>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {}
    },
    methods: {
        handleTab(command){
            this.$emit('handleClick',command);
        }
    }
}
</script>

<style scoped>
.header-list {
    width: 100%;
    padding: 40px 30px;
    box-sizing: border-box;
    background-color: #F6F5F5;
}
.header-item {
    flex: 1;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.justify-center {
    justify-content: center;
}
.align-center {
    align-items: center;
}
.item-img {
    width: 104px;
    height: 104px;
    margin: 0 auto 24px;
}
.font-sm {
    font-size: 26px;
    color: #000000;
}
.mt-sm {
    margin-top: 10px;
}
</style>