Task:产品故事
This commit is contained in:
@@ -26,6 +26,14 @@
|
|||||||
}">
|
}">
|
||||||
<image :src="product.image" class="pro-cover-image" mode="widthFix|heightFix" />
|
<image :src="product.image" class="pro-cover-image" mode="widthFix|heightFix" />
|
||||||
</view>
|
</view>
|
||||||
|
<view class="good-story"
|
||||||
|
:style="{
|
||||||
|
right: (item.productStoryX*2 || 0) + 'rpx',
|
||||||
|
top: (item.productStoryY*2 || 0) + 'rpx'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<view v-for="(line, j) in product.productStory ? product.productStory.split('/n') : productStory.split('/n')" :key="j">{{ line }}</view>
|
||||||
|
</view>
|
||||||
<image :src="item.cover" class="cover-image" mode="widthFix" />
|
<image :src="item.cover" class="cover-image" mode="widthFix" />
|
||||||
<!-- <view class="message-text" :style="{top: currentIndex !== index ? '260rpx' : '220rpx'}">{{ message }}</view> -->
|
<!-- <view class="message-text" :style="{top: currentIndex !== index ? '260rpx' : '220rpx'}">{{ message }}</view> -->
|
||||||
</view>
|
</view>
|
||||||
@@ -69,6 +77,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
productStory: '源自云南的宣威火腿月饼,/n以匠心手作,外皮酥香,/n内馅甜咸交融。/n每一口,都是月圆情浓的/n团圆滋味,载着滇地独特的/n饮食文化记忆。',
|
||||||
currentIndex: this.index
|
currentIndex: this.index
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -186,4 +195,13 @@ export default {
|
|||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.good-story{
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
height: 160px;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
color: #ffefd2;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -13,6 +13,14 @@
|
|||||||
|
|
||||||
</image>
|
</image>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="good-story"
|
||||||
|
:style="{
|
||||||
|
right: (card.productStoryX*2 || 0) + 'rpx',
|
||||||
|
top: (card.productStoryY*2 || 0) + 'rpx'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<view v-for="(line, j) in card.productStory ? card.productStory.split('/n') : productStory.split('/n')" :key="j">{{ line }}</view>
|
||||||
|
</view>
|
||||||
<view class="wrap-box">
|
<view class="wrap-box">
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
@@ -132,6 +140,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
productStory: '源自云南的宣威火腿月饼,/n以匠心手作,外皮酥香,/n内馅甜咸交融。/n每一口,都是月圆情浓的/n团圆滋味,载着滇地独特的/n饮食文化记忆。',
|
||||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||||
// 组件数据
|
// 组件数据
|
||||||
giftNotice: '',
|
giftNotice: '',
|
||||||
@@ -440,4 +449,13 @@ export default {
|
|||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
.good-story{
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
height: 160px;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
color: #ffefd2;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user