shop-app/components/UiCell.vue

<!--
 * @Author: ch
 * @Date: 2022-03-26 18:29:19
 * @LastEditors: ch
 * @LastEditTime: 2022-04-22 15:54:57
 * @Description: file content
-->
<template>
	<view class="ui-cell" @click="$emit('click')">
		<slot name="icon"></slot>
		<view class="ui-cell--left">
			<text class="ui-cell--title">{{title}}</text>
			<text class="ui-cell--label" v-if="label">{{label}}</text>
		</view>
		<slot name="value">
			<text class="ui-cell--value">{{value}}</text>
		</slot>
		<slot name="right-icon" v-if="rightIcon">
			<image class="ui-cell--rightIcon" src="@/static/common/arrow.png"/>
		</slot>
	</view>
</template>
<script>
export default {
	props : {
		title : {
			type: String,
			default : ''
		},
		label : {
			type: String,
			default : ''
		},
		value : {
			type : String,
			default : ''
		},
		rightIcon : {
			type : Boolean,
			default : true
		}
	}
}
</script>
<style lang="scss" scoped>
.ui-cell{
	min-height: 100rpx;
	border-bottom: 1px solid $color-grey1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: $color-grey0;
	&--title{
		color: $color-grey6;
		font-size: $font-size-base;
		line-height: $font-size-base;
		display: block;
	}
	&--label{
		color: $color-grey4;
		font-size: $font-size-sm;
		display: block;
		margin-top: 10rpx;
	}
	&--value{
		flex: 1;
		padding: 0 10rpx;
		text-align: right;
		font-size: $font-size-base;
	}
	&--rightIcon{
		width: 10rpx;
		height: 20rpx;
		margin-left: 18rpx;
	}
}
</style>