zizhujianzhan_web/components/template/component/public/nodata.vue

<template>
    <div class="atWorkBox">
        <div class="atWorkStyle1" v-if="dataStyle == 1" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
            <div class="atWorkImgBox">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="当前板块暂无内容！" >
                <div class="atWorkTitle">对不起，当前板块暂无内容！</div>
            </div>
        </div>
        <div class="atWorkStyle2" v-if="dataStyle == 2" :style="{width: dataWidth + 'px', height: dataHeight + 'px'}">
            <div class="atWorkImgBox">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1749025503443518.png" alt="当前板块暂无内容！" v-show="dataHeight>80">
                <div class="atWorkTitle">对不起，当前板块暂无内容！</div>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
//获得数据
const props = defineProps({
    dataStyle: Number,//样式
    dataWidth: Number,//宽度
    dataHeight: Number,//高度
});
const dataStyle = ref(props.dataStyle);
const dataWidth = ref(props.dataWidth);
const dataHeight = ref(props.dataHeight);
</script>

<style lang="less">
.atWorkBox {
    width: 100%;
    height: 100%;
    background: #fff;
    .atWorkStyle1 {
        display:flex;
        align-items: center;
        justify-content: center;
        img {
            display: block;
            margin: 0 auto;
            margin-bottom: 20px;
        }
        .atWorkTitle {
            font-size: 16px;
            color: #999;
            text-align: center;
        }
    }
    .atWorkStyle2 {
        display:flex;
        align-items: center;
        justify-content: center;
        .atWorkImgBox {
            display:flex;
            align-items: center;
            justify-content: center;
        }
        img {
            display: block;
            margin-right: 20px;
        }
        .atWorkTitle {
            font-size: 16px;
            color: #999;
            text-align: center;
        }
    }
}
</style>