Ci2Order.vue/App/components/z-cell/z-cell.vue

<template>
	<view class="z-cell plr-30" :style="{background:bgcolor}">
		<view class="z-cell_item flex-n fac" :style="{'min-height':height}">
			<view v-if="icon" class="z-cell_icon mr-30 iconfont" :class="icon" :style="iconStyle"></view>
			<slot name="icon"></slot>
			<view class="z-cell_label flex-1 nowarp mr-60"  v-if="label"  :style="labelStyle">{{label}}</view>
			<view class="z-cell_content" v-if="content" :style="contentStyle" v-html="content"></view>
			<view style="text-align: right;">
			<slot></slot>
			</view>
			<view class="z-cell_right ml-20 iconfont iconjuxing11kaobei" v-if="arrow"></view>
		</view>
			<view class="line" v-if="!hideline" :class="icon?'ml-88':''"></view>
	</view>
</template>

<script>
	export default{
		name:"z-cell",
		props:{
			height:{
				type: String,
				default: '87rpx'
			},
			bgcolor: {
				type: String,
				default: 'white'
			},
			icon:String,
			label:String,
			content:String|Number,
			iconStyle:Object,
			labelStyle:Object,
			contentStyle:Object,
			arrow:{
				type: Boolean,
				default: false
			},
			hideline:{
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style scoped lang="scss">
	.z-cell{
		.z-cell_icon{
			font-size: 58rpx;
			width: 58rpx;
			min-width: 58rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			color: #8E9399;
		}
		.z-cell_label{
			font-size: 32rpx;
			color: #333333;
		}
		.z-cell_content{
			font-size: 28rpx;
			color: #555555;
			padding: 20rpx 0;
		}
		.z-cell_right{
			font-size: 20rpx;
			color: #8E9399;
		}
	}
</style>