|
|
@@ -1,47 +1,28 @@
|
|
|
<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' : ''">
|
|
|
- <div
|
|
|
- :class="action == 3 ? 'meta_domain_name_tops' : ''"
|
|
|
- class="meta_domain_name_top"
|
|
|
- :style="{ height: heightNumber }"
|
|
|
- >
|
|
|
+ <div :class="action == 3 ? 'meta_domain_name_tops' : ''" class="meta_domain_name_top"
|
|
|
+ :style="{ height: heightNumber }">
|
|
|
<div class="meta_domain_name_top_one" v-if="action == 1">
|
|
|
- <img
|
|
|
- :src="require('@assets/icon_fanhui@3x (1).png')"
|
|
|
- alt=""
|
|
|
- class="meta_domain_name_top_img_left"
|
|
|
- @click="$router.push('/home')"
|
|
|
- />
|
|
|
+ <img :src="require('@assets/icon_fanhui@3x (1).png')" alt="" class="meta_domain_name_top_img_left"
|
|
|
+ @click="$router.push('/home')" />
|
|
|
<div class="meta_domain_name_top_one_con">
|
|
|
- <div
|
|
|
- class="meta_domain_name_top_one_con_tip meta_domain_name_top_one_con_tips"
|
|
|
- @click="$router.push('/metaDomain')"
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="require('@assets/icon_shangchang@3x.png')"
|
|
|
- alt=""
|
|
|
- class="meta_domain_name_top_img_right"
|
|
|
- />
|
|
|
+ <div class="meta_domain_name_top_one_con_tip meta_domain_name_top_one_con_tips"
|
|
|
+ @click="$router.push('/metaDomain')">
|
|
|
+ <img :src="require('@assets/icon_shangchang@3x.png')" alt=""
|
|
|
+ class="meta_domain_name_top_img_right" />
|
|
|
<div>市场</div>
|
|
|
</div>
|
|
|
<div class="meta_domain_name_top_one_con_tip" @click="$router.push('/ranking')">
|
|
|
- <img
|
|
|
- :src="require('@assets/icon_paihang@3x.png')"
|
|
|
- alt=""
|
|
|
- class="meta_domain_name_top_img_right"
|
|
|
- />
|
|
|
+ <img :src="require('@assets/icon_paihang@3x.png')" alt=""
|
|
|
+ class="meta_domain_name_top_img_right" />
|
|
|
<div>排行</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="meta_domain_name_top_ones" v-if="action != 1">
|
|
|
- <img
|
|
|
- :src="require('@assets/icon_fanhui@3x (1).png')"
|
|
|
- alt=""
|
|
|
- class="meta_domain_name_top_img_left"
|
|
|
- @click="fallback"
|
|
|
- />
|
|
|
+ <img :src="require('@assets/icon_fanhui@3x (1).png')" alt="" class="meta_domain_name_top_img_left"
|
|
|
+ @click="fallback" />
|
|
|
</div>
|
|
|
<div class="meta_domain_name_top_two" v-if="action == 1">
|
|
|
<img :src="require('@assets/png-.NFT@3x.png')" alt="" class="meta_domain_name_top_two_img" />
|
|
|
@@ -60,36 +41,29 @@
|
|
|
<div class="meta_domain_name_top_three_con_left_two">.nft</div>
|
|
|
</div>
|
|
|
<div class="meta_domain_name_top_three_con_right">
|
|
|
- <img
|
|
|
- :src="require('@assets/icon／search@3x (2).png')"
|
|
|
- alt=""
|
|
|
- class="meta_domain_name_top_three_con_right_img"
|
|
|
- />
|
|
|
+ <img :src="require('@assets/icon／search@3x (2).png')" alt=""
|
|
|
+ class="meta_domain_name_top_three_con_right_img" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="meta_domain_name_top_three_con" v-if="action == 2">
|
|
|
<div class="meta_domain_name_top_three_con_left">
|
|
|
- <van-search
|
|
|
- v-model="value"
|
|
|
- :maxlength="16"
|
|
|
- placeholder="请输入元域名"
|
|
|
- left-icon=""
|
|
|
- :clearable="false"
|
|
|
- @update:model-value="onInput"
|
|
|
- />
|
|
|
+ <van-search v-model="value" :maxlength="16" placeholder="请输入元域名" left-icon="" :clearable="false"
|
|
|
+ @update:model-value="onInput" />
|
|
|
<!-- <div class="meta_domain_name_top_three_con_left_one">请输入元域名</div> -->
|
|
|
<div class="meta_domain_name_top_three_con_left_two">.nft</div>
|
|
|
</div>
|
|
|
<div class="meta_domain_name_top_three_con_right">
|
|
|
- <img
|
|
|
- :src="require('@assets/icon／search@3x (2).png')"
|
|
|
- alt=""
|
|
|
- class="meta_domain_name_top_three_con_right_img"
|
|
|
- />
|
|
|
+ <img :src="require('@assets/icon／search@3x (2).png')" alt=""
|
|
|
+ class="meta_domain_name_top_three_con_right_img" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-notice-bar speed="30" v-if="action == 1">
|
|
|
+ <van-notice-bar speed="30" v-if="action == 1" class="van-notice-bar-one">
|
|
|
+ <div v-for="(item, index) in domainLists" :key="index" class="domainName_list_cons">
|
|
|
+ 恭喜<span>“{{ item.nickName }}”</span>艺术家通过元域名市场购买获得<span>“{{ item.domainName }}”</span>
|
|
|
+ </div>
|
|
|
+ </van-notice-bar>
|
|
|
+ <van-notice-bar speed="30" v-if="action == 1" class="van-notice-bar-two">
|
|
|
<div v-for="(item, index) in domainList" :key="index" class="domainName_list_con">
|
|
|
<van-image :src="item.userAvatar" class="domainName_list_con_img" fit="cover" />
|
|
|
<div>{{ item.domainName }} 已被购买</div>
|
|
|
@@ -100,21 +74,11 @@
|
|
|
<div class="learn_more_tip">WHAT IS RID?</div>
|
|
|
</div>
|
|
|
<div class="meta_domain_name_top_bg" :style="{ height: heightBgNumber }"></div>
|
|
|
- <van-image
|
|
|
- :src="require('@assets/png-bg@3x (3).png')"
|
|
|
- width="100%"
|
|
|
- height="500px"
|
|
|
- fit="fill"
|
|
|
- class="meta_domain_name_top_bgimg"
|
|
|
- :style="{ transform: 'translateY(' + moreHeight + ')' }"
|
|
|
- />
|
|
|
+ <van-image :src="require('@assets/png-bg@3x (3).png')" width="100%" height="500px" fit="fill"
|
|
|
+ class="meta_domain_name_top_bgimg" :style="{ transform: 'translateY(' + moreHeight + ')' }" />
|
|
|
<div class="technical_support" v-if="action != 3">
|
|
|
<div class="technical_support_con">
|
|
|
- <img
|
|
|
- :src="require('@assets/logo-huachulian@3x.png')"
|
|
|
- alt=""
|
|
|
- class="technical_support_img_left"
|
|
|
- />
|
|
|
+ <img :src="require('@assets/logo-huachulian@3x.png')" alt="" class="technical_support_img_left" />
|
|
|
<!-- <img
|
|
|
:src="require('@assets/logo-mayilianjie@3x.png')"
|
|
|
alt=""
|
|
|
@@ -124,13 +88,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-sticky>
|
|
|
- <van-image
|
|
|
- :src="require('@assets/png-gengduo@3x.png')"
|
|
|
- width="100%"
|
|
|
- fit="fill"
|
|
|
- class="learn_more_img"
|
|
|
- v-if="action == 3"
|
|
|
- />
|
|
|
+ <van-image :src="require('@assets/png-gengduo@3x.png')" width="100%" fit="fill" class="learn_more_img"
|
|
|
+ v-if="action == 3" />
|
|
|
<!-- <div class="learn_more_list" v-if="action == 3">
|
|
|
<div class="learn_more_list_con">
|
|
|
<div class="learn_more_list_one">
|
|
|
@@ -286,11 +245,7 @@
|
|
|
<div class="meta_domain_name_list" v-if="action == 2">
|
|
|
<div class="meta_domain_name_list_con" v-for="(item, index) in list" :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">
|
|
|
@@ -303,11 +258,9 @@
|
|
|
</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>
|
|
|
@@ -377,6 +330,7 @@ export default {
|
|
|
domain: true,
|
|
|
value: '',
|
|
|
domainList: [],
|
|
|
+ domainLists: [],
|
|
|
list: [],
|
|
|
unregistered: require('@assets/png-da-lv@3x.png'),
|
|
|
registered: require('@assets/png-da-zi@3x.png'),
|
|
|
@@ -410,7 +364,18 @@ export default {
|
|
|
.then(res => {
|
|
|
this.domainList = res.content;
|
|
|
})
|
|
|
- .catch(e => {});
|
|
|
+ .catch(e => { });
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ '/domainOrder/newestOrder'
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ res.forEach(item => {
|
|
|
+ item.domainName = item.domainName.split(' ')[1].trim();
|
|
|
+ });
|
|
|
+ this.domainLists = res;
|
|
|
+ })
|
|
|
+ .catch(e => { });
|
|
|
},
|
|
|
watch: {
|
|
|
value() {
|
|
|
@@ -481,7 +446,7 @@ export default {
|
|
|
this.list = this.list.concat(res);
|
|
|
}
|
|
|
})
|
|
|
- .catch(e => {});
|
|
|
+ .catch(e => { });
|
|
|
} else {
|
|
|
this.$toast('只能由数字和字母组成');
|
|
|
this.list = [];
|
|
|
@@ -742,6 +707,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.meta_domain_name_top_one_con {
|
|
|
+
|
|
|
// display: flex;
|
|
|
.meta_domain_name_top_one_con_tip {
|
|
|
margin-left: 20px;
|
|
|
@@ -751,6 +717,7 @@ export default {
|
|
|
line-height: 17px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
.meta_domain_name_top_one_con_tips {
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
@@ -776,6 +743,7 @@ export default {
|
|
|
margin-bottom: 54px;
|
|
|
z-index: 3;
|
|
|
margin-top: -11px;
|
|
|
+
|
|
|
.meta_domain_name_top_two_img {
|
|
|
width: 220px;
|
|
|
height: 100px;
|
|
|
@@ -875,7 +843,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
/deep/ .van-notice-bar {
|
|
|
- margin-top: 60px;
|
|
|
+ // margin-top: 60px;
|
|
|
position: relative;
|
|
|
z-index: 3;
|
|
|
background: none !important;
|
|
|
@@ -889,16 +857,36 @@ export default {
|
|
|
height: 26px !important;
|
|
|
}
|
|
|
|
|
|
+ .domainName_list_cons {
|
|
|
+ padding: 0px 12px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 400;
|
|
|
+ background: linear-gradient(90deg,
|
|
|
+ rgba(226, 116, 249, 0.9) 0%,
|
|
|
+ rgba(226, 116, 249, 0.4) 48%,
|
|
|
+ rgba(255, 255, 255, 0.1) 100%);
|
|
|
+ border-radius: 19px;
|
|
|
+ border: 1px solid #f4aeff;
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 16px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #00FE1E;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.domainName_list_con {
|
|
|
padding: 0px 12px;
|
|
|
font-size: 11px;
|
|
|
font-weight: 400;
|
|
|
- background: linear-gradient(
|
|
|
- 90deg,
|
|
|
- rgba(226, 116, 249, 0.9) 0%,
|
|
|
- rgba(226, 116, 249, 0.4) 48%,
|
|
|
- rgba(255, 255, 255, 0.1) 100%
|
|
|
- );
|
|
|
+ background: linear-gradient(90deg,
|
|
|
+ rgba(226, 116, 249, 0.9) 0%,
|
|
|
+ rgba(226, 116, 249, 0.4) 48%,
|
|
|
+ rgba(255, 255, 255, 0.1) 100%);
|
|
|
border-radius: 19px;
|
|
|
border: 1px solid #f4aeff;
|
|
|
backdrop-filter: blur(4px);
|
|
|
@@ -916,6 +904,14 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .van-notice-bar-one {
|
|
|
+ margin-top: 43px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-notice-bar-two {
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
.learn_more {
|
|
|
padding-top: calc(var(--safe-top) + 52px);
|
|
|
text-align: center;
|
|
|
@@ -1158,6 +1154,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;
|
|
|
}
|
