|
|
@@ -305,18 +305,24 @@
|
|
|
></product-banner>
|
|
|
<div class="list_of_details">
|
|
|
<div class="list_of_details_one">
|
|
|
- <img :src="require('@assets/dizuo.png')" alt="" class="list_of_details_one_img" />
|
|
|
+ <img :src="require('@assets/dizuo@3x.png')" alt="" class="list_of_details_one_img" />
|
|
|
<div class="list_of_details_one_title">
|
|
|
- <img :src="require('@assets/maisui.png')" alt="" class="list_of_details_one_title_img" />
|
|
|
- <div class="list_of_details_one_title_con">{{ info.name }}</div>
|
|
|
- <div class="limited_label">
|
|
|
- <div class="limited_label_title" v-if="info.collectionCategory">
|
|
|
- {{ info.collectionCategory }}
|
|
|
+ <div class="list_of_details_one_title_one">
|
|
|
+ <img :src="require('@assets/zuo@3x.png')" alt="" class="list_of_details_one_title_img" />
|
|
|
+ <div>
|
|
|
+ <div class="list_of_details_one_title_con">{{ info.name }}</div>
|
|
|
+ <div class="limited_label">
|
|
|
+ <div class="limited_label_title" v-if="info.collectionCategory">
|
|
|
+ {{ info.collectionCategory }}
|
|
|
+ </div>
|
|
|
+ <div class="limited_label_number">限量</div>
|
|
|
+ <div class="limited_label_total">{{ info.total }}份</div>
|
|
|
+ <div class="limited_label_category">{{ info.category }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="limited_label_number">限量</div>
|
|
|
- <div class="limited_label_total">{{ info.total }}份</div>
|
|
|
- <div class="limited_label_category">{{ info.category }}</div>
|
|
|
+ <img :src="require('@assets/you@3x.png')" alt="" class="list_of_details_one_title_img" />
|
|
|
</div>
|
|
|
+ <!-- <img :src="require('@assets/maisui.png')" alt="" class="list_of_details_one_title_img" /> -->
|
|
|
<van-divider class="fengge_con"
|
|
|
><img
|
|
|
:src="require('@assets/locking.png')"
|
|
|
@@ -339,7 +345,7 @@
|
|
|
/>
|
|
|
<div class="author_details">
|
|
|
<div class="author_details_one">{{ info.minter }}</div>
|
|
|
- <div class="author_details_two">{{ info.collectionWorks || '暂无信息'}}</div>
|
|
|
+ <div class="author_details_two">{{ info.collectionWorks || '暂无信息' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div :class="info.follow ? 'followedtwo' : 'collection_author_right'" @click="follow">
|
|
|
@@ -379,17 +385,17 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="work_story" :class="info.hasSubscribe?'':'work_story_two'">
|
|
|
+ <div class="work_story" :class="info.hasSubscribe ? '' : 'work_story_two'">
|
|
|
<div class="work_story_con">
|
|
|
<div class="work_story_title">作品故事</div>
|
|
|
<div class="work_story_text" v-html="info.detail"></div>
|
|
|
<div class="work_story_creator">
|
|
|
- <div class="work_story_creator_left">创作者</div>
|
|
|
+ <div class="work_story_creator_left">铸造者</div>
|
|
|
<div class="work_story_creator_right">{{ info.minter }}</div>
|
|
|
</div>
|
|
|
<div class="work_story_creator">
|
|
|
- <div class="work_story_creator_left">发行方</div>
|
|
|
- <div class="work_story_creator_right">{{ info.issuer || '暂无信息'}}</div>
|
|
|
+ <div class="work_story_creator_left">创作者</div>
|
|
|
+ <div class="work_story_creator_right">{{ info.issuer || '暂无信息' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -406,6 +412,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="technology_tip">蚂蚁链提供技术支持</div>
|
|
|
</div>
|
|
|
<!-- <img src="" alt="" class="detail_content_img" />
|
|
|
<div class="detail_content_one">
|
|
|
@@ -532,7 +539,7 @@
|
|
|
<div class="transaction_button" v-if="info.onShelf && info.scheduleSale && !info.salable">
|
|
|
<div class="transaction_button_left">
|
|
|
<div class="transaction_price"><span class="amount_symbol">¥</span>{{ info.price }}</div>
|
|
|
- <div class="transaction_tax">
|
|
|
+ <div class="transaction_tax" v-if="info.royalties">
|
|
|
(含 <span class="transaction_tax_con">{{ info.royalties }}%</span> 版税)
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -543,7 +550,10 @@
|
|
|
<!-- <van-count-down :time="time" format="DD天 HH:mm:ss" class="coming_on_sale_time" /> -->
|
|
|
<!-- </div> -->
|
|
|
<!-- 预约 -->
|
|
|
- <div class="buy_now" v-if="info.subscribeStatus == 'NOT_STARTED' && info.hasSubscribe && !isSolded && !isSold">
|
|
|
+ <div
|
|
|
+ class="buy_now"
|
|
|
+ v-if="info.subscribeStatus == 'NOT_STARTED' && info.hasSubscribe && !isSolded && !isSold"
|
|
|
+ >
|
|
|
<!-- v-if="isAppointment" block round -->
|
|
|
<div class="buy_now_con">敬请期待</div>
|
|
|
<div class="buy_now_time">{{ comingSoonTime }} 开放预约</div>
|
|
|
@@ -553,7 +563,7 @@
|
|
|
<div class="transaction_button" v-else-if="info.onShelf && info.salable">
|
|
|
<div class="transaction_button_left">
|
|
|
<div class="transaction_price"><span class="amount_symbol">¥</span>{{ info.price }}</div>
|
|
|
- <div class="transaction_tax">
|
|
|
+ <div class="transaction_tax" v-if="info.royalties">
|
|
|
(含 <span class="transaction_tax_con">{{ info.royalties }}%</span> 版税)
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -568,7 +578,10 @@
|
|
|
限购{{ limit.limit }}件
|
|
|
</div>
|
|
|
<!-- 预约 -->
|
|
|
- <div class="buy_now" v-else-if="info.subscribeStatus == 'NOT_STARTED' && info.hasSubscribe && !isSolded && !isSold">
|
|
|
+ <div
|
|
|
+ class="buy_now"
|
|
|
+ v-else-if="info.subscribeStatus == 'NOT_STARTED' && info.hasSubscribe && !isSolded && !isSold"
|
|
|
+ >
|
|
|
<!-- v-if="isAppointment" block round -->
|
|
|
<div class="buy_now_con">敬请期待</div>
|
|
|
<div class="buy_now_time">{{ comingSoonTime }} 开放预约</div>
|
|
|
@@ -579,7 +592,10 @@
|
|
|
</div>
|
|
|
<div class="sold_out" v-else>已预约</div>
|
|
|
</div>
|
|
|
- <div class="sold_out" v-else-if="info.subscribeStatus == 'SUBSCRIBE_ENDING' && info.hasSubscribe && !isSolded && !isSold">
|
|
|
+ <div
|
|
|
+ class="sold_out"
|
|
|
+ v-else-if="info.subscribeStatus == 'SUBSCRIBE_ENDING' && info.hasSubscribe && !isSolded && !isSold"
|
|
|
+ >
|
|
|
<!-- v-if="!isAppointment && info.state == 'CLOSESUBSCRIBE'" -->
|
|
|
预约结束
|
|
|
</div>
|
|
|
@@ -1225,6 +1241,7 @@ export default {
|
|
|
width: 100%;
|
|
|
background: #191d27;
|
|
|
position: relative;
|
|
|
+ padding-top: 50px;
|
|
|
// .detail_content_top {
|
|
|
// height: 380px;
|
|
|
// }
|
|
|
@@ -1249,10 +1266,14 @@ export default {
|
|
|
height: 52px;
|
|
|
padding: 0px 6px;
|
|
|
box-sizing: border-box;
|
|
|
- transform: translateY(-255px);
|
|
|
+ transform: translateY(-270px);
|
|
|
+ .list_of_details_one_title_one {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
.list_of_details_one_title_img {
|
|
|
- width: 100%;
|
|
|
- height: 52px;
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
}
|
|
|
.list_of_details_one_title_con {
|
|
|
width: 100%;
|
|
|
@@ -1260,20 +1281,17 @@ export default {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
text-align: center;
|
|
|
- padding: 0px 27px;
|
|
|
- box-sizing: border-box;
|
|
|
- transform: translateY(-58px);
|
|
|
height: 28px;
|
|
|
font-size: 20px;
|
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
color: #ffffff;
|
|
|
line-height: 28px;
|
|
|
+ margin-bottom: 9px;
|
|
|
}
|
|
|
.limited_label {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- transform: translateY(-45px);
|
|
|
align-items: center;
|
|
|
.limited_label_title {
|
|
|
padding: 0px 6px;
|
|
|
@@ -1329,12 +1347,12 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.fengge_con {
|
|
|
- transform: translateY(-15px);
|
|
|
font-size: 12px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #747575;
|
|
|
line-height: 16px;
|
|
|
+ margin-top: 30px;
|
|
|
.suoding_img {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
@@ -1400,7 +1418,7 @@ export default {
|
|
|
border-radius: 4px;
|
|
|
font-size: 14px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
+ font-weight: bold;
|
|
|
color: #725837;
|
|
|
line-height: 30px;
|
|
|
text-align: center;
|
|
|
@@ -1451,6 +1469,15 @@ export default {
|
|
|
/deep/ .van-step__circle-container {
|
|
|
background: #1e222c !important;
|
|
|
}
|
|
|
+ /deep/.van-step--horizontal .van-step__icon {
|
|
|
+ width: var(--van-step-circle-size);
|
|
|
+ height: var(--van-step-circle-size);
|
|
|
+ background: rgb(243, 224, 188);
|
|
|
+ border-radius: 50%;
|
|
|
+ &::before {
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.appointment_process_time {
|
|
|
display: flex;
|
|
|
@@ -1474,7 +1501,7 @@ export default {
|
|
|
.hold_privileges_con {
|
|
|
background: #1e222c;
|
|
|
border-radius: 8px;
|
|
|
- padding: 10px;
|
|
|
+ padding: 16px 15px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
@@ -1520,7 +1547,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .work_story_two{
|
|
|
+ .work_story_two {
|
|
|
margin-top: -125px;
|
|
|
position: relative;
|
|
|
// z-index: 1;
|
|
|
@@ -1553,12 +1580,23 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .technology_tip {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20px;
|
|
|
+ opacity: 0.5;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
.detail_content_con {
|
|
|
width: 100%;
|
|
|
height: 192px;
|
|
|
position: absolute;
|
|
|
top: 0px;
|
|
|
+ z-index: 3;
|
|
|
}
|
|
|
.detail_content_img {
|
|
|
margin-top: 30px;
|
|
|
@@ -2188,4 +2226,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// /deep/.step-buy {
|
|
|
+// &.van-step--horizontal .van-step__icon {
|
|
|
+// &.van-step__icon--active {
|
|
|
+// background: rgb(243, 224, 188);
|
|
|
+// width: var(--van-step-circle-size);
|
|
|
+// height: var(--van-step-circle-size);
|
|
|
+// border-radius: 50%;
|
|
|
+// &::before {
|
|
|
+// content: none;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
</style>
|