xiangcunwang_web/components/shop/noData.vue

<template>
   <div v-if="pagetype == 'class'" class="nodata_style1">
        <div class="nodata_style1_box">
            <img src="@/public/image/Union.png" alt="暂无商品数据">
            <div class="nodata_style1_box_text">暂无商品数据</div>
        </div>
   </div>
   <div v-else-if="pagetype == 'list'" class="nodata_style2">
        <div class="nodata_style1_box">
            <img src="@/public/image/Union.png" alt="暂无商品数据">
            <div class="nodata_style1_box_text">暂无商品数据</div>
        </div>
   </div>
</template>

<script setup>
    const props = defineProps({
        pagetype: {
            type: String,
            default: ''
        }
    })
</script>

<style lang="less" scoped>
    //用于频道页
    .nodata_style1{
        width: 1200px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        .nodata_style1_box{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 265px;
            height: 80px;
            .nodata_style1_box_text {
                width: 159px;
                height: 34px;
                line-height: 34px;
                font-size: 26px;
                color:#CCCCCC
            }
            img{
                display: block;
                width: 49px;
                height: 56px;
                margin-right: 30px;
            }
        }
    }
    .nodata_style2{
        width: 1200px;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        .nodata_style1_box{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 265px;
            height: 80px;
            .nodata_style1_box_text {
                width: 159px;
                height: 34px;
                line-height: 34px;
                font-size: 26px;
                color:#CCCCCC
            }
            img{
                display: block;
                width: 49px;
                height: 56px;
                margin-right: 30px;
            }
        }
    }
</style>