[更新发现模块]

pages/ranking/list.vue

@@ -0,0 +1,73 @@
+<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>