siyu_app/components/smsTempItem/smsTempItem.vue

<template>
	   <view class="u-page__item">
			<view class="qcell"  v-for="(item, i) in list"  :key="i" @click="smsTempClick(i)">
			    <view class="topbox x-bc">
			    	<view class="left">{{ item.title }}</view>
			    </view>
				<view class="content">{{ item.content }}</view>
				<!-- <view class="line"></view> -->
			</view>
		</view>
</template>

<script>
	export default {
		props:{
			list: {
				type: Array,
				default(){
					return []
				}
			}
		},
		methods: {
		   smsTempClick(i){
		   	   return this.$emit('smsTempClick',i);
		   }
		}
	}
</script>

<style lang="scss" scoped>
	.item_content{
		background-color: #f7f7f7;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 28rpx;
	}
	.u-page__item{
		background: #F7F7F7;
		margin-top: 40rpx;
		
		.qcell{
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 10px;
			margin: 10px;
			.topbox{
				padding:30rpx 30rpx; 
			}
			.left{
				font-size: 28rpx;
				color: #333;
			}
			.right{
				color: #999;
				font-size: 24rpx;
			}
			.icon{
				width:100% ;
				height: 100%;
				margin-bottom: 16rpx;
			}
			
			.content{
				font-size: 28rpx;
				color: #999;
				padding:0 30rpx 30rpx; 
			}
			
			.line{
			    border-bottom: 0.5px solid #eee;
				padding:0 30rpx;
			}
		}
	}

</style>