novelAD/pages/bookMall/bookRanking.vue

<template>
    <view class="u-page">
        <view style="height: 100rpx;background: #f1f1f1;margin-bottom: 10px;">

        </view>
        <up-cate-tab class="cate-tab" height="calc(100vh - 120rpx)" :tabList="tabList" tabKeyName="title"
            itemKeyName="title">
            <template #pageItem="{ pageItem }">
                <view class="w-full" style="width: 100%;">
                    <up-cell-group :border='false'>
                        <up-cell :border='false'>
                            <template #icon>
                                <up-image :src="pageItem.bookImg" width="86rpx" height="113rpx"></up-image>
                            </template>
                            <template v-slot:title>
                                <view class="text-28">
                                    {{ pageItem.name }}
                                </view>
                            </template>
                            <template v-slot:label>
                                <view>
                                    <view class="pt-1 text-20 mgt-10 mgb-10 ellipsis">
                                        {{ pageItem.content }}
                                    </view>

                                    <view class="flex jc_between text-20">
                                        <view>
                                            <text class="text-2283ee">{{ pageItem.isFinish ? '已完结' : '连载中' }}</text>
                                            |
                                            <text class="text-333">{{ pageItem.author }}</text>
                                        </view>
                                        <view class="text-gray">{{ pageItem.readNum || 0 }}万人阅读</view>
                                    </view>
                                </view>
                            </template>
                            <template v-slot:value>
                            </template>
                        </up-cell>
                    </up-cell-group>
                </view>
            </template>
        </up-cate-tab>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 响应式数据  
const tabList = ref([
    {
        title: '热读榜', children: [
            {
                name: '我不想做豪门',
                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
                isFinish: true,
                author: '老虎',
                readNum: 1751.8
            },
            {
                name: '我不想做豪门',
                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
                isFinish: true,
                author: '老虎',
                readNum: 1751.8
            },
            {
                name: '我不想做豪门',
                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
                isFinish: true,
                author: '老虎',
                readNum: 1751.8
            },

        ]
    },
    {
        title: '追读榜', children: [
            {
                name: '我不想做豪门',
                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
                isFinish: true,
                author: '老虎',
                readNum: 1751.8
            },
            {
                name: '我不想做豪门',
                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
                isFinish: true,
                author: '老虎',
                readNum: 1751.8
            },
        ]
    },
    {
        title: '完结榜', children: [
            {
                name: '我不想做豪门',
                bookImg: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png',
                content: '我是小说内容我是小说内容我是小说内容我是小说内容我是小说内容我小说内容我',
                isFinish: true,
                author: '老虎',
                readNum: 1751.8
            },
        ]
    },
]);
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
page {
    background-color: $u-bg-color;
}

/* #endif */

.cate-tab {
    height: calc(100vh - 100rpx);
    /* #ifdef H5 */
    height: calc(100vh - 100rpx - var(--window-top));

    /* #endif */
    .text-red {
        color: red;
    }
}

.u-page {
    padding: 0;
    flex: 1;
    background-color: $u-bg-color;

    &__item {

        &__title {
            color: $u-tips-color;
            background-color: $u-bg-color;
            padding: 15px;
            font-size: 15px;

            &__slot-title {
                color: $u-primary;
                font-size: 14px;
            }
        }
    }
}
</style>