warst/warst-h5/components/c-cell/index.vue

<template>
	<view class="cell" :style="{ height: `${height}px` }">
		<view class="left-title">
			<slot v-if="$slots.title" name="title"></slot>
			<text v-else>{{ title }}</text>
		</view>
		<view class="right-box">
			<slot v-if="$slots.value" name="value"></slot>
			<text v-else>{{ value }}</text>
			<u-icon v-if="isLink" name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
export default {
	name: 'cCell',
	props: {
		height: [String, Number],
		title: String,
		value: [String, Number],
		isLink: Boolean,
	},
};
</script>

<style scoped lang="scss">
.cell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #edeeef;
	background-color: #fff;

	&:last-child {
		border-bottom: 0;
	}
	padding: 28rpx;
	.left-title {
		display: flex;
		align-items: center;
		color: #303133;
		font-size: 14px;
	}
	.right-box {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #7b7e8c;
	}
}
</style>