Merge branch 'dev' of xiongzhu/raex_front into master

src/components/TuanRank.vue

@@ -5,8 +5,9 @@
             <img class="fire2" src="@assets/fire2.gif" alt="" />
 
             <div class="content">
-                <img :src="activityIcon" alt="" />
-                <span>团灭大战</span>
+                <img src="@assets/png-xiaohui.png" alt="" />
+                <!-- <img :src="activityIcon" alt="" />
+                <span>团灭大战</span> -->
             </div>
         </div>
     </div>
@@ -28,7 +29,7 @@ export default {
     },
     methods: {
         goActivityRank() {
-            this.$router.push('/activityRank');
+            this.$router.push('/activityRank2');
         }
     }
 };
@@ -46,16 +47,21 @@ export default {
 .fire1 {
     width: 42px;
     display: block;
-    transform: translateY(12px);
+    transform: translateY(13px);
+    position: relative;
+    z-index: 1;
 }
 .fire2 {
     width: 40px;
-    height: 120px;
+    height: 134px;
     display: block;
+    position: relative;
+    z-index: 1;
 }
 .fire2bg {
-    background: linear-gradient(142deg, #8622b2 0%, #b730dc 47%, #8422b1 100%);
+    // background: linear-gradient(142deg, #8622b2 0%, #b730dc 47%, #8422b1 100%);
     position: relative;
+    z-index: 0;
 }
 .content {
     position: absolute;
@@ -66,21 +72,22 @@ export default {
     left: 0;
     right: 0;
     bottom: 0;
+    z-index: 0;
     img {
-        width: 26px;
-        height: 26px;
-    }
-    span {
-        width: 18px;
-        font-size: 18px;
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 20px;
-        background: linear-gradient(140deg, #fcfe1e 0%, #feffa3 48%, #fcfd1d 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        word-wrap: break-word;
-        margin-top: 3px;
+        width: 40px;
+        height: 134px;
     }
+    // span {
+    //     width: 18px;
+    //     font-size: 18px;
+    //     font-weight: bold;
+    //     color: #ffffff;
+    //     line-height: 20px;
+    //     background: linear-gradient(140deg, #fcfe1e 0%, #feffa3 48%, #fcfd1d 100%);
+    //     -webkit-background-clip: text;
+    //     -webkit-text-fill-color: transparent;
+    //     word-wrap: break-word;
+    //     margin-top: 3px;
+    // }
 }
 </style>

src/router/index.js

@@ -729,6 +729,12 @@ const routes = [
         component: () => import('../views/user/ActivityRank.vue'),
         meta: {}
     },
+    {
+        path: '/activityRank2',
+        name: 'activityRank2',
+        component: () => import('../views/user/ActivityRank2.vue'),
+        meta: {}
+    },
     {
         path: '/balanceRecord',
         name: 'balanceRecord',

src/views/user/ActivityRank2.vue

@@ -0,0 +1,278 @@
+<template>
+    <div class="rank">
+        <img src="../../assets/acitivityRank2.png" class="top-img" alt="" />
+        <div class="rank-content">
+            <div class="tr">
+                <div class="th">排行</div>
+                <div class="th">用户头像</div>
+                <div class="th">合成数量</div>
+            </div>
+            <div class="tr" v-for="(item, index) in list" :key="index">
+                <div class="td">
+                    <van-image
+                        v-if="index < 3"
+                        width="38"
+                        height="38"
+                        :src="require(`../../assets/info_icon_no${index + 1}.png`)"
+                    />
+                    <span v-else>{{ index + 1 }}</span>
+                </div>
+                <div class="td">
+                    <van-image width="28" height="28" radius="38" :src="item.avatar" />
+                    <span>{{ item.nickname }}</span>
+                </div>
+                <div class="td">
+                    {{ item.num }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            list: [],
+            time: '',
+            rare: 'SSR'
+        };
+    },
+    mounted() {
+        this.getList();
+    },
+    methods: {
+        getList() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http.get('/mintOrder/mintRank').then(res => {
+                this.$toast.clear();
+                this.list = res;
+            });
+        },
+        changeRare(rare) {
+            this.rare = rare;
+            this.getList();
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.rank {
+    background: #070707;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    .top-img {
+        width: 100%;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+    }
+    padding: 40vw 10px 0;
+
+    .top-text {
+        position: absolute;
+        top: 36px;
+        left: 20px;
+        color: #fff;
+
+        .text1 {
+            font-size: 36px;
+            font-family: 'ZhenyanGB';
+        }
+        .text2 {
+            font-size: 28px;
+            font-family: 'ZhenyanGB';
+            margin-top: 10px;
+        }
+    }
+
+    .time {
+        position: absolute;
+        left: 0px;
+        top: calc(48vw - 40px);
+        font-size: 12px;
+        color: #ffffff88;
+        line-height: 12px;
+        transform: scale(0.83) translateX(6px);
+        .text2 {
+            margin-top: 2px;
+        }
+    }
+}
+
+.rank-content {
+    height: 100%;
+    background-color: #fff;
+    border-radius: 16px 16px 0 0;
+    flex-grow: 1;
+    position: relative;
+    z-index: 1;
+    .bottom(15px);
+    overflow: hidden;
+    .tr {
+        overflow: hidden;
+        position: relative;
+        padding: 0 30px;
+        .flex();
+        .th {
+            font-size: 12px;
+            color: @text3;
+            line-height: 17px;
+            padding: 15px 0;
+
+            &:nth-child(1) {
+                width: 38px;
+                text-align: center;
+            }
+
+            &:nth-child(2) {
+                margin-left: 37px;
+                flex-grow: 1;
+            }
+        }
+
+        &:not(:first-child) {
+            &::after {
+                content: '';
+                bottom: 0;
+                left: 85px;
+                right: 0;
+                height: 1px;
+                background-color: #f5f7fa;
+                position: absolute;
+            }
+        }
+    }
+
+    .td {
+        padding: 10px 0;
+        flex-shrink: 0;
+        &:nth-child(2) {
+            margin: 0 10px 0 37px;
+            flex-grow: 1;
+            overflow: hidden;
+            .flex();
+            .van-image {
+                display: block;
+            }
+            span {
+                font-size: 14px;
+                color: #000000;
+                line-height: 24px;
+                margin-left: 6px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                max-width: 127px;
+            }
+        }
+
+        &:nth-child(3) {
+            overflow: hidden;
+            span {
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        &:nth-child(1) {
+            text-align: center;
+            width: 38px;
+            font-size: 20px;
+            font-family: 'AlibabaPuHuiTi';
+            color: @text3;
+            font-weight: bold;
+            line-height: 20px;
+        }
+    }
+}
+.tr-tab {
+    .flex();
+    background: rgba(0, 0, 0, 0.1);
+    .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;
+            i {
+                font-size: 22px;
+                display: block;
+            }
+            span {
+                font-size: 10px;
+                transform: translateX(-13px);
+            }
+        }
+        &:nth-child(1) {
+            .bg {
+                left: 0;
+            }
+        }
+        &:nth-child(2) {
+            .bg {
+                left: 50%;
+                transform: translateX(-50%);
+            }
+            .text {
+                span {
+                    transform: translateX(-20px);
+                }
+            }
+        }
+
+        &:nth-child(3) {
+            .bg {
+                right: 0;
+            }
+            .text {
+                span {
+                    transform: translateX(-26px);
+                }
+            }
+        }
+        &.prim {
+            &:nth-child(1) {
+                .text {
+                    color: #411c83;
+                }
+            }
+            &:nth-child(2) {
+                .text {
+                    color: #a34800;
+                }
+            }
+            &:nth-child(3) {
+                .text {
+                    color: #d37c3c;
+                }
+            }
+        }
+    }
+}
+</style>