novel-front-app/pages_order/novel/Tipping.vue

<template>
    <view class="tipping-page">
        <!-- 顶部导航栏 -->
        <navbar title="读者亲密值榜单" bgColor="#ac4b2c" color="#fff" leftClick @leftClick="$utils.navigateBack" />

        <!-- 榜单前三名 -->
        <view class="top-three">
            <view class="top-item second" v-if="topList[1]">
                <view class="avatar-frame">
                    <image class="frame-img" src="/pages_order/static/top/top1.png" mode="aspectFit"></image>
                    <image class="avatar" :src="topList[1].avatar" mode="aspectFill"></image>
                </view>
                <view class="badge">
                    <image class="badge-img" src="/pages_order/static/book/dj.png" mode="aspectFit"></image>
                </view>
                <view class="name">{{ topList[1].name }}</view>
                <view class="score">{{ topList[1].num }} 亲密值</view>
                <view class="level">护书使者 四级</view>
            </view>

            <view class="top-item first" v-if="topList[0]">
                <view class="avatar-frame">
                    <image class="frame-img" src="/pages_order/static/top/top1.png" mode="aspectFit"></image>
                    <image class="avatar" :src="topList[0].avatar" mode="aspectFill"></image>
                </view>
                <view class="badge">
                    <image class="badge-img" :src="topList[0].icon" mode="aspectFit"></image>
                </view>
                <view class="name">{{ topList[0].name }}</view>
                <view class="score">{{ topList[0].num }} 亲密值</view>
                <view class="level">护书使者 五级</view>
            </view>

            <view class="top-item third" v-if="topList[2]">
                <view class="avatar-frame">
                    <image class="frame-img" src="/pages_order/static/top/top1.png" mode="aspectFit"></image>
                    <image class="avatar" :src="topList[2].avatar" mode="aspectFill"></image>
                </view>
                <view class="badge">
                    <image class="badge-img" src="/pages_order/static/book/dj.png" mode="aspectFit"></image>
                </view>
                <view class="name">{{ topList[2].name }}</view>
                <view class="score">{{ topList[2].num }} 亲密值</view>
                <view class="level">护书使者 三级</view>
            </view>
        </view>

        <!-- 榜单列表 -->
        <view class="rank-list"
        v-if="topList.length > 3">
            <RankListItem v-for="(item, idx) in topList" 
            v-if="idx > 2"
            :key="item.id" />
        </view>

        <!-- 底部按钮 -->
        <view class="bottom-btn-area">
            <button class="tipping-btn"
            @click="$utils.navigateTo('pages_order/novel/Giftbox?id=' + bookId)"
            >互动打赏</button>
        </view>
    </view>
</template>

<script>
import RankListItem from '../components/novel/RankListItem.vue'
export default {
    components: {
        RankListItem
    },
    data() {
        return {
            topList: [],
            rankList: [],
            bookId: 0,
        }
    },
    onLoad(options) {
        this.bookId = options.id;
    },
    onShow() {
        this.getTopList();
    },
    methods: {
        getTopList() {
            this.$fetch('getIntimacyRankList', {
                bookId: this.bookId,
                pageNo: 1,
                pageSize: 10
            }).then(res => {
                this.topList = res.records;
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.tipping-page {
    min-height: 100vh;
    // background: linear-gradient(180deg, #b86e3b 0%, #e6b07c 100%);
    background-color: #ac4b2c;
    padding-bottom: 40rpx;
}

.top-three {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 80rpx 0 200rpx 0;
    padding: 0 30rpx;
    gap: 20rpx;

    .top-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        border-top-left-radius: 110rpx;
        border-top-right-radius: 110rpx;
        gap: 10rpx;
        padding-bottom: 20rpx;

        &.first {
            z-index: 3;
            margin-top: -50rpx;
            background: linear-gradient(to bottom, #F8DA87, #F8DA8700);
            border: 1px solid #fff;
        }

        &.second {
            z-index: 2;
            background: linear-gradient(to bottom, #C2C9CD, #C2C9CD00);
            border: 1px solid #fff;
            top: 80rpx;
        }

        &.third {
            z-index: 2;
            background: linear-gradient(to bottom, #834941, #83494100);
            border: 1px solid #fff;
            top: 80rpx;
        }

        .avatar-frame {
            position: relative;
            width: 220rpx;
            height: 220rpx;
            margin-top: -50rpx;

            .frame-img {
                position: absolute;
                width: 120%;
                height: 120%;
                z-index: 2;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .avatar {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
                height: 80%;
                border-radius: 50%;
                z-index: 1;
            }
        }

        .badge {
            width: 100rpx;
            height: 100rpx;
            z-index: 3;

            .badge-img {
                width: 100%;
                height: 100%;
            }
        }

        .name {
            margin-top: 10rpx;
            font-size: 36rpx;
            color: #FFFFFF;
            font-weight: bold;
        }

        .score {
            font-size: 28rpx;
            color: #FFFFFF;
            margin-top: 6rpx;
        }

        .level {
            position: absolute;
            bottom: -40rpx;
            width: 102%;
            text-align: center;
            padding: 6rpx 20rpx;
            background-color: #FFCC33;
            border-radius: 6rpx;
            font-size: 26rpx;
            color: #8B4513;
            font-weight: bold;
            box-sizing: border-box;
        }
    }
}

.rank-list {
    background: #FAE5BE;
    margin: 0 24rpx;
    padding: 20rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.bottom-btn-area {
    margin: 40rpx 24rpx 90rpx 24rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;

    .tipping-btn {
        width: 100%;
        height: 80rpx;
        background: #fffbe6;
        color: #b86e3b;
        font-size: 32rpx;
        border-radius: 40rpx;
        font-weight: bold;
        letter-spacing: 2rpx;
        box-shadow: 0 4rpx 16rpx 0 rgba(184, 110, 59, 0.12);
        border: none;
    }
}
</style>