借阅排行榜图标问题

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>