feature

1. 邀请榜美化

components/modules/menuBox/menuClass/invite/index.vue

@@ -10,12 +10,36 @@
     </div>
     <div class="invite__list-box">
       <div class="invite__list-box__list">
-        <div class="invite__list-box__list--item" v-for="(item, index) in list" :key="index">
+        <div class="invite__list-box__list--topthree">
+          <div v-for="(item, index) in threeList" :key="index" style="display: inline-block;" :class="index === 0 ? 'first-box' : index === 1 ? 'second-box': 'third-box'">
+            <div class="invite__list-box__list--topthree__item">
+               <div class="invite__list-box__list--topthree__item--head second" v-if="index === 0">
+                <img v-if="item.userHeadImg" :src="item.userHeadImg" />
+                <img v-else :src="channelInfo.defaultPhoneHeadAva" />
+               </div>
+               <div class="invite__list-box__list--topthree__item--head first" v-if="index === 1">
+                 <img v-if="item.userHeadImg" :src="item.userHeadImg" />
+                 <img v-else :src="channelInfo.defaultPhoneHeadAva" />
+               </div>
+               <div class="invite__list-box__list--topthree__item--head third" v-if="index === 2">
+                 <img v-if="item.userHeadImg" :src="item.userHeadImg" />
+                 <img v-else :src="channelInfo.defaultPhoneHeadAva" />
+               </div>
+               <div class="invite__list-box__list--topthree__item--name">{{ item.userNick }}</div>
+               <div class="invite__list-box__list--topthree__item--num">
+                 邀请
+                 <span>{{ item.times | formatNum }}</span>
+                 人
+               </div>
+            </div>
+          </div>
+        </div>
+        <div class="invite__list-box__list--item" v-for="(item, index) in afterList" :key="index">
           <div class="invite__list-box__list--item--no">
-            <img v-if="index == 0" src="./img/no-1.png" />
+            <!-- <img v-if="index == 0" src="./img/no-1.png" />
             <img v-else-if="index == 1" src="./img/no-2.png" />
-            <img v-else-if="index == 2" src="./img/no-3.png" />
-            <span v-else>{{ index + 1 }}</span>
+            <img v-else-if="index == 2" src="./img/no-3.png" /> -->
+            <span>{{ index + 4 }}</span>
           </div>
           <div class="invite__list-box__list--item--head">
             <img v-if="item.userHeadImg" :src="item.userHeadImg" />
@@ -49,7 +73,13 @@ export default {
     ...mapGetters({
       nowDate: 'nowDate',
       channelInfo: 'channelInfo'
-    })
+    }),
+    threeList(){
+      return this.list.slice(0, 3)
+    },
+    afterList() {
+      return this.list.slice(3)
+    }
   },
   mounted() {
     this._getInvitationList();
@@ -116,6 +146,107 @@ export default {
 }
 .invite__list-box {
   .invite__list-box__list {
+    &--topthree {
+      margin: .2rem;
+      position: relative;
+      height: 1.6rem;
+      .first-box {
+        position: absolute;
+        left: calc(50% - 0.6rem);
+        bottom: 0;
+      }
+      .second-box {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+      .third-box {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+      }
+      &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-end;
+        font-size: 0.12rem;
+        .first {
+          &::after {
+            position: absolute;
+            top: -.2rem;
+            left: calc(50% - .15rem);
+            height: .2rem;
+            width: .3rem;
+            content: '';
+            background-image: url(./img/second.png);
+            background-size: 100% 100%;
+          }
+          position:relative;
+          border: 3px solid #f7f2fc;
+          height: .8rem;
+          width: .8rem;
+        }
+        .second {
+          &::after {
+            position: absolute;
+            top: -.233rem;
+            left: calc(50% - .2rem);
+            height: .233rem;
+            width: .4rem;
+            content: '';
+            background-image: url(./img/first.png);
+            background-size: 100% 100%;
+          }
+          position:relative;
+          border: 3px solid #eda52a;
+          height: 1.2rem;
+          width: 1.2rem;
+        }
+        .third {
+          &::after {
+            position: absolute;
+            top: -.2rem;
+            left: calc(50% - .15rem);
+            height: .2rem;
+            width: .3rem;
+            content: '';
+            background-image: url(./img/third.png);
+            background-size: 100% 100%;
+          }
+          position:relative;
+          border: 3px solid #e96717;
+          height: .8rem;
+          width: .8rem;
+        }
+        &--head {
+          flex: 0 0 auto;
+          width: 1rem;
+          height: 1rem;
+          border-radius: 100%;
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            border-radius: 100%;
+          }
+        }
+        &--name {
+          margin: 0.08rem;
+          font-size: 0.12rem;
+          color: #808080;
+          word-break: break-all;
+        }
+        &--num {
+          flex: 0 0 auto;
+          font-size: 0.12rem;
+          color: #808080;
+          span {
+            color: #ff3b3b;
+          }
+        }
+      }
+    }
     .invite__list-box__list--item {
       display: flex;
       align-items: center;