Merge branch 'yuan' of panhui/lasuo_nft_front into master

src/components/LikeButton.vue

@@ -15,8 +15,8 @@ export default {
     },
     data() {
         return {
-            likeImg: require('@assets/like.png'),
-            disLikeImg: require('@assets/dislike.png')
+            likeImg: require('@assets/collection_success@3x.png'),
+            disLikeImg: require('@assets/collection@3x.png')
         };
     },
     methods: {
@@ -43,12 +43,14 @@ export default {
     img {
         vertical-align: middle;
         margin-right: 3px;
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
         display: inline-block;
     }
 
     span {
+        padding-top: 2px;
+        box-sizing: border-box;
         vertical-align: middle;
         font-size: @font1;
     }

src/components/asset/assetInfo.vue

@@ -29,6 +29,7 @@
             <div class="data_display_con_collection_title">{{info.minter}}</div>
             <img :src="require('@assets/3d@3x.png')" alt="" class="shop_title_img" />
         </div>
+        <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
     </div>
     <!-- <van-image
             v-if="opened === false"
@@ -133,6 +134,13 @@ export default {
     border-radius: 18px;
     margin-bottom: 15px;
     position: relative;
+    .bottom_texture{
+        width: 85px;
+        height: 100px;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+    }
     .data_display_con_tip {
         width: 50px;
         height: 18px;

src/components/product/HashCode.vue

@@ -3,22 +3,38 @@
     <div v-if="info.txHash">
         <div class="information_on_the_chain">
             <span class="information_on_the_chain_title">Hash地址</span>
-            <span class="information_on_the_chain_content"
-                >{{ getShort(info.txHash) }}</span
-            >
+            <div class="information_on_the_chain_content_con">
+                <div class="information_on_the_chain_content">
+                    {{ getShort(info.txHash) }}
+                </div>
+                <img
+                    @click="copy(info.txHash)"
+                    src="@assets/svgs/copy_icon.svg"
+                    alt=""
+                    class="information_on_the_chain_content_img"
+                />
+            </div>
         </div>
         <div class="information_on_the_chain">
             <span class="information_on_the_chain_title">区块高度</span>
-            <span class="information_on_the_chain_title">{{ info.blockNumber }}</span>
+            <span class="information_on_the_chain_number">{{ info.blockNumber }}</span>
         </div>
         <div class="information_on_the_chain">
             <span class="information_on_the_chain_title">令牌ID</span>
-            <span class="information_on_the_chain_content"
-                >{{ getShort(info.tokenId) }}</span
-            >
+            <div class="information_on_the_chain_content_con">
+                <div class="information_on_the_chain_content">
+                    {{ getShort(info.tokenId) }}
+                </div>
+                <img
+                    @click="copy(info.txHash)"
+                    src="@assets/svgs/copy_icon.svg"
+                    alt=""
+                    class="information_on_the_chain_content_img"
+                />
+            </div>
         </div>
     </div>
-    <div v-else class="textName">铸造者未设置</div>
+    <div v-else class="textName">创作者未设置</div>
     <!-- <van-collapse-item name="hashCode" class="goods-info">
         <template #title>
             <div class="page-title"><img src="@assets/icon-lianshangxinxi(3).png" alt="" />链上信息</div>
@@ -87,36 +103,58 @@ export default {
 
 <style lang="less" scoped>
 .information_on_the_chain_con {
-    font-size: 14px;
+    font-size: 18px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
     color: #ffffff;
-    margin-bottom: 8px;
+    line-height: 26px;
+    margin-bottom: 12px;
 }
 .information_on_the_chain {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 16px;
+    .information_on_the_chain_number {
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 22px;
+    }
     .information_on_the_chain_title {
-        font-size: 14px;
+        font-size: 16px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #939599;
-        line-height: 24px;
+        color: #ffffff;
+        line-height: 22px;
+        opacity: 0.5;
     }
     .information_on_the_chain_content {
-        width: 158px;
-        font-size: 14px;
+        // width: 158px;
+        font-size: 12px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #939599;
-        line-height: 24px;
+        color: #ffffff;
+        line-height: 18px;
+        margin-right: 4px;
+        margin-top: 2px;
         overflow: hidden; //超出的文本隐藏
         text-overflow: ellipsis; //溢出用省略号显示
         white-space: nowrap; //溢出则不换行
     }
+    .information_on_the_chain_content_img {
+        width: 24px;
+        height: 24px;
+    }
+    .information_on_the_chain_content_con {
+        display: flex;
+    }
+}
+.information_on_the_chain:last-child {
+    margin-bottom: 0px;
 }
-.textName{
+.textName {
     color: #939599;
-    text-align: center;
+    // text-align: center;
 }
 </style>

src/components/product/ProductBanner.vue

@@ -49,7 +49,7 @@
                 </like-button>
 
                 <div class="share-icon shareLeft" @click="share" v-if="isShare && !startTime && !assignment">
-                    <img :src="require('@assets/icon-fenxiang@3x.png')" alt="" />
+                    <img :src="require('@assets/fenxiang@3x.png')" alt="" />
                     <span>分享</span>
                 </div>
             </div>
@@ -244,12 +244,14 @@ export default {
 }
 .share-icon {
     img {
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
         display: inline-block;
         vertical-align: middle;
     }
     span {
+        padding-top: 2px;
+        box-sizing: border-box;
         font-size: @font1;
         color: #949699;
         line-height: 24px;
@@ -258,7 +260,7 @@ export default {
     }
 
     &.shareLeft {
-        margin-left: 30px;
+        margin-left: 42px;
     }
 }
 

src/views/asset/Detail.vue

@@ -53,13 +53,117 @@
                 <div class="detail_content_share_con">分享</div>
             </div>
         </div> -->
-        <product-banner :info="info" pageType="asset"></product-banner>
-        <div :class="!!info.model3d ? 'detail_content_title' : 'detail_content_title_one'">{{ info.name }}</div>
-        <div class="item_number">
+        <img :src="require('@assets/guang@3x.png')" alt="" class="detail_content_con" />
+        <product-banner :info="info" pageType="asset" 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="list_of_details_one_text">
+                        <img :src="require('@assets/blockchain@3x.png')" alt="" class="list_of_details_one_text_img" />
+                        <div class="list_of_details_one_text_con">ac10781#03506/10000</div>
+                    </div>
+                </div>
+            </div>
+            <div class="collection_holder">
+                <div class="collection_holder_con">
+                    <div class="collection_holder_one collection_holder_two">
+                        <div class="collection_holder_one_title">持有者</div>
+                        <div class="collection_holder_one_time">{{ userInfo.nickname }}</div>
+                    </div>
+                    <div class="collection_holder_one">
+                        <div class="collection_holder_one_title">生成时间</div>
+                        <div class="collection_holder_one_time">2022-03-22 08:30:40</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="hold_privileges">
+                <div class="hold_privileges_con">
+                    <div class="hold_privileges_title">
+                        持有特权<span class="hold_privileges_tip">灰色表示已使用</span>
+                    </div>
+                    <div class="hold_privileges_name" v-if="privileges.length == 0">创作者暂时未设置</div>
+                    <div class="hold_privileged_information" v-else>
+                        <div class="hold_privileged_information_con" v-for="(item, index) in privileges" :key="index">
+                            <van-image
+                                width="18px"
+                                height="18px"
+                                :src="require('@assets/1@3x.png')"
+                                fit="cover"
+                                class="hold_privileged_information_con_img"
+                            />
+                            <!-- <img :src="item.icon[0]" alt="" class="hold_privileged_information_con_img" /> -->
+                            <div class="hold_privileged_information_con_title">{{ item.name }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 作品特效 -->
+            <div class="hold_privileges">
+                <div class="hold_privileges_con">
+                    <div class="hold_privileges_title">作品特效</div>
+                    <div class="hold_privileges_name" v-if="properties.length == 0">创作者暂时未设置</div>
+                    <div class="digital_equity_card" v-else>
+                        <div class="digital_equity_card_con" v-for="(item, index) in properties" :key="index">
+                            <span class="digital_equity_card_con_one">{{ item.name }}</span>
+                            <span class="digital_equity_card_con_two">{{ item.value }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="hold_privileges">
+                <div class="hold_privileges_con">
+                    <hash-code :info="info"></hash-code>
+                </div>
+            </div>
+            <!-- 交易记录 -->
+            <div class="hold_privileges">
+                <div class="hold_privileges_con">
+                    <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">
+                            <div class="hold_privileges_list_con">
+                                <div class="hold_privileges_list_con_one text1 van-ellipsis">
+                                    {{ item.fromUser || '保密' }}
+                                </div>
+                                <div class="hold_privileges_list_con_one text2" v-if="item.price">
+                                    {{ item.operation }}¥{{ item.price }}
+                                </div>
+                                <div class="hold_privileges_list_con_one text2" v-else>{{ item.operation }}</div>
+                                <div class="hold_privileges_list_con_one text3 van-ellipsis">
+                                    {{ item.toUser || '保密' }}
+                                </div>
+                                <div class="hold_privileges_list_con_one text4">{{ item.createdAt.substr(0, 16) }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="textName">暂无购买记录</div>
+                </div>
+            </div>
+        </div>
+        <!-- <div :class="!!info.model3d ? 'detail_content_title' : 'detail_content_title_one'">{{ info.name }}</div> -->
+        <!-- <div class="item_number">
             <div class="item_number_collection">{{ info.category }}</div>
             <div class="item_number_number">编号&nbsp;{{ info.number }}</div>
-        </div>
-        <div class="self_information">
+        </div> -->
+        <!-- <div class="self_information">
             <div class="display_price">
                 <div v-if="info.consignment">
                     <div class="display_price_left">售价</div>
@@ -103,66 +207,22 @@
             </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 class="hold_privileges_title">
-                    持有特权<span class="hold_privileges_tip">(灰色表示已使用)</span>
-                </div>
-                <div class="hold_privileges_name" v-if="privileges.length == 0">创作者者暂时未设置</div>
-                <div class="hold_privileged_information" v-else>
-                    <div class="hold_privileged_information_con" v-for="(item, index) in privileges" :key="index">
-                        <van-image
-                            width="18px"
-                            height="18px"
-                            :src="item.icon[0]"
-                            fit="cover"
-                            class="hold_privileged_information_con_img"
-                        />
-                        <!-- <img :src="item.icon[0]" alt="" class="hold_privileged_information_con_img" /> -->
-                        <div class="hold_privileged_information_con_title">{{ item.name }}</div>
-                    </div>
-                </div>
-            </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>
-                    <div class="digital_equity_card_con" v-for="(item, index) in properties" :key="index">
-                        <span class="digital_equity_card_con_one">{{ item.name }}</span>
-                        <span class="digital_equity_card_con_two">{{ item.value }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="hold_privileges">
-                <hash-code :info="info"></hash-code>
-            </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">
-                        <div class="hold_privileges_list_con">
-                            <div class="hold_privileges_list_con_one text1 van-ellipsis">
-                                {{ item.fromUser || '保密' }}
-                            </div>
-                            <div class="hold_privileges_list_con_one text2" v-if="item.price">
-                                {{ item.operation }}¥{{ item.price }}
-                            </div>
-                            <div class="hold_privileges_list_con_one text2" v-else>{{ item.operation }}</div>
-                            <div class="hold_privileges_list_con_one text3 van-ellipsis">
-                                {{ item.toUser || '保密' }}
-                            </div>
-                            <div class="hold_privileges_list_con_one text4">{{ item.createdAt.substr(0, 16) }}</div>
-                        </div>
-                    </div>
+        <!-- </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>
+                <div class="digital_equity_card_con" v-for="(item, index) in properties" :key="index">
+                    <span class="digital_equity_card_con_one">{{ item.name }}</span>
+                    <span class="digital_equity_card_con_two">{{ item.value }}</span>
                 </div>
-                <div v-else class="textName">暂无购买记录</div>
             </div>
-        </div>
+        </div> -->
+        <!-- </div> -->
         <!-- 购买之后交易按钮 -->
         <div class="purchase_transaction_button">
             <div class="purchase_transaction_button_con">
@@ -886,7 +946,244 @@ export default {
 <style lang="less" scoped>
 .detail_content {
     width: 100%;
-    background: @bg;
+    background: #191d27;
+    position: relative;
+    .detail_content_con {
+        width: 100%;
+        height: 192px;
+        position: absolute;
+        top: 0px;
+    }
+    .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;
+                }
+                .list_of_details_one_text {
+                    display: flex;
+                    justify-content: center;
+                    transform: translateY(-50px);
+                    .list_of_details_one_text_img {
+                        width: 26px;
+                        height: 26px;
+                        position: relative;
+                        z-index: 1;
+                    }
+                    .list_of_details_one_text_con {
+                        height: 18px;
+                        background: linear-gradient(141deg, #fcdc99 0%, #fce7c8 100%);
+                        border-radius: 4px;
+                        padding: 2px 8px 2px 10px;
+                        box-sizing: border-box;
+                        margin-top: 4px;
+                        margin-left: -6px;
+                        font-size: 9px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #725837;
+                        line-height: 14px;
+                    }
+                }
+            }
+        }
+        .collection_holder {
+            padding: 0px 15px;
+            box-sizing: border-box;
+            transform: translateY(-155px);
+            .collection_holder_con {
+                width: 100%;
+                background: #1e222c;
+                border-radius: 12px;
+                padding: 20px 15px;
+                box-sizing: border-box;
+                .collection_holder_one {
+                    display: flex;
+                    justify-content: space-between;
+                    font-size: 16px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 22px;
+                    .collection_holder_one_title {
+                        opacity: 0.5;
+                    }
+                }
+                .collection_holder_two {
+                    margin-bottom: 16px;
+                }
+            }
+        }
+        .work_story {
+            padding: 0px 15px;
+            box-sizing: border-box;
+            margin-top: -140px;
+            .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;
+                    }
+                }
+            }
+        }
+        .hold_privileges {
+            margin-top: 10px;
+            padding: 0px 15px;
+            box-sizing: border-box;
+            .hold_privileges_con {
+                width: 100%;
+                padding: 16px 15px;
+                box-sizing: border-box;
+                background: #1e222c;
+                border-radius: 12px;
+                .hold_privileges_title {
+                    font-size: 18px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #ffffff;
+                    line-height: 26px;
+                    margin-bottom: 12px;
+                    .hold_privileges_tip {
+                        font-size: 12px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #ffffff;
+                        line-height: 20px;
+                        margin-left: 2px;
+                        opacity: 0.5;
+                    }
+                }
+                .hold_privileges_name {
+                    margin-top: 10px;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #939599;
+                }
+                .hold_privileged_information {
+                    display: flex;
+                    flex-wrap: wrap;
+                    display: flex;
+                    // justify-content: space-evenly;
+                    .hold_privileged_information_con {
+                        margin-top: 10px;
+                        margin-right: 15px;
+                        width: 30%;
+                        height: 32px;
+                        background: #f9ddb3;
+                        border-radius: 4px;
+                        padding: 7px 0px;
+                        box-sizing: border-box;
+                        display: flex;
+                        justify-content: center;
+                        .hold_privileged_information_con_title {
+                            font-size: 12px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: #5c4424;
+                            line-height: 18px;
+                            margin-left: 1px;
+                        }
+                    }
+                    .hold_privileged_information_con:nth-of-type(3n) {
+                        margin-right: 0px;
+                    }
+                }
+                .digital_equity_card_con {
+                    width: 100%;
+                    height: 36px;
+                    background: rgba(249, 221, 179, 0.05);
+                    border-radius: 4px;
+                    border: 1px solid #f9ddb3;
+                    padding: 8px 10px;
+                    box-sizing: border-box;
+                    display: flex;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 20px;
+                    margin-bottom: 10px;
+                    .digital_equity_card_con_one {
+                        margin-right: 20px;
+                    }
+                    .digital_equity_card_con_two {
+                        font-weight: 500;
+                        color: #f9ddb3;
+                    }
+                }
+                .digital_equity_card_con:last-child {
+                    margin-bottom: 0px;
+                }
+            }
+        }
+    }
     // margin-top: 44px;
     .detail_content_img {
         margin-top: 30px;
@@ -1148,72 +1445,6 @@ export default {
                 border-radius: 8px;
             }
         }
-        .hold_privileges {
-            background: #29293f;
-            border-radius: 8px;
-            padding: 10px;
-            box-sizing: border-box;
-            margin: 10px 0;
-            .textName {
-                color: #939599;
-                margin-top: 10px;
-                text-align: center;
-            }
-            .hold_privileges_list {
-                .hold_privileges_list_con {
-                    display: flex;
-                    padding: 10px 0px;
-                    border-bottom: 1px solid #5f646f;
-                    box-sizing: border-box;
-                    .hold_privileges_list_con_one {
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        flex: 1;
-                        font-size: 12px;
-                        font-family: PingFangSC-Regular, PingFang SC;
-                        font-weight: 400;
-                        color: #939599;
-                        margin-left: 20px;
-                        line-height: 37px;
-                        // text-align: center;
-                    }
-                    .hold_privileges_list_con_one {
-                        margin-left: 0;
-                    }
-                    .text3 {
-                        flex: 2;
-                    }
-                    .text4 {
-                        flex: 2;
-                    }
-                }
-                .hold_privileges_list_con:last-child {
-                    padding-bottom: 0;
-                    border-bottom: none;
-                }
-            }
-            .hold_privileges_title {
-                font-size: 14px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
-                color: #ffffff;
-            }
-            .hold_privileges_tip {
-                font-size: 12px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #939599;
-                margin-left: 6px;
-            }
-            .hold_privileges_name {
-                margin-top: 10px;
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #939599;
-            }
-        }
         // .information_on_the_chain {
         //     display: flex;
         //     justify-content: space-between;
@@ -1262,67 +1493,6 @@ export default {
             }
         }
     }
-    .hold_privileged_information {
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: 10px;
-        .hold_privileged_information_con {
-            width: 94px;
-            height: 24px;
-            background: #28b6ff;
-            border-radius: 4px;
-            margin-right: 26px;
-            margin-bottom: 10px;
-            display: flex;
-            .hold_privileged_information_con_img {
-                width: 18px;
-                height: 18px;
-                margin-right: 3px;
-                padding-top: 6px;
-                margin-left: 12px;
-                box-sizing: border-box;
-            }
-            .hold_privileged_information_con_title {
-                width: 100%;
-                padding-top: 3px;
-                box-sizing: border-box;
-                font-size: 12px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #ffffff;
-                text-align: center;
-            }
-        }
-        .hold_privileged_information_con:nth-of-type(3n) {
-            margin-right: 0;
-        }
-    }
-    .digital_equity_card {
-        margin-top: 10px;
-        .digital_equity_card_con {
-            width: 100%;
-            height: 24px;
-            border-radius: 4px;
-            border: 1px solid #28b6ff;
-            padding-left: 10px;
-            box-sizing: border-box;
-            line-height: 23px;
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            margin-bottom: 10px;
-            .digital_equity_card_con_one {
-                color: #f5f7fa;
-                margin-right: 12px;
-            }
-            .digital_equity_card_con_two {
-                color: #28b6ff;
-            }
-        }
-        .digital_equity_card_con:last-child {
-            margin-bottom: 0;
-        }
-    }
     .transaction_button {
         width: 100%;
         background: #15152d;
@@ -1437,7 +1607,7 @@ export default {
         font-size: 16px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
-        .purchase_transaction_button_con{
+        .purchase_transaction_button_con {
             display: flex;
             padding: 8px 16px;
             box-sizing: border-box;

src/views/product/Detail.vue

@@ -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">编号&nbsp;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;