Browse Source

借阅排行榜图标问题

master
xuhuajiao 1 week ago
parent
commit
ce3689efd9
  1. 46
      subpkg/pages/ranking/ranking.vue

46
subpkg/pages/ranking/ranking.vue

@ -27,29 +27,16 @@
:key="index"
>
<!-- 第一名 -->
<view
class="ranking-icon t-icon"
:class="index === 0 ? 't-icon-TOP2' : ''"
v-if="index === 0"
></view>
<uni-icons class="ranking-icon" v-if="index === 0" custom-prefix="iconfont" type="icon-TOP2" size="26" color="#E6CB97"></uni-icons>
<!-- 第二名 -->
<view
class="ranking-icon t-icon"
:class="index === 1 ? 't-icon-TOP' : ''"
v-if="index === 1"
></view>
<uni-icons class="ranking-icon" v-if="index === 1" custom-prefix="iconfont" type="icon-TOP" size="26" color="#a2b2c3"></uni-icons>
<!-- 第三名 -->
<view
class="ranking-icon t-icon"
:class="index === 2 ? 't-icon-TOP1' : ''"
v-if="index === 2"
></view>
<uni-icons class="ranking-icon" v-if="index === 2" custom-prefix="iconfont" type="icon-TOP1" size="26" color="#D0BA9D"></uni-icons>
<!-- 4~15 显示数字 -->
<view
class="ranking-common-icon t-icon t-icon-tag"
v-if="index >= 3"
>{{ index + 1 }}</view>
<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
@ -271,17 +258,22 @@
position: absolute;
right: 10px;
top: -10px;
width: 64px;
height: 28px;
// width: 64px;
// height: 28px;
}
.ranking-common-icon{
position: absolute;
right: 10px;
top: -10px;
width: 28px;
height: 28px;
text-align: center;
color: #fff;
top: -4px;
.common-num{
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
text-align: center;
color: #fff;
}
}
}
</style>
Loading…
Cancel
Save