1

src/assets/css/GameRanking.css

-.Ranking {
+.Ranking{
     width: 100%;
     height: 100%;
     background: url(/static/image/gamerank/bg.png);
@@ -9,79 +9,72 @@
     top: 0;
     z-index: 10009;
 }
-
-.Ranking .logo {
+.Ranking .logo{
     position: relative;
     left: 4rem;
     top: 2rem;
 }
-
-.Ranking p.tit {
+.Ranking p.tit{
     text-align: center;
     font-size: 4rem;
     color: white;
     position: relative;
-    top: -28px;
+    top: -20px;
 }
-
-.Ranking .rank-box {
+.Ranking .rank-box{
     width: 80%;
     margin: 0 auto;
     display: flex;
     padding-top: 4rem;
 }
-
 .Ranking .rank-box .item {
     width: 9rem;
+    padding: 6rem 0;
 }
-  
-.Ranking .rank-box .item .head {
+.Ranking .rank-box .item .head{
     position: relative;
     width: 5rem;
     height: 5rem;
     border-radius: 50%;
-    background: linear-gradient(0deg, rgba(247, 213, 23, 1), rgba(255, 171, 2, 1));
+    background:linear-gradient(0deg,rgba(247,213,23,1),rgba(255,171,2,1));
     padding: .4rem;
     margin: 0 auto;
 }
-
-.Ranking .rank-box .item .head .maozi {
+.Ranking .rank-box .item .head .maozi{
     position: absolute;
-    left: -23px;
-    top: -21px;
+    left: -12px;
+    top: -20px;
     box-sizing: border-box;
 }
-
-.Ranking .rank-box .item .head .user-img {
+.Ranking .rank-box .item .head .user-img{
     width: 5rem;
     height: 5rem;
     border-radius: 50%;
 }
+.Ranking .rank-box .item .body{
     
-.Ranking .rank-box .item .body {
     width: 60px;
-    margin: 2rem auto;
+    margin: 0 auto;
     height: 292px;
     position: relative;
+    margin-bottom: 3rem;
 } 
-
-.Ranking .rank-box .item .body .color {
+.Ranking .rank-box .item .body .color{
     position: absolute;
     left: 5%;
     bottom: 0;
     width: 89%;
-    background: linear-gradient(90deg, rgba(186, 76, 11, 1), rgba(233, 154, 53, 1), rgba(253, 244, 139, 1), rgba(209, 151, 25, 1));
-    border-radius: 0px 0px 30px 30px;
+    border-radius:0px 0px 30px 30px;
+    background: url(/static/image/gamerank/tiao2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
 }
-
-.Ranking .rank-box .item .name {
+.Ranking .rank-box .item .name{
     text-align: center;
     font-family: 'PingFangR';
     font-size: 2.4rem;
     color: white;
-    font-weight: 600;
 }
-
 .Ranking .rank-box .item .name p:nth-child(1) {
     padding: .4rem;
 }
\ No newline at end of file

src/components/playGame/GameRanking.vue

@@ -4,10 +4,10 @@
     <p class="tit"><span>排</span> <span>行</span> <span>榜</span></p>
     <div class="rank-box">
       <div class="item" v-for="(item, index) in rankingList">
-        <div class="head">
+        <!-- <div class="head">
           <img v-if="index < 3" class="maozi" :class="`maozi${index}`" :src="`/static/image/gamerank/maozi_${index+1}.png`" alt="">
           <img class="user-img" :src="item.photo" alt="">
-        </div>
+        </div> -->
         <div class="body">
           <div class="color" :style="{'height': item.height + '%'}"></div>
         </div>