|
...
|
...
|
@@ -2,15 +2,24 @@ |
|
|
|
<top-nav v-if="isApp" :title="entity.product_name" :img="firstImage | resize 300 300"></top-nav>
|
|
|
|
<show-box :is-first="true">
|
|
|
|
<image-carousel :goods="entity.goods_list"></image-carousel>
|
|
|
|
<div class="title-box">
|
|
|
|
<h1 class="line-clamp-2">{{entity.product_name}}</h1>
|
|
|
|
<i class="price" v-if="entity.market_price > entity.sales_price"
|
|
|
|
:class="{'strike-through': entity.sales_price > 0}">{{entity.format_market_price}}</i>
|
|
|
|
|
|
|
|
</show-box>
|
|
|
|
<show-box :zero-top-margin="true">
|
|
|
|
<ul class="item-action">
|
|
|
|
<li><i class="brand icon icon-share2"></i><span class="action-text">{{brand.brand_name
|
|
|
|
}}</span></li>
|
|
|
|
<li><i class="brand icon icon-focus"></i><span class="action-text">收藏</span></li>
|
|
|
|
<li><i class="brand icon icon-share2"></i><span class="action-text">分享</span></li>
|
|
|
|
</ul>
|
|
|
|
<hr>
|
|
|
|
<div class="item-price">
|
|
|
|
<i v-if="entity.sales_price > 0"
|
|
|
|
:class="{price: true, highlight: entity.market_price > entity.sales_price}">
|
|
|
|
{{entity.format_sales_price !== '0' ? entity.format_sales_price : entity.format_market_price}}
|
|
|
|
</i>
|
|
|
|
<i class="price" v-if="entity.market_price > entity.sales_price"
|
|
|
|
:class="{'line-through': entity.sales_price > 0}">{{entity.format_market_price}}</i>
|
|
|
|
<p class="product-name">{{entity.product_name}}</p>
|
|
|
|
|
|
|
|
<ul class="vip-level" v-if="entity.vipPrice">
|
|
|
|
<li class="icons-item" v-for="vip in entity.vipPrice">
|
|
|
|
<span class="vip-img vip-{{vip.level}}"></span>
|
|
...
|
...
|
@@ -18,28 +27,17 @@ |
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</show-box>
|
|
|
|
|
|
|
|
<show-box class="brand" v-if="brand">
|
|
|
|
<img :src="brand.brand_ico | resize 110 68"/>
|
|
|
|
|
|
|
|
<h2>{{brand.brand_name}}</h2>
|
|
|
|
<div class="brand-go">
|
|
|
|
<span>进入店铺</span>
|
|
|
|
<span class="icon icon-right"></span>
|
|
|
|
<hr>
|
|
|
|
<div>
|
|
|
|
<ul class="service">
|
|
|
|
<li><i class="icon icon-real"></i>100%品牌正品</li>
|
|
|
|
<li class="return" v-if="intro.supportRefundExchange === 'N'"><i class="icon icon-unsupport-seven"></i>不支持7天无理由退换货
|
|
|
|
</li>
|
|
|
|
<li class="return" v-else><i class="icon icon-seven"></i>支持7天无理由退换货</li>
|
|
|
|
<li><i class="icon icon-onlineservice"></i>便捷在线客服</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<a :href="brand.brand_domain | brandUrl"></a>
|
|
|
|
</show-box>
|
|
|
|
|
|
|
|
<show-box>
|
|
|
|
<ul class="service">
|
|
|
|
<li><i class="icon icon-real"></i>100%品牌正品</li>
|
|
|
|
<li class="return" v-if="intro.supportRefundExchange === 'N'"><i class="icon icon-unsupport-seven"></i>不支持7天无理由退换货</li>
|
|
|
|
<li class="return" v-else><i class="icon icon-seven"></i>支持7天无理由退换货</li>
|
|
|
|
<li><i class="icon icon-onlineservice"></i>便捷在线客服</li>
|
|
|
|
</ul>
|
|
|
|
</show-box>
|
|
|
|
|
|
|
|
<show-box v-if="intro.productDescBo">
|
|
|
|
<h2>商品信息</h2>
|
|
|
|
<i>DESCRIPTION</i>
|
|
...
|
...
|
@@ -329,35 +327,76 @@ |
|
|
|
background: #fff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.title-box {
|
|
|
|
ul.item-action {
|
|
|
|
height: 103px;
|
|
|
|
font-size: 0;
|
|
|
|
text-align: center;
|
|
|
|
margin-bottom: 50px;
|
|
|
|
max-height: 195px;
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
li {
|
|
|
|
position: relative;
|
|
|
|
display: inline-block;
|
|
|
|
margin-top: 70px;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 30px;
|
|
|
|
line-height: 48px;
|
|
|
|
font-weight: normal;
|
|
|
|
max-width: 580px;
|
|
|
|
margin: 30px auto;
|
|
|
|
font-size: 22px;
|
|
|
|
width: 250px;
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
float: left;
|
|
|
|
width: 210px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
float: right;
|
|
|
|
width: 210px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
i.price {
|
|
|
|
color: #b0b0b0;
|
|
|
|
li .action-text {
|
|
|
|
display: inline-block;
|
|
|
|
max-width: 200px;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
|
|
|
|
li .icon {
|
|
|
|
position: absolute;
|
|
|
|
margin-left: -20px;
|
|
|
|
top: -50px;
|
|
|
|
left: 50%;
|
|
|
|
font-size: 34px;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.item-price {
|
|
|
|
text-align: left;
|
|
|
|
margin-top: 45px;
|
|
|
|
margin-bottom: 40px;
|
|
|
|
max-height: 195px;
|
|
|
|
|
|
|
|
.price {
|
|
|
|
color: #b0b0b0;
|
|
|
|
font-size: 32px;
|
|
|
|
font-style: normal;
|
|
|
|
font-family: "BrownStd-Regular";
|
|
|
|
|
|
|
|
&.strike-through {
|
|
|
|
&.line-through {
|
|
|
|
margin-left: 8px;
|
|
|
|
font-size: 22px;
|
|
|
|
text-decoration: line-through;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.highlight {
|
|
|
|
color: #d0021b;
|
|
|
|
color: #b0021b;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.product-name {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #000;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vip-level {
|
|
|
|
padding: 0 40px;
|
|
|
|
min-height: 2.2rem;
|
...
|
...
|
|
