Ver código fonte

首页排行榜修改

wukunlin 5 anos atrás
pai
commit
cc4931226a

BIN
app/src/components/rank/img/icon-1.png


BIN
app/src/components/rank/img/icon-2.png


BIN
app/src/components/rank/img/icon-3.png


+ 12 - 23
app/src/components/rank/style.scss

@@ -38,29 +38,17 @@
             padding: 11px 20px 11px 20px;
             display: flex;
             align-items: center;
-            &:nth-of-type(3) {
-                .rank-num {
-                    background: #eb4c4c;
-                }
-            }
-            &:nth-of-type(1) {
-                .rank-num {
-                    background: #ff7d1e;
-                }
-            }
-            &:nth-of-type(2) {
-                .rank-num {
-                    background: #ffd33a;
-                }
-            }
-            &:nth-of-type(3),&:nth-of-type(1),&:nth-of-type(2) {
-                .rank-num {
-                    color: #fff;
-                }
-                .img {
-                    width: 48px;
-                    height: 48px;
+            @for $i from 1 through 3 {
+                &:nth-of-type(#{$i}) {
+                    .rank-num {
+                        background: url(./img/icon-#{$i}.png) no-repeat center / 100% ;
+                    }
+                    .img {
+                        width: 48px;
+                        height: 48px;
+                    }
                 }
+                
             }
             .rank-num {
                 flex-shrink: 0;
@@ -72,7 +60,8 @@
                 color: #999999;
                 font-size: 12px;
                 margin-right: 17px;
-                background: #e8e8e8;
+                font-style: italic;
+                // background: #e8e8e8;
             }
             .img {
                 flex-shrink: 0;