.

src/main/pc-space/src/views/AssetDetail.vue

@@ -8,7 +8,7 @@
                             class="swiper-video"
                             v-if="isVideo(item)"
                             :src="item.url"
-                            :poster="getImg(changeImgs([item]), '', 800)"
+                            :poster="getImg(changeImgs([item]), '', 1800)"
                             controls="controls"
                         >
                             您的浏览器不支持 video 标签。
@@ -26,7 +26,7 @@
                     <img class="works1" src="../assets/img/icon-quanyibaohu@3x.png" alt="" />
                     <div class="works2">该作品已在保存至区块链并进行权益保护</div>
                 </div>
-                <div class="content">
+                <div style="width: 520px" class="content">
                     <el-collapse v-model="activeNames" :accordion="false">
                         <el-collapse-item name="1" v-if="info.tokenId">
                             <template slot="title">
@@ -82,7 +82,8 @@
                                 <span>作品描述</span>
                             </template>
                             <div class="info5">
-                                <div v-html="info.detail"></div>
+                                <div v-if="info.detail" v-html="info.detail"></div>
+                                <div style="padding-left: 0" v-else class="del">铸造者未设置描述</div>
                             </div>
                         </el-collapse-item>
                     </el-collapse>
@@ -169,60 +170,80 @@
                                 <div class="name-store" v-if="info.category">{{ info.category }}</div>
                                 <div class="Notset" v-else>铸造者未设置</div>
                                 <div class="bor"></div>
-                                <div class="box" v-if="init2 != ''">
-                                    <div
-                                        v-if="init2"
-                                        @mouseenter="isShowPopover(init2.name, true)"
-                                        @mouseleave="isShowPopover(init2.name, false)"
-                                        style="position: relative; width: 24px; margin-left: 16px"
-                                    >
-                                        <img
-                                            @click="Whisper"
-                                            v-if="init2.opened"
-                                            class="img"
-                                            :src="init2.icon[2]"
-                                            alt=""
-                                        />
-                                        <img @click="Whisper" v-else class="img" :src="init2.icon[0]" alt="" />
-                                        <div class="hoverTips1" v-if="popoverStatus[init2.name]">
-                                            <p>{{ init2.description }}</p>
+                                <div style="width: 220px">
+                                    <div class="box" v-if="init2 != ''">
+                                        <div
+                                            v-if="init2"
+                                            @mouseenter="isShowPopover(init2.name, true)"
+                                            @mouseleave="isShowPopover(init2.name, false)"
+                                            style="position: relative; width: 24px; margin-left: 16px"
+                                        >
+                                            <img
+                                                @click="Whisper"
+                                                v-if="init2.opened"
+                                                class="img"
+                                                :src="init2.icon[2]"
+                                                alt=""
+                                            />
+                                            <img @click="Whisper" v-else class="img" :src="init2.icon[0]" alt="" />
+                                            <div class="hoverTips1" v-if="popoverStatus[init2.name]">
+                                                <p>{{ init2.description }}</p>
+                                            </div>
                                         </div>
+                                        <div class="del" v-else>铸造者未设置</div>
                                     </div>
-                                    <div class="del" v-else>铸造者未设置</div>
                                 </div>
                                 <div class="bor"></div>
-                                <div class="iconBox" v-if="init.length > 0">
-                                    <div v-for="(item, index) in init" :key="index">
-                                        <div
-                                            style="position: relative"
-                                            @mouseenter="isShowPopover(item.name, true)"
-                                            @mouseleave="isShowPopover(item.name, false)"
-                                        >
-                                            <div v-if="item.icon[2]">
-                                                <!-- 只能点一次 -->
-                                                <div v-if="item.once" @click="privilegeFn2(item)">
-                                                    <img v-if="item.opened" class="img2" :src="item.icon[2]" alt="" />
+                                <div>
+                                    <div class="iconBox" v-if="init.length > 0">
+                                        <div v-for="(item, index) in init" :key="index">
+                                            <div
+                                                style="position: relative"
+                                                @mouseenter="isShowPopover(item.name, true)"
+                                                @mouseleave="isShowPopover(item.name, false)"
+                                            >
+                                                <div v-if="item.icon[2]">
+                                                    <!-- 只能点一次 -->
+                                                    <div v-if="item.once" @click="privilegeFn2(item)">
+                                                        <img
+                                                            v-if="item.opened"
+                                                            class="img2"
+                                                            :src="item.icon[2]"
+                                                            alt=""
+                                                        />
+                                                    </div>
+                                                    <!-- 多次点 -->
+                                                    <div v-else @click="privilegeFn(item)">
+                                                        <img
+                                                            v-if="item.opened"
+                                                            class="img2"
+                                                            :src="item.icon[2]"
+                                                            alt=""
+                                                        />
+                                                    </div>
+                                                    <div @click="privilegeFn(item)">
+                                                        <img
+                                                            v-if="!item.opened"
+                                                            class="img2"
+                                                            :src="item.icon[3]"
+                                                            alt=""
+                                                        />
+                                                    </div>
                                                 </div>
-                                                <!-- 多次点 -->
-                                                <div v-else @click="privilegeFn(item)">
-                                                    <img v-if="item.opened" class="img2" :src="item.icon[2]" alt="" />
+                                                <!-- 新加特权 -->
+                                                <div @click="privilegeFn2(item)" v-else>
+                                                    <img class="img2" :src="item.icon[0]" alt="" />
                                                 </div>
-                                                <div @click="privilegeFn(item)">
-                                                    <img v-if="!item.opened" class="img2" :src="item.icon[3]" alt="" />
+                                                <!-- v-if="popoverStatus[item.name]" -->
+                                                <div class="hoverTips" v-if="popoverStatus[item.name]">
+                                                    <div class="span">{{ item.name }}</div>
+                                                    <p>{{ item.description }}</p>
                                                 </div>
                                             </div>
-                                            <!-- 新加特权 -->
-                                            <div @click="privilegeFn2(item)" v-else>
-                                                <img class="img2" :src="item.icon[0]" alt="" />
-                                            </div>
-                                            <div class="hoverTips" v-if="popoverStatus[item.name]">
-                                                <div class="span">{{ item.name }}</div>
-                                                <p>{{ item.description }}</p>
-                                            </div>
                                         </div>
                                     </div>
+                                    <div class="del" v-else>铸造者未设置</div>
                                 </div>
-                                <div class="del" v-else>铸造者未设置</div>
                             </div>
                         </el-collapse-item>
                     </el-collapse>
@@ -241,7 +262,7 @@
                                         <div class="box3">{{ item.value }}</div>
                                     </div>
                                 </div>
-                                <div class="del" v-else>铸造者未设置</div>
+                                <div class="dels" v-else>铸造者未设置</div>
                             </div>
                         </el-collapse-item>
                     </el-collapse>
@@ -998,13 +1019,20 @@ export default {
             line-height: 24px;
             padding-left: 22px;
         }
+        .dels {
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+            margin-left: -11px;
+        }
         .Notset {
             font-size: 14px;
-            max-width: 100px;
+            width: 96px;
             font-weight: 400;
             color: #939599;
             line-height: 24px;
-            padding: 0 16px;
+            padding-left: 16px;
         }
         .init1 {
             display: flex;
@@ -1016,7 +1044,7 @@ export default {
                 font-size: 14px;
                 font-weight: 400;
                 color: #ffffff;
-                min-width: 100px;
+                width: 96px;
                 line-height: 24px;
                 padding-left: 16px;
             }
@@ -1027,32 +1055,26 @@ export default {
                 border-radius: 1px;
             }
             .box {
-                width: 225px;
-                .img {
-                    width: 24px;
-                    height: 24px;
-                    cursor: pointer;
-                }
-            }
-            .box {
-                width: 218px;
-                margin-top: 5px;
+                position: absolute;
+                margin-top: -12px;
             }
 
             .img {
-                width: 24px;
+                width: 23px;
                 height: 24px;
                 padding-left: 2px;
                 cursor: pointer;
             }
             .iconBox {
-                margin-left: -10px;
+                margin-left: -12px;
                 display: flex;
                 align-items: center;
+                position: absolute;
+                margin-top: -17px;
                 .img2 {
-                    width: 24px;
+                    width: 23px;
                     height: 24px;
-                    padding-left: 30px;
+                    padding-left: 33px;
                     cursor: pointer;
                     margin-top: 5px;
                 }
@@ -1121,6 +1143,7 @@ export default {
             display: flex;
             align-items: center;
             height: 44px;
+            width: 520px;
             background: #1c1e26;
             border-radius: 8px;
             margin-top: 20px;
@@ -1176,7 +1199,7 @@ export default {
             }
             .info4 {
                 color: #fff;
-                padding: 16px;
+                padding: 10px 16px;
                 .text1 {
                     width: 400px;
                     overflow: hidden;
@@ -1267,7 +1290,7 @@ export default {
             }
             .time1 {
                 font-size: @menuFont;
-                font-weight: bold;
+                // font-weight: bold;
                 color: #ffffff;
                 line-height: 24px;
             }
@@ -1373,6 +1396,7 @@ export default {
                     width: 94px;
                     height: 46px;
                     text-align: center;
+                    margin-right: 30px;
                     .line();
                     .box2 {
                         font-size: @menuFont1;
@@ -1459,7 +1483,7 @@ export default {
         }
         .info4 {
             color: #fff;
-            padding: 16px;
+            padding: 10px 16px;
         }
         .info5 {
             padding: 10px 16px;
@@ -1582,7 +1606,7 @@ export default {
         border-radius: 8px 8px 0 0 !important;
         padding-left: 16px;
         height: 44px;
-        font-weight: bold;
+        // font-weight: bold;
         border-bottom-width: 0;
         img {
             width: 24px;

src/main/pc-space/src/views/CollectionDetail.vue

@@ -8,7 +8,7 @@
                             class="swiper-video"
                             v-if="isVideo(item)"
                             :src="item.url"
-                            :poster="getImg(changeImgs([item]), '', 800)"
+                            :poster="getImg(changeImgs([item]), '', 1800)"
                             controls="controls"
                         >
                             您的浏览器不支持 video 标签。
@@ -17,7 +17,7 @@
                             v-else
                             :src="getImg(item.url, '', 1800)"
                             :preview-src-list="bannerList"
-                            style="width: 100%; height: 100%"
+                            style="width: 100%; height: 520px"
                             fit="scale-down"
                         />
                     </swiper-slide>
@@ -26,7 +26,23 @@
                     <img class="works1" src="../assets/img/icon-quanyibaohu@3x.png" alt="" />
                     <div class="works2">该作品已在保存至区块链并进行权益保护</div>
                 </div>
+                <div class="content">
+                    <el-collapse v-model="activeNames" :accordion="false">
+                        <el-collapse-item name="6" v-if="info.tokenId">
+                            <template slot="title">
+                                <img class="imgs" src="../assets/icon-lianshangxinxi.png" alt="" />
+                                <span>链上信息</span>
+                            </template>
+                            <div class="info4">
+                                <div class="text1">Hash地址：{{ info.txHash }}</div>
+                                <div class="text1">区块高度： {{ info.blockNumber }}</div>
+                                <div class="text1">令牌ID： {{ info.tokenId }}</div>
+                            </div>
+                        </el-collapse-item>
+                    </el-collapse>
+                </div>
             </div>
+
             <div class="top-info">
                 <div class="title">
                     <div class="title1">{{ info.name }}</div>
@@ -71,7 +87,8 @@
                                 <span>作品描述</span>
                             </template>
                             <div class="info5">
-                                <div v-html="info.detail"></div>
+                                <div v-if="info.detail" v-html="info.detail"></div>
+                                <div style="padding-left: 0" v-else class="del">铸造者未设置描述</div>
                             </div>
                         </el-collapse-item>
                     </el-collapse>
@@ -149,39 +166,44 @@
                                 <div class="name-store" v-if="info.category">{{ info.category }}</div>
                                 <div class="Notset" v-else>铸造者未设置</div>
                                 <div class="bor"></div>
-                                <div class="box" v-if="init2 != ''">
-                                    <div
-                                        v-if="init2"
-                                        @mouseenter="isShowPopover(init2.name, true)"
-                                        @mouseleave="isShowPopover(init2.name, false)"
-                                        style="position: relative; width: 24px; margin-left: 16px"
-                                    >
-                                        <img v-if="init2.opened" class="img" :src="init2.icon[2]" alt="" />
-                                        <img v-else class="img" :src="init2.icon[0]" alt="" />
-                                        <div class="hoverTips1" v-if="popoverStatus[init2.name]">
-                                            <p>{{ init2.description }}</p>
+                                <div style="width: 223px">
+                                    <div class="box" v-if="init2 != ''">
+                                        <div
+                                            v-if="init2"
+                                            @mouseenter="isShowPopover(init2.name, true)"
+                                            @mouseleave="isShowPopover(init2.name, false)"
+                                            style="position: relative; width: 24px; margin-left: 16px"
+                                        >
+                                            <img v-if="init2.opened" class="img" :src="init2.icon[2]" alt="" />
+                                            <img v-else class="img" :src="init2.icon[0]" alt="" />
+                                            <!-- v-if="popoverStatus[init2.name]" -->
+                                            <div class="hoverTips1" v-if="popoverStatus[init2.name]">
+                                                <p>{{ init2.description }}</p>
+                                            </div>
                                         </div>
                                     </div>
+                                    <div class="del" v-else>铸造者未设置</div>
                                 </div>
-                                <div class="del" v-else>铸造者未设置</div>
                                 <div class="bor"></div>
-                                <div class="iconBox" v-if="init.length > 0">
-                                    <div v-for="(item, index) in init" :key="index">
-                                        <div
-                                            style="position: relative"
-                                            @mouseenter="isShowPopover(item.name, true)"
-                                            @mouseleave="isShowPopover(item.name, false)"
-                                        >
-                                            <img v-if="item.opened" class="img2" :src="item.icon[2]" alt="" />
-                                            <img v-if="!item.opened" class="img2" :src="item.icon[3]" alt="" />
-                                            <div class="hoverTips" v-if="popoverStatus[item.name]">
-                                                <div class="span">{{ item.name }}</div>
-                                                <p>{{ item.description }}</p>
+                                <div>
+                                    <div class="iconBox" v-if="init.length > 0">
+                                        <div v-for="(item, index) in init" :key="index">
+                                            <div
+                                                style="position: relative"
+                                                @mouseenter="isShowPopover(item.name, true)"
+                                                @mouseleave="isShowPopover(item.name, false)"
+                                            >
+                                                <img v-if="item.opened" class="img2" :src="item.icon[2]" alt="" />
+                                                <img v-if="!item.opened" class="img2" :src="item.icon[3]" alt="" />
+                                                <div class="hoverTips" v-if="popoverStatus[item.name]">
+                                                    <div class="span">{{ item.name }}</div>
+                                                    <p>{{ item.description }}</p>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
+                                    <div v-else class="del">铸造者未设置</div>
                                 </div>
-                                <div v-else class="del">铸造者未设置</div>
                             </div>
                         </el-collapse-item>
                     </el-collapse>
@@ -201,7 +223,7 @@
                                         <div class="box3">{{ item.value }}</div>
                                     </div>
                                 </div>
-                                <div class="del" v-else>铸造者未设置</div>
+                                <div class="dels" v-else>铸造者未设置</div>
                             </div>
                         </el-collapse-item>
                     </el-collapse>
@@ -210,18 +232,6 @@
         </div>
         <div class="content" v-loading="loading">
             <el-collapse v-model="activeNames" :accordion="false">
-                <el-collapse-item name="1" v-if="info.tokenId">
-                    <template slot="title">
-                        <img class="imgs" src="../assets/icon-lianshangxinxi.png" alt="" />
-                        <span>链上信息</span>
-                    </template>
-                    <div class="info4">
-                        <div class="text1">Hash地址：{{ info.txHash }}</div>
-                        <div class="text1">区块高度： {{ info.blockNumber }}</div>
-                        <div class="text1">令牌ID： {{ info.tokenId }}</div>
-                    </div>
-                </el-collapse-item>
-
                 <el-collapse-item name="2" v-if="boxs.length !== 0">
                     <template slot="title">
                         <img class="imgs" src="../assets/icon-miaoshu.png" alt="" />
@@ -329,7 +339,7 @@ export default {
             info: {},
             blindBoxItems: [],
             swiperOptions: {},
-            activeNames: ['1', '2', '3', '4', '5'],
+            activeNames: ['1', '2', '3', '4', '5', '6'],
             relateds: [],
             boxOptions: { slidesPerView: 4, spaceBetween: 24, autoplay: true },
             loading: true,
@@ -511,7 +521,6 @@ export default {
             height: 44px;
             background: #1c1e26;
             border-radius: 8px;
-            width: 500px;
             margin-top: 20px;
             .works1 {
                 width: 24px;
@@ -607,7 +616,7 @@ export default {
             }
             .time1 {
                 font-size: @menuFont;
-                font-weight: bold;
+                // font-weight: bold;
                 color: #ffffff;
                 line-height: 24px;
             }
@@ -708,6 +717,13 @@ export default {
             line-height: 24px;
             padding-left: 16px;
         }
+        .dels {
+            font-size: 14px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+            margin-left: -11px;
+        }
         .init1 {
             display: flex;
             align-items: center;
@@ -716,17 +732,18 @@ export default {
             border-radius: 0px 0px 8px 8px;
             .Notset {
                 font-size: 14px;
-                max-width: 100px;
+                width: 96px;
                 font-weight: 400;
                 color: #939599;
                 line-height: 24px;
-                padding: 0 16px;
+                // padding: 0 16px;
+                padding-left: 16px;
             }
             .name-store {
                 font-size: 14px;
                 font-weight: 400;
                 color: #ffffff;
-                min-width: 100px;
+                width: 96px;
                 line-height: 24px;
                 padding-left: 16px;
             }
@@ -737,7 +754,8 @@ export default {
                 border-radius: 1px;
             }
             .box {
-                width: 225px;
+                position: absolute;
+                margin-top: -12px;
                 .img {
                     width: 24px;
                     height: 24px;
@@ -745,14 +763,17 @@ export default {
                 }
             }
             .iconBox {
-                margin-left: -22px;
+                margin-left: -18px;
                 display: flex;
                 align-items: center;
+                position: absolute;
+                margin-top: -17px;
                 .img2 {
-                    width: 24px;
+                    width: 23px;
                     height: 24px;
                     padding-left: 36px;
                     cursor: pointer;
+                    margin-top: 5px;
                 }
             }
             .hoverTips {
@@ -833,6 +854,7 @@ export default {
                     width: 94px;
                     height: 46px;
                     text-align: center;
+                    margin-right: 30px;
                     .line();
                     .box2 {
                         font-size: @menuFont1;
@@ -920,7 +942,7 @@ export default {
         }
         .info4 {
             color: #fff;
-            padding: 16px;
+            padding: 10px 16px;
         }
         .info5 {
             padding: 10px 16px;
@@ -1022,7 +1044,7 @@ export default {
         border-radius: 8px 8px 0 0 !important;
         padding-left: 16px;
         height: 44px;
-        font-weight: bold;
+        // font-weight: bold;
         border-bottom-width: 0;
         img {
             width: 24px;