From cd86143d43186e4dba4b5e99b2ab9d1d02436027 Mon Sep 17 00:00:00 2001
From: ghusermoon <2673031505@qq.com>
Date: Wed, 30 Sep 2020 11:34:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B4=E6=92=AD=E8=B5=84=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mine/RankList.vue | 68 ++++++++++++++++++++++++++++++-------
 1 file changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/views/mine/RankList.vue b/src/views/mine/RankList.vue
index ef05ccb..e744606 100644
--- a/src/views/mine/RankList.vue
+++ b/src/views/mine/RankList.vue
@@ -6,10 +6,10 @@
             <div class="hits">视频点击量</div>
         </div>
         <div class="list-body">
-            <div class="rank-item" v-for="item in rankData" :key="item.uid" :class="{'mine-item': item.uid === 8 }">
-                <div class="other-rank" :class="{'mine-rank': item.uid === 8 }">
+            <div class="rank-item" v-for="item in rankData" :key="item.uid" :class="{'mine-item': item.uid === 5 }">
+                <div class="other-rank" :class="{'mine-rank': item.uid === 5 }">
                     <div class="ranking-number">
-                        <span v-if="item.uid === 8" class="mine">我的成绩</span>
+                        <span v-if="item.uid === 5" class="mine">我的成绩</span>
                         <div v-else>
                             <img src="@/static/images/rank_first.png" class="rank-img" v-if="item.id === 1" />
                             <img src="@/static/images/rank_second.png" class="rank-img" v-else-if="item.id === 2" />
@@ -25,6 +25,13 @@
                     </div>
                     <div class="hits">{{ item.value }}</div>
                 </div>
+                <div class="third-ellipsis" v-if="item.id === 3">...</div>
+                <div class="twenty-ellipsis" v-if="item.id === 20">
+                    <div class="third-ellipsis">
+                        <div>...</div>
+                    </div>
+                    <div class="line"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -66,19 +73,25 @@ export default defineComponent({
             value: '1234',
         }, {
             uid: 4,
-            id: 4,
+            id: 20,
             avatar: '',
             name: '1234',
             value: '123',
         }, {
-            uid: 5,
-            id: 5,
+            uid: 15,
+            id: 21,
             avatar: '',
             name: '15',
             value: '12',
         }, {
-            uid: 6,
-            id: 6,
+            uid: 5,
+            id: 22,
+            avatar: '',
+            name: '61',
+            value: '1',
+        }, {
+            uid: 51,
+            id: 23,
             avatar: '',
             name: '61',
             value: '1',
@@ -117,14 +130,14 @@ export default defineComponent({
         .rank-item {
             position: relative;
             &:not(:last-child) {
-                margin-bottom: 28px;
+                margin-bottom: 26px;
             }
             .other-rank {
                 @include rank-public;
             }
             .mine-rank {
-                margin: 28px 0;
-                width: 100%;
+                // margin: 28px 0;
+                width: calc(100% + 14px);
                 display: flex;
                 align-items: center;
                 height: 56px;
@@ -136,6 +149,9 @@ export default defineComponent({
                 border-radius: 7px;
                 box-sizing: border-box;
                 padding-left: 14px;
+                .hits {
+                    color: #0EBCA4;
+                }
             }
             .ranking-number {
                 .rank-img {
@@ -164,9 +180,37 @@ export default defineComponent({
                 font-weight: bold;
                 color: #111111;
             }
+            .third-ellipsis {
+                height: 10px;
+                width: 28px;
+                text-align: center;
+                font-size: 15px;
+                font-weight: bold;
+                color: #666666;
+                user-select: none;
+            }
+            .twenty-ellipsis {
+                height: 20px;
+                display: flex;
+                align-items: flex-end;
+                .third-ellipsis {
+                    width: 135px;
+                    text-align: left;
+                    line-height: 0px;
+                    > div {
+                        width: 27px;
+                        text-align: center;
+                    }
+                }
+                .line {
+                    width: 427px;
+                    height: 1px;
+                    background: #09AE99;
+                }
+            }
         }
         .mine-item {
-            padding-bottom: 80px;
+            padding-bottom: 54px;
         }
     }
 }