<template> <view class="good-item"> <view class="good-msg"> <u-image :src="item.src" width="128rpx" height="128rpx" ></u-image> <view class="ss-m-l-16"> <view class="good-msg-name">{{item.name}}</view> <view class="good-msg-txm">条形码:6904045405</view> </view> </view> <view class="good-cont"> <view class="good-cont-item"> <view class="item-label">规格</view> <view class="item-value">205ml</view> </view> <view class="good-cont-item"> <view class="item-label">批次号</view> <view class="item-value">12345678966</view> </view> <view class="good-cont-item"> <view class="item-label">生产日期</view> <view class="item-value">2025-04-03</view> </view> <view class="good-cont-item"> <view class="item-label">库存</view> <view class="item-value">20瓶</view> </view> <view class="good-cont-item"> <view class="item-label">库位</view> <view class="item-value">A区3-1-1</view> </view> <view class="good-cont-item"> <view class="item-label">订单数量</view> <view class="item-value">20瓶</view> </view> </view> <slot></slot> </view> </template> <script> export default{ props:{ item:{ type:Object, default:()=>{} } }, data() { return { } } } </script> <style lang="scss" scoped> .good-item { padding: 24rpx 0; border-bottom: 4rpx solid #F0F6FB; .good-msg { display: flex; align-items: center; padding: 0 24rpx; &-name { color: #333; font-family: "PingFang SC"; font-size: 28rpx; font-weight: 500; margin-bottom: 16rpx; } &-txm { color: #999; font-family: "PingFang SC"; font-size: 28rpx; font-weight: 400; } } .good-cont { display: grid; grid-template-columns: 20% 40% 40%; margin-top: 16rpx; padding: 0 24rpx; &-item { font-family: "PingFang SC"; font-weight: 400; margin-bottom: 24rpx; .item-label { color: #999; font-size: 24rpx; margin-bottom: 16rpx; } .item-value { color: #000; font-size: 28rpx; } } } } </style>