You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.3 KiB
66 lines
1.3 KiB
<template> |
|
<view class="product"> |
|
<image class="product-image" :src="image ? image : 'https://via.placeholder.com/150x200'"></image> |
|
<view class="product-title">{{title}}</view> |
|
<view class="product-price"> |
|
<text class="product-price-favour">￥{{originalPrice}}</text> |
|
<text class="product-price-original">￥{{favourPrice}}</text> |
|
<text class="product-tip">{{tip}}</text> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: 'product', |
|
props: ['image', 'title', 'originalPrice', 'favourPrice', 'tip'] |
|
} |
|
</script> |
|
|
|
<style> |
|
.product { |
|
padding: 10rpx 20rpx; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.product-image { |
|
height: 330rpx; |
|
width: 330rpx; |
|
} |
|
|
|
.product-title { |
|
width: 300rpx; |
|
font-size: 32rpx; |
|
word-break: break-all; |
|
display: -webkit-box; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
-webkit-box-orient: vertical; |
|
-webkit-line-clamp: 2; |
|
} |
|
|
|
.product-price { |
|
font-size: 28rpx; |
|
position: relative; |
|
} |
|
|
|
.product-price-original { |
|
color: #E80080; |
|
} |
|
|
|
.product-price-favour { |
|
color: #888888; |
|
text-decoration: line-through; |
|
margin-left: 10rpx; |
|
} |
|
|
|
.product-tip { |
|
position: absolute; |
|
right: 10rpx; |
|
background-color: #FF3333; |
|
color: #FFFFFF; |
|
padding: 0 10rpx; |
|
border-radius: 5rpx; |
|
} |
|
</style>
|
|
|