|
|
@@ -295,12 +295,106 @@
|
|
|
<!-- <TopNavigation /> -->
|
|
|
<!-- 详情内容 -->
|
|
|
<div class="detail_content">
|
|
|
+ <img :src="require('@assets/guang@3x.png')" alt="" class="detail_content_con" />
|
|
|
<product-banner
|
|
|
:startTime="startTime"
|
|
|
:assignment="!!assignment"
|
|
|
:info="info"
|
|
|
@getProduct="getProduct"
|
|
|
+ class="detail_content_banner"
|
|
|
></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" />
|
|
|
+ <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">清乾隆</div>
|
|
|
+ <div class="limited_label_number">限量</div>
|
|
|
+ <div class="limited_label_total">{{ info.total }}份</div>
|
|
|
+ <div class="limited_label_category">{{ info.category }}</div>
|
|
|
+ </div>
|
|
|
+ <van-divider class="fengge_con"
|
|
|
+ ><img
|
|
|
+ :src="require('@assets/locking.png')"
|
|
|
+ alt=""
|
|
|
+ class="suoding_img"
|
|
|
+ />购买即可体验全部内容</van-divider
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="collection_author">
|
|
|
+ <div class="collection_author_con">
|
|
|
+ <div class="collection_author_left">
|
|
|
+ <van-image
|
|
|
+ width="40px"
|
|
|
+ height="40px"
|
|
|
+ radius="40"
|
|
|
+ :src="info.minterAvatar || require('@assets/svgs/img_default_photo.svg')"
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ <div class="author_details">
|
|
|
+ <div class="author_details_one">{{ info.minter }}</div>
|
|
|
+ <div class="author_details_two">作品06</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="collection_author_right">关注</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="appointment_process">
|
|
|
+ <div class="appointment_process_con">
|
|
|
+ <div class="appointment_process_title">预约流程</div>
|
|
|
+ <van-divider />
|
|
|
+ <van-steps :active="active" active-color="#F3E0BC">
|
|
|
+ <van-step>开放预约</van-step>
|
|
|
+ <van-step>开放结束</van-step>
|
|
|
+ <van-step>抽签及付款</van-step>
|
|
|
+ <van-step>开放购买</van-step>
|
|
|
+ </van-steps>
|
|
|
+ <div class="appointment_process_time">
|
|
|
+ <div class="appointment_process_time_con">
|
|
|
+ <div>05-10</div>
|
|
|
+ <div>10:30</div>
|
|
|
+ </div>
|
|
|
+ <div class="appointment_process_time_con">
|
|
|
+ <div>05-10</div>
|
|
|
+ <div>10:30</div>
|
|
|
+ </div>
|
|
|
+ <div class="appointment_process_time_con">
|
|
|
+ <div>05-10</div>
|
|
|
+ <div>10:30</div>
|
|
|
+ </div>
|
|
|
+ <div class="appointment_process_time_con">
|
|
|
+ <div>05-10</div>
|
|
|
+ <div>10:30</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="work_story">
|
|
|
+ <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_right">{{ info.minter }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="work_story_creator">
|
|
|
+ <div class="work_story_creator_left">发行方</div>
|
|
|
+ <div class="work_story_creator_right">苏州合适设计营造股份有限公司</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="purchase_instructions">
|
|
|
+ <div class="purchase_instructions_con">
|
|
|
+ <div class="purchase_instructions_title">购买须知</div>
|
|
|
+ <div class="purchase_instructions_text">
|
|
|
+ 这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- <img src="" alt="" class="detail_content_img" />
|
|
|
<div class="detail_content_one">
|
|
|
<div class="detail_content_point">
|
|
|
@@ -312,7 +406,7 @@
|
|
|
<div class="detail_content_share_con">分享</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- <div :class="!!info.model3d ? 'detail_content_title' : 'detail_content_title_one'">{{ info.name }}</div>
|
|
|
+ <!-- <div :class="!!info.model3d ? 'detail_content_title' : 'detail_content_title_one'">{{ info.name }}</div>
|
|
|
|
|
|
<div class="limited_label">
|
|
|
<div class="limited_label_con">
|
|
|
@@ -320,13 +414,13 @@
|
|
|
<div class="limited_label_number">{{ info.total }}份</div>
|
|
|
</div>
|
|
|
<div class="limited_label_collection">{{ info.category }}</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<!-- <div class="item_number" v-else>
|
|
|
<div class="item_number_collection">收藏品</div>
|
|
|
<div class="item_number_number">编号 47475</div>
|
|
|
</div> -->
|
|
|
- <div class="self_information">
|
|
|
- <div class="self_information_one">
|
|
|
+ <!-- <div class="self_information"> -->
|
|
|
+ <!-- <div class="self_information_one">
|
|
|
<van-image
|
|
|
width="32px"
|
|
|
height="32px"
|
|
|
@@ -338,15 +432,15 @@
|
|
|
<div class="self_information_one_text_one">{{ info.minter }}</div>
|
|
|
<div class="self_information_one_text_two">创作者</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="description_of_works">
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="description_of_works">
|
|
|
<div class="description_of_works_title">作品描述</div>
|
|
|
- <div class="description_of_works_text" v-html="info.detail"></div>
|
|
|
- <!-- <div >{{title}}</div>
|
|
|
+ <div class="description_of_works_text" v-html="info.detail"></div> -->
|
|
|
+ <!-- <div >{{title}}</div>
|
|
|
<img :src="require('@assets/commodity-background-map.png')" alt="" class="description_of_works_img"> -->
|
|
|
- </div>
|
|
|
- <!-- 持有特权 -->
|
|
|
- <div class="hold_privileges">
|
|
|
+ <!-- </div> -->
|
|
|
+ <!-- 持有特权 -->
|
|
|
+ <!-- <div class="hold_privileges">
|
|
|
<div class="hold_privileges_title">
|
|
|
持有特权<span class="hold_privileges_tip">(灰色表示已使用)</span>
|
|
|
</div>
|
|
|
@@ -363,9 +457,9 @@
|
|
|
<div class="hold_privileged_information_con_title">{{ item.name }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 作品特性 -->
|
|
|
- <div class="hold_privileges">
|
|
|
+ </div> -->
|
|
|
+ <!-- 作品特性 -->
|
|
|
+ <!-- <div class="hold_privileges">
|
|
|
<div class="hold_privileges_title">作品特性</div>
|
|
|
<div class="hold_privileges_name" v-if="properties.length == 0">创作者者暂时未设置</div>
|
|
|
<div class="digital_equity_card" v-else>
|
|
|
@@ -377,8 +471,8 @@
|
|
|
</div>
|
|
|
<div class="hold_privileges">
|
|
|
<hash-code :info="info"></hash-code>
|
|
|
- </div>
|
|
|
- <div class="hold_privileges">
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="hold_privileges">
|
|
|
<div class="hold_privileges_title">交易记录</div>
|
|
|
<div v-if="list.length > 0">
|
|
|
<div class="hold_privileges_list" v-for="item in list" :key="item.id">
|
|
|
@@ -397,8 +491,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-else class="textName">暂无购买记录</div>
|
|
|
- <!-- <div class="transaction_record_one">
|
|
|
+ <div v-else class="textName">暂无购买记录</div> -->
|
|
|
+ <!-- <div class="transaction_record_one">
|
|
|
<div>
|
|
|
<span class="user_information">用户信息</span>
|
|
|
<span>仅展示</span>
|
|
|
@@ -408,8 +502,8 @@
|
|
|
<span>18:38:50</span>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- <!-- <van-divider /> -->
|
|
|
- <!-- <div class="transaction_record_one transaction_record_two">
|
|
|
+ <!-- <van-divider /> -->
|
|
|
+ <!-- <div class="transaction_record_one transaction_record_two">
|
|
|
<div>
|
|
|
<span class="user_information">列奥那多</span>
|
|
|
<span class="selling_price">出售¥640</span>
|
|
|
@@ -420,8 +514,8 @@
|
|
|
<span>18:38:50</span>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- </div>
|
|
|
+ </div> -->
|
|
|
<!-- 交易按钮 -->
|
|
|
<div class="transaction_button" v-if="info.onShelf && info.scheduleSale && !info.salable">
|
|
|
<div class="transaction_button_left">
|
|
|
@@ -449,16 +543,12 @@
|
|
|
<div class="coming_on_sale" v-if="isAppointment" block round>
|
|
|
<div class="coming_on_sale_con">即将开售</div>
|
|
|
<div class="coming_on_sale_time">{{ startTime }}</div>
|
|
|
- <!-- <van-count-down :time="time" format="DD天 HH:mm:ss" class="coming_on_sale_time" /> -->
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- <van-button class="no-btn" v-else-if="isSold" block round>已售罄</van-button> -->
|
|
|
<div class="sold_out" v-else-if="isSolded" block round>已售罄</div>
|
|
|
<div class="sold_out" v-else-if="isSold" block round>即将售罄</div>
|
|
|
<div class="sold_out" v-else-if="limit.limit > 0 && limit.count >= limit.limit" block round>
|
|
|
限购{{ limit.limit }}件
|
|
|
</div>
|
|
|
-
|
|
|
<div class="buy_now" v-else @click="buyNow">
|
|
|
<div class="buy_now_con">立即购买</div>
|
|
|
<div>
|
|
|
@@ -466,6 +556,15 @@
|
|
|
<span class="Purchase_surplus">剩余{{ info.stock }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 预约 -->
|
|
|
+ <!-- <div class="buy_now" @click="buyNow">
|
|
|
+ <div class="buy_now_con">敬请期待</div>
|
|
|
+ <div class="buy_now_time">05.16 10:30 开放预约</div>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="cancel_reservation" @click="buyNow">
|
|
|
+ <div class="cancel_reservation_con">敬请期待</div>
|
|
|
+ <div class="cancel_reservation_time">05.16 10:30 开放预约</div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 购买之后交易按钮 -->
|
|
|
@@ -507,13 +606,18 @@ let inWeixin = /micromessenger/i.test(navigator.userAgent);
|
|
|
import { Dialog } from 'vant';
|
|
|
// import TopNavigation from '../../components/TopNavigation.vue';
|
|
|
import ProductBanner from '../../components/product/ProductBanner.vue';
|
|
|
-import HashCode from '../../components/product/HashCode.vue';
|
|
|
+// import HashCode from '../../components/product/HashCode.vue';
|
|
|
+import { ref } from 'vue';
|
|
|
export default {
|
|
|
+ setup() {
|
|
|
+ const active = ref(1);
|
|
|
+ return { active };
|
|
|
+ },
|
|
|
components: {
|
|
|
// HashCode,
|
|
|
// ProductTitle,
|
|
|
- ProductBanner,
|
|
|
- HashCode
|
|
|
+ ProductBanner
|
|
|
+ // HashCode
|
|
|
// Swiper,
|
|
|
// SwiperSlide,
|
|
|
// Post,
|
|
|
@@ -827,10 +931,312 @@ export default {
|
|
|
}
|
|
|
.detail_content {
|
|
|
width: 100%;
|
|
|
- background: @bg;
|
|
|
+ background: #191d27;
|
|
|
+ position: relative;
|
|
|
// .detail_content_top {
|
|
|
// height: 380px;
|
|
|
// }
|
|
|
+ .detail_content_banner {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .list_of_details {
|
|
|
+ background: #191d27;
|
|
|
+ margin-bottom: 80px;
|
|
|
+ .list_of_details_one {
|
|
|
+ padding: 0px 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 317px;
|
|
|
+ .list_of_details_one_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 317px;
|
|
|
+ transform: translateY(-45px);
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .list_of_details_one_title {
|
|
|
+ height: 52px;
|
|
|
+ padding: 0px 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ transform: translateY(-255px);
|
|
|
+ .list_of_details_one_title_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 52px;
|
|
|
+ }
|
|
|
+ .list_of_details_one_title_con {
|
|
|
+ width: 100%;
|
|
|
+ white-space: nowrap;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .limited_label {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ transform: translateY(-45px);
|
|
|
+ .limited_label_title {
|
|
|
+ padding: 0px 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f9ddb3;
|
|
|
+ border-radius: 3px;
|
|
|
+ height: 16px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #282d3a;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .limited_label_number {
|
|
|
+ width: 34px;
|
|
|
+ height: 16px;
|
|
|
+ background: #f9ddb3;
|
|
|
+ border-radius: 3px 0px 0px 3px;
|
|
|
+ text-align: center;
|
|
|
+ height: 16px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #282d3a;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ .limited_label_total {
|
|
|
+ padding: 0px 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 16px;
|
|
|
+ background: #323743;
|
|
|
+ border-radius: 0px 3px 3px 0px;
|
|
|
+ height: 16px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #f9ddb3;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .limited_label_category {
|
|
|
+ padding: 0px 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 16px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #f9ddb3;
|
|
|
+ line-height: 16px;
|
|
|
+ background: #323743;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fengge_con {
|
|
|
+ transform: translateY(-15px);
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #747575;
|
|
|
+ line-height: 16px;
|
|
|
+ .suoding_img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-divider::before {
|
|
|
+ height: 1px;
|
|
|
+ opacity: 0.5;
|
|
|
+ background: #979797;
|
|
|
+ }
|
|
|
+ .van-divider::after {
|
|
|
+ height: 1px;
|
|
|
+ opacity: 0.5;
|
|
|
+ background: #979797;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .collection_author {
|
|
|
+ padding: 0px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ transform: translateY(-125px);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .collection_author_con {
|
|
|
+ width: 100%;
|
|
|
+ height: 58px;
|
|
|
+ background: #1e222c;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 9px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .collection_author_left {
|
|
|
+ display: flex;
|
|
|
+ .author_details {
|
|
|
+ margin-left: 10px;
|
|
|
+ .author_details_one {
|
|
|
+ padding-top: 1px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+ .author_details_two {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 16px;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .collection_author_right {
|
|
|
+ margin-top: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 72px;
|
|
|
+ height: 30px;
|
|
|
+ background: #f9ddb3;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #725837;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .appointment_process {
|
|
|
+ padding: 0px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ transform: translateY(-125px);
|
|
|
+ .appointment_process_con {
|
|
|
+ padding: 16px 15px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ background: #1e222c;
|
|
|
+ border-radius: 12px;
|
|
|
+ .appointment_process_title {
|
|
|
+ height: 26px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 26px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .van-divider::before {
|
|
|
+ height: 1px;
|
|
|
+ opacity: 0.1;
|
|
|
+ background: #979797;
|
|
|
+ margin-bottom: 13px;
|
|
|
+ }
|
|
|
+ .van-steps {
|
|
|
+ background: #1e222c;
|
|
|
+ padding: 0px !important;
|
|
|
+ /deep/ .van-step__circle-container {
|
|
|
+ background: #1e222c !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .appointment_process_time {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .appointment_process_time_con {
|
|
|
+ width: 37px;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 16px;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .work_story {
|
|
|
+ padding: 0px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: -115px;
|
|
|
+ .work_story_con {
|
|
|
+ width: 100%;
|
|
|
+ background: #1e222c;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 16px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .work_story_title {
|
|
|
+ height: 26px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 26px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ .work_story_text {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .work_story_creator {
|
|
|
+ margin-top: 14px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20px;
|
|
|
+ .work_story_creator_left {
|
|
|
+ color: #ffffff;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .purchase_instructions {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 0px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .purchase_instructions_con {
|
|
|
+ width: 100%;
|
|
|
+ background: #1e222c;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 16px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .purchase_instructions_title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 26px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ .purchase_instructions_text {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 20px;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail_content_con {
|
|
|
+ width: 100%;
|
|
|
+ height: 192px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ }
|
|
|
.detail_content_img {
|
|
|
margin-top: 30px;
|
|
|
padding: 0px 57px;
|
|
|
@@ -938,56 +1344,56 @@ export default {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
- .limited_label {
|
|
|
- // padding: 0px 108px;
|
|
|
- // box-sizing: border-box;
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- .limited_label_con {
|
|
|
- display: flex;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- .limited_label_name {
|
|
|
- width: 44px;
|
|
|
- height: 18px;
|
|
|
- background: #28b6ff;
|
|
|
- border-radius: 4px 0px 0px 4px;
|
|
|
- font-size: 10px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
- .limited_label_number {
|
|
|
- // width: 51px;
|
|
|
- height: 18px;
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- border-radius: 0px 4px 4px 0px;
|
|
|
- padding: 0px 12px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 10px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #28b6ff;
|
|
|
- line-height: 18px;
|
|
|
- text-align: center;
|
|
|
- // margin-right: 10px;
|
|
|
- }
|
|
|
- .limited_label_collection {
|
|
|
- width: 54px;
|
|
|
- height: 18px;
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 10px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #28b6ff;
|
|
|
- line-height: 18px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
+ // .limited_label {
|
|
|
+ // // padding: 0px 108px;
|
|
|
+ // // box-sizing: border-box;
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ // .limited_label_con {
|
|
|
+ // display: flex;
|
|
|
+ // margin-right: 10px;
|
|
|
+ // }
|
|
|
+ // .limited_label_name {
|
|
|
+ // width: 44px;
|
|
|
+ // height: 18px;
|
|
|
+ // background: #28b6ff;
|
|
|
+ // border-radius: 4px 0px 0px 4px;
|
|
|
+ // font-size: 10px;
|
|
|
+ // font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ // font-weight: 400;
|
|
|
+ // color: #ffffff;
|
|
|
+ // text-align: center;
|
|
|
+ // line-height: 18px;
|
|
|
+ // }
|
|
|
+ // .limited_label_number {
|
|
|
+ // // width: 51px;
|
|
|
+ // height: 18px;
|
|
|
+ // background: rgba(255, 255, 255, 0.1);
|
|
|
+ // border-radius: 0px 4px 4px 0px;
|
|
|
+ // padding: 0px 12px;
|
|
|
+ // box-sizing: border-box;
|
|
|
+ // font-size: 10px;
|
|
|
+ // font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ // font-weight: 400;
|
|
|
+ // color: #28b6ff;
|
|
|
+ // line-height: 18px;
|
|
|
+ // text-align: center;
|
|
|
+ // // margin-right: 10px;
|
|
|
+ // }
|
|
|
+ // .limited_label_collection {
|
|
|
+ // width: 54px;
|
|
|
+ // height: 18px;
|
|
|
+ // background: rgba(255, 255, 255, 0.1);
|
|
|
+ // border-radius: 4px;
|
|
|
+ // font-size: 10px;
|
|
|
+ // font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ // font-weight: 400;
|
|
|
+ // color: #28b6ff;
|
|
|
+ // line-height: 18px;
|
|
|
+ // text-align: center;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
.self_information {
|
|
|
padding: 0 10px;
|
|
|
padding-bottom: 53px;
|
|
|
@@ -1232,8 +1638,8 @@ export default {
|
|
|
@bottom: 6px;
|
|
|
.transaction_button {
|
|
|
width: 100%;
|
|
|
- background: #15152d;
|
|
|
- padding: 0 16px;
|
|
|
+ background: #161A24;
|
|
|
+ padding: 0 15px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -1277,7 +1683,7 @@ export default {
|
|
|
.sold_out {
|
|
|
width: 160px;
|
|
|
height: 46px;
|
|
|
- background: #29293f;
|
|
|
+ background: #313641;
|
|
|
border-radius: 8px;
|
|
|
font-size: 16px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
|
@@ -1289,7 +1695,7 @@ export default {
|
|
|
.coming_on_sale {
|
|
|
width: 160px;
|
|
|
height: 46px;
|
|
|
- background: #29293f;
|
|
|
+ background: #313641;
|
|
|
border-radius: 8px;
|
|
|
padding-top: 6px;
|
|
|
box-sizing: border-box;
|
|
|
@@ -1310,7 +1716,7 @@ export default {
|
|
|
.buy_now {
|
|
|
width: 160px;
|
|
|
height: 46px;
|
|
|
- background: #28b6ff;
|
|
|
+ background: #F9DDB3;
|
|
|
border-radius: 8px;
|
|
|
padding-top: 6px;
|
|
|
box-sizing: border-box;
|
|
|
@@ -1319,20 +1725,49 @@ export default {
|
|
|
font-size: 14px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
- color: #ffffff;
|
|
|
+ color: #725837;
|
|
|
+ }
|
|
|
+ .buy_now_time{
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #725837;
|
|
|
}
|
|
|
.purchase_sold {
|
|
|
font-size: 10px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #f5f7fa;
|
|
|
+ color: #725837;
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
.Purchase_surplus {
|
|
|
font-size: 10px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #f5f7fa;
|
|
|
+ color: #725837;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cancel_reservation{
|
|
|
+ width: 160px;
|
|
|
+ height: 46px;
|
|
|
+ background: #313641;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding-top: 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ .cancel_reservation_con{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+ .cancel_reservation_time{
|
|
|
+ font-size: 10px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ opacity: 0.3;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1386,7 +1821,7 @@ export default {
|
|
|
.show_only {
|
|
|
width: 100%;
|
|
|
height: 56px;
|
|
|
- background: #15152d;
|
|
|
+ background: #161A24;
|
|
|
padding: 8px 16px;
|
|
|
box-sizing: border-box;
|
|
|
position: fixed;
|
yuany
