<template>
    <view class="style-one" :class="list.length === 0 ? '' : 'padding'">
        <image class="item" v-for="(it, key) in list" :key="key" @click="route_go(it)" :src="it.big_pic_url"></image>
        <view class="no-empty main-center" v-if="list.length === 0">
            <app-no-goods background="#f7f7f7" title="该分类下无相关内容哦~">
            </app-no-goods>
        </view>
    </view>
</template>

<script>
    import appNoGoods from '../../components/page-component/app-no-goods/app-no-goods.vue';

    export default {
        name: 'style-one',

        props: ['list'],

        components: {
            'app-no-goods': appNoGoods,
        },

        methods: {
            route_go(it) {
                uni.navigateTo({
                    url: it.page_url
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .style-one {
        width: #{750rpx};
        background-color: white;
    }
    .padding {
        padding: 0 #{24rpx} #{24rpx} #{24rpx};
    }
    .item {
        width: #{702rpx};
        height: #{212rpx};
        margin-top: #{20rpx};
    }
    .no-empty {
        width: 100%;
        margin-top: #{150upx};
        background-color: #f7f7f7;
    }
</style>