79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<template>
|
|
<view class="jy-card">
|
|
<!-- 需要展示的图 -->
|
|
|
|
<image class="jy-card-img" v-if="item.images && item.images[0]" :src="item.images[0].imageUrl" />
|
|
<!-- 标题 -->
|
|
<view class="jy-card-content">
|
|
<view class="jy-card-title">{{ item.productName }}</view>
|
|
<view class="jy-card-info">
|
|
<!-- 价格 -->
|
|
<view class="jy-card-price">￥<text class="jy-card-price-num">{{ item.price }}</text></view>
|
|
<!-- 销量 -->
|
|
<view class="jy-card-sales">销量：<text class="jy-card-sales-num">{{ `${item.sales ? item.sales + '+' : 0}`
|
|
}}</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.jy-card {
|
|
width: 90%;
|
|
height: 468rpx;
|
|
border-radius: 14rpx;
|
|
background: $uni-bg-color;
|
|
|
|
&-img {
|
|
//宽继承父元素
|
|
width: 100%;
|
|
height: 344rpx;
|
|
//上面两个圆角
|
|
border-top-left-radius: 14rpx;
|
|
border-top-right-radius: 14rpx;
|
|
}
|
|
|
|
&-title {
|
|
text-align: left;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
&-price {
|
|
color: #FF7F37;
|
|
font-size: $uni-font-size-sm;
|
|
margin-right: 10rpx;
|
|
|
|
&-num {
|
|
font-size: $uni-font-size-lg;
|
|
}
|
|
}
|
|
|
|
&-sales {
|
|
color: #999999;
|
|
font-size: $uni-font-size-sm;
|
|
|
|
&-num {
|
|
font-size: $uni-font-size-sm;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
padding: 10rpx;
|
|
}
|
|
|
|
&-info {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style> |