zhuoxin-leader-uniapp/components/fxyk-cell/fxyk-cell.vue

<template>
	<u-cell-item :arrow="arrow" :bg-color="bgColor" :value="rightValue" class="value-style">
		<view slot="title" class="d-flex a-center"> 
			<view :style="titleStyle">{{ title }}</view>
			<view v-if="redDot" class="red-dot"></view>
		</view>
		<view v-if="leftSlot" slot="icon" style="margin-right:29rpx">
			<u-image width="45rpx" height="48rpx" :fade="false" square="circle" mode="aspectFit" :src="leftImg" bg-color="#ffffff"></u-image>
		</view>
		<view v-if="rightSlot" slot="right-icon">
			<u-input v-model="value" type="text" input-align="right" :placeholder="placeholder"/>
		</view>
	</u-cell-item>
</template>

<script>
	export default {
		props: {
			// 左侧标题
			title: {
				type: String,
				default: '修改密码'
			},
			// 是否显示红色圆点
			redDot: {
				type: Boolean,
				default: false
			},
			// 是有使用左侧插槽
			leftSlot: {
				type: Boolean,
				default: true
			},
			// 左侧插槽图片
			leftImg: {
				type: String,
				default: ''
			},
			// 右侧箭头
			arrow: {
				type: Boolean,
				default: true
			},
			// 右侧内容
			rightValue: {
				type: String,
				default: ''
			},
			// 是否使用右侧插槽
			rightSlot: {
				type: Boolean,
				default: false
			},
			// 右侧插槽提示信息
			placeholder: {
				type: String,
				default: "请输入6位密码"
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: "transparent"
			}
		},
		data() {
			return {
				value: ''
			}
		},
		computed: {
			titleStyle() {
				return {'font-size': '29rpx',
				'font-family': 'SimSun',
				'font-weight': '400',
				'line-height': '40rpx',
				'color': '#000000'}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.red-dot {
		width: 17rpx;
		height: 17rpx;
		background: #FF0011;
		border-radius: 50%;
		margin-left: 8rpx;
	} 
	.value-style {
		font-size: 29rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 40rpx;
		color: #9C9C9C;
	}
</style>