jonhon-mes-web/src/views/wel/components/quickAccess.vue

<template>
  <div class="quick_box">
    <div class="title_box">
        <span class="title">快捷入口</span>
        <span style="color: #409EFF;font-size: 14px;">管理</span>
    </div>
    <div class="access_box">
        <div class="access_box_item" v-for="item in accessData" :key="item.name" @click="turnPage(item.page)">
            <img v-show="item.url == 'product'" src="@/assets/product.png" alt="">
            <img v-show="item.url == 'plan'" src="@/assets/plan.png" alt="">
            <img v-show="item.url == 'rule'" src="@/assets/rule.png" alt="">
            <img v-show="item.url == 'output'" src="@/assets/output.png" alt="">
            <img v-show="item.url == 'craft'" src="@/assets/craft.png" alt="">
            <img v-show="item.url == 'quality'" src="@/assets/quality.png" alt="">
            <span>{{ item.name }}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            accessData:[
                {name:'生产计划',url:'plan',page:'/productionSchedulingPlan/productPlan'},
                {name:'排产规则',url:'rule',page:'/productionSchedulingPlan/productRlue '},
                {name:'生产订单',url:'product'},
                {name:'工艺模板',url:'craft'},
                {name:'质量检验',url:'quality'},
            ]
        }
    },
    methods:{
       turnPage(page){
        if(page){
            this.$router.push(page);
        }
       }
    }
}
</script>

<style lang="scss" scoped>
.quick_box{
    padding: 20px;
    border-bottom: 1px solid #eee;
    height: 50%;

    .title_box{
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title{
            font-weight: 550;
        }
    }

    .access_box{
        display: flex;
        flex-wrap: wrap;
        // margin-top: 10px;

        .access_box_item{
            display: flex;
            flex-direction: column;
            width: 32%;
            align-items: center;
            justify-content: center;
            margin-block: 10px;
            font-size:14px;
            cursor: pointer;

            img{
                width: 20px;
                margin-bottom: 5px;
            }
        }
    }
}

</style>