<template> <div class="product-list-wrap"> <div class="product-list"> <div class="product-item" v-for="(item, index) in list" :key="index"> <div class="thumb"> <ImageFormat :src="item.default_images" :width="235" :height="314"></ImageFormat> </div> <div class="name">{{item.product_name}}</div> <div class="price"> <span class="sale-price">¥{{item.sales_price}}</span> <span class="market-price">¥{{item.market_price}}</span> </div> </div> </div> </div> </template> <script> export default { name: 'ProductList', props: { list: Array } }; </script> <style type="scss" scoped> .product-list-wrap { display: flex; justify-content: center; } .product-list { max-width: 714px; display: flex; flex-wrap: wrap; } .product-item { width: 50%; padding: 18px 18px 48px; .thumb { height: 428px; img { width: 100%; height: 100%; display: block; } } .name { height: 68px; margin-top: 24px; font-size: 24px; line-height: 1.4; overflow: hidden; } .sale-price { color: #d0021b; font-size: 26px; font-weight: 500; } .market-price { color: #b0b0b0; font-size: 25px; margin-right: 4px; text-decoration: line-through; } } </style>