|
@@ -6,7 +6,11 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="in-right">
|
|
<div class="in-right">
|
|
|
<!-- 商品名称 -->
|
|
<!-- 商品名称 -->
|
|
|
- <p class="title twoline-hide" :style="{ width: `${dataObj.titleWidth}px` }">{{ dataObj.title }}</p>
|
|
|
|
|
|
|
+ <p
|
|
|
|
|
+ class="title twoline-hide"
|
|
|
|
|
+ :style="{ width: `${dataObj.titleWidth}px` }"
|
|
|
|
|
+ :title="dataObj.title"
|
|
|
|
|
+ >{{ dataObj.title }}</p>
|
|
|
<!-- 副标题 -->
|
|
<!-- 副标题 -->
|
|
|
<p
|
|
<p
|
|
|
v-if="isEmpty(dataObj.goodsProps)"
|
|
v-if="isEmpty(dataObj.goodsProps)"
|
|
@@ -14,7 +18,12 @@
|
|
|
:class="{ 'c-p': subTitleColor }"
|
|
:class="{ 'c-p': subTitleColor }"
|
|
|
>{{ dataObj.subtitle }}</p>
|
|
>{{ dataObj.subtitle }}</p>
|
|
|
<!-- 商品规格 -->
|
|
<!-- 商品规格 -->
|
|
|
- <div v-else class="goods-props clearfix">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-else
|
|
|
|
|
+ class="goods-props clearfix"
|
|
|
|
|
+ :style="{ width: `${dataObj.titleWidth}px` }"
|
|
|
|
|
+ :title="goodsPropsText"
|
|
|
|
|
+ >
|
|
|
<div class="goods-props-item" v-for="(props, idx) in dataObj.goodsProps" :key="idx">
|
|
<div class="goods-props-item" v-for="(props, idx) in dataObj.goodsProps" :key="idx">
|
|
|
<span>{{ props.value.name }}</span>
|
|
<span>{{ props.value.name }}</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -46,6 +55,14 @@ export default {
|
|
|
goodsProps: [],
|
|
goodsProps: [],
|
|
|
titleWidth: 200
|
|
titleWidth: 200
|
|
|
}, this.$props.data)
|
|
}, this.$props.data)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 商品规格文字 (用于完整显示)
|
|
|
|
|
+ goodsPropsText () {
|
|
|
|
|
+ const { dataObj } = this
|
|
|
|
|
+ if (isEmpty(dataObj.goodsProps)) {
|
|
|
|
|
+ return ''
|
|
|
|
|
+ }
|
|
|
|
|
+ return dataObj.goodsProps.map(props => props.value.name).join(' ')
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
data () {
|
|
data () {
|
|
@@ -63,7 +80,7 @@ export default {
|
|
|
@size: 60px;
|
|
@size: 60px;
|
|
|
.goods-info {
|
|
.goods-info {
|
|
|
width: 270px;
|
|
width: 270px;
|
|
|
- line-height: 1.3;
|
|
|
|
|
|
|
+ // line-height: 1.3;
|
|
|
white-space: normal;
|
|
white-space: normal;
|
|
|
.in-left {
|
|
.in-left {
|
|
|
float: left;
|
|
float: left;
|
|
@@ -95,6 +112,7 @@ export default {
|
|
|
color: #8a8a8a;
|
|
color: #8a8a8a;
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
|
+ height: 16px;
|
|
|
|
|
|
|
|
&-item {
|
|
&-item {
|
|
|
display: inline-block;
|
|
display: inline-block;
|