<template> <div class="product-item"> <div class="product-images-wrapper"> <ImageFormat class="image" :src="pic_url" width="170" height="226"></ImageFormat> <div class="price">{{ '¥' + sales_price}}</div> </div> <div class="title line-clamp-2">{{product_name}}</div> </div> </template> <script> export default { name: 'RecommendProductItem', props: { sales_price: { type: String, default() { return '1111.0'; }, }, pic_url: { type: String, default() { return '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60'; } }, product_name: { type: String, default() { return 'viishow 套头圆领撞拼条纹针织衫'; } }, product_skn: { type: [String, Number], default() { return '51775544'; } } }, methods: { } }; </script> <style lang="scss" scoped> .product-item { display: inline-block; width: 170px; .product-images-wrapper { position: relative; width: 170px; height: 226px; margin-bottom: 12px; .image { width: 170px; height: 226px; } .price { width: 100px; height: 40px; line-height: 40px; position: absolute; text-align: center; bottom: 10px; margin-left: 82px; color: white; font-size: 20px; background-image: linear-gradient(90deg, #474747 0%, #222 100%); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); } } .title { width: 100%; font-size: 20px; line-height: 25px; color: #444; height: 50px; white-space: normal; } } </style>