详情

src/main/nine-space/src/components/asset/assetInfo.vue

@@ -15,8 +15,11 @@
             <div class="name van-ellipsis">
                 {{ info.name }}
             </div>
-            <div class="price" v-if="info.consignment">
-                <i class="font_family icon-icon_jiage"></i>{{ info.sellPrice || 0 }}
+            <div class="price-content" v-if="info.consignment">
+                <div class="price">
+                    <img src="../../assets/jiage_huang.png" alt="" />
+                    <span>{{ info.sellPrice }}</span>
+                </div>
             </div>
             <div class="status" v-else-if="info.status === 'NORMAL'">
                 {{ info.publicShow ? '仅展示' : '未展示' }}
@@ -25,8 +28,12 @@
                 {{ getLabelName(info.status, assetStatusOptions) }}
             </div>
             <div class="text">
-                <van-image width="18" height="18" :radius="100" :src="info.minterAvatar" fit="cover" />
-                <span>{{ info.minter }}</span>
+                <div class="minter">
+                    <van-image width="18" height="18" radius="18" :src="info.minterAvatar" fit="cover" />
+                    <span>铸造者</span>
+                </div>
+                <!-- <van-image width="18" height="18" :radius="100" :src="info.minterAvatar" fit="cover" />
+                <span>{{ info.minter }}</span> -->
                 <!-- <div class="text1" v-if="info.type === 'BLIND_BOX'">
           <span>{{ info.sale }}/ </span>
           <span>{{ info.stock }}</span>
@@ -101,50 +108,69 @@ export default {
         display: block;
     }
     .content {
-        padding: 10px;
+        padding: 6px 10px 8px;
 
         .name {
-            font-size: 16px;
-            font-weight: bold;
+            font-size: @font2;
             color: #ffffff;
             line-height: 24px;
         }
 
-        .status {
-            font-size: 16px;
-            color: @text3;
-            line-height: 24px;
-            margin-top: 6px;
-        }
-
         .price {
-            font-size: 24px;
+            font-size: @font4;
             font-family: OSP;
             color: @prim;
-            line-height: 22px;
-            padding: 7px 0;
+            line-height: 18px;
+            padding: 12px 0;
 
-            i {
-                vertical-align: text-bottom;
-                font-size: 10px;
+            img {
+                display: inline-block;
+                width: 8px;
             }
         }
+        .status {
+            line-height: 24px;
+            padding: 10px 0 8px;
+            color: @text3;
+            font-size: @font2;
+        }
     }
 
     .text {
         display: flex;
-        // justify-content: space-between;
+        justify-content: space-between;
         align-items: center;
-        margin-top: 9px;
-        .van-image {
-            border-radius: 100px;
-        }
-        span {
-            font-size: 12px;
+        .text1 {
+            font-weight: 400;
             color: @text3;
             line-height: 24px;
-            margin-left: 5px;
+            span {
+                &:last-child {
+                    color: #fff;
+                    font-size: @font1;
+                }
+            }
         }
     }
 }
+.price-content {
+    display: flex;
+    align-items: center;
+    .text1 {
+        font-size: @font1;
+        color: @text3;
+        line-height: 12px;
+    }
+}
+
+.minter {
+    display: flex;
+    font-size: @font1;
+    color: @text3;
+    line-height: 22px;
+    align-items: center;
+    span {
+        margin-left: 4px;
+    }
+}
 </style>

src/main/nine-space/src/components/product/productInfo.vue

@@ -29,7 +29,7 @@
             <div class="text">
                 <div class="minter">
                     <van-image width="18" height="18" radius="18" :src="info.minterAvatar" fit="cover" />
-                    <span>{{ info.minter }}</span>
+                    <span>铸造者</span>
                 </div>
                 <div class="flex1"></div>
                 <like-button :isLike="info.liked" @click="likeProduct">
@@ -96,7 +96,6 @@ export default {
 
         .name {
             font-size: @font2;
-            font-weight: bold;
             color: #ffffff;
             line-height: 24px;
         }
@@ -114,10 +113,10 @@ export default {
             }
         }
         .status {
-            line-height: 22px;
+            line-height: 24px;
             padding: 10px 0 8px;
             color: @text3;
-            font-size: @font1;
+            font-size: @font2;
         }
     }
 

src/main/nine-space/src/views/asset/Detail.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="detail">
-        <swiper pagination class="mySwiper" v-if="banners.length > 0">
+        <!-- <swiper pagination class="mySwiper" v-if="banners.length > 0">
             <swiper-slide v-for="(item, index) in banners" :key="index">
                 <video
                     class="swiper-video"
@@ -20,9 +20,63 @@
                     fit="scale-down"
                 />
             </swiper-slide>
-        </swiper>
+        </swiper> -->
+
+        <div class="detail-top">
+            <img src="../../assets/png-bg-shangping.png" class="bg-img" />
+
+            <div class="detail-info">
+                <swiper pagination class="mySwiper" v-if="banners.length > 0">
+                    <swiper-slide v-for="(item, index) in banners" :key="index">
+                        <!-- <img :src="item" /> -->
+
+                        <video
+                            class="swiper-video"
+                            v-if="isVideo(item)"
+                            :src="item.url"
+                            :poster="getImg(changeImgs([item]), '', 1200)"
+                            controls="controls"
+                        >
+                            您的浏览器不支持 video 标签。
+                        </video>
+                        <van-image
+                            v-else
+                            @click="preview(index, changeImgs(banners))"
+                            :src="getImg(item.url, '', 1200)"
+                            width="calc(100vw - 134px)"
+                            height="calc(100vw - 134px)"
+                            fit="scale-down"
+                        />
+                    </swiper-slide>
+                </swiper>
+
+                <div class="share-content">
+                    <like-button :isLike="info.liked" @click="likeProduct">
+                        {{ info.likes }}
+                    </like-button>
+
+                    <div
+                        class="share-icon"
+                        @click="share"
+                        v-if="info.status === 'NORMAL' && (info.publicShow || info.consignment)"
+                    >
+                        <img src="../../assets/svgs/icon-fenxiang.svg" alt="" />
+                        <span>分享</span>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <div class="info">
+            <div class="info-title">
+                <div class="detail-name">
+                    <span>{{ info.name }}</span>
+                    <img src="../../assets/svgs/png-biaotikuang-01.svg" alt="" />
+                    <img src="../../assets/svgs/png-biaotikuang-02.svg" alt="" />
+                    <img src="../../assets/svgs/png-biaotikuang-03.svg" alt="" />
+                    <img src="../../assets/svgs/png-biaotikuang-04.svg" alt="" />
+                </div>
+            </div>
             <div class="price-line">
                 <template v-if="info.consignment">
                     <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.sellPrice || 0 }}</div>
@@ -38,7 +92,7 @@
                     {{ getLabelName(info.status, assetStatusOptions) }}
                 </div>
             </div>
-            <div class="title">{{ info.name }}</div>
+            <!-- <div class="title">{{ info.name }}</div> -->
             <div class="info-bottom">
                 <span class="text1" v-if="info.number"> 编号 {{ info.number }} </span>
                 <!-- <van-button
@@ -94,7 +148,9 @@
             <div class="top">
                 <div class="top1">
                     <div class="text1">类型</div>
-                    <div v-if="info.category" class="text2">{{ info.category }}</div>
+                    <div v-if="info.category" class="text2">
+                        <span>{{ info.category }}</span>
+                    </div>
                     <div v-else class="text5">铸造者未设置</div>
                 </div>
                 <div class="top1" @click="Whisper">
@@ -305,11 +361,7 @@
             </van-popup>
         </div>
 
-        <post
-            :info="info"
-            :noButton="info.status !== 'NORMAL' || (!info.publicShow && !info.consignment)"
-            pageUrl="assetDetail"
-        />
+        <post ref="post" :info="info" noButton pageUrl="assetDetail" />
     </div>
 </template>
 
@@ -380,6 +432,9 @@ export default {
         }, 1000);
     },
     methods: {
+        share() {
+            this.$refs.post.init();
+        },
         allFn() {
             this.show = false;
             this.getProduct();
@@ -665,7 +720,7 @@ export default {
         justify-content: space-between;
         width: 100%;
         .text1 {
-            font-size: 14px;
+            font-size: @font2;
             font-weight: bold;
             color: #ffffff;
             line-height: 24px;
@@ -676,13 +731,13 @@ export default {
             justify-content: space-between;
             width: 100%;
             .text3 {
-                font-size: 14px;
+                font-size: @font1;
                 font-weight: 400;
                 color: @text3;
                 line-height: 24px;
             }
             .text4 {
-                font-size: 14px;
+                font-size: @font1;
                 font-weight: 400;
                 color: @text3;
                 line-height: 24px;
@@ -701,14 +756,14 @@ export default {
     box-sizing: border-box;
 
     .price {
-        font-size: 36px;
+        font-size: @font4;
         font-family: OSP;
         color: #fdfb60;
         line-height: 36px;
         transform: translateY(3px);
 
         .font_family {
-            font-size: 10px;
+            font-size: 8px;
             line-height: 24px;
             vertical-align: middle;
         }
@@ -752,12 +807,12 @@ export default {
         margin-top: 4px;
         height: 24px;
         .text1 {
-            font-size: 14px;
+            font-size: @font2;
             color: #949699;
             line-height: 24px;
         }
         .van-button {
-            font-size: 13px;
+            font-size: @font1;
             color: #fdfb60;
             line-height: 24px;
             background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
@@ -833,8 +888,8 @@ export default {
 }
 
 /deep/ .mySwiper {
-    width: 100vw;
-    height: 100vw;
+    width: calc(100vw - 120px);
+    height: calc(100vw - 120px);
     z-index: 1;
 
     .swiper-pagination {
@@ -880,7 +935,7 @@ export default {
                 margin-right: 3px;
             }
             .title3 {
-                font-size: 16px;
+                font-size: @font2;
                 font-weight: 400;
                 color: #ff4f50;
                 line-height: 24px;
@@ -911,7 +966,7 @@ export default {
             margin-left: 60px;
         }
         .qrcode1 {
-            font-size: 12px;
+            font-size: @font1;
             font-weight: 400;
             color: @text3;
             line-height: 18px;
@@ -920,12 +975,12 @@ export default {
     }
     .timename {
         color: #ff4f50;
-        font-size: 12px;
+        font-size: @font1;
         padding-bottom: 12px;
     }
     .time {
         color: @text3;
-        font-size: 12px;
+        font-size: @font1;
     }
     .copy {
         width: 220px;
@@ -937,7 +992,7 @@ export default {
         display: flex;
         align-items: center;
         .id {
-            font-size: 16px;
+            font-size: @font2;
             color: #303133;
         }
         .copyImg {
@@ -954,14 +1009,14 @@ export default {
         color: @text3;
     }
     .code {
-        font-size: 12px;
+        font-size: @font1;
         font-weight: 400;
         color: @text3;
         line-height: 18px;
         padding-bottom: 12px;
     }
     .name {
-        font-size: 12px;
+        font-size: @font1;
         font-weight: 400;
         color: @text3;
         line-height: 18px;
@@ -991,7 +1046,7 @@ export default {
     }
 
     span {
-        font-size: 14px;
+        font-size: @font2;
         font-weight: 400;
         color: @text3;
         line-height: 24px;
@@ -1013,12 +1068,29 @@ export default {
             .text2 {
                 width: 94px;
                 height: 32px;
-                border: 1px solid yellow;
+                background: linear-gradient(135deg, @prim, @warn);
                 border-radius: 4px;
                 margin-left: 14px;
-                line-height: 32px;
+                line-height: 30px;
                 text-align: center;
                 color: #ffffff;
+                position: relative;
+                * {
+                    position: relative;
+                    z-index: 2;
+                }
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    left: 1px;
+                    top: 1px;
+                    right: 1px;
+                    bottom: 1px;
+                    background-color: @bg;
+                    z-index: 0;
+                    border-radius: 4px;
+                }
                 &.text3 {
                     display: flex;
                     align-items: center;
@@ -1085,7 +1157,7 @@ export default {
 
 .page-title {
     padding: 0 16px;
-    font-size: 18px;
+    font-size: @font2;
     font-weight: bold;
     color: #ffffff;
     line-height: 28px;
@@ -1112,13 +1184,13 @@ export default {
     flex-direction: column;
     margin: 0 16px;
     .text1 {
-        font-size: 14px;
+        font-size: @font2;
         color: @text3;
         line-height: 24px;
     }
 
     .text2 {
-        font-size: 14px;
+        font-size: @font2;
         color: #ffffff;
         line-height: 24px;
     }
@@ -1163,7 +1235,7 @@ export default {
         .text2 {
             width: 24px;
             height: 17px;
-            font-size: 12px;
+            font-size: @font1;
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
             color: @text3;
@@ -1176,12 +1248,12 @@ export default {
     .van-button {
         background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
         color: #333230;
-        font-size: 16px;
+        font-size: @font2;
         border-width: 0px;
     }
 }
 .status {
-    font-size: 22px;
+    font-size: @font4;
     font-weight: bold;
     color: #fdfb60;
     line-height: 24px;
@@ -1202,4 +1274,163 @@ export default {
         overflow: hidden;
     }
 }
+
+.swiper-video {
+    width: calc(100vw - 134px);
+    height: calc(100vw - 134px);
+    border: 2px solid #2f2f2f;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: @bg;
+}
+
+.detail-top {
+    position: relative;
+    .detail-info {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 50px;
+    }
+    .bg-img {
+        display: block;
+        width: 100vw;
+    }
+    .mySwiper {
+        border-radius: 8px;
+        border: 2px solid #ffffff;
+        .swiper-slide {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            /deep/ .van-image {
+                border: 2px solid #2f2f2f;
+                border-radius: 8px;
+                overflow: hidden;
+                background-color: @bg;
+            }
+        }
+    }
+
+    .name {
+        font-size: @font4;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 30px;
+        padding: 10px 25px;
+        position: relative;
+
+        img {
+            position: absolute;
+            &:nth-child(2),
+            &:nth-child(5) {
+                width: 45px;
+                display: block;
+            }
+
+            &:nth-child(3),
+            &:nth-child(4) {
+                width: calc(100% - 65px);
+                height: 10px;
+            }
+            &:nth-child(2) {
+                top: 0;
+                left: 0;
+            }
+            &:nth-child(3) {
+                top: -0.8px;
+                left: 45px;
+            }
+            &:nth-child(4) {
+                bottom: 0.5px;
+                right: 45px;
+            }
+            &:nth-child(5) {
+                bottom: 0;
+                right: 0;
+            }
+        }
+    }
+}
+
+.share-content {
+    display: flex;
+    margin-top: 20px;
+}
+.share-icon {
+    margin-left: 30px;
+    img {
+        width: 18px;
+        height: 18px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+    span {
+        font-size: @font1;
+        color: #949699;
+        line-height: 24px;
+        vertical-align: middle;
+        margin-left: 2px;
+    }
+}
+.info {
+    .info-title {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+.detail-name {
+    font-size: @font4;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+    padding: 10px 25px;
+    position: relative;
+
+    img {
+        position: absolute;
+        &:nth-child(2),
+        &:nth-child(5) {
+            width: 45px;
+            display: block;
+        }
+
+        &:nth-child(3),
+        &:nth-child(4) {
+            width: calc(100% - 65px);
+            height: 10px;
+        }
+        &:nth-child(2) {
+            top: 0;
+            left: 0;
+        }
+        &:nth-child(3) {
+            top: -0.8px;
+            left: 45px;
+        }
+        &:nth-child(4) {
+            bottom: 0.5px;
+            right: 45px;
+        }
+        &:nth-child(5) {
+            bottom: 0;
+            right: 0;
+        }
+    }
+}
+
+.status-text {
+    font-size: @font4;
+    color: #939599;
+    line-height: 28px;
+    text-align: center;
+    padding: 14px 50px !important;
+    border-top: 1px solid #313233;
+}
 </style>

src/main/nine-space/src/views/product/Detail.vue

@@ -57,11 +57,11 @@
             </div>
 
             <div class="price-line" v-if="info.salable">
-                <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
+                <!-- <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
                 <div class="price-sub" v-if="info.originalPrice">¥{{ info.originalPrice || 0 }}</div>
                 <div class="sub" v-if="info.royalties">
                     含 <span>{{ info.royalties }}%</span> 版税
-                </div>
+                </div> -->
                 <div class="flex1"></div>
                 <div class="text" v-if="info.salable && info.total > 0">
                     <span>已售 {{ info.sale }}</span>
@@ -78,108 +78,167 @@
           size="mini"
           >选择其他编号</van-button
         > -->
-                <div class="flex1"></div>
                 <!-- <like-button :isLike="info.liked" @click="likeProduct">
                     {{ info.likes }}
                 </like-button> -->
             </div>
         </div>
 
-        <driver />
-        <van-cell
-            value="进入主页"
-            is-link
-            class="creator"
-            :to="{
-                path: '/creatorDetail',
-                query: {
-                    id: info.minterId
-                }
-            }"
-        >
-            <template #icon>
-                <van-image width="40" height="40" :src="info.minterAvatar" fit="cover" radius="100" />
-            </template>
-            <template #title>
-                <div class="text1">{{ info.minter }}</div>
-                <div class="text2">铸造者</div>
-            </template>
-        </van-cell>
-
-        <driver />
-        <div class="top">
-            <div class="top1">
-                <div class="text1">类型</div>
-                <div v-if="info.category" class="text2">{{ info.category }}</div>
-                <div v-else class="text5">铸造者未设置</div>
-            </div>
-            <div class="top1">
-                <div class="text1">悄悄话</div>
-                <div class="text2 text3" v-if="init2">
-                    <img class="img" :src="init2.icon[0]" alt="" />
-                    <div class="text4" :class="{ prim: init2.opened }">
-                        {{ init2.opened ? '已打开' : '未打开' }}
-                    </div>
-                </div>
-                <div class="text5" v-else>铸造者未设置</div>
-            </div>
-        </div>
-        <div class="titleIcon">持有特权<span>（灰色表示已使用）</span></div>
-        <div class="prive">
-            <div v-if="init">
-                <div v-for="(item, index) in init" :key="index">
-                    <div class="prive1">
-                        <img class="img" :src="item.icon[0]" alt="" />
-                        <div class="prive2">{{ item.name }}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div v-if="!init" class="conName">铸造者未设置</div>
-        <div class="conName" v-else>铸造者未设置</div>
         <!-- </template> -->
         <div class="goods">
-            <div class="goods-info">
-                <div class="page-title">商品特性</div>
-                <div class="specific-list" v-if="properties.length > 0">
-                    <div class="specific-item" v-for="(item, index) in properties" :key="index">
-                        <div class="text1">{{ item.name }}</div>
-                        <div class="text2">{{ item.value }}</div>
+            <van-collapse v-model="activeNames">
+                <van-collapse-item name="01" class="goods-info">
+                    <template #title>
+                        <div class="page-title">用户信息</div>
+                    </template>
+                    <div class="user">
+                        <van-cell
+                            class="creator"
+                            :to="{
+                                path: '/creatorDetail',
+                                query: {
+                                    id: info.minterId
+                                }
+                            }"
+                        >
+                            <template #icon>
+                                <van-image width="32" height="32" :src="info.minterAvatar" fit="cover" radius="100" />
+                            </template>
+                            <template #title>
+                                <div class="text1">{{ info.minter }}</div>
+                                <div class="text2">铸造者</div>
+                            </template>
+                        </van-cell>
+                        <van-cell
+                            class="creator"
+                            :to="{
+                                path: '/creatorDetail',
+                                query: {
+                                    id: info.ownerId
+                                }
+                            }"
+                        >
+                            <template #icon>
+                                <van-image
+                                    width="32"
+                                    height="32"
+                                    class="user-img"
+                                    :src="info.ownerAvatar || require('../../assets/svgs/img_default_photo.svg')"
+                                    fit="cover"
+                                    radius="100"
+                                />
+                            </template>
+                            <template #title>
+                                <div class="text1 van-ellipsis">{{ info.owner }}</div>
+                                <div class="text2">持有者</div>
+                            </template>
+                        </van-cell>
                     </div>
-                </div>
-                <div v-else class="textName">铸造者未设置</div>
-            </div>
-            <div class="goods-info">
-                <div class="page-title">链上信息</div>
-                <div class="page-text" v-if="info.txHash || info.blockNumber || info.tokenId">
-                    Hash地址：{{ info.txHash }}<br />
-                    区块高度： {{ info.blockNumber }}<br />
-                    令牌ID： {{ info.tokenId }}
-                </div>
-                <div v-else class="textName">铸造者未设置</div>
-            </div>
-            <div class="goods-info">
-                <div class="page-title">盲盒详情</div>
-                <swiper v-if="boxs.length > 0" :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
-                    <swiper-slide v-for="(item, index) in boxs" :key="index">
-                        <van-image
-                            width="100%"
-                            height="170"
-                            :src="getImg(item, '', 1000)"
-                            fit="cover"
-                            radius="12"
-                            @click="preview(index, boxs)"
-                        />
-                    </swiper-slide>
-                </swiper>
-                <div v-else class="textName">铸造者未设置</div>
-            </div>
-
-            <div class="goods-info">
-                <div class="page-title">作品描述</div>
-                <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
-                <div v-else class="textName">铸造者未设置</div>
-            </div>
+                </van-collapse-item>
+                <van-collapse-item name="002" class="goods-info top1">
+                    <template #title>
+                        <div class="page-title">类型</div>
+                    </template>
+                    <div v-if="info.category" style="margin-top: 12px; font-size: 12px" class="text2">
+                        {{ info.category }}
+                    </div>
+                    <div v-else class="tips">铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="00" class="goods-info init">
+                    <template #title>
+                        <div class="page-title">悄悄话</div>
+                    </template>
+                    <div class="qiaohua" v-if="init2">
+                        <img class="img" :src="init2.icon[0]" alt="" />
+                        <div class="text4" :class="{ prim: init2.opened }">
+                            {{ init2.opened ? '已打开' : '未打开' }}
+                        </div>
+                    </div>
+                    <div class="tips" v-else>铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="0" class="goods-info">
+                    <template #title>
+                        <div class="titleIcon">持有特权<span>（灰色表示已使用）</span></div>
+                    </template>
+                    <div class="prive" v-if="init.length > 0">
+                        <div v-for="(item, index) in init" :key="index">
+                            <div class="prive1">
+                                <img class="img" :src="item.icon[0]" alt="" />
+                                <div class="prive2">{{ item.name }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="init.length === 0" class="tips">铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="1" class="goods-info">
+                    <template #title>
+                        <div class="page-title">商品特性</div>
+                    </template>
+                    <div class="specific-list" v-if="properties.length > 0">
+                        <div class="specific-item" v-for="(item, index) in properties" :key="index">
+                            <div class="text1">{{ item.name }}</div>
+                            <div class="text2">{{ item.value }}</div>
+                        </div>
+                    </div>
+                    <div v-else class="textName">铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="2" class="goods-info">
+                    <template #title>
+                        <div class="page-title">链上信息</div>
+                    </template>
+                    <div class="page-text" v-if="info.txHash || info.blockNumber || info.tokenId">
+                        Hash地址：{{ info.txHash }}<br />
+                        区块高度： {{ info.blockNumber }}<br />
+                        令牌ID： {{ info.tokenId }}
+                    </div>
+                    <div v-else class="textName">铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="3" class="goods-info">
+                    <template #title>
+                        <div class="page-title">盲盒详情</div>
+                    </template>
+                    <swiper v-if="boxs.length > 0" :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
+                        <swiper-slide v-for="(item, index) in boxs" :key="index">
+                            <van-image
+                                width="100%"
+                                height="170"
+                                :src="getImg(item, '', 1000)"
+                                fit="cover"
+                                radius="12"
+                                @click="preview(index, boxs)"
+                            />
+                        </swiper-slide>
+                    </swiper>
+                    <div v-else class="textName">铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="4" class="goods-info">
+                    <template #title>
+                        <div class="page-title">作品描述</div>
+                    </template>
+                    <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
+                    <div v-else class="textName">铸造者未设置</div>
+                </van-collapse-item>
+                <van-collapse-item name="5" class="goods-info">
+                    <template #title>
+                        <div class="page-title">交易记录</div>
+                    </template>
+                    <div v-if="list.length > 0">
+                        <div class="content" v-for="item in list" :key="item.id">
+                            <!-- <img class="img" :src="list.avatar" alt="" /> -->
+                            <div class="init">
+                                <div style="width: 100%">
+                                    <div class="text1">{{ item.fromUser || '保密' }}</div>
+                                    <div class="text2">
+                                        <div class="text3">{{ item.operation }}{{ item.price }}</div>
+                                        <div class="text4">{{ item.createdAt }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else style="display: flex; justify-content: center; margin-top: 10px">暂无购买记录</div>
+                </van-collapse-item>
+            </van-collapse>
         </div>
         <div class="btn van-safe-area-bottom" v-if="info.isAppointment">
             <div class="btns">
@@ -201,27 +260,7 @@
 
         <!-- <driver /> -->
 
-        <van-collapse v-model="activeName" accordion>
-            <van-collapse-item class="activeName" title="交易记录" name="1">
-                <div v-if="list.length > 0">
-                    <div class="content" v-for="item in list" :key="item.id">
-                        <!-- <img class="img" :src="list.avatar" alt="" /> -->
-                        <div class="init">
-                            <div style="width: 100%">
-                                <div class="text1">{{ item.fromUser || '保密' }}</div>
-                                <div class="text2">
-                                    <div class="text3">{{ item.operation }}{{ item.price }}</div>
-                                    <div class="text4">{{ item.createdAt }}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div v-else style="display: flex; justify-content: center; margin-top: 10px">暂无购买记录</div>
-            </van-collapse-item>
-        </van-collapse>
-
-        <driver />
+        <!-- <driver /> -->
 
         <post ref="post" :info="info" noButton />
     </div>
@@ -257,7 +296,8 @@ export default {
             blindBoxItems: [],
             init: [],
             init2: null,
-            list: []
+            list: [],
+            activeNames: []
         };
     },
     computed: {
@@ -404,13 +444,12 @@ export default {
 .prive {
     display: flex;
     align-items: center;
-    width: 100%;
     flex-wrap: wrap;
     .prive1 {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin: 16px 15px 0;
+        margin: 16px 16px 0 0;
         width: 94px;
         height: 32px;
         color: #000;
@@ -427,7 +466,9 @@ export default {
             margin-right: 4px;
         }
         .prive2 {
+            font-size: @font1;
             text-align: center;
+            margin-left: 10px;
         }
     }
 }
@@ -475,6 +516,7 @@ export default {
     .price-line {
         display: flex;
         align-items: flex-end;
+        margin-top: 12px;
         .sub {
             flex-grow: 1;
             margin-left: 5px;
@@ -513,7 +555,10 @@ export default {
 
     .info-bottom {
         display: flex;
-        position: relative;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
         margin-top: 4px;
         height: 24px;
         .text1 {
@@ -557,13 +602,13 @@ export default {
     align-items: center;
     padding: 24px 16px 24px;
     .van-cell__title {
-        margin-left: 12px;
+        margin-left: 6px !important;
         .text1 {
-            font-size: @font2;
-            line-height: 24px;
+            font-size: @font1;
+            line-height: 20px;
         }
         .text2 {
-            font-size: @font2;
+            font-size: @font1;
             color: @text3;
             line-height: 22px;
         }
@@ -578,14 +623,14 @@ export default {
     font-weight: 400;
     color: #939599;
     line-height: 24px;
-    padding: 10px 0 0 16px;
+    // padding: 10px 0 0 16px;
 }
 .titleIcon {
     font-size: @font2;
     font-weight: bold;
     color: #ffffff;
     line-height: 24px;
-    padding: 30px 0 0 16px;
+    // padding: 30px 0 0 16px;
 }
 span {
     font-size: @font2;
@@ -638,16 +683,14 @@ span {
                 color: @text3;
             }
         }
-        .text5 {
-            font-size: @font2;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #939599;
-            line-height: 24px;
-            padding-left: 10px;
-        }
     }
 }
+.tips {
+    font-size: @font1;
+    color: @text3;
+    line-height: 24px;
+    padding-top: 12px;
+}
 .buy {
     width: 100%;
     display: block;
@@ -694,7 +737,7 @@ span {
     }
 }
 .goods {
-    padding: 30px 16px 0px;
+    padding: 20px 16px 0px;
 
     .page-title {
         font-size: @font2;
@@ -707,7 +750,7 @@ span {
     }
 }
 .content {
-    padding: 0px 16px;
+    // padding: 0px 16px;
     display: flex;
     align-items: center;
     width: 343px;
@@ -719,42 +762,49 @@ span {
         border-radius: 50%;
         margin-right: 10px;
     }
-    .init {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        .text1 {
-            font-size: 14px;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 24px;
-        }
-        .text2 {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
-            .text3 {
-                font-size: 14px;
-                font-weight: 400;
-                color: @text3;
-                line-height: 24px;
-            }
-            .text4 {
-                font-size: 14px;
-                font-weight: 400;
-                color: @text3;
-                line-height: 24px;
-            }
+}
+.qiaohua {
+    border-radius: 4px;
+    background: linear-gradient(45deg, rgba(253, 251, 96, 1), rgba(254, 181, 74, 1), rgba(255, 143, 62, 1));
+    position: relative;
+    width: 94px;
+    display: flex;
+    height: 30px;
+    align-items: center;
+    justify-content: center;
+    margin-top: 12px;
+    .img {
+        width: 18px;
+        height: 18px;
+        position: relative;
+        z-index: 1;
+    }
+    .text4 {
+        color: #fdfb60;
+        &.prim {
+            color: @text3;
         }
+        margin-left: 10px;
+        position: relative;
+        z-index: 1;
+        font-size: @font1;
+    }
+    &::after {
+        content: '';
+        border-radius: 4px;
+        background-color: @bg;
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        z-index: 0;
     }
 }
 .specific-list {
     padding: 10px 0 0;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     overflow-x: auto;
 }
 .textName {
@@ -792,17 +842,17 @@ span {
     }
 
     .text1 {
-        font-size: @font2;
+        font-size: @font1;
         color: @text3;
-        line-height: 24px;
+        line-height: 18px;
         z-index: 1;
         white-space: nowrap;
     }
 
     .text2 {
-        font-size: @font2;
+        font-size: @font1;
         color: #ffffff;
-        line-height: 24px;
+        line-height: 18px;
         z-index: 1;
         white-space: nowrap;
     }
@@ -870,6 +920,7 @@ span {
         display: flex;
         flex-direction: column;
         align-items: center;
+        padding-bottom: 50px;
     }
     .bg-img {
         display: block;
@@ -1008,4 +1059,27 @@ span {
     padding: 14px 50px !important;
     border-top: 1px solid #313233;
 }
+
+/deep/.goods-info {
+    .van-cell {
+        padding: 0 0;
+    }
+}
+
+.user {
+    padding: 12px 0 0;
+    display: flex;
+    .creator {
+        width: 50%;
+    }
+
+    .user-img {
+        flex-shrink: 0;
+    }
+
+    /deep/.van-cell__title {
+        margin-left: 10px;
+        overflow: hidden;
+    }
+}
 </style>