duck/pages/product/common/freshDetail.vue

<template>
	<view class="c-list" v-if="goodsObjact.net_quantity||goodsObjact.storage_condition||goodsObjact.expiration_date">
		<view class="c-row title b-b">规格</view>
		<view class="c-row b-b" v-if="goodsObjact.net_quantity">
			<text class="tit">净含量</text>
			<text class="con t-r">{{ goodsObjact.net_quantity }}</text>
		</view>
		<view class="c-row b-b" v-if="goodsObjact.storage_condition">
			<text class="tit">保存条件</text>
			<text class="con t-r">{{ goodsObjact.storage_condition }}</text>
		</view>
		<view class="c-row b-b" v-if="goodsObjact.expiration_date">
			<text class="tit">保质期</text>
			<text class="con t-r">{{ goodsObjact.expiration_date }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		goodsObjact: {
			type: Object,
			default: function () {
				return {
					
				}
			}
		},
	},
	data() {
		return {
			
		};
	},
};
</script>

<style lang="scss">
.c-list {
	font-size: $font-sm + 2rpx;
	color: $font-color-base;
	background: #fff;
	.title {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
	}
	.c-row {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}
	.tit {
		width: 140rpx;
	}
	.con {
		flex: 1;
		color: $font-color-dark;
		.selected-text {
			margin-right: 10rpx;
		}
	}
	.bz-list {
		height: 40rpx;
		font-size: $font-sm + 2rpx;
		color: $font-color-dark;
		text {
			display: inline-block;
			margin-right: 30rpx;
		}
	}
	.con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: $font-color-dark;
		line-height: 40rpx;
	}
	.red {
		color: #fb6d24;
	}
}
</style>