library-wechat/subpkg/pages/ranking/ranking.vue

<template>
	<view>
		<view class="ranking-header">
      <image
       class="ranking-heander-bg"
        src="@/static/images/ranking-bg.png"
        mode="aspectFill"
      />
      <view class="ranking-header-txt">
        <view class="ranking-title">
          <uni-icons custom-prefix="iconfont" type="icon-paihangbang2" size="20"></uni-icons>
          <text class="title-text">借阅排行</text>
        </view>
        <text class="ranking-header-tip">由本图书馆累计借阅而定期生成排行榜单</text>
        <!-- <text class="ranking-num">共{{ bookList.length }}本</text> -->
      </view>
    </view>
    <view class="ranking-list">
      <view 
        class="ranking-item" 
        :class="[
          index === 0 ? 'first-item' : '',
          index === 1 ? 'two-item' : '',
          index === 2 ? 'three-item' : ''
        ]"
        v-for="(item, index) in bookList" 
        :key="index"
      >
        <!-- 第一名 -->
        <uni-icons class="ranking-icon" v-if="index === 0" custom-prefix="iconfont" type="icon-TOP2" size="26" color="#E6CB97"></uni-icons>
        <!-- 第二名 -->
        <uni-icons class="ranking-icon" v-if="index === 1" custom-prefix="iconfont" type="icon-TOP" size="26" color="#a2b2c3"></uni-icons>
        <!-- 第三名 -->
        <uni-icons class="ranking-icon" v-if="index === 2" custom-prefix="iconfont" type="icon-TOP1" size="26" color="#D0BA9D"></uni-icons>
        <!-- 4~15名 显示数字 -->
        <view  v-if="index >= 3" class="ranking-common-icon"> 
          <uni-icons custom-prefix="iconfont" type="icon-tag" size="28" color="#8899ab"></uni-icons>
          <text class="common-num">{{ index + 1 }}</text>
        </view>
        <!-- 书籍封面 -->
        <view class="ranking-item-img">
          <image
            class="book-cover"
            :src="item.cover"
            mode="scaleToFill"
          />
        </view>
        <!-- 书籍信息 -->
        <view class="ranking-book-info">
          <text class="book-info-title">{{ item.title }}</text>
          <text class="book-info-name">{{ item.author }}</text>
          <text class="book-info-desc line-clamp-3 ">{{ item.desc }}</text>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        bookList: [
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "名侦探柯南",
            author: "青山刚昌",
            desc: "《名侦探柯南》是日本漫画家青山刚昌创作的著名侦探漫画作品，讲述了高中生侦探工藤新一被灌下毒药后身体缩小，化名为江户川柯南，秘密调查黑暗组织，并解决无数离奇案件的故事。作品兼具推理、冒险、情感与幽默元素，是全球极具影响力的经典漫画。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "海贼王",
            author: "尾田荣一郎",
            desc: "《海贼王》讲述了主角蒙奇·D·路飞为了成为海贼王，与伙伴们在伟大航路上冒险，寻找传说中的One Piece的故事。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "火影忍者",
            author: "岸本齐史",
            desc: "《火影忍者》讲述了鸣人从小被孤立，通过努力成为忍者，最终成为英雄守护村子的故事。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "三体",
            author: "刘慈欣",
            desc: "《三体》是刘慈欣创作的长篇科幻小说，讲述了人类与三体文明之间的生死博弈。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "盗墓笔记",
            author: "南派三叔",
            desc: "《盗墓笔记》讲述了吴邪等人在古墓中探险，揭开一系列神秘谜团的故事。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "斗罗大陆",
            author: "唐家三少",
            desc: "《斗罗大陆》讲述了唐三穿越到斗罗大陆，一步步成为魂师巅峰的故事。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "斗破苍穹",
            author: "天蚕土豆",
            desc: "《斗破苍穹》讲述了萧炎从废柴少年逆袭成为斗气大陆最强者的故事。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "西游记",
            author: "吴承恩",
            desc: "《西游记》是中国古典四大名著之一，讲述了唐僧师徒西天取经的故事。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "红楼梦",
            author: "曹雪芹",
            desc: "《红楼梦》以贾史王薛四大家族为背景，讲述了贾宝玉与林黛玉的爱情悲剧。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "水浒传",
            author: "施耐庵",
            desc: "《水浒传》讲述了108位好汉在梁山起义，最终接受招安的故事。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "三国演义",
            author: "罗贯中",
            desc: "《三国演义》描写了从东汉末年到西晋初年的群雄割据与英雄争霸。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "沉默的大多数",
            author: "王小波",
            desc: "《沉默的大多数》是王小波的杂文精选，探讨了社会、文化与人性。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "活着",
            author: "余华",
            desc: "《活着》讲述了福贵在苦难中坚守生命的故事。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "人间失格",
            author: "太宰治",
            desc: "《人间失格》讲述了主人公叶藏从青年到颓废堕落的人生历程。"
          },
          {
            cover: "https://qiniu.aiyxlib.com/1606124577077",
            title: "解忧杂货店",
            author: "东野圭吾",
            desc: "《解忧杂货店》讲述了一家神奇杂货店帮助人们解决烦恼的温暖故事。"
          }
        ]
			};
		}
	}
</script>

<style lang="scss" scoped>
.ranking-header{
  position: relative;
  width: 100%;
  height: 150px;
  .ranking-heander-bg{
    width: 100%;
    height: 100%;
  }
  .ranking-header-txt{
    position: absolute;
    top: 0;
    left: 0;
    height: 150px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .ranking-title{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 26px;
      font-weight: bold;
      color: #1a1a1a;
      ::v-deep .uni-icons{
        color: #01a4fe !important;
      }
      .title-text{
        // 多层阴影 = 立体 + 好看
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15),
                    0 1px 2px rgba(0, 0, 0, 0.1);
        letter-spacing: 1px; /* 文字间距更舒服 */
        margin-left: 8px;
      }
    }
    .ranking-header-tip,
    .ranking-num{
      color: #333;
      font-size: 14px;
      padding-top: 15px;
    }
  }
}
.ranking-list{
  position: relative;
  background-color: #fff;
  border-radius: 26px 26px 0 0;
  margin-top: -30px;
  z-index: 999;
  padding: 20px 0;
}
.ranking-item{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 30px 20px 0 20px;
  padding: 10px;
  background-color: #f7f8fc;
  border-radius: 6px;
  .ranking-item-img{
    margin-right: 10px;
    .book-cover{
      width: 100px;
      height: 150px;
      border-radius: 10px;
      padding: 0 10px;
      background-color: #fff;
    }
  }
  .ranking-book-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #666;
    .book-info-title{
      font-size: 16px;
      font-weight: bold;
      color: #000;
      padding-top: 10px;
    }
    .book-info-name,
    .book-info-desc{
      padding-top: 10px;
      line-height: 24px;
    }
  }
  &.first-item{
    background-color: #fBF0BB;
  }
  &.two-item{
    background-color: #e9eff6;
  }
   &.three-item{
    background-color: #fBF0BB;
  }
  .ranking-icon{
    position: absolute;
    right: 10px;
    top: -10px;
    // width: 64px;
    // height: 28px;
  }
  .ranking-common-icon{
    position: absolute;
    right: 10px;
    top: -4px;
    .common-num{
      position: absolute;
      left: 0;
      top: 0;
      width: 28px;
      height: 28px;
      text-align: center;
      color: #fff;
    }
  }
}
</style>