<template>
    <view class="content">
        <view class="banner">
            <image class="img" src="/static/find/ranking_img.png" mode="widthFix"></image>
            <view class="title">
                {{ name }}
            </view>
        </view>
        <view class="box">
            <oct-menu
                :lists="menuArr"
                :btnStyle="{'margin-top': '30rpx'}"
                :isNumber="true"
                @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.id, title: $event.name }})" 
            />
        </view>
    </view>
</template>

<script>
    import { foods } from '@/apis/interfaces/ranking'
    export default {
        data() {
            return {
                name    : this.$Route.query.name,
                menuArr : []
            }
        },
        mounted() {
            this.getRank()
        },
        methods: {
            // 分类-食物
            getRank(){
            	foods({category_id: this.$Route.query.id}).then(res => {
                    this.menuArr = res.data
            	})
            }
        }
    };
</script>

<style lang="scss" scoped>
    .banner {
        position: relative;
        width: 100vw;
        padding-top: 25%;
        .img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .title {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9;
            padding: $padding * 3 $padding $padding $padding;
            font-size: $title-size + 8;
            font-weight: 600;
            color: transparent;
            background: linear-gradient(to right, #f5712f, #e6576b);
            background-clip: text;
        }
    }
    
    .box {
        padding: $padding;
        box-sizing: border-box;
    }
</style>
