购买力排行

src/views/user/Rank.vue

@@ -10,11 +10,32 @@
             <div class="text2">{{ time }}</div>
         </div>
         <div class="rank-content">
-            <div class="tabs">
+            <div class="tr-tab">
+                <div class="tab-item" :class="{ prim: active === 0 }" @click="changeRare(0)">
+                    <img v-if="active === 0" src="@assets/png-left-bg.png" class="bg" alt="" />
+                    <div class="text">
+                        <span>持仓总值排名</span>
+                    </div>
+                </div>
+                <div class="tab-item" :class="{ prim: active === 1 }" @click="changeRare(1)">
+                    <img v-if="active === 1" src="@assets/png-middle-bg.png" class="bg" alt="" />
+                    <div class="text">
+                        <span>一周购买力排行</span>
+                    </div>
+                </div>
+                <div class="tab-item" :class="{ prim: active === 2 }" @click="wait">
+                    <img v-if="active === 2" src="@assets/png-right-bg.png" class="bg" alt="" />
+                    <div class="text">
+                        <span>绿洲灵气值排名</span>
+                    </div>
+                </div>
+            </div>
+            <!-- <div class="tabs">
                 <div class="tab" @click="active = 0" :class="{ active: active === 0 }">持仓总值排名</div>
+                <div class="tab" @click="active = 0" :class="{ active: active === 2 }">持仓总值排名</div>
                 <div class="tab" @click="wait" :class="{ active: active === 1 }">绿洲灵气值排名</div>
                 <img class="tab-img" :class="{ 'tab-img-right': active === 1 }" src="@assets/rank-left.png" alt="" />
-            </div>
+            </div> -->
             <div class="tr">
                 <div class="th">排行</div>
                 <div class="th">用户头像</div>
@@ -78,6 +99,19 @@ export default {
         //     });
     },
     methods: {
+        changeRare(active) {
+            this.active = active;
+        },
+        getActive1() {
+            this.$http.get('/userHold/app/top').then(res => {
+                this.$toast.clear();
+                this.list = res
+                    .filter(item => {
+                        return item.userId !== '1435297' && item.userId !== '4273750';
+                    })
+                    .slice(0, 20);
+            });
+        },
         getFixed() {
             this.$toast.loading({
                 message: '加载中...',
@@ -299,4 +333,67 @@ export default {
         }
     }
 }
+.tr-tab {
+    .flex();
+    background: #f2f2f2;
+    border-radius: 16px 16px 0px 0px;
+    .tab-item {
+        width: 33.33%;
+        position: relative;
+        height: 49px;
+        .bg {
+            position: absolute;
+            top: 0;
+            width: 140px;
+            height: 50px;
+            z-index: 0;
+        }
+        .text {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1;
+            .flex();
+            align-items: flex-end;
+            justify-content: center;
+            color: #939599;
+            white-space: nowrap;
+            font-size: 12px;
+        }
+        &:nth-child(1) {
+            .bg {
+                left: 0;
+            }
+
+            .text {
+                left: 14px;
+                transform: translate(0, -50%);
+            }
+        }
+        &:nth-child(2) {
+            .bg {
+                left: 50%;
+                transform: translateX(-50%);
+            }
+        }
+
+        &:nth-child(3) {
+            .bg {
+                right: 0;
+            }
+
+            .text {
+                right: 14px;
+                transform: translate(-14px, -50%);
+            }
+        }
+        &.prim {
+            .text {
+                color: #3ab200;
+                font-weight: bold;
+            }
+        }
+    }
+}
 </style>