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

<template>
  <view class="tipping-page">
    <!-- 顶部导航栏 -->
    <uv-navbar title="读者亲密值榜单" fixed placeholder></uv-navbar>

    <!-- 榜单前三名 -->
    <view class="top-three">
      <view class="top-item second">
        <image class="avatar" :src="topList[1].avatar" mode="aspectFill" />
        <view class="name">{{ topList[1].name }}</view>
        <view class="score">{{ topList[1].score }} 亲密值</view>
        <view class="level">护书使者 五级</view>
      </view>
      <view class="top-item first">
        <image class="avatar" :src="topList[0].avatar" mode="aspectFill" />
        <view class="name">{{ topList[0].name }}</view>
        <view class="score">{{ topList[0].score }} 亲密值</view>
        <view class="level">护书使者 五级</view>
      </view>
      <view class="top-item third">
        <image class="avatar" :src="topList[2].avatar" mode="aspectFill" />
        <view class="name">{{ topList[2].name }}</view>
        <view class="score">{{ topList[2].score }} 亲密值</view>
        <view class="level">护书使者 五级</view>
      </view>
    </view>

    <!-- 榜单列表 -->
    <view class="rank-list">
      <RankListItem
        v-for="(item, idx) in rankList"
        :key="item.id"
        :rankIcon="idx < 3 ? rankIcons[idx] : ''"
        :rankNumImg="idx >= 3 ? ('/static/rank-num-' + (idx+1) + '.png') : ''"
        medal="/static/medal.png"
        :avatar="item.avatar"
        :name="item.name"
        :score="item.score"
        level="护书使者 五级"
      />
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btn-area">
      <button class="tipping-btn">互动打赏</button>
    </view>
  </view>
</template>

<script>
import RankListItem from '@/components/novel/RankListItem.vue'
export default {
  components: { RankListItem },
  data() {
    return {
      topList: [
        {
          avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
          name: '周海',
          score: 6785452
        },
        {
          avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
          name: '冯冉冉',
          score: 6785452
        },
        {
          avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain',
          name: '南静',
          score: 6785452
        }
      ],
      rankList: [
        { id: 4, avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain', name: '钱胡胡', score: 5325324 },
        { id: 5, avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain', name: '冯艺瑄', score: 4819704 },
        { id: 6, avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain', name: '王凡宏', score: 4696874 },
        { id: 7, avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain', name: '辛书萍', score: 3722953 },
        { id: 8, avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain', name: '李婷', score: 2872476 },
        { id: 9, avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain', name: '郑盈', score: 2464869 },
        { id: 10, avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.iUyxJ_fxLjjX3kEBjteXWwAAAA?rs=1&pid=ImgDetMain', name: '吴承联', score: 990238 }
      ],
      rankIcons: [
        'https://img.yzcdn.cn/vant/rank-1.png',
        'https://img.yzcdn.cn/vant/rank-2.png',
        'https://img.yzcdn.cn/vant/rank-3.png'
      ]
    }
  }
}
</script>

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

.top-three {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 40rpx 0 20rpx 0;
  .top-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff7e0;
    border-radius: 20rpx;
    margin: 0 16rpx;
    padding: 24rpx 18rpx 18rpx 18rpx;
    box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,0.08);
    position: relative;
    width: 180rpx;
    .avatar {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      border: 4rpx solid #ffd700;
      margin-bottom: 10rpx;
    }
    .name {
      font-size: 28rpx;
      font-weight: bold;
      color: #b86e3b;
      margin-bottom: 6rpx;
    }
    .score {
      font-size: 24rpx;
      color: #e6b07c;
      margin-bottom: 4rpx;
    }
    .level {
      font-size: 22rpx;
      color: #b86e3b;
      background: #ffe7b2;
      border-radius: 10rpx;
      padding: 2rpx 12rpx;
    }
  }
  .first {
    transform: scale(1.15);
    z-index: 2;
    background: #fffbe6;
    box-shadow: 0 8rpx 24rpx 0 rgba(255,215,0,0.18);
  }
  .second, .third {
    z-index: 1;
    opacity: 0.95;
  }
}

.rank-list {
  background: transparent;
  margin: 0 24rpx;
  margin-top: 20rpx;
  .rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fffbe6;
    border-radius: 16rpx;
    margin-bottom: 18rpx;
    box-shadow: 0 2rpx 8rpx 0 rgba(184,110,59,0.06);
    padding: 0 24rpx;
    height: 100rpx;
    .rank-left {
      display: flex;
      align-items: center;
      .rank-icon, .rank-num-img {
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
      }
      .medal {
        width: 44rpx;
        height: 44rpx;
        margin-right: 10rpx;
      }
      .avatar {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        margin-right: 14rpx;
        border: 2rpx solid #ffd700;
        object-fit: cover;
      }
      .name {
        font-size: 26rpx;
        color: #222;
        font-weight: 500;
      }
    }
    .rank-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .score {
        font-size: 22rpx;
        color: #b86e3b;
      }
      .level {
        font-size: 20rpx;
        color: #fff;
        background: #e6b07c;
        border-radius: 8rpx;
        padding: 2rpx 10rpx;
        margin-top: 6rpx;
        font-weight: 500;
      }
    }
  }
}

.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>