|
@@ -3,7 +3,7 @@ |
|
@@ -3,7 +3,7 @@ |
3
|
<show-box :is-first="true">
|
3
|
<show-box :is-first="true">
|
4
|
<image-carousel :goods="entity.goodsList"></image-carousel>
|
4
|
<image-carousel :goods="entity.goodsList"></image-carousel>
|
5
|
<div class="title-box">
|
5
|
<div class="title-box">
|
6
|
- <h1>{{entity.productName}}</h1>
|
6
|
+ <h1 class="line-clamp-2">{{entity.productName}}</h1>
|
7
|
<i class="price" v-if="entity.productPriceBo.marketPrice > entity.productPriceBo.salesPrice"
|
7
|
<i class="price" v-if="entity.productPriceBo.marketPrice > entity.productPriceBo.salesPrice"
|
8
|
:class="{'strike-through': entity.productPriceBo.salesPrice > 0}">{{entity.productPriceBo.formatMarketPrice}}</i>
|
8
|
:class="{'strike-through': entity.productPriceBo.salesPrice > 0}">{{entity.productPriceBo.formatMarketPrice}}</i>
|
9
|
|
9
|
|
|
@@ -14,16 +14,14 @@ |
|
@@ -14,16 +14,14 @@ |
14
|
</div>
|
14
|
</div>
|
15
|
</show-box>
|
15
|
</show-box>
|
16
|
|
16
|
|
17
|
- <show-box v-if="entity.brand">
|
|
|
18
|
- <div class="brand">
|
|
|
19
|
- <img :src="entity.brand.brandIco | resize 110 68" width="55" height="34"/>
|
17
|
+ <show-box class="brand" v-if="entity.brand">
|
|
|
18
|
+ <img :src="entity.brand.brandIco | resize 110 68"/>
|
20
|
|
19
|
|
21
|
<h2>{{entity.brand.brandName}}</h2>
|
20
|
<h2>{{entity.brand.brandName}}</h2>
|
22
|
<a :href="entity.brand.brandDomain | brandUrl">
|
21
|
<a :href="entity.brand.brandDomain | brandUrl">
|
23
|
进入店铺
|
22
|
进入店铺
|
24
|
<span class="icon icon-right"></span>
|
23
|
<span class="icon icon-right"></span>
|
25
|
</a>
|
24
|
</a>
|
26
|
- </div>
|
|
|
27
|
</show-box>
|
25
|
</show-box>
|
28
|
|
26
|
|
29
|
<div class="separator" v-if="isApp"><span>继续拖动,查看商品信息</span>
|
27
|
<div class="separator" v-if="isApp"><span>继续拖动,查看商品信息</span>
|
|
@@ -154,7 +152,7 @@ |
|
@@ -154,7 +152,7 @@ |
154
|
</ul>
|
152
|
</ul>
|
155
|
</show-box>
|
153
|
</show-box>
|
156
|
|
154
|
|
157
|
- <show-box :is-last="true">
|
155
|
+ <show-box class="product-detail-desc" :is-last="true">
|
158
|
<h2>商品详情</h2>
|
156
|
<h2>商品详情</h2>
|
159
|
<i>DETAILS</i>
|
157
|
<i>DETAILS</i>
|
160
|
|
158
|
|
|
@@ -201,33 +199,45 @@ |
|
@@ -201,33 +199,45 @@ |
201
|
background: #f6f6f6;
|
199
|
background: #f6f6f6;
|
202
|
}
|
200
|
}
|
203
|
|
201
|
|
204
|
- .show-box .brand {
|
|
|
205
|
- max-height: 108px;
|
|
|
206
|
- line-height: 48px;
|
202
|
+ .show-box.brand {
|
|
|
203
|
+ $lh: 68px;
|
207
|
overflow: hidden;
|
204
|
overflow: hidden;
|
208
|
|
205
|
|
209
|
img {
|
206
|
img {
|
210
|
- vertical-align: middle;
|
207
|
+ height: 68px;
|
|
|
208
|
+ width: auto;
|
|
|
209
|
+ max-width: 110px;
|
|
|
210
|
+ float: left;
|
211
|
}
|
211
|
}
|
212
|
|
212
|
|
213
|
h2 {
|
213
|
h2 {
|
|
|
214
|
+ display: inline-block;
|
214
|
font-size: 28px;
|
215
|
font-size: 28px;
|
215
|
- vertical-align: middle;
|
|
|
216
|
margin-left: 30px;
|
216
|
margin-left: 30px;
|
217
|
width: 50%;
|
217
|
width: 50%;
|
218
|
overflow: hidden;
|
218
|
overflow: hidden;
|
219
|
text-overflow: ellipsis;
|
219
|
text-overflow: ellipsis;
|
220
|
white-space: nowrap;
|
220
|
white-space: nowrap;
|
|
|
221
|
+ line-height: $lh;
|
221
|
}
|
222
|
}
|
222
|
|
223
|
|
223
|
a {
|
224
|
a {
|
224
|
float: right;
|
225
|
float: right;
|
225
|
font-size: 28px;
|
226
|
font-size: 28px;
|
|
|
227
|
+ line-height: $lh;
|
226
|
color: #b0b0b0;
|
228
|
color: #b0b0b0;
|
227
|
}
|
229
|
}
|
228
|
|
230
|
|
229
|
}
|
231
|
}
|
230
|
|
232
|
|
|
|
233
|
+ .product-detail-desc {
|
|
|
234
|
+ /* 覆盖 img width,height 属性 */
|
|
|
235
|
+ img {
|
|
|
236
|
+ width: 100% !important;
|
|
|
237
|
+ height: auto !important;
|
|
|
238
|
+ }
|
|
|
239
|
+ }
|
|
|
240
|
+
|
231
|
.separator {
|
241
|
.separator {
|
232
|
text-align: center;
|
242
|
text-align: center;
|
233
|
color: #c4c4c4;
|
243
|
color: #c4c4c4;
|