|
|
@@ -57,7 +57,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="price-line" v-if="info.salable">
|
|
|
- <div class="flex1"></div>
|
|
|
+ <div class="flex1" v-if="info.number"></div>
|
|
|
<div class="text" v-if="info.salable && info.total > 0">
|
|
|
<span>已售 {{ info.sale }}</span>
|
|
|
<span>剩余 {{ info.stock }}</span>
|
|
|
@@ -137,15 +137,19 @@
|
|
|
<template #title>
|
|
|
<div class="page-title"><img src="../../assets/icon-lianshangxinxi.png" alt="" /> 类型</div>
|
|
|
</template>
|
|
|
- <div v-if="info.category" style="margin-top: 12px; font-size: 12px" class="text2">
|
|
|
- {{ info.category }}
|
|
|
+ <div class="top1">
|
|
|
+ <div v-if="info.category" class="category">
|
|
|
+ <span>{{ info.category }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else class="tips">铸造者未设置</div>
|
|
|
</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">
|
|
|
- <img src="../../assets/qiaoqiaohua-icon-weidakai.png" alt="" /> 悄悄话
|
|
|
+ <img src="../../assets/qiaoqiaohua-icon-weidakai.png" alt="" /> 悄悄话<span
|
|
|
+ >(灰色表示已使用)</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="qiaohua" v-if="init2">
|
|
|
@@ -188,9 +192,10 @@
|
|
|
</div>
|
|
|
<div v-else class="textName">铸造者未设置</div>
|
|
|
</van-collapse-item>
|
|
|
- <van-collapse-item name="3" class="goods-info">
|
|
|
+
|
|
|
+ <van-collapse-item name="4" class="goods-info">
|
|
|
<template #title>
|
|
|
- <div class="page-title"><img src="../../assets/icon-miaoshu.png" alt="" />盲盒详情</div>
|
|
|
+ <div class="page-title"><img src="../../assets/icon-miaoshu.png" alt="" />作品描述</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">
|
|
|
@@ -204,7 +209,7 @@
|
|
|
/>
|
|
|
</swiper-slide>
|
|
|
</swiper>
|
|
|
- <div v-else class="textName">铸造者未设置</div>
|
|
|
+ <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
|
|
|
</van-collapse-item>
|
|
|
<van-collapse-item name="2" class="goods-info">
|
|
|
<template #title>
|
|
|
@@ -219,15 +224,6 @@
|
|
|
</div>
|
|
|
<div v-else class="textName">铸造者未设置</div>
|
|
|
</van-collapse-item>
|
|
|
- <van-collapse-item name="4" class="goods-info">
|
|
|
- <template #title>
|
|
|
- <div class="page-title">
|
|
|
- <img src="../../assets/icon-lianshangxinxi(2).png" alt="" />作品描述
|
|
|
- </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"><img src="../../assets/info_icon_jiaoyijilu.png" alt="" />交易记录</div>
|
|
|
@@ -258,14 +254,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
|
|
|
+ <div class="btn btn-list van-safe-area-bottom" ref="btn" v-if="isBuy">
|
|
|
<div class="price-content">
|
|
|
- <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
|
|
|
+ <div class="price">
|
|
|
+ <img src="../../assets/jiage_huang.png" alt="" />
|
|
|
+ {{ 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="btns">
|
|
|
<van-button type="primary" block round @click="buy">立即购买</van-button>
|
|
|
</div>
|
|
|
@@ -486,7 +486,8 @@ export default {
|
|
|
.prive2 {
|
|
|
font-size: @font1;
|
|
|
text-align: center;
|
|
|
- margin-left: 10px;
|
|
|
+ margin-left: 2px;
|
|
|
+ color: #303133;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -533,7 +534,7 @@ export default {
|
|
|
|
|
|
.price-line {
|
|
|
display: flex;
|
|
|
- align-items: flex-end;
|
|
|
+ justify-content: center;
|
|
|
margin-top: 12px;
|
|
|
.sub {
|
|
|
flex-grow: 1;
|
|
|
@@ -554,7 +555,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
- font-size: @font2;
|
|
|
+ font-size: @font1;
|
|
|
color: @text3;
|
|
|
line-height: 16px;
|
|
|
span {
|
|
|
@@ -580,7 +581,7 @@ export default {
|
|
|
margin-top: 4px;
|
|
|
height: 24px;
|
|
|
.text1 {
|
|
|
- font-size: @font2;
|
|
|
+ font-size: @font1;
|
|
|
color: #949699;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
@@ -709,7 +710,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.tips {
|
|
|
- font-size: @font1;
|
|
|
+ font-size: @font2;
|
|
|
color: @text3;
|
|
|
line-height: 24px;
|
|
|
padding-top: 12px;
|
|
|
@@ -777,6 +778,10 @@ export default {
|
|
|
height: 18px;
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
+ span {
|
|
|
+ color: @text3;
|
|
|
+ font-size: @font1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.content {
|
|
|
@@ -814,7 +819,7 @@ export default {
|
|
|
&.prim {
|
|
|
color: @text3;
|
|
|
}
|
|
|
- margin-left: 10px;
|
|
|
+ margin-left: 4px;
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
font-size: @font1;
|
|
|
@@ -848,7 +853,7 @@ export default {
|
|
|
// width: 94px;
|
|
|
// height: 62px;
|
|
|
border-radius: 4px;
|
|
|
- padding: 8px;
|
|
|
+ padding: 4px 8px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
@@ -894,7 +899,11 @@ export default {
|
|
|
line-height: 28px;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
-
|
|
|
+.btn-list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 9px 16px;
|
|
|
+}
|
|
|
.btn {
|
|
|
position: fixed;
|
|
|
z-index: 20;
|
|
|
@@ -903,7 +912,7 @@ export default {
|
|
|
right: 0;
|
|
|
background: #202122ee;
|
|
|
.btns {
|
|
|
- padding: 6px 42px;
|
|
|
+ width: 132px;
|
|
|
}
|
|
|
.van-button {
|
|
|
background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
|
|
|
@@ -1093,8 +1102,18 @@ export default {
|
|
|
/deep/.goods-info {
|
|
|
.van-cell {
|
|
|
padding: 0 0;
|
|
|
+ &::after {
|
|
|
+ content: none;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+/deep/.van-collapse-item--border::after {
|
|
|
+ content: none;
|
|
|
+}
|
|
|
+/deep/.van-hairline--top-bottom::after,
|
|
|
+.van-hairline-unset--top-bottom::after {
|
|
|
+ border-width: 0;
|
|
|
+}
|
|
|
|
|
|
.user {
|
|
|
padding: 12px 0 0;
|
|
|
@@ -1116,5 +1135,62 @@ export default {
|
|
|
.price-content {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ .price {
|
|
|
+ font-size: 32px;
|
|
|
+ font-family: OSP-DIN, OSP;
|
|
|
+ color: #fdfb60;
|
|
|
+ line-height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .font_family {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 10px;
|
|
|
+ height: 11px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-sub {
|
|
|
+ font-size: @font1;
|
|
|
+ color: @text3;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub {
|
|
|
+ font-size: @font1;
|
|
|
+ color: #949699;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.category {
|
|
|
+ width: 94px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: linear-gradient(135deg, rgba(253, 251, 96, 1), rgba(255, 143, 62, 1));
|
|
|
+ font-size: @font1;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 12px;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ background-color: @bg;
|
|
|
+ position: absolute;
|
|
|
+ left: 1px;
|
|
|
+ top: 1px;
|
|
|
+ right: 1px;
|
|
|
+ bottom: 1px;
|
|
|
+ z-index: 0;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|