|
|
@@ -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;
|
