元域名

src/App.vue

@@ -272,7 +272,12 @@ export default {
     &.store {
         background-color: #0f0f0f;
     }
-
+    &.ranking{
+        background: #010225;
+    }
+    &.metaDomain{
+        background: #000000;
+    }
     &.home {
         background-color: var(--bg);
     }

src/components/product/productInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="product" :style="{ background: bg }" @click="goDetail" :class="{ dark: dark }">
+    <div class="product" :style="{ background: bg }" @click="goDetail" :class="{ dark: dark, domain: domain }">
         <div class="product-top">
             <van-image
                 width="100%"
@@ -12,6 +12,16 @@
 
         <div class="content">
             <div class="name van-ellipsis">
+                <img
+                    :src="
+                        info.salable
+                            ? require('@assets/png-xiao-lv@3x (1).png')
+                            : require('@assets/png-xiao-zi@3x (1).png')
+                    "
+                    alt=""
+                    class="name_img"
+                    v-if="info.type == 'DOMAIN'"
+                />
                 {{ info.name }}
             </div>
             <template v-if="info.type === 'PICTURE'">
@@ -75,6 +85,10 @@ export default {
             type: Boolean,
             default: false
         },
+        domain: {
+            type: Boolean,
+            default: false
+        },
         type: {
             type: String,
             default: ''
@@ -169,6 +183,13 @@ export default {
             color: @text0;
             // color: #FFFFFF;
             line-height: 24px;
+            display: flex;
+            align-items: center;
+            .name_img{
+                width: 10px;
+                height: 18px;
+                margin-right: 4px;
+            }
         }
 
         .price {
@@ -215,6 +236,17 @@ export default {
             color: #fff;
         }
 
+        .price {
+            color: #43ce00;
+        }
+    }
+    &.domain {
+        background: #161414;
+
+        .name {
+            color: #fff;
+        }
+
         .price {
             color: #43ce00;
         }

src/router/index.js

@@ -1,10 +1,19 @@
-import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
+import {
+    createRouter,
+    createWebHistory,
+    createWebHashHistory
+} from 'vue-router';
 import store from '../store';
-import { Page } from './Page';
-import { Dialog } from 'vant';
+import {
+    Page
+} from './Page';
+import {
+    Dialog
+} from 'vant';
 import http from '../plugins/http';
 
 jsapiSign();
+
 function jsapiSign() {
     // return;
     // eslint-disable-next-line no-unreachable
@@ -16,7 +25,9 @@ function jsapiSign() {
             }
             let isIOS = /iphone|ipad/i.test(navigator.userAgent);
             http.http
-                .get('/wx/jsapiSign', { url: isIOS ? store.state.firstUrl : location.origin + location.pathname })
+                .get('/wx/jsapiSign', {
+                    url: isIOS ? store.state.firstUrl : location.origin + location.pathname
+                })
                 .then(res => {
                     wx.config({
                         debug: false,
@@ -57,8 +68,7 @@ function jsapiSign() {
         }
     }, 200);
 }
-const routes = [
-    {
+const routes = [{
         path: '/',
         redirect: 'home'
     },
@@ -66,16 +76,15 @@ const routes = [
         path: '/',
         name: 'index',
         component: () => import('../views/Index.vue'),
-        children: [
-            {
+        children: [{
                 path: '/home',
                 name: 'home',
                 component: () =>
-                    store.state.starPage
-                        ? import('../views/StarMap.vue')
-                        : store.state.hopeMarket
-                        ? import('../views/product/HopeMarket.vue')
-                        : import('../views/Home.vue'),
+                    store.state.starPage ?
+                    import('../views/StarMap.vue') :
+                    store.state.hopeMarket ?
+                    import('../views/product/HopeMarket.vue') :
+                    import('../views/Home.vue'),
                 meta: {
                     pageType: Page.Every,
                     menuPage: true
@@ -410,6 +419,16 @@ const routes = [
             tabColor: '#222426'
         }
     },
+    {
+        path: '/metaDomain',
+        name: 'metaDomain',
+        component: () => import('../views/product/MetaDomain.vue'),
+        meta: {
+            pageType: Page.Every,
+            menuPage: true
+            // tabColor: '#161414'
+        }
+    },
     {
         path: '/auction',
         name: 'auction',
@@ -764,6 +783,15 @@ const routes = [
         component: () => import('../views/user/Rank.vue'),
         meta: {}
     },
+    {
+        path: '/ranking',
+        name: 'ranking',
+        component: () => import('../views/user/Ranking.vue'),
+        meta: {
+            pageType: Page.Every,
+            menuPage: true
+        }
+    },
     {
         path: '/activityRank',
         name: 'activityRank',
@@ -839,13 +867,15 @@ const routes = [
 ];
 
 const router = createRouter({
-    history:
-        process.env.VUE_APP_CORDOVA === 'true'
-            ? createWebHashHistory()
-            : createWebHistory(process.env.VUE_APP_PUBLIC_PATH),
+    history: process.env.VUE_APP_CORDOVA === 'true' ?
+        createWebHashHistory() :
+        createWebHistory(process.env.VUE_APP_PUBLIC_PATH),
     routes,
     scrollBehavior(to, from, savedPosition) {
-        return { x: 0, y: 0 };
+        return {
+            x: 0,
+            y: 0
+        };
     }
 });
 
@@ -880,9 +910,9 @@ router.beforeEach((to, from, next) => {
                 })
                 .catch(() => {
                     Dialog.confirm({
-                        title: '提示',
-                        message: '用户未登录,是否立即登录'
-                    })
+                            title: '提示',
+                            message: '用户未登录,是否立即登录'
+                        })
                         .then(() => {
                             let url = '/login';
                             if (to.meta.needBack) {
@@ -935,4 +965,4 @@ function backNext(to) {
         return;
     }
 }
-export default router;
+export default router;

src/views/Discover.vue

@@ -411,13 +411,12 @@ export default {
                 del: false,
                 source: this.$store.state.reviewPay ? 'OFFICIAL' : '',
                 notLike: this.notLike,
-                type: 'DEFAULT,BLIND_BOX,DOMAIN'
+                type: 'DEFAULT,BLIND_BOX'
             };
             let sort = 'createdAt,desc';
             if (this.sort === 'collection_MY') {
                 query.type = 'PICTURE';
             } else if (this.sort === 'domain') {
-                console.log("fgfgafgajajcvnvhn")
                 url = '/collection/all';
                 query = {
                     type: 'DOMAIN'
@@ -456,6 +455,7 @@ export default {
                 )
                 .then(res => {
                     if (res.first) {
+                        this.page = 0;
                         this.list = res.content;
                     } else {
                         this.list = [...this.list, ...res.content];

src/views/DomainName.vue

@@ -14,7 +14,8 @@
                         @click="$router.push('/home')"
                     />
                     <div class="meta_domain_name_top_one_con">
-                        <div class="meta_domain_name_top_one_con_tip" @click="this.$toast('升级改版中')">
+                        <!-- @click="$router.push('/metaDomain')" -->
+                        <div class="meta_domain_name_top_one_con_tip" @click="$toast('升级改版中')">
                             <img
                                 :src="require('@assets/icon_shangchang@3x.png')"
                                 alt=""
@@ -22,7 +23,8 @@
                             />
                             <div>市场</div>
                         </div>
-                        <div class="meta_domain_name_top_one_con_tip" @click="this.$toast('升级改版中')">
+                        <!-- @click="$router.push('/ranking')" -->
+                        <div class="meta_domain_name_top_one_con_tip" @click="$toast('升级改版中')">
                             <img
                                 :src="require('@assets/icon_paihang@3x.png')"
                                 alt=""
@@ -122,7 +124,7 @@
             </div>
         </van-sticky>
         <van-image
-            :src="require('@assets/png-wanan@3x.png')"
+            :src="require('@assets/png-gengduo@3x.png')"
             width="100%"
             fit="fill"
             class="learn_more_img"
@@ -314,7 +316,7 @@
                 <div class="learn_more_btn_title">了解更多</div>
             </div>
         </div>
-        <img :src="require('@assets/png-huise-bg@3x.png')" alt="" class="meta_domain_name_bg" />
+        <!-- <img :src="require('@assets/png-huise-bg@3x.png')" alt="" class="meta_domain_name_bg" /> -->
     </div>
     <!-- <div>
         <div class="domain_name" v-if="domain">
@@ -552,7 +554,8 @@ export default {
     }
 }
 .learn_more_img {
-    margin-top: 12px;
+    margin-top: 20px;
+    vertical-align: middle;
 }
 .domain_name_list_two {
     width: 100%;

src/views/activity/List1.vue

@@ -14,6 +14,7 @@
                         height="calc(20vh - 10.6px)"
                         :src="getImg(item.pic)"
                         @click="goNext(item)"
+                        fit="fill"
                     />
                 </swiper-slide>
             </swiper>

src/views/product/MetaDomain.vue

@@ -0,0 +1,538 @@
+<template>
+    <div class="page">
+        <van-sticky>
+            <div class="padding-safe-top">
+                <div class="page_top_one">
+                    <img :src="require('../../assets/icon-back@3x.png')" alt="" class="page_top_one_img"
+                        @click="$router.go(-1)" />
+                    元域名二级市场
+                </div>
+                <!-- <div class="page_top_two">
+                    <div
+                        v-for="(item, index) in domainNameList"
+                        :key="index"
+                        @click="domainName(item.type)"
+                        class="page_top_two_con"
+                    >
+                        <img class="page_top_two_con_img" :src="payType === item.type ? icons[0] : icons[1]" alt="" />
+                        <div
+                            class="page_top_two_con_text"
+                            :class="payType === item.type ? 'page_top_two_con_textOne' : 'page_top_two_con_textTwo'"
+                        >
+                            {{ item.name }}
+                        </div>
+                    </div>
+                </div> -->
+                <div class="page_top_three">
+                    <!-- <van-tabs class="darkTabs" v-model:active="type" line-width="24" line-height="2" @click="changeTab">
+                        <van-tab
+                            :title="item.label"
+                            :name="item.value"
+                            :key="index"
+                            v-for="(item, index) in typeOptions"
+                        >
+                        </van-tab>
+                    </van-tabs> -->
+                    <van-search v-model="value" :left-icon="require('@assets/icon_sosuo@3x.png')" placeholder="搜索该类目下的元域名"
+                        show-action @search="getSearch">
+                        <template #action>
+                            <div>.nft</div>
+                        </template>
+                    </van-search>
+                    <div class="page_top_three_btn" @click="show = true">
+                        <div class="page_top_three_btn_con">筛选</div>
+                        <img :src="require('../../assets/shaixuan@3x.png')" alt="" class="page_top_three_btn_img" />
+                    </div>
+                </div>
+            </div>
+        </van-sticky>
+        <van-pull-refresh success-text="加载成功" success-duration="500" class="search" v-model="isLoading" :head-height="80"
+            @refresh="onRefresh">
+            <van-list style="padding-bottom: 100px" class="box-list" v-model:loading="loading" :finished="finished"
+                finished-text="" @load="getList">
+                <template v-for="(item, index) in list" :key="item.id">
+                    <product-info v-model:info="list[index]" domain></product-info>
+                </template>
+                <van-empty :image="require('@assets/empty_img_asset_dark.png')" v-if="empty" description="没有任何藏品哦~" />
+            </van-list>
+        </van-pull-refresh>
+        <van-popup v-model:show="show" position="right">
+            <div class="select-right padding-safe-top">
+                <div class="select-right_classification">
+                    <div class="select-right_classification_title">
+                        <img :src="require('../../assets/png-mingcheng@3x.png')" alt=""
+                            class="select-right_classification_title_img" />
+                        <div class="select-right_classification_title_text">元域名分类</div>
+                    </div>
+                    <div class="select-right_classification_list">
+                        <div v-for="(item, index) in domainNameList" :key="index"
+                            class="select-right_classification_list_con" @click="domainNameType = item.type"
+                            :class="domainNameType === item.type ? 'select-right_classification_list_cons' : ''">
+                            <img :src="require('../../assets/png-da-zi@3x.png')" alt=""
+                                class="select-right_classification_list_con_img" />
+                            <div class="select-right_classification_list_con_text">{{ item.name }}</div>
+                            <img :src="require('../../assets/xingzhuangjiehe@3x.png')" alt=""
+                                class="select-right_classification_list_con_imgTwo" v-if="domainNameType === item.type" />
+                        </div>
+                    </div>
+                </div>
+                <div class="select-right_classification select-right_classifications">
+                    <div class="select-right_classification_title">
+                        <img :src="require('../../assets/png-xiyoudu@3x.png')" alt=""
+                            class="select-right_classification_title_img" />
+                        <div class="select-right_classification_title_text">稀有度分类</div>
+                    </div>
+                    <div class="select-right_classification_list">
+                        <div v-for="(item, index) in rarityList" :key="index" class="select-right_classification_list_con"
+                            @click="rarityType = item.type"
+                            :class="rarityType === item.type ? 'select-right_classification_list_conss' : ''">
+                            <img :src="require('../../assets/png-da-lv@3x.png')" alt=""
+                                class="select-right_classification_list_con_img" />
+                            <div class="select-right_classification_list_con_text">{{ item.name }}</div>
+                            <img :src="require('../../assets/xingzhuangjiehe@3x@3x (1).png')" alt=""
+                                class="select-right_classification_list_con_imgTwo" v-if="rarityType === item.type" />
+                        </div>
+                    </div>
+                </div>
+                <div class="select-right_bottom">
+                    <van-button type="primary" plain round @click="refreash">重置</van-button>
+                    <van-button type="primary" round @click="submit">确认筛选</van-button>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script>
+import ProductInfo from '../../components/product/productInfo.vue';
+export default {
+    data() {
+        return {
+            domainNameType: 'LIKE',
+            rarityType: 'ONE',
+            show: false,
+            domainNameList: [
+                {
+                    name: '最多点赞',
+                    type: 'LIKE'
+                },
+                {
+                    name: '最新发布',
+                    type: 'RELEASE'
+                },
+                {
+                    name: '寄售中',
+                    type: 'SELL'
+                },
+                {
+                    name: '仅展示',
+                    type: 'SEE'
+                }
+            ],
+            rarityList: [
+                {
+                    name: '1个字符',
+                    type: 'ONE'
+                },
+                {
+                    name: '2个字符',
+                    type: 'TWO'
+                },
+                {
+                    name: '3个字符',
+                    type: 'THREE'
+                },
+                {
+                    name: '4个字符',
+                    type: 'FOUR'
+                },
+                {
+                    name: '5个字符',
+                    type: 'FIVE'
+                },
+                {
+                    name: '6个字符及以上',
+                    type: 'SIX'
+                }
+            ],
+            loading: false,
+            finished: false,
+            page: 0,
+            empty: false,
+            list: []
+        };
+    },
+    components: {
+        ProductInfo
+    },
+    methods: {
+        domainName(value) {
+            this.payType = value;
+        },
+        getSearch() { },
+        refreash() {
+            (this.domainNameType = ''), (this.rarityType = '');
+        },
+        submit() {
+            if (this.domainNameType == '' || this.rarityType == '') {
+                this.$toast('请选择筛选分类');
+                return;
+            }
+        },
+		getList(isFirst = false) {
+            if (isFirst) {
+                this.page = 0;
+                this.list = [];
+            }
+            this.loading = true;
+            this.finished = false;
+            this.empty = false;
+            let query = {
+                type: 'DOMAIN'
+            };
+            let sort = 'createdAt,desc';
+            let url = 'collection/all';
+            return this.$http
+                .post(
+                    url,
+                    {
+                        page: this.page,
+                        size: 20,
+                        query: query,
+                        sort: sort
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    if (res.first) {
+                        this.list = [];
+                        this.page = 0;
+                    }
+                    this.list = [...this.list, ...res.content];
+                    this.empty = res.empty;
+                    this.loading = false;
+                    this.finished = res.last;
+                    if (!this.finished) {
+                        this.page = this.page + 1;
+                    }
+                });
+        },
+        onRefresh() {
+            this.getList(true).then(() => {
+                this.isLoading = false;
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.page {
+    background: #000000;
+
+    .padding-safe-top {
+        background: #161414 !important;
+
+        .page_top_one {
+            height: 50px;
+            font-size: 16px;
+            font-weight: bold;
+            text-align: center;
+            color: #ffffff;
+            line-height: 50px;
+            position: relative;
+            margin-bottom: 5px;
+
+            .page_top_one_img {
+                width: 24px;
+                height: 24px;
+                position: absolute;
+                top: 13px;
+                left: 16px;
+            }
+        }
+
+        .page_top_two {
+            display: flex;
+            overflow-x: auto;
+            padding-left: 16px;
+            margin-bottom: 16px;
+
+            .page_top_two_con {
+                width: calc(25vw + 4.25px);
+                height: 36px;
+                margin-right: 16px;
+                position: relative;
+                flex-shrink: 0;
+            }
+
+            .page_top_two_con_img {
+                width: 100%;
+                height: 36px;
+                position: absolute;
+                left: 0;
+                top: 0;
+            }
+
+            .page_top_two_con_text {
+                font-size: 15px;
+                font-weight: bold;
+                line-height: 36px;
+                text-align: center;
+                position: relative;
+                z-index: 1;
+            }
+
+            .page_top_two_con_textOne {
+                color: #00fe1e;
+            }
+
+            .page_top_two_con_textTwo {
+                color: rgba(0, 254, 30, 0.5);
+            }
+        }
+
+        .page_top_three {
+            padding: 0px 20px 12px 16px;
+            height: 32px;
+            padding-bottom: 12px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .page_top_three_btn {
+            display: flex;
+            align-items: center;
+
+            .page_top_three_btn_con {
+                font-size: 16px;
+                font-weight: 400;
+                color: #00fe1e;
+                line-height: 24px;
+                text-shadow: 0px 0px 4px #00fe1e;
+                margin-right: 2px;
+            }
+
+            .page_top_three_btn_img {
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        /deep/ .van-tabs {
+            background: #161414;
+            padding-top: 2px;
+
+            .van-tabs__nav {
+                background: #161414;
+            }
+
+            .van-tab {
+                margin-right: 30px;
+            }
+
+            .van-tabs__wrap {
+                height: 20px !important;
+                overflow: visible;
+            }
+
+            .van-tabs__nav--line {
+                padding-bottom: 0px;
+            }
+
+            .van-tabs__line {
+                bottom: -6px;
+            }
+        }
+
+        /deep/ .van-search {
+            width: calc(68vw + 2px);
+            height: 32px;
+            background: #232121;
+            border-radius: 8px;
+            backdrop-filter: blur(2px);
+            padding: 0;
+
+            .van-search__content {
+                border-radius: 8px;
+                height: 32px;
+                padding: 0 10px;
+                background: #232121;
+                display: flex;
+                align-items: center;
+            }
+
+            .van-field__left-icon {
+                margin-right: 6px;
+            }
+
+            .van-search__field {
+                padding-right: 0px;
+            }
+
+            .van-field__control {
+                font-size: 12px;
+                font-weight: 400;
+                color: #ffffff;
+            }
+
+            .van-search__action {
+                // height: 32px;
+                font-size: 12px;
+                font-weight: 400;
+                color: #656464;
+                background: #232121;
+                border-radius: 8px;
+                padding-right: 10px;
+            }
+
+            .van-field__control::placeholder {
+                font-size: 12px;
+                font-weight: 400;
+                color: #656464;
+            }
+        }
+    }
+
+    .search {
+        padding-bottom: 50px;
+        margin-top: 9px;
+        z-index: 1;
+        background: #000000;
+        position: relative;
+
+        .box-list {
+            padding: 0 8px;
+        }
+    }
+
+    .select-right {
+        width: calc(84vw + 1px);
+        height: var(--app-height);
+        background: #222426;
+        box-sizing: border-box;
+        overflow: auto;
+        .bottom(100px);
+        position: relative;
+
+        .select-right_classification {
+            padding-top: 50px;
+
+            .select-right_classification_title {
+                padding-left: 10px;
+                display: flex;
+                margin-bottom: 26px;
+
+                .select-right_classification_title_img {
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 6px;
+                }
+
+                .select-right_classification_title_text {
+                    font-size: 16px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    line-height: 24px;
+                }
+            }
+
+            .select-right_classification_list {
+                padding-left: 28px;
+                padding-right: 16px;
+                display: flex;
+                justify-content: space-between;
+                flex-wrap: wrap;
+                align-items: center;
+
+                .select-right_classification_list_con {
+                    width: calc(32vw);
+                    height: 36px;
+                    background: #2d2b2b;
+                    border-radius: 4px;
+                    position: relative;
+                    margin-bottom: 32px;
+                    display: flex;
+                    align-items: center;
+                    box-sizing: border-box;
+                    color: #939599;
+
+                    .select-right_classification_list_con_img {
+                        width: 10px;
+                        height: 32px;
+                        padding-top: 1px;
+                    }
+
+                    .select-right_classification_list_con_text {
+                        width: calc(32vw - 16px);
+                        font-size: 13px;
+                        font-weight: 400;
+                        text-align: center;
+                    }
+
+                    .select-right_classification_list_con_imgTwo {
+                        width: 16px;
+                        height: 14px;
+                        position: absolute;
+                        bottom: 0;
+                        right: 0;
+                    }
+                }
+
+                .select-right_classification_list_cons {
+                    height: 38px;
+                    background: rgba(254, 24, 255, 0.2);
+                    border: 1px solid #fe18ff;
+                    box-sizing: border-box;
+                    color: #faf0ff;
+                    font-weight: bold;
+                }
+
+                .select-right_classification_list_conss {
+                    height: 38px;
+                    background: rgba(0, 254, 30, 0.2);
+                    border: 1px solid #00fe1e;
+                    box-sizing: border-box;
+                    color: #ffffff;
+                    font-weight: bold;
+                }
+            }
+        }
+
+        .select-right_classifications {
+            padding-top: 18px;
+        }
+
+        .select-right_bottom {
+            position: fixed;
+            bottom: 34px;
+            left: 0;
+            right: 0;
+            width: 100%;
+            padding: 9px 16px;
+            background: #161414;
+            .bottom(9px);
+            box-sizing: border-box;
+            .flex();
+            z-index: 20;
+
+            .van-button {
+                font-weight: bold;
+                color: #ffffff;
+
+                &:nth-child(1) {
+                    width: 100px;
+                    border: 1px solid #fe18fe;
+                    background: rgba(254, 24, 255, 0.3);
+                }
+
+                &:nth-child(2) {
+                    background: #fe18ff;
+                    flex-grow: 1;
+                    margin-left: 10px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/user/Ranking.vue

@@ -0,0 +1,364 @@
+<template>
+    <div class="page">
+        <van-loading size="24px" vertical v-if="loading">加载中</van-loading>
+        <div v-else>
+            <van-image
+                :src="require('@assets/png-yuanyuming@3x.png')"
+                width="100%"
+                fit="fill"
+                class="meta_domain_name_top_bgimg"
+            />
+            <div class="ranking_top">
+                <div
+                    class="ranking_top_one"
+                    @click="
+                        $router.push({
+                            path: '/creatorDetail',
+                            query: {
+                                id: domainList[1].userId,
+                                type: 'DEFAULT'
+                            }
+                        })
+                    "
+                >
+                    <div class="ranking_top_one_con">
+                        <div class="ranking_top_one_cons">
+                            <img :src="require('@assets/png-no2@3x.png')" alt="" class="ranking_top_one_con_img" />
+                            <img :src="domainList[1].userAvatar" alt="" class="ranking_top_one_con_imgs" />
+                        </div>
+                        <div class="ranking_top_text ranking_top_text_one">{{ domainList[1].userName }}</div>
+                        <div class="ranking_top_texts">44</div>
+                    </div>
+                </div>
+                <div
+                    class="ranking_top_two"
+                    @click="
+                        $router.push({
+                            path: '/creatorDetail',
+                            query: {
+                                id: domainList[0].userId,
+                                type: 'DEFAULT'
+                            }
+                        })
+                    "
+                >
+                    <div class="ranking_top_two_con">
+                        <div class="ranking_top_two_cons">
+                            <img :src="require('@assets/png-no1@3x.png')" alt="" class="ranking_top_two_img" />
+                            <img :src="domainList[0].userAvatar" alt="" class="ranking_top_two_imgs" />
+                        </div>
+                        <div class="ranking_top_text ranking_top_text_two">{{ domainList[0].userName }}</div>
+                        <div class="ranking_top_texts">44</div>
+                    </div>
+                </div>
+                <div
+                    class="ranking_top_three"
+                    @click="
+                        $router.push({
+                            path: '/creatorDetail',
+                            query: {
+                                id: domainList[2].userId,
+                                type: 'DEFAULT'
+                            }
+                        })
+                    "
+                >
+                    <div class="ranking_top_three_con">
+                        <div class="ranking_top_three_cons">
+                            <img :src="require('@assets/png-no3@3x.png')" alt="" class="ranking_top_three_img" />
+                            <img :src="domainList[2].userAvatar" alt="" class="ranking_top_three_imgs" />
+                        </div>
+                        <div class="ranking_top_text ranking_top_text_one">{{ domainList[2].userName }}</div>
+                        <div class="ranking_top_texts">44</div>
+                    </div>
+                </div>
+            </div>
+            <div class="ranking_head">
+                <div class="ranking_head_con">
+                    <div class="ranking_head_left">
+                        <div class="ths">排行</div>
+                        <div class="th">用户信息</div>
+                    </div>
+                    <div class="th">持仓数</div>
+                </div>
+            </div>
+            <div class="ranking_list">
+                <div
+                    v-for="(item, index) in newList"
+                    :key="index"
+                    :class="index % 2 == 0 ? 'ranking_list_one' : 'ranking_list_two'"
+                    @click="
+                        $router.push({
+                            path: '/creatorDetail',
+                            query: {
+                                id: item.userId,
+                                type: 'DEFAULT'
+                            }
+                        })
+                    "
+                >
+                    <div class="ranking_list_left">
+                        <div class="ranking_list_left_number">{{ index + 3 + 1 }}</div>
+                        <div class="ranking_list_left_con">
+                            <img :src="item.userAvatar" alt="" class="ranking_list_left_con_img" />
+                            {{ item.userName }}
+                        </div>
+                    </div>
+                    <div class="ranking_list_right_number">11</div>
+                </div>
+            </div>
+            <div class="page_return" @click="$router.go(-1)">
+                <img :src="require('@assets/icon_fanhui@3x (3).png')" alt="" class="page_return_img" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            domainList: [],
+            newList: [],
+            loading: true
+        };
+    },
+    mounted() {
+        this.$http
+            .post(
+                '/domainOrder/all',
+                {
+                    query: {
+                        orderStatus: 'FINISH'
+                    },
+                    size: 20,
+                    sort: 'createdAt,desc'
+                },
+                { body: 'json' }
+            )
+            .then(res => {
+                this.loading = false;
+                this.domainList = res.content;
+                this.newList = res.content.slice(3, 20);
+                this.newList.forEach(item => {
+                    if (item.userName.length > 6) {
+                        item.userName = item.userName.slice(0, 6) + '...';
+                    }
+                });
+            })
+            .catch(e => {});
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.page {
+    background: #010225;
+    .page_return {
+        width: 34px;
+        height: 34px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(1px);
+        position: fixed;
+        left: 16px;
+        top: calc(var(--safe-top) + 16px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .page_return_img {
+            width: 18px;
+            height: 18px;
+        }
+    }
+    .meta_domain_name_top_bgimg {
+        height: 400px;
+    }
+    .ranking_top {
+        height: 170px;
+        padding: 0px 16px 0px 17px;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        text-align: center;
+        .ranking_top_one {
+            display: flex;
+            justify-content: center;
+            width: 30%;
+            height: 100px;
+            background: linear-gradient(180deg, #064752 0%, rgba(7, 87, 95, 0) 100%);
+            border-radius: 4px;
+            .ranking_top_one_cons {
+                width: 69px;
+                height: 82px;
+                margin-top: -55px;
+                position: relative;
+            }
+            .ranking_top_one_con_img {
+                width: 69px;
+                height: 82px;
+            }
+            .ranking_top_one_con_imgs {
+                width: 58px;
+                height: 58px;
+                border-radius: 50%;
+                position: absolute;
+                left: 5px;
+                bottom: 4px;
+            }
+        }
+        .ranking_top_two {
+            display: flex;
+            justify-content: center;
+            width: 30%;
+            height: 148px;
+            background: linear-gradient(180deg, #064752 0%, rgba(7, 87, 95, 0) 100%);
+            border-radius: 4px;
+            .ranking_top_two_cons {
+                width: 79px;
+                height: 93px;
+                margin-top: -65px;
+                position: relative;
+            }
+            .ranking_top_two_img {
+                width: 79px;
+                height: 93px;
+            }
+            .ranking_top_two_imgs {
+                width: 68px;
+                height: 68px;
+                border-radius: 50%;
+                position: absolute;
+                left: 5px;
+                bottom: 4px;
+            }
+        }
+        .ranking_top_three {
+            display: flex;
+            justify-content: center;
+            width: 30%;
+            height: 100px;
+            background: linear-gradient(180deg, #064752 0%, rgba(7, 87, 95, 0) 100%);
+            border-radius: 4px;
+            .ranking_top_three_cons {
+                width: 69px;
+                height: 82px;
+                margin-top: -55px;
+                position: relative;
+            }
+            .ranking_top_three_img {
+                width: 69px;
+                height: 82px;
+            }
+            .ranking_top_three_imgs {
+                width: 58px;
+                height: 58px;
+                border-radius: 50%;
+                position: absolute;
+                left: 5px;
+                bottom: 4px;
+            }
+        }
+        .ranking_top_text {
+            font-size: 14px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+            margin-top: 5px;
+            margin-bottom: 2px;
+        }
+        .ranking_top_text_one {
+            width: 69px;
+            overflow: hidden; // 溢出隐藏
+            white-space: nowrap; // 强制一行
+            text-overflow: ellipsis; // 文字溢
+        }
+        .ranking_top_text_two {
+            width: 79px;
+            overflow: hidden; // 溢出隐藏
+            white-space: nowrap; // 强制一行
+            text-overflow: ellipsis; // 文字溢
+        }
+        .ranking_top_texts {
+            font-size: 20px;
+            color: #9cffec;
+            line-height: 24px;
+        }
+    }
+    .ranking_head {
+        margin-top: 12px;
+        padding: 0 16px;
+        .ranking_head_con {
+            width: 100%;
+            height: 38px;
+            padding: 0 26px;
+            box-sizing: border-box;
+            background: rgba(6, 71, 82, 0.4);
+            border-radius: 4px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 12px;
+            font-weight: 400;
+            color: #ffffff;
+        }
+        .ranking_head_left {
+            display: flex;
+            .ths {
+                margin-right: 40px;
+            }
+        }
+    }
+    .ranking_list {
+        margin-bottom: 140px;
+    }
+    .ranking_list_one {
+        height: 62px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .ranking_list_two {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 46px;
+        background: rgba(6, 71, 82, 0.2);
+    }
+    .ranking_list_left {
+        display: flex;
+        align-items: center;
+        .ranking_list_left_number {
+            width: 106px;
+            text-align: center;
+            font-size: 16px;
+            color: #ffffff;
+        }
+        .ranking_list_left_con {
+            display: flex;
+            font-size: 14px;
+            font-weight: 400;
+            color: #ffffff;
+            align-items: center;
+            .ranking_list_left_con_img {
+                width: 38px;
+                height: 38px;
+                border-radius: 30px;
+                border: 1px solid #f5f7fa;
+                margin-right: 10px;
+            }
+        }
+    }
+    .ranking_list_right_number {
+        padding-right: 42px;
+        font-size: 14px;
+        color: #ffffff;
+    }
+}
+/deep/ .van-loading {
+    padding-top: 70px !important;
+}
+</style>