aiot-app/components/CellTip.vue

<template>
	<view class="">
		<view class="position" v-if="cellType=='1'">
			<text class="tag"></text>
			<text class="titles" v-text="title"></text>
			<slot></slot>
		</view>
		<view class="list-cell" v-if="cellType=='2'">
			<text class="list-cell-span" >
				<text v-text="title"></text>
				<text class="num" v-if="num<=99" v-text="num"></text>
				<text class="num" v-if="num>99">99+</text>
			</text>
			<slot></slot>
		</view>
	</view>
	
</template>

<script>
	export default {
		name: "CellTip",
		props:{
			title:{
				type:String,
				default:''
			},
			num:{
				type:[String, Number],
				default:''
			},
			cellType:{
				type:[String, Number],
				default:'1'
			}
		},
		data() {
			return {

			};
		}
	}
</script>


<style lang="scss" scoped>
	.position {
		position: relative;
		padding:  20rpx;
		display: flex;
		align-items: center;
		background-color: $page-tip-bg;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
		.tag {
			display: inline-block;
			background-color: $j-primary-border-green;
			width: 6rpx;
			height: 30rpx;
		}
		.titles {
			font-size: $uni-font-size-lg;
			font-weight: bold;
			margin-left: 20rpx;
		}
	}
	.list-cell{
		position: relative;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		font-size: $uni-font-size-base;
		color: $uni-text-regular-color;
		.list-cell-span{
			padding: 0 20rpx;
			position: relative;
			display: inline-block;
			height: 76rpx;
			line-height: 76rpx;
			border-bottom: 1px solid $j-primary-border-green;
		}
		.num{
			padding: 0 8rpx;
			height: 40rpx;
			line-height: 40rpx;
			position: absolute;
			top: 8rpx;
			right: -50rpx;
			display: inline-block;
			transform: scale(0.7);
			color: #FFFFFF;
			background-color: $uni-color-error;
			border-radius: 20rpx;
			text-align: center;
		}
	}
	
</style>