caimei-applets-mcare/pages/goods/components/cm-parameter.vue

<template name="cm-parameter">
	<!-- 相关参数 -->
	<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup()">
		<view class="tui-popup-box clearfix">
			<view class="title">商品参数</view>
			<view class="content">
				<view class="content-tr">
					<view class="content-td">品牌</view>
					<view class="content-th">恩盛</view>
				</view>
				<view class="content-tr">
					<view class="content-td">起订量</view>
					<view class="content-th">1</view>
				</view>
				<view class="content-tr">
					<view class="content-td">库存</view> 
					<view class="content-th">9999</view>
				</view>
				<view class="content-tr">
					<view class="content-td">包装规格</view>
					<view class="content-th">台</view>
				</view>
				<view class="content-tr" v-for="(item, index) in product.parametersList" :key="index">
					<view class="content-td">{{item.paramsName}}</view>
					<view class="content-th">{{item.paramsContent}}</view>
				</view>
			</view>
			<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
				<view class="tui-flex-1">
					<view class="tui-button" @click="hidePopup()">收起</view>
				</view>
			</view>
		</view>	
	</tui-bottom-popup>		
</template>

<script>
	export default{
		name:'cm-parameter',
		props:{
			product:{
				type:Object,
			},
			popupShow:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return{
				data:[]
			}
		},
		created() {
			
		},
		methods:{
			hidePopup(){
				this.$parent.popupShow = false
			},
		},
		
	}
</script>

<style lang="scss">
	.cm-parameter{
		width: 702rpx;
		height: auto;
		background: #FFF;
		margin: 0 auto;
		padding: 24rpx 0;
		.cm-parameter-main{
			display: flex;
			flex: 1;
			flex-direction: column;
			background-color: #FFFFFF;
			border: 1px solid #EFEFEF;
			border-radius: 4rpx;
			.item-tabody{
				width: 100%;
				height: auto;
				border-bottom: 1px solid #EFEFEF;
				font-size: $font-size-24;
				display: flex;
				flex-wrap: wrap;
				.item-td{
					width: 238rpx;
					float: left;
					border-right: 1px solid #EFEFEF;
					color: #999999;
					padding:20rpx;
					display: flex;
					flex: 3;
					flex-direction: column;
				}
				.item-tr{
					width: 462rpx;
					float: left;
					color: $text-color;
					padding:20rpx;
					display: flex;
					flex: 7;
					flex-direction: column;
				}
				&:last-child{
					border-bottom: none;
				}
			}
		}
	}
</style>