img :照片路径, title :标题名字, describe :描述, obj :对象{ price: 现价,originalPrice:原价,sales:销量 }
代码:
<template> <div @click="clicks()"> <div class="llen"> <div class="img"> <img :src="img"> </div> <div class="xq"> <p>{{title}}</p> <p style="margin: .3rem 0; ">{{describe}}</p> <p style="font-size: 14px; display: flex;justify-content: space-between"> <b style="color: red">现价:￥{{obj.price}}</b><s>原价:￥{{obj.originalPrice}}</s><span>销量{{obj.sales }}件</span> </p> </div> </div> </div> </template> <script> export default { name: "L-len", props: { img: { default: 'https://dcdn.it120.cc/2019/07/24/a30b67dd-61be-41bd-841c-7e3f8844e958.jpg', type: String }, title: { default: 'Title标题', type: String }, describe: { default: '描述', type: String }, obj: Object, }, components: {}, data() { return {} }, mounted() { }, methods: { clicks(t) { this.$emit('click', t) } }, } </script> <style scoped> .xq { width: 60%; } .llen { padding: .1rem 0; width: 100%; display: flex; justify-content: space-around; align-items: center; border-top: .02rem solid #eee; border-bottom: .01rem solid #eee; } .llen .img { width: 25%; border-radius: .1rem; overflow: hidden; } .llen .img img { width: 100%; } </style>