tpx_xcx/pages/cats/style-two.vue

<template>
    <view class="style-two dir-left-nowrap">

        <app-category-list
            @click="active"
            :list="list"
            v-if="list.length !== 0"
            :noSetHeight="setHeight+'rpx'"
            :theme="theme"
        ></app-category-list>

        <scroll-view scroll-y
                     class="right"
                     :style="{height: `${setHeight}rpx`}"
                     v-if="list.length > 0">
            <view>
                <app-jump-button :open_type="list[activeIndex].advert_open_type"
                                 :params="list[activeIndex].advert_params"
                                 :url="list[activeIndex].advert_url">
                    <image class="advert_pic"
                           @click="advert(list[activeIndex])"
                           :src="list[activeIndex].advert_pic"
                           v-if="list[activeIndex].advert_pic">
				    </image>
                </app-jump-button>
            </view>
			<!-- 分类页面跳转 -->
            <view class="item"
                  v-for="(it, k) in list[activeIndex].child"
                  :key="k"
                  @click="route_go(it)">
               <!-- <image :src="it.big_pic_url"
                      class="big_pic_url">
               </image> -->
               <view class="img_box">
               	<image :src="it.pic_url"
                      class="pic_url">
               	</image>
               </view>
               <text>
               	{{it.name}}
               </text>
            </view>
			
            <view class="no-empty main-center"
                  v-if="list[activeIndex].child.length === 0">
                <app-no-goods title="该分类下无相关内容哦~"></app-no-goods>
            </view>
        </scroll-view>

        <view class="no-empty main-center" v-else>
            <app-no-goods background="#f7f7f7" title="该分类下无相关内容哦~"></app-no-goods>
        </view>

    </view>
</template>

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

    export default {
        name: 'style-two',

        props: [`list`, `activeIndex`,  `setHeight`, `theme`],

        components: {
            'app-category-list': appCategoryList,
            'app-no-goods': appNoGoods
        },

        methods: {
            active({item}) {
                this.$emit('active', item);
            },
            route_go(e) {
                uni.navigateTo({
                    url: `${e.page_url}&titleName=${e.name}`
                });
            },
            advert(e) {
                this.$emit('route_advert', e);
            }
        }
    }
</script>

<style scoped lang="scss">
    .right {
        width: #{524rpx};
        margin-left: #{22rpx};
        background-color: #ffffff;
    }
    .advert_pic {
        width: #{500rpx};
        height: #{184rpx};
        margin: #{20upx 24upx 20upx 0};
    }
    .item {
        margin-left: #{2rpx};
        height: #{158rpx};
        width: #{524rpx};
        margin-bottom: #{20rpx};
    	display: flex;
    	justify-content: flex-start;
    	align-items: center;
    	.img_box{
    		height: #{128rpx};
    		width: #{150rpx};
    		display: flex;
    		align-items: center;
    		margin:0rpx 20rpx;
    		.pic_url {
    			  display: inline-block;
    			  max-width: 100%;
    			  max-height: 80%;
    		}
    	}
    }
    .big_pic_url {
        height: #{158rpx};
        width: #{524rpx};
    }
    .no-empty {
        width: 100%;
        margin-top: #{150upx};
    }
</style>