.

src/components/product/ProductBanner.vue

@@ -11,16 +11,34 @@
                     <!-- <div class="video-box" v-if="isVideo(item)">
                         <van-icon color="#fff" size="60" name="play-circle" />
                     </div> -->
-                    <van-image v-if="opened === false" width="calc(100vw - 134px)" height="calc(100vw - 134px)"
-                        :src="require('../../assets/manghe.png')" fit="contain" />
-                    <video class="swiper-video" v-else-if="isVideo(item)" :src="item.url"
-                        :poster="getImg(changeImgs([item]), '', 1200)" playsinline="true" webkit-playsinline="true" loop
-                        ref="videoRef" autoplay>
+                    <van-image
+                        v-if="opened === false"
+                        width="calc(100vw - 134px)"
+                        height="calc(100vw - 134px)"
+                        :src="require('../../assets/manghe.png')"
+                        fit="contain"
+                    />
+                    <video
+                        class="swiper-video"
+                        v-else-if="isVideo(item)"
+                        :src="item.url"
+                        :poster="getImg(changeImgs([item]), '', 1200)"
+                        playsinline="true"
+                        webkit-playsinline="true"
+                        loop
+                        ref="videoRef"
+                        autoplay
+                    >
                         您的浏览器不支持 video 标签。
                     </video>
-                    <van-image v-else @click="preview(index, changeImgs(banners))" :src="getImg(item.url, '', 1200)"
-                        width="calc(100vw - 134px)" height="calc(100vw - 134px)"
-                        :fit="info.type === 'PICTURE' ? 'cover' : 'contain'" />
+                    <van-image
+                        v-else
+                        @click="preview(index, changeImgs(banners))"
+                        :src="getImg(item.url, '', 1200)"
+                        width="calc(100vw - 134px)"
+                        height="calc(100vw - 134px)"
+                        :fit="info.type === 'PICTURE' ? 'cover' : 'contain'"
+                    />
                     <!-- <div class="video-icon" v-if="isVideo(item)" @click="changeMuted">
                         <img
                             :src="
@@ -78,142 +96,142 @@ import { ImagePreview } from 'vant';
 import { watch, ref, computed, onMounted } from 'vue';
 import { useWindowSize } from '@vant/use';
 export default {
-	setup() {
-		const { width, height } = useWindowSize();
-
-		let swiperRef = null;
-
-		const setSwiperRef = swiper => {
-			swiperRef = swiper;
-		};
-
-		watch([width, height], () => {
-			swiperRef.update(true);
-		});
-
-		return { swiperRef: null, setSwiperRef };
-	},
-	props: {
-		info: {
-			type: Object,
-			default: () => {
-				return {};
-			}
-		},
-		pageType: {
-			type: String,
-			default: 'product'
-		},
-		startTime: {
-			type: String,
-			default: ''
-		},
-		assignment: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			muted: true,
-			playing: true
-		};
-	},
-	mixins: [product, asset],
-	components: {
-		Swiper,
-		SwiperSlide,
-		Post,
-		ThreeMode
-	},
-	computed: {
-		banners() {
-			return this.info.pic || [];
-		},
-		pageUrl() {
-			if (this.pageType === 'product') {
-				return 'productDetail';
-			} else {
-				return 'assetDetail';
-			}
-		},
-		isShare() {
-			return (
-				this.pageType === 'product' ||
-				(this.info.status === 'NORMAL' && (this.info.publicShow || this.info.consignment))
-			);
-		},
-		onlyImg() {
-			if (this.banners.length > 0 && !this.info.model3d) {
-				if (this.banners[0].type.indexOf('image') !== -1 || this.banners[0].type.indexOf('png') !== -1) {
-					return true;
-				}
-			}
-			return false;
-		}
-	},
-	mounted() {
-		setTimeout(() => {
-			this.playing = this.checkPlay();
-			// this.changeMuted();
-		}, 1000);
-	},
-	methods: {
-		changeMuted() {
-			this.$refs.videoRef[0].muted = !this.$refs.videoRef[0].muted;
-			this.muted = this.$refs.videoRef[0].muted;
-		},
-		share() {
-			this.$refs.post.init();
-		},
-		preview(index = 0, list = []) {
-			ImagePreview({
-				images: [...list],
-				startPosition: index
-			});
-		},
-		likeProduct() {
-			if (!this.info.liked) {
-				this.$http.get(`/collection/${this.info.id}/like`).then(() => {
-					this.$emit('getProduct');
-					setTimeout(() => {
-						this.$toast.success('收藏成功');
-					}, 300);
-				});
-			} else {
-				this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
-					this.$emit('getProduct');
-					setTimeout(() => {
-						this.$toast.success('取消收藏');
-					}, 300);
-				});
-			}
-		},
-		videoPlay(e) {
-			this.$refs.videoRef[0].play();
-			this.$nextTick(() => {
-				this.playing = true;
-			});
-		},
-		checkPlay() {
-			const _video = this.$refs.videoRef ? this.$refs.videoRef[0] : 0;
-			return !!(_video && _video.currentTime > 0 && !_video.paused && !_video.ended && _video.readyState > 2);
-		},
-		setAvatar() {
-			this.$toast.loading({
-				message: '加载中...',
-				forbidClick: true
-			});
-			this.updateUser({ avatar: this.banners[0].url, useCollectionPic: true }).then(res => {
-				this.$toast.success('设置成功');
-			});
-		},
-		setNickname() {
-			this.updateUser({ nickname: this.info.name }).then(res => {
-				this.$toast.success('设置成功');
-			});
-		}
-	}
+    setup() {
+        const { width, height } = useWindowSize();
+
+        let swiperRef = null;
+
+        const setSwiperRef = swiper => {
+            swiperRef = swiper;
+        };
+
+        watch([width, height], () => {
+            swiperRef.update(true);
+        });
+
+        return { swiperRef: null, setSwiperRef };
+    },
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        pageType: {
+            type: String,
+            default: 'product'
+        },
+        startTime: {
+            type: String,
+            default: ''
+        },
+        assignment: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            muted: true,
+            playing: true
+        };
+    },
+    mixins: [product, asset],
+    components: {
+        Swiper,
+        SwiperSlide,
+        Post,
+        ThreeMode
+    },
+    computed: {
+        banners() {
+            return this.info.pic || [];
+        },
+        pageUrl() {
+            if (this.pageType === 'product') {
+                return 'productDetail';
+            } else {
+                return 'assetDetail';
+            }
+        },
+        isShare() {
+            return (
+                this.pageType === 'product' ||
+                (this.info.status === 'NORMAL' && (this.info.publicShow || this.info.consignment))
+            );
+        },
+        onlyImg() {
+            if (this.banners.length > 0 && !this.info.model3d) {
+                if (this.banners[0].type.indexOf('image') !== -1 || this.banners[0].type.indexOf('png') !== -1) {
+                    return true;
+                }
+            }
+            return false;
+        }
+    },
+    mounted() {
+        setTimeout(() => {
+            this.playing = this.checkPlay();
+            // this.changeMuted();
+        }, 1000);
+    },
+    methods: {
+        changeMuted() {
+            this.$refs.videoRef[0].muted = !this.$refs.videoRef[0].muted;
+            this.muted = this.$refs.videoRef[0].muted;
+        },
+        share() {
+            this.$refs.post.init();
+        },
+        preview(index = 0, list = []) {
+            ImagePreview({
+                images: [...list],
+                startPosition: index
+            });
+        },
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('getProduct');
+                    setTimeout(() => {
+                        this.$toast.success('收藏成功');
+                    }, 300);
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('getProduct');
+                    setTimeout(() => {
+                        this.$toast.success('取消收藏');
+                    }, 300);
+                });
+            }
+        },
+        videoPlay(e) {
+            this.$refs.videoRef[0].play();
+            this.$nextTick(() => {
+                this.playing = true;
+            });
+        },
+        checkPlay() {
+            const _video = this.$refs.videoRef ? this.$refs.videoRef[0] : 0;
+            return !!(_video && _video.currentTime > 0 && !_video.paused && !_video.ended && _video.readyState > 2);
+        },
+        setAvatar() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.updateUser({ avatar: this.banners[0].url, useCollectionPic: true }).then(res => {
+                this.$toast.success('设置成功');
+            });
+        },
+        setNickname() {
+            this.updateUser({ nickname: this.info.name }).then(res => {
+                this.$toast.success('设置成功');
+            });
+        }
+    }
 };
 </script>
 

src/views/Discover.vue

@@ -1,24 +1,24 @@
 <template>
     <van-pull-refresh
-    	success-text="加载成功"
-    	success-duration="500"
-    	class="discover"
-    	v-model="isLoading"
-    	@refresh="onRefresh"
-    > 
-                        <van-sticky ref="top"> 
-                            <div class="padding-safe-top"> 
-                                <div class="top"> 
-                                    <img src="@assets/nav_logo.png" class="logo" alt="" /> 
-
-                                    <div class="search" @click="$router.push('/productSearch')"> 
-                                        <img src="@assets/icon-sosuo.png" alt="" /> 
-                                        <span> 搜索你要的精彩 </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </van-sticky>
-                        <!-- <swiper :slides-per-view="3" :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }"> 
+        success-text="加载成功"
+        success-duration="500"
+        class="discover"
+        v-model="isLoading"
+        @refresh="onRefresh"
+    >
+        <van-sticky ref="top">
+            <div class="padding-safe-top">
+                <div class="top">
+                    <img src="@assets/nav_logo.png" class="logo" alt="" />
+
+                    <div class="search" @click="$router.push('/productSearch')">
+                        <img src="@assets/icon-sosuo.png" alt="" />
+                        <span> 搜索你要的精彩 </span>
+                    </div>
+                </div>
+            </div>
+        </van-sticky>
+        <!-- <swiper :slides-per-view="3" :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }"> 
             <swiper-slide v-for="(item, index) in banners" :key="item.id"> 
                 <van-image
                     width="100%"
@@ -35,49 +35,49 @@
             </swiper-slide>
         </swiper> -->
 
-                        <div class="menu"> 
-                            <div class="menu-con menu-cons"> 
-                                <div
-                                    class="menu-item_con menu-item_con_one"
-                                    @click="$router.push('/hopeMarket')"
-                                    v-if="!$store.state.review"
-                                > 
-                                    <img :src="require(`@assets/info_icon_banquanshichang@3x.png`)" alt="" class="menu-item_con_img" /> 
-                                    <div> 
-                                        <div class="menu-item_con_title"> 元宇宙物资市场 </div>
-                                        <div class="menu-item_con_text"> 买卖你的元宇宙资产 </div>
-                                    </div>
-                                    <img :src="require(`@assets/png-yuanyuzhou@3x.png`)" alt="" class="menu-item_con_bg" /> 
-                                </div>
-                                <div class="menu-item_con menu-item_con_two" @click="$router.push('/activityList')"> 
-                                    <img
-                                        :src="require(`@assets/info_icon_banquanshichang@3x (1).png`)"
-                                        alt=""
-                                        class="menu-item_con_img"
-                                    /> 
-                                    <div> 
-                                        <div class="menu-item_con_title"> 铸造合成中心 </div>
-                                        <div class="menu-item_con_text"> 虚实结合，探索未知 </div>
-                                    </div>
-                                    <img src="../assets/png-hecheng@3x.png" alt="" class="menu-item_con_bg" /> 
-                                </div>
-                                <!-- <div class="text1"> 
+        <div class="menu">
+            <div class="menu-con menu-cons">
+                <div
+                    class="menu-item_con menu-item_con_one"
+                    @click="$router.push('/hopeMarket')"
+                    v-if="!$store.state.review"
+                >
+                    <img :src="require(`@assets/info_icon_banquanshichang@3x.png`)" alt="" class="menu-item_con_img" />
+                    <div>
+                        <div class="menu-item_con_title">元宇宙物资市场</div>
+                        <div class="menu-item_con_text">买卖你的元宇宙资产</div>
+                    </div>
+                    <img :src="require(`@assets/png-yuanyuzhou@3x.png`)" alt="" class="menu-item_con_bg" />
+                </div>
+                <div class="menu-item_con menu-item_con_two" @click="$router.push('/activityList')">
+                    <img
+                        :src="require(`@assets/info_icon_banquanshichang@3x (1).png`)"
+                        alt=""
+                        class="menu-item_con_img"
+                    />
+                    <div>
+                        <div class="menu-item_con_title">铸造合成中心</div>
+                        <div class="menu-item_con_text">虚实结合，探索未知</div>
+                    </div>
+                    <img src="../assets/png-hecheng@3x.png" alt="" class="menu-item_con_bg" />
+                </div>
+                <!-- <div class="text1"> 
                     <img src="../assets/info_icon_yishuzhanguan.png" alt="" /> 
                     <span> 艺术展览 </span>
                 </div>
                 <div class="text2"> 环球捕猎顶级艺术展览，尽在绿洲宇宙！ </div>
                 <img src="../assets/discover/yishuzhanlan-diwen.png" alt="" class="menu-bg" /> -->
-                            </div>
-                            <div class="menu-con"> 
-                                <div class="menu-item_con menu-item_con_three" @click="$router.push('/auction')"> 
-                                    <img :src="require(`@assets/info_icon_paimaixilie@3x.png`)" alt="" class="menu-item_con_img" /> 
-                                    <div> 
-                                        <div class="menu-item_con_title"> 绿洲易拍 </div>
-                                        <div class="menu-item_con_text"> 精品元宇宙物资与数字艺术品拍卖商 </div>
-                                    </div>
-                                    <img :src="require(`@assets/png-yipai@3x.png`)" alt="" class="menu-item_con_bg" /> 
-                                </div>
-                                <!-- <div
+            </div>
+            <div class="menu-con">
+                <div class="menu-item_con menu-item_con_three" @click="$router.push('/auction')">
+                    <img :src="require(`@assets/info_icon_paimaixilie@3x.png`)" alt="" class="menu-item_con_img" />
+                    <div>
+                        <div class="menu-item_con_title">绿洲易拍</div>
+                        <div class="menu-item_con_text">精品元宇宙物资与数字艺术品拍卖商</div>
+                    </div>
+                    <img :src="require(`@assets/png-yipai@3x.png`)" alt="" class="menu-item_con_bg" />
+                </div>
+                <!-- <div
                     class="menu-item_con menu-item_con_four"
                     @click="
                         goWin(
@@ -85,22 +85,22 @@
                         )
                     "
                 > -->
-                                <div class="menu-item_con menu-item_con_four" @click="$router.push('/domainname')"> 
-                                    <img :src="require(`@assets/info_icon_yanshengping@3x.png`)" alt="" class="menu-item_con_img" /> 
-                                    <div> 
-                                        <div class="menu-item_con_title"> 元宇宙域名 </div>
-                                        <div class="menu-item_con_text"> 属于你的元宇宙标识 </div>
-                                    </div>
-                                    <img src="../assets/png-yanshengpin@3x.png" alt="" class="menu-item_con_bg" /> 
-                                </div>
-                                <!-- <div class="text1"> 
+                <div class="menu-item_con menu-item_con_four" @click="$router.push('/domainname')">
+                    <img :src="require(`@assets/info_icon_yanshengping@3x.png`)" alt="" class="menu-item_con_img" />
+                    <div>
+                        <div class="menu-item_con_title">元宇宙域名</div>
+                        <div class="menu-item_con_text">属于你的元宇宙标识</div>
+                    </div>
+                    <img src="../assets/png-yanshengpin@3x.png" alt="" class="menu-item_con_bg" />
+                </div>
+                <!-- <div class="text1"> 
                     <img src="../assets/info_icon_yishuzhanguan.png" alt="" /> 
                     <span> 艺术展览 </span>
                 </div>
                 <div class="text2"> 环球捕猎顶级艺术展览，尽在绿洲宇宙！ </div>
                 <img src="../assets/discover/yishuzhanlan-diwen.png" alt="" class="menu-bg" /> -->
-                            </div>
-                            <!-- <div class="menu-right"> 
+            </div>
+            <!-- <div class="menu-right"> 
                 <div class="menu-item" @click="$router.push('/hopeMarket')" v-if="!$store.state.review"> 
                     <div class="text1"> 
                         <img src="../assets/discover/info_icon_banquanshichang.png" alt="" /> 
@@ -125,9 +125,9 @@
                     <img src="../assets/shangcheng-diwen.png" alt="" class="menu-bg" /> 
                 </div>
             </div> -->
-                        </div>
+        </div>
 
-                        <!-- <van-grid :border="false" :column-num="$store.state.review ? 2 : 4"> 
+        <!-- <van-grid :border="false" :column-num="$store.state.review ? 2 : 4"> 
             <van-grid-item
                 text="绿洲头条"
                 :to="{
@@ -158,75 +158,76 @@
                     <img class="grid-img" src="@assets/info_icon_weshoushichang.png" /> 
                 </template>
             </van-grid-item> -->
-                        <!-- <van-grid-item text="铸造商店" @click="wait"> 
+        <!-- <van-grid-item text="铸造商店" @click="wait"> 
                 <template v-slot:icon> 
                     <img class="grid-img" src="@assets/info_icon_zhuzaoshangdian.png" /> 
                 </template>
             </van-grid-item> -->
-                        <!-- </van-grid> -->
-
-                        <div class="box" ref="box"> 
-                            <van-sticky :offset-top="tabOffSet"> 
-                                <van-tabs
-                                    class="box-tabs"
-                                    v-model:active="sort"
-                                    shrink
-                                    line-width="16"
-                                    :before-change="beforeChange"
-                                    line-height="2"
-                                    @change="getList(true)"
-                                > 
-                                    <van-tab v-for="(item, index) in selectOptions" :key="index" :title="item.label" :name="item.value"> 
-                                    </van-tab>
-                                </van-tabs>
-                                <div class="meta_domain_classify" v-if="sort == 'domain'"> 
-                                    <div 
-                                        @click="buyingSelling"
-                                        class="meta_domain_classify_con" 
-                                        :class="{ domainClassify: domainClassify == 1 }"
-                                        > 
-                                        最新发布 </div>
-                                    <div
-                                        @click="positionRanking"
-                                        class="meta_domain_classify_con"
-                                        :class="{ domainClassify: domainClassify == 2 }"
-                                    > 
-                                        最多点赞
-                                    </div>
-                                </div>
-                            </van-sticky>
-                            <van-list
-                                style="padding-bottom: 100px"
-                                class="box-list"
-                                v-model:loading="loading"
-                                :finished="finished"
-                                finished-text=""
-                                @load="getList"
-                                :class="{ hotList: sort === 'hot' || sort === 'art_Exhibition' }"
-                                :immediate-check="false"
-                            > 
-                                <template v-for="(item, index) in showList" :key="item.id"> 
-                                    <product-info
-                                        v-if="sort === 'collection' || sort === 'collection_MY' || sort === 'domain'"
-                                        v-model:info="list[index]"
-                                        dark
-                                    > 
-                                    </product-info>
-                                    <creator-small v-else-if="sort === 'creator'" v-model:info="list[index]"> </creator-small>
-                                    <show-info v-else-if="sort === 'art_Exhibition'" v-model:info="list[item.index]" list> </show-info>
-                                    <show-info v-else-if="sort === 'hot'" v-model:info="list[index]" list> </show-info>
-                                </template>
-                                <van-empty
-                                    v-if="empty"
-                                    :description="`还没有个人藏品哦`"
-                                    :image="require(`@assets/empty_img_asset_dark.png`)"
-                                /> 
-                            </van-list>
-                        </div>
-
-                        <div class="tabbar-placeholder"> </div>
-                        <img src="../assets/icon_zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 100" alt="" />
-                    </van-pull-refresh>
+        <!-- </van-grid> -->
+
+        <div class="box" ref="box">
+            <van-sticky :offset-top="tabOffSet">
+                <van-tabs
+                    class="box-tabs"
+                    v-model:active="sort"
+                    shrink
+                    line-width="16"
+                    :before-change="beforeChange"
+                    line-height="2"
+                    @change="getList(true)"
+                >
+                    <van-tab v-for="(item, index) in selectOptions" :key="index" :title="item.label" :name="item.value">
+                    </van-tab>
+                </van-tabs>
+                <div class="meta_domain_classify" v-if="sort == 'domain'">
+                    <div
+                        @click="buyingSelling"
+                        class="meta_domain_classify_con"
+                        :class="{ domainClassify: domainClassify == 1 }"
+                    >
+                        最新发布
+                    </div>
+                    <div
+                        @click="positionRanking"
+                        class="meta_domain_classify_con"
+                        :class="{ domainClassify: domainClassify == 2 }"
+                    >
+                        最多点赞
+                    </div>
+                </div>
+            </van-sticky>
+            <van-list
+                style="padding-bottom: 100px"
+                class="box-list"
+                v-model:loading="loading"
+                :finished="finished"
+                finished-text=""
+                @load="getList"
+                :class="{ hotList: sort === 'hot' || sort === 'art_Exhibition' }"
+                :immediate-check="false"
+            >
+                <template v-for="(item, index) in showList" :key="item.id">
+                    <product-info
+                        v-if="sort === 'collection' || sort === 'collection_MY' || sort === 'domain'"
+                        v-model:info="list[index]"
+                        dark
+                    >
+                    </product-info>
+                    <creator-small v-else-if="sort === 'creator'" v-model:info="list[index]"> </creator-small>
+                    <show-info v-else-if="sort === 'art_Exhibition'" v-model:info="list[item.index]" list> </show-info>
+                    <show-info v-else-if="sort === 'hot'" v-model:info="list[index]" list> </show-info>
+                </template>
+                <van-empty
+                    v-if="empty"
+                    :description="`还没有个人藏品哦`"
+                    :image="require(`@assets/empty_img_asset_dark.png`)"
+                />
+            </van-list>
+        </div>
+
+        <div class="tabbar-placeholder"></div>
+        <img src="../assets/icon_zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 100" alt="" />
+    </van-pull-refresh>
 </template>
 
 <script>
@@ -237,335 +238,335 @@ import CreatorSmall from '../components/creator/CreatorSmall.vue';
 import ShowInfo from '../components/asset/showInfo.vue';
 import { useCssVar } from '@vueuse/core';
 export default {
-	name: 'discover',
-	inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll', 'safeTop'],
-	mixins: [banner, product],
-	components: {
-		ProductInfo,
-		CreatorSmall,
-		ShowInfo
-	},
-	data() {
-		return {
-			domainClassify: 1,
-			stiky: null,
-			banners: [],
-			box: [],
-			products: [],
-			hots: [],
-			miners: [],
-			list: [],
-			loading: false,
-			finished: false,
-			page: 0,
-			empty: false,
-			scrollTop: 0,
-			sort: 'collection',
-			selectOptions: [
-				{
-					label: '数字商品',
-					value: 'collection'
-				},
-				{
-					label: '元域名',
-					value: 'domain'
-				},
-				{
-					label: '个人作品',
-					value: 'collection_MY'
-				}
-			],
-			icons: [
-				require('../assets/info_icon_lvzhoutoutiao.png'),
-				require('../assets/info_icon_lvzhougongyi.png'),
-				require('../assets/info_icon_banquanshichang.png')
-			],
-			swiperRef: null,
-			notLike: '',
-			safeTop: useCssVar('--safe-top', document.body)
-		};
-	},
-	computed: {
-		tabOffSet() {
-			return Number((this.safeTop || '0').replace('px', '')) + 50;
-		},
-		showList() {
-			if (this.sort === 'art_Exhibition') {
-				let list = [...this.list];
-				return list
-					.map((item, index) => {
-						return {
-							...item,
-							index: index
-						};
-					})
-					.filter(item => {
-						return item.collections && item.collections.length > 0;
-					});
-			} else {
-				return this.list;
-			}
-		}
-	},
-	mounted() {
-		this.$store.dispatch('getUsedBuy');
-		this.getInit();
-
-		if (window.cordova && StatusBar && StatusBar.isVisible) {
-			StatusBar.styleLightContent();
-		}
-		this.$http
-			.get('/sysConfig/get/collect_not')
-			.then(res => {
-				console.log(res);
-				this.notLike = res.value;
-				return Promise.resolve();
-			})
-			.catch(e => {
-				return Promise.resolve();
-			})
-			.then(() => {
-				this.getList();
-			});
-
-		this.emitter.on('updateList', info => {
-			let list = [...this.list];
-			list.forEach((item, index) => {
-				if (info.id === item.id) {
-					list[index] = info;
-				}
-			});
-			this.list = list;
-		});
-	},
-	methods: {
-		buyingSelling() {
-			this.domainClassify = 1;
-			this.getList(true);
-		},
-		positionRanking() {
-			this.domainClassify = 2;
-			this.getList(true);
-		},
-		getInit() {
-			this.$toast.loading({
-				message: '加载中...',
-				forbidClick: true
-			});
-			return this.getBanner();
-			// this.getProduct('BLIND_BOX', this.sortOptions['精选盲盒']).then(res => {
-			//     this.box = res;
-			// });
-			// this.getProduct('DEFAULT', this.sortOptions['最HOT收藏品'], 'TRANSFER', 4).then(res => {
-			//     this.hots = res;
-			// });
-			// this.getProduct('DEFAULT', this.sortOptions['本期推荐']).then(res => {
-			//     this.products = res;
-			// });
-			// this.getMiner();
-		},
-		setSwiperRef(ref) {
-			this.swiperRef = ref;
-		},
-		getProduct(type = '', sort = 'sort,desc', source = 'OFFICIAL', size = 4) {
-			return this.$http
-				.post(
-					'/collection/all',
-					{
-						page: 0,
-						size: size,
-						query: {
-							type: type,
-							onShelf: true,
-							del: false,
-							source: source
-						},
-						sort: sort
-					},
-					{ body: 'json' }
-				)
-				.then(res => {
-					return Promise.resolve(res.content);
-				});
-		},
-		getBanner() {
-			return this.$http
-				.post(
-					'/banner/all',
-					{
-						query: {
-							type: 'DISCOVER',
-							del: false
-						},
-						sort: 'sort,asc;createdAt,desc'
-					},
-					{ body: 'json' }
-				)
-				.then(res => {
-					this.banners = res.content;
-					this.$toast.clear();
-					if (this.swiperRef) {
-						this.swiperRef.update();
-					}
-				});
-		},
-		beforeChange(index) {
-			// if (index === 'hot') {
-			//     this.wait();
-			//     return false;
-			// }
-			return true;
-		},
-		getList(isFirst = false) {
-			if (isFirst) {
-				this.page = 0;
-				this.list = [];
-				this.changeScroll(this.$refs.box.offsetTop - this.safeTop.split('px')[0].trim() - 50);
-			}
-			this.loading = true;
-			this.finished = false;
-			this.empty = false;
-			let url = '/collection/all';
-			let query = {
-				onShelf: true,
-				del: false,
-				source: this.$store.state.reviewPay ? 'OFFICIAL' : '',
-				notLike: this.notLike,
-				type: 'DEFAULT,BLIND_BOX'
-			};
-			let sort = 'createdAt,desc';
-			if (this.sort === 'collection_MY') {
-				query.type = 'PICTURE';
-			} else if (this.sort === 'domain') {
-				url = '/collection/all';
-				query = {
-					type: 'DOMAIN'
-				};
-				if (this.domainClassify == 1) {
-					sort = 'createdAt,desc';
-				} else {
-					sort = 'likes,desc';
-				}
-			} else if (this.sort === 'art_Exhibition') {
-				url = 'showroom/all';
-				query = {
-					del: false,
-					status: 'SUCCESS',
-					publish: true,
-					type: ''
-				};
-				sort = 'heats,desc';
-			} else if (this.sort === 'hot') {
-				url = 'showroom/all';
-				query = {
-					del: false,
-					status: 'SUCCESS',
-					publish: true
-				};
-				sort = 'heats,desc';
-			} else {
-				query.minPrice = 0;
-			}
-
-			return this.$http
-				.post(
-					url,
-					{
-						page: this.page,
-						size: 20,
-						query: query,
-						sort: sort
-					},
-					{ body: 'json' }
-				)
-				.then(res => {
-					if (res.first) {
-						this.page = 0;
-						this.list = res.content;
-					} else {
-						this.list = [...this.list, ...res.content];
-					}
-					this.empty = res.empty;
-					this.loading = false;
-					this.finished = res.last;
-					if (!res.last) {
-						this.page = this.page + 1;
-					}
-				});
-		},
-		getMiner() {
-			this.$http
-				.post(
-					'/user/all',
-					{
-						page: 0,
-						query: { minter: true },
-						size: 5,
-						sort: 'sales,desc'
-					},
-					{ body: 'json' }
-				)
-				.then(res => {
-					this.miners = res.content;
-					// console.log(this.miners);
-				});
-		},
-		onRefresh() {
-			this.page = 0;
-			Promise.all([this.getInit(), this.getList(), this.$store.dispatch('getUsedBuy')]).then(res => {
-				this.isLoading = false;
-			});
-		},
-		goTop() {
-			this.changeScroll(0, true);
-		},
-		goHall() {
-			this.$http
-				.get('/sysConfig/get/hall_show')
-				.then(res => {
-					if (res.value === true || res.value === '1') {
-						this.$router.push('/hallList');
-					} else {
-						return Promise.reject();
-					}
-				})
-				.catch(() => {
-					this.wait();
-				});
-		},
-		goAuction() {
-			this.$http
-				.get('/sysConfig/get/auction_show')
-				.then(res => {
-					if (res.value === true || res.value === '1') {
-						this.$router.push('/auction');
-					} else {
-						return Promise.reject();
-					}
-				})
-				.catch(() => {
-					this.$toast('升级改版中');
-				});
-		}
-	},
-	activated() {
-		this.$nextTick(() => {
-			this.changeScroll(this.scrollTop);
-		});
-		if (window.cordova && StatusBar && StatusBar.isVisible) {
-			StatusBar.styleLightContent();
-		}
-	},
-	beforeRouteLeave(to, from, next) {
-		if (!to.meta.menuPage || to.path === '/hall') {
-			this.scrollTop = this.scrollWrapper.scrollTop;
-			this.setKeeps(['index', 'discover']);
-		} else {
-			this.scrollTop = 0;
-			this.setKeeps(['index', 'discover'], false);
-		}
-		next();
-	}
+    name: 'discover',
+    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll', 'safeTop'],
+    mixins: [banner, product],
+    components: {
+        ProductInfo,
+        CreatorSmall,
+        ShowInfo
+    },
+    data() {
+        return {
+            domainClassify: 1,
+            stiky: null,
+            banners: [],
+            box: [],
+            products: [],
+            hots: [],
+            miners: [],
+            list: [],
+            loading: false,
+            finished: false,
+            page: 0,
+            empty: false,
+            scrollTop: 0,
+            sort: 'collection',
+            selectOptions: [
+                {
+                    label: '数字商品',
+                    value: 'collection'
+                },
+                {
+                    label: '元域名',
+                    value: 'domain'
+                },
+                {
+                    label: '个人作品',
+                    value: 'collection_MY'
+                }
+            ],
+            icons: [
+                require('../assets/info_icon_lvzhoutoutiao.png'),
+                require('../assets/info_icon_lvzhougongyi.png'),
+                require('../assets/info_icon_banquanshichang.png')
+            ],
+            swiperRef: null,
+            notLike: '',
+            safeTop: useCssVar('--safe-top', document.body)
+        };
+    },
+    computed: {
+        tabOffSet() {
+            return Number((this.safeTop || '0').replace('px', '')) + 50;
+        },
+        showList() {
+            if (this.sort === 'art_Exhibition') {
+                let list = [...this.list];
+                return list
+                    .map((item, index) => {
+                        return {
+                            ...item,
+                            index: index
+                        };
+                    })
+                    .filter(item => {
+                        return item.collections && item.collections.length > 0;
+                    });
+            } else {
+                return this.list;
+            }
+        }
+    },
+    mounted() {
+        this.$store.dispatch('getUsedBuy');
+        this.getInit();
+
+        if (window.cordova && StatusBar && StatusBar.isVisible) {
+            StatusBar.styleLightContent();
+        }
+        this.$http
+            .get('/sysConfig/get/collect_not')
+            .then(res => {
+                console.log(res);
+                this.notLike = res.value;
+                return Promise.resolve();
+            })
+            .catch(e => {
+                return Promise.resolve();
+            })
+            .then(() => {
+                this.getList();
+            });
+
+        this.emitter.on('updateList', info => {
+            let list = [...this.list];
+            list.forEach((item, index) => {
+                if (info.id === item.id) {
+                    list[index] = info;
+                }
+            });
+            this.list = list;
+        });
+    },
+    methods: {
+        buyingSelling() {
+            this.domainClassify = 1;
+            this.getList(true);
+        },
+        positionRanking() {
+            this.domainClassify = 2;
+            this.getList(true);
+        },
+        getInit() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            return this.getBanner();
+            // this.getProduct('BLIND_BOX', this.sortOptions['精选盲盒']).then(res => {
+            //     this.box = res;
+            // });
+            // this.getProduct('DEFAULT', this.sortOptions['最HOT收藏品'], 'TRANSFER', 4).then(res => {
+            //     this.hots = res;
+            // });
+            // this.getProduct('DEFAULT', this.sortOptions['本期推荐']).then(res => {
+            //     this.products = res;
+            // });
+            // this.getMiner();
+        },
+        setSwiperRef(ref) {
+            this.swiperRef = ref;
+        },
+        getProduct(type = '', sort = 'sort,desc', source = 'OFFICIAL', size = 4) {
+            return this.$http
+                .post(
+                    '/collection/all',
+                    {
+                        page: 0,
+                        size: size,
+                        query: {
+                            type: type,
+                            onShelf: true,
+                            del: false,
+                            source: source
+                        },
+                        sort: sort
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    return Promise.resolve(res.content);
+                });
+        },
+        getBanner() {
+            return this.$http
+                .post(
+                    '/banner/all',
+                    {
+                        query: {
+                            type: 'DISCOVER',
+                            del: false
+                        },
+                        sort: 'sort,asc;createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.banners = res.content;
+                    this.$toast.clear();
+                    if (this.swiperRef) {
+                        this.swiperRef.update();
+                    }
+                });
+        },
+        beforeChange(index) {
+            // if (index === 'hot') {
+            //     this.wait();
+            //     return false;
+            // }
+            return true;
+        },
+        getList(isFirst = false) {
+            if (isFirst) {
+                this.page = 0;
+                this.list = [];
+                this.changeScroll(this.$refs.box.offsetTop - this.safeTop.split('px')[0].trim() - 50);
+            }
+            this.loading = true;
+            this.finished = false;
+            this.empty = false;
+            let url = '/collection/all';
+            let query = {
+                onShelf: true,
+                del: false,
+                source: this.$store.state.reviewPay ? 'OFFICIAL' : '',
+                notLike: this.notLike,
+                type: 'DEFAULT,BLIND_BOX'
+            };
+            let sort = 'createdAt,desc';
+            if (this.sort === 'collection_MY') {
+                query.type = 'PICTURE';
+            } else if (this.sort === 'domain') {
+                url = '/collection/all';
+                query = {
+                    type: 'DOMAIN'
+                };
+                if (this.domainClassify == 1) {
+                    sort = 'createdAt,desc';
+                } else {
+                    sort = 'likes,desc';
+                }
+            } else if (this.sort === 'art_Exhibition') {
+                url = 'showroom/all';
+                query = {
+                    del: false,
+                    status: 'SUCCESS',
+                    publish: true,
+                    type: ''
+                };
+                sort = 'heats,desc';
+            } else if (this.sort === 'hot') {
+                url = 'showroom/all';
+                query = {
+                    del: false,
+                    status: 'SUCCESS',
+                    publish: true
+                };
+                sort = 'heats,desc';
+            } else {
+                query.minPrice = 0;
+            }
+
+            return this.$http
+                .post(
+                    url,
+                    {
+                        page: this.page,
+                        size: 20,
+                        query: query,
+                        sort: sort
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    if (res.first) {
+                        this.page = 0;
+                        this.list = res.content;
+                    } else {
+                        this.list = [...this.list, ...res.content];
+                    }
+                    this.empty = res.empty;
+                    this.loading = false;
+                    this.finished = res.last;
+                    if (!res.last) {
+                        this.page = this.page + 1;
+                    }
+                });
+        },
+        getMiner() {
+            this.$http
+                .post(
+                    '/user/all',
+                    {
+                        page: 0,
+                        query: { minter: true },
+                        size: 5,
+                        sort: 'sales,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.miners = res.content;
+                    // console.log(this.miners);
+                });
+        },
+        onRefresh() {
+            this.page = 0;
+            Promise.all([this.getInit(), this.getList(), this.$store.dispatch('getUsedBuy')]).then(res => {
+                this.isLoading = false;
+            });
+        },
+        goTop() {
+            this.changeScroll(0, true);
+        },
+        goHall() {
+            this.$http
+                .get('/sysConfig/get/hall_show')
+                .then(res => {
+                    if (res.value === true || res.value === '1') {
+                        this.$router.push('/hallList');
+                    } else {
+                        return Promise.reject();
+                    }
+                })
+                .catch(() => {
+                    this.wait();
+                });
+        },
+        goAuction() {
+            this.$http
+                .get('/sysConfig/get/auction_show')
+                .then(res => {
+                    if (res.value === true || res.value === '1') {
+                        this.$router.push('/auction');
+                    } else {
+                        return Promise.reject();
+                    }
+                })
+                .catch(() => {
+                    this.$toast('升级改版中');
+                });
+        }
+    },
+    activated() {
+        this.$nextTick(() => {
+            this.changeScroll(this.scrollTop);
+        });
+        if (window.cordova && StatusBar && StatusBar.isVisible) {
+            StatusBar.styleLightContent();
+        }
+    },
+    beforeRouteLeave(to, from, next) {
+        if (!to.meta.menuPage || to.path === '/hall') {
+            this.scrollTop = this.scrollWrapper.scrollTop;
+            this.setKeeps(['index', 'discover']);
+        } else {
+            this.scrollTop = 0;
+            this.setKeeps(['index', 'discover'], false);
+        }
+        next();
+    }
 };
 </script>
 
@@ -796,7 +797,7 @@ export default {
         padding: 16px;
         background: #272b2e;
 
-        .showInfo+.showInfo {
+        .showInfo + .showInfo {
             margin-top: 16px;
         }
 

src/views/DomainName.vue

@@ -1,8 +1,8 @@
 <template>
     <div :class="action != 1 ? 'meta_domain_nameOne' : 'meta_domain_nameTwo'" class="meta_domain_name">
-        <van-sticky ref="top" :offset-top="action == 1 ? '' : '0'" :class=" action == 3 ?'learn_more_bg':''">
+        <van-sticky ref="top" :offset-top="action == 1 ? '' : '0'" :class="action == 3 ? 'learn_more_bg' : ''">
             <div
-                :class=" action == 3 ?'meta_domain_name_tops':''"
+                :class="action == 3 ? 'meta_domain_name_tops' : ''"
                 class="meta_domain_name_top"
                 :style="{ height: heightNumber }"
             >
@@ -1157,7 +1157,7 @@ export default {
 /deep/.van-sticky--fixed {
     background-color: transparent;
 }
-/deep/ .learn_more_bg{
-    background: linear-gradient(90deg, #1B0222 0%, #23042E 100%, #23042E 100%) !important;
+/deep/ .learn_more_bg {
+    background: linear-gradient(90deg, #1b0222 0%, #23042e 100%, #23042e 100%) !important;
 }
 </style>

src/views/asset/Detail.vue

@@ -166,10 +166,10 @@
                     <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
                     <p v-else-if="info.type == 'DOMAIN' && !info.detail">
                         <van-image
-                        :src="require('@assets/metadomain_name_details.jpg')"
-                        width="100%"
-                        class="page-text page-detail"
-                        > 
+                            :src="require('@assets/metadomain_name_details.jpg')"
+                            width="100%"
+                            class="page-text page-detail"
+                        >
                         </van-image>
                     </p>
                     <div v-else class="textName">铸造者未设置</div>

src/views/product/Detail.vue

@@ -228,10 +228,10 @@
                     <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
                     <p v-if="info.type == 'DOMAIN' && !info.detail">
                         <van-image
-                        :src="require('@assets/metadomain_name_details.jpg')"
-                        width="100%"
-                        class="page-text page-detail"
-                        > 
+                            :src="require('@assets/metadomain_name_details.jpg')"
+                            width="100%"
+                            class="page-text page-detail"
+                        >
                         </van-image>
                     </p>
                 </van-collapse-item>

src/views/product/MetaDomain.vue

@@ -3,8 +3,12 @@
         <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)" />
+                    <img
+                        :src="require('../../assets/icon-back@3x.png')"
+                        alt=""
+                        class="page_top_one_img"
+                        @click="$router.go(-1)"
+                    />
                     RID元域名买卖市场
                 </div>
                 <!-- <div class="page_top_two">
@@ -33,11 +37,17 @@
                         >
                         </van-tab>
                     </van-tabs> -->
-                    <van-field v-model="value" :clearable="false" enterkeyhint="search" ref="fieldRef"
-                        :left-icon="require('@assets/icon_sosuo@3x.png')" placeholder="搜索该类目下的元域名" extra @keyup="onInput">
-                        <template #extra>
-                            <div class="flex_text">.nft</div>
-                        </template>>
+                    <van-field
+                        v-model="value"
+                        :clearable="false"
+                        enterkeyhint="search"
+                        ref="fieldRef"
+                        :left-icon="require('@assets/icon_sosuo@3x.png')"
+                        placeholder="搜索该类目下的元域名"
+                        extra
+                        @keyup="onInput"
+                    >
+                        <template #extra> <div class="flex_text">.nft</div> </template>>
                     </van-field>
                     <div class="page_top_three_btn" @click="screening">
                         <div class="page_top_three_btn_con">筛选</div>
@@ -55,20 +65,41 @@
                 </div>
             </div>
         </van-sticky>
-        <van-pull-refresh v-if="domainList.length == 0" 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">
+        <van-pull-refresh
+            v-if="domainList.length == 0"
+            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-empty
+                    :image="require('@assets/empty_img_asset_dark.png')"
+                    v-if="empty"
+                    description="没有任何藏品哦~"
+                />
             </van-list>
         </van-pull-refresh>
         <div class="meta_domain_name_list" v-else>
             <div class="meta_domain_name_list_con" v-for="(item, index) in domainList" :key="item.id">
                 <div class="meta_domain_name_list_con_left">
-                    <img :src="item.sold ? registered : unregistered" alt="" class="meta_domain_name_list_con_left_img" />
+                    <img
+                        :src="item.sold ? registered : unregistered"
+                        alt=""
+                        class="meta_domain_name_list_con_left_img"
+                    />
                     <div>
                         <div class="meta_domain_name_list_con_left_one">{{ item.domain }}</div>
                         <div class="meta_domain_name_list_con_left_con">
@@ -81,9 +112,11 @@
                 </div>
                 <div class="meta_domain_name_list_con_right" @click="buy(index)">
                     <div class="meta_domain_name_list_con_right_one">{{ item.sold ? '超链' : '购买' }}</div>
-                    <div :class="
-                                                                                                    item.sold ? 'meta_domain_name_list_con_right_three' : 'meta_domain_name_list_con_right_two'
-                                                                                                "></div>
+                    <div
+                        :class="
+                            item.sold ? 'meta_domain_name_list_con_right_three' : 'meta_domain_name_list_con_right_two'
+                        "
+                    ></div>
                 </div>
             </div>
         </div>
@@ -92,41 +125,77 @@
             <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" />
+                        <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"
-                                :class="domainNameType === item.type ? 'select-right_classification_list_con_texts' : ''">{{
-                                                                item.name }}</div>
-                            <img :src="require('../../assets/xingzhuangjiehe@3x.png')" alt=""
-                                class="select-right_classification_list_con_imgTwo" v-if="domainNameType === item.type" />
+                        <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"
+                                :class="
+                                    domainNameType === item.type ? 'select-right_classification_list_con_texts' : ''
+                                "
+                            >
+                                {{ 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" />
+                        <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"
+                        <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"
-                                :class="rarityType === item.type ? 'select-right_classification_list_con_textss' : ''">{{
-                                                                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" />
+                            :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"
+                                :class="rarityType === item.type ? 'select-right_classification_list_con_textss' : ''"
+                            >
+                                {{ 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>
@@ -145,273 +214,273 @@
 <script>
 import ProductInfo from '../../components/product/productInfo.vue';
 export default {
-	name: 'metaDomain',
-	inject: ['setKeeps', 'scrollWrapper', 'changeScroll','bodyScroll'],
-	data() {
-		return {
-			domainWidth: '0px',
-			domainNameType: 'LIKE',
-			scrollTop: 0,
-			rarityType: '',
-			show: false,
-			domainPrice: false,
-			source: true,
-			domainNameList: [
-				{
-					name: '热度排行',
-					type: 'LIKE'
-				},
-				{
-					name: '最新发布',
-					type: 'RELEASE'
-				},
-				{
-					name: '寄售中',
-					type: 'SELL'
-				},
-				{
-					name: '仅展示',
-					type: 'SEE'
-				}
-			],
-			rarityList: [
-				{
-					name: '1个字符',
-					type: 'RID1'
-				},
-				{
-					name: '2个字符',
-					type: 'RID2'
-				},
-				{
-					name: '3个字符',
-					type: 'RID3'
-				},
-				{
-					name: '4个字符',
-					type: 'RID4'
-				},
-				{
-					name: '5个字符',
-					type: 'RID5'
-				},
-				{
-					name: '6个字符及以上',
-					type: 'RID'
-				}
-			],
-			loading: false,
-			finished: false,
-			page: 0,
-			empty: false,
-			list: [],
-			domainList: [],
-			dressing: false,
-			search: '',
-			value: '',
-			unregistered: require('@assets/png-da-lv@3x.png'),
-			registered: require('@assets/png-da-zi@3x.png')
-		};
-	},
-	components: {
-		ProductInfo
-	},
-	methods: {
-		onInput(e) {
-			if (e.key === 'Enter') {
-				this.$nextTick(() => {
-					this.getSearch();
-				});
-				this.$refs.fieldRef.blur();
-			}
-		},
+    name: 'metaDomain',
+    inject: ['setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll'],
+    data() {
+        return {
+            domainWidth: '0px',
+            domainNameType: 'LIKE',
+            scrollTop: 0,
+            rarityType: '',
+            show: false,
+            domainPrice: false,
+            source: true,
+            domainNameList: [
+                {
+                    name: '热度排行',
+                    type: 'LIKE'
+                },
+                {
+                    name: '最新发布',
+                    type: 'RELEASE'
+                },
+                {
+                    name: '寄售中',
+                    type: 'SELL'
+                },
+                {
+                    name: '仅展示',
+                    type: 'SEE'
+                }
+            ],
+            rarityList: [
+                {
+                    name: '1个字符',
+                    type: 'RID1'
+                },
+                {
+                    name: '2个字符',
+                    type: 'RID2'
+                },
+                {
+                    name: '3个字符',
+                    type: 'RID3'
+                },
+                {
+                    name: '4个字符',
+                    type: 'RID4'
+                },
+                {
+                    name: '5个字符',
+                    type: 'RID5'
+                },
+                {
+                    name: '6个字符及以上',
+                    type: 'RID'
+                }
+            ],
+            loading: false,
+            finished: false,
+            page: 0,
+            empty: false,
+            list: [],
+            domainList: [],
+            dressing: false,
+            search: '',
+            value: '',
+            unregistered: require('@assets/png-da-lv@3x.png'),
+            registered: require('@assets/png-da-zi@3x.png')
+        };
+    },
+    components: {
+        ProductInfo
+    },
+    methods: {
+        onInput(e) {
+            if (e.key === 'Enter') {
+                this.$nextTick(() => {
+                    this.getSearch();
+                });
+                this.$refs.fieldRef.blur();
+            }
+        },
         goTop() {
-			this.changeScroll(0, true);
-		},
-		priceOrder() {
-			this.source = !this.source;
-			this.getList(true);
-		},
-		showStatus() {
-			this.show = false;
-			this.domainWidth = '0px';
-		},
-		screening() {
-			this.show = true;
-			this.domainWidth = 'calc(84vw + 1px)';
-			this.search = '';
-			this.value = '';
-		},
-		domainName(value) {
-			this.payType = value;
-		},
-		getSearch(value) {
-			this.search = this.value;
-			let matching = /^[A-Za-z0-9]+$/;
-			if (matching.test(this.search)) {
-				this.getList(true);
-			} else {
-				if (this.search == '') {
-					this.refreash();
-				} else {
-					this.$toast('只能由数字和字母组成');
-				}
-			}
-		},
-		refreash() {
-			(this.domainNameType = 'LIKE'), (this.rarityType = '');
-			this.dressing = false;
-			this.domainPrice = false;
-			this.getList(true);
-		},
-		submit() {
-			this.domainWidth = '0px';
-			this.show = false;
-			this.dressing = true;
-			this.getList(true);
-			if (this.domainNameType == 'SELL') {
-				this.domainPrice = true;
-			} else {
-				this.domainPrice = false;
-			}
-		},
-		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 = 'likes,desc';
-			if (this.dressing) {
-				if (this.rarityType != '') {
-					query = {
-						...query,
-						prefixName: this.rarityType
-					};
-				}
-				if (this.domainNameType == 'SELL') {
-					query = {
-						...query,
-						salable: true
-					};
-					if (this.source) {
-						sort = 'price,desc';
-					} else {
-						sort = 'price,asc';
-					}
-				}
-				if (this.domainNameType == 'SEE') {
-					query = {
-						...query,
-						salable: false
-					};
-				}
-				if (this.domainNameType == 'RELEASE') {
-					query = {
-						...query
-					};
-					sort = 'createdAt,desc';
-				}
-			}
-			let url = 'collection/all';
-			return this.$http
-				.post(
-					url,
-					{
-						page: this.page,
-						size: 20,
-						query: query,
-						sort: sort,
-						search: this.search
-					},
-					{ body: 'json' }
-				)
-				.then(res => {
-					if (res.first) {
-						this.list = [];
-						this.page = 0;
-					}
-					this.list = [...this.list, ...res.content];
-					this.empty = res.empty;
-					if (this.search != '' && res.empty == true) {
-						this.empty = false;
-						this.getDomain();
-					} else {
-						this.domainList = [];
-					}
-					this.loading = false;
-					this.finished = res.last;
-					if (!this.finished) {
-						this.page = this.page + 1;
-					}
-				});
-		},
-		buy(index) {
-			if (!this.domainList[index].sold) {
-				this.$router.push({
-					path: '/domainSubmit',
-					query: {
-						domain: this.domainList[index].domain
-					}
-				});
-			} else {
-				this.$toast('持有人超链暂未开启');
-			}
-		},
-		pad(n, width, z) {
-			z = z || '0';
-			n = n + '';
-			return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
-		},
-		getDomain() {
-			this.$http
-				.post('/domainOrder/search', {
-					domain: this.search
-				})
-				.then(res => {
-					res.forEach(item => {
-						if (item.endTime) {
-							item.endTime = this.dayjs(item.endTime).diff(this.dayjs(), 'second');
-							item.endTime =
-								Math.floor(item.endTime / 24 / 3600) +
-								'天' +
-								this.pad(parseInt(item.endTime / 3600) % 24, 2) +
-								'时' +
-								this.pad(parseInt(item.endTime / 60) % 60, 2) +
-								'分';
-						}
-					});
-					this.domainList = res;
-				})
-				.catch(e => {});
-		},
-		onRefresh() {
-			this.getList(true).then(() => {
-				this.isLoading = false;
-			});
-		}
-	},
-	activated() {
-		this.$nextTick(() => {
-			this.changeScroll(this.scrollTop);
-		});
-	},
-	beforeRouteLeave(to, from, next) {
-		if (to.name === 'productDetail') {
-			console.log('fahsdasdcffad');
-			this.scrollTop = this.scrollWrapper.scrollTop;
-			this.setKeeps(['metaDomain']);
-		} else {
-			this.scrollTop = 0;
-			this.setKeeps(['metaDomain'], false);
-		}
-		next();
-	}
+            this.changeScroll(0, true);
+        },
+        priceOrder() {
+            this.source = !this.source;
+            this.getList(true);
+        },
+        showStatus() {
+            this.show = false;
+            this.domainWidth = '0px';
+        },
+        screening() {
+            this.show = true;
+            this.domainWidth = 'calc(84vw + 1px)';
+            this.search = '';
+            this.value = '';
+        },
+        domainName(value) {
+            this.payType = value;
+        },
+        getSearch(value) {
+            this.search = this.value;
+            let matching = /^[A-Za-z0-9]+$/;
+            if (matching.test(this.search)) {
+                this.getList(true);
+            } else {
+                if (this.search == '') {
+                    this.refreash();
+                } else {
+                    this.$toast('只能由数字和字母组成');
+                }
+            }
+        },
+        refreash() {
+            (this.domainNameType = 'LIKE'), (this.rarityType = '');
+            this.dressing = false;
+            this.domainPrice = false;
+            this.getList(true);
+        },
+        submit() {
+            this.domainWidth = '0px';
+            this.show = false;
+            this.dressing = true;
+            this.getList(true);
+            if (this.domainNameType == 'SELL') {
+                this.domainPrice = true;
+            } else {
+                this.domainPrice = false;
+            }
+        },
+        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 = 'likes,desc';
+            if (this.dressing) {
+                if (this.rarityType != '') {
+                    query = {
+                        ...query,
+                        prefixName: this.rarityType
+                    };
+                }
+                if (this.domainNameType == 'SELL') {
+                    query = {
+                        ...query,
+                        salable: true
+                    };
+                    if (this.source) {
+                        sort = 'price,desc';
+                    } else {
+                        sort = 'price,asc';
+                    }
+                }
+                if (this.domainNameType == 'SEE') {
+                    query = {
+                        ...query,
+                        salable: false
+                    };
+                }
+                if (this.domainNameType == 'RELEASE') {
+                    query = {
+                        ...query
+                    };
+                    sort = 'createdAt,desc';
+                }
+            }
+            let url = 'collection/all';
+            return this.$http
+                .post(
+                    url,
+                    {
+                        page: this.page,
+                        size: 20,
+                        query: query,
+                        sort: sort,
+                        search: this.search
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    if (res.first) {
+                        this.list = [];
+                        this.page = 0;
+                    }
+                    this.list = [...this.list, ...res.content];
+                    this.empty = res.empty;
+                    if (this.search != '' && res.empty == true) {
+                        this.empty = false;
+                        this.getDomain();
+                    } else {
+                        this.domainList = [];
+                    }
+                    this.loading = false;
+                    this.finished = res.last;
+                    if (!this.finished) {
+                        this.page = this.page + 1;
+                    }
+                });
+        },
+        buy(index) {
+            if (!this.domainList[index].sold) {
+                this.$router.push({
+                    path: '/domainSubmit',
+                    query: {
+                        domain: this.domainList[index].domain
+                    }
+                });
+            } else {
+                this.$toast('持有人超链暂未开启');
+            }
+        },
+        pad(n, width, z) {
+            z = z || '0';
+            n = n + '';
+            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+        },
+        getDomain() {
+            this.$http
+                .post('/domainOrder/search', {
+                    domain: this.search
+                })
+                .then(res => {
+                    res.forEach(item => {
+                        if (item.endTime) {
+                            item.endTime = this.dayjs(item.endTime).diff(this.dayjs(), 'second');
+                            item.endTime =
+                                Math.floor(item.endTime / 24 / 3600) +
+                                '天' +
+                                this.pad(parseInt(item.endTime / 3600) % 24, 2) +
+                                '时' +
+                                this.pad(parseInt(item.endTime / 60) % 60, 2) +
+                                '分';
+                        }
+                    });
+                    this.domainList = res;
+                })
+                .catch(e => {});
+        },
+        onRefresh() {
+            this.getList(true).then(() => {
+                this.isLoading = false;
+            });
+        }
+    },
+    activated() {
+        this.$nextTick(() => {
+            this.changeScroll(this.scrollTop);
+        });
+    },
+    beforeRouteLeave(to, from, next) {
+        if (to.name === 'productDetail') {
+            console.log('fahsdasdcffad');
+            this.scrollTop = this.scrollWrapper.scrollTop;
+            this.setKeeps(['metaDomain']);
+        } else {
+            this.scrollTop = 0;
+            this.setKeeps(['metaDomain'], false);
+        }
+        next();
+    }
 };
 </script>