football/pages/cats/style-five.vue

<template>
    <view class="style-five">
        <view class="head" v-if="list.length !== 0">
            <app-head-navigation @click="active" :list="list"></app-head-navigation>
        </view>
        <view class="nav" v-if="list[activeIndex].child.length > 0">
            <text class="name" @click="setNav(it, key)"
                  :class="{'active': key === activeIndexTwo}"
                  v-for="(it, key) in list[activeIndex].child" :key="key">
                {{it.name}}
            </text>
        </view>
        <view :class="list[activeIndex].child.length === 0 ? 'margin-fixed' : ''">
            <app-product-list v-if="goods_list.length > 0" @routeGo="route_go" theme="default" :goods_list="goods_list"></app-product-list>
            <view class="no-empty main-center" v-else>
                <app-no-goods background="#f7f7f7" title="该分类下无相关内容哦~"></app-no-goods>
            </view>
        </view>

    </view>
</template>

<script>
    import appHeadNavigation from '../../components/page-component/app-head-navigation/app-head-navigation.vue';
    import appProductList from '../../components/page-component/app-product-list/app-product-list.vue';
    import appNoGoods from '../../components/page-component/app-no-goods/app-no-goods.vue';

    export default {
        name: "style-five",

        components: {
            'app-head-navigation': appHeadNavigation,
            'app-product-list': appProductList,
            'app-no-goods': appNoGoods,
        },

        props: [`list`, `activeIndex`, `goods_list`, `activeIndexTwo`],

        methods: {
            active(data) {
                this.$emit('active',data);
            },
            setNav(it, key) {
                this.$emit('setNav',it, key);
            },
            route_go(e) {
                // #ifndef MP-BAIDU
                if (e.video_url && this.getVideo == 1) {
                    uni.navigateTo({
                        url: `/pages/goods/video?goods_id=${e.id}&sign=${e.sign}`
                    });
                } else {
                    uni.navigateTo({
                        url: e.page_url
                    });
                }
                // #endif

                // #ifdef MP-BAIDU
                uni.navigateTo({
                    url: e.page_url
                });
                // #endif
            }
        }
    }
</script>

<style scoped lang="scss">
    .margin-fixed {
        margin-top: #{188upx};
    }
    .nav {
        width: 100%;
        padding-top: #{24rpx};
        padding-left: #{24rpx};
        background-color: #ffffff;
        margin-top: #{188upx};
    }
    .head {
        position: fixed;
        top: #{88upx};
        left: 0;
        z-index: 1000;
    }
    .name {
        border: #{1rpx} solid #cccccc;
        font-size: #{28rpx};
        color: #666666;
        padding: 0 #{28rpx};
        display: inline-block;
        height: #{54rpx};
        line-height: #{54rpx};
        margin-right: #{24rpx};
        border-radius: #{28rpx};
        margin-bottom: #{20rpx};
    }

    .active {
        color: #ff4544;
        border: #{1rpx} solid #ff4544;
    }
</style>