caimei-applets-caimei/components/cm-module/productDetails/cm-parameter.vue

<template name="cm-parameter">
	<!-- 相关参数 -->
	<view class="cm-parameter">
		<view class="cm-parameter-main clearfix">
			<view class="item-tabody clearfix" v-for="(item, index) in data" :key="index" >
				<view class="item-td">{{item.name}}</view>
				<view class="item-tr">{{item.color}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'cm-parameter',
		props:{
			product:{
				type:Object,
			}
		},
		data() {
			return{
				data:[
					{name:'颜色',color:'白色'},
					{name:'重量',color:'1000KG'},
					{name:'规格',color:'12瓶/m'},
					{name:'EEDF能量桂华技术',color:'50万次有效出光保证，量均匀，安全保证，效果'},
					{name:'功能',color:'美白嫩肤，美白嫩肤美白嫩肤'},
				]
			}
		},
		created() {
			
		},
		methods:{
		},
		
	}
</script>

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