cate-resource-box.vue 2.1 KB
<template>
    <div class="cate-res" :class="{'fix-ios-top': needFix}">
        <div class="top-space" v-if="needFix"></div>
        <div class="fixed-top">
            <brand-search></brand-search>
            <tab :page="page" class="fixed-tab"></tab>
        </div>
        <resources :content-code="contentCode" class="fixed-resource"></resources>
    </div>
</template>
<style>
    .cate-res {
        .channel-tab {
            top: 88px;
        }

        .resources {
            padding-top: 174px;

            .recommend-content-five {
                margin-top: 0;
            }
        }

        .fixed-top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            height: 168px;
        }

        .fixed-tab {
            position: fixed;
            top: 88px;
            z-index: 999;
        }
    }

    .fix-ios-top {
        .top-space {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 20px;
            background-color: #fff;
            z-index: 999;
        }

        .fixed-top {
            padding-top: 20px;
        }

        .fixed-tab {
            margin-top: 20px;
        }

        .fixed-resource {
            margin-top: 20px;
        }

    }
</style>
<script>
    import contentCode from 'content-code';
    import qs from 'yoho-qs';
    import cookie from 'yoho-cookie';

    import yoho from 'yoho';
    import tab from 'channel/tab.vue';
    import resources from 'component/resources/index.vue';
    import brandSearch from 'channel/brand-search.vue';


    const detaultChannel = qs.channel || cookie.get('_Channel') || 'men';

    export default {
        data() {
            return {
                page: 'cate',
                contentCode: contentCode.cate[detaultChannel],
                needFix: false
            };
        },
        components: {
            tab,
            resources,
            brandSearch
        },
        created() {
            if (yoho.isiOS) {
                this.needFix = true;
            }
        }
    };
</script>