prevent_drowning_app/work/components/box/list.vue

<template>
<view>
	<block v-if="datainfo.length>0">
		<!-- 认证 -->
		<block v-if="type=='rzbox'">
			<view class="rzlist flex" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="flex1">
					<view class="rztop flexc mb10">
						<view class="name">王宇宁</view>
						<view class="imgs flexcc">
							<image :src="man" class="imga"></image>
							<!-- <image :src="wman" class="imgb"></image> -->
						</view>
						<image :src="rzbtn" class="rzimg"></image>
					</view>
					<view class="num flexc">
						<image :src="car"></image>
						<view>340824201503270246</view>
					</view>
					<view class="tits flexcw">
						<view class="tita">
							<view class="tit">第一人民小学</view>
							<view class="txt">学校名称</view>
						</view>
						<view class="tita">
							<view class="tit">三年级 2 班</view>
							<view class="txt">班级名称</view>
						</view>
					</view>
				</view>
				<image :src="profile" class="headimg"></image>
			</view>
		</block>
		
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</block>
	
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<view>您还未绑定孩子的信息，请前去添加绑定</view>
		<view>防溺水，早安心</view>
	</view>
</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	export default{
		props:{
			datainfo: {
				type: Array,
				default () {
					return []
				}
			},
			wtdt:{
				type:String,
				default () {
					return ''
				}
			},
			type:{
				type:String,
				default () {
					return 0
				}
			},
		},
		data(){
			return{
				noiconpimg:require("@/work/images/nodata.png"),
				man:require("@/work/images/rz/man.png"),
				wman:require("@/work/images/rz/wman.png"),
				rzbtn:require("@/work/images/rz/rzbtn.png"),
				car:require("@/work/images/rz/car.png"),
				profile:require("@/static/images/profile.jpg"),
				baseUrl:config.baseUrl,
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			getDetail(e){
				this.$emit('getDetail',e)
			},
		}
	}
</script>

<style lang="scss" scoped>
// 认证列表
.rzlist{background: linear-gradient(70deg, #E4ECFF, #FFFFFF, #F0F3FB);
box-shadow: 0px 6rpx 14rpx 0px rgba(76,76,76,0.13);width: 100%;
border-radius: 20rpx;margin-bottom: 28rpx;padding: 30rpx 30rpx 20rpx 32rpx;
	.rztop{
		.name{font-weight: bold;font-size: 32rpx;color: #000000;margin-right: 12rpx;}
		.imgs{width: 22rpx;height: 32rpx;margin-right: 12rpx;flex: 0 0 auto;
			.imga{width: 16rpx;height: 30rpx;}
			.imgb{width: 22rpx;height: 32rpx;}
		}
		.rzimg{width: 84rpx;height: 34rpx;flex: 0 0 auto;}
	}
	.num{font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 52rpx;
		image{width: 26rpx;height: 22rpx;margin-right: 14rpx;}
	}
	.tits{
		.tita{min-width: 50%;margin-bottom: 10rpx;}
		.tit{font-weight: bold;font-size: 26rpx;color: #000000;margin-bottom: 12rpx;}
		.txt{font-weight: 500;font-size: 24rpx;color: #666666;}
	}
	.headimg{width: 178rpx;flex: 0 0 auto;margin-left: 10rpx;
height: 208rpx;margin-top: 6rpx;}
}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;padding-top: 120rpx;
	image{width: 470rpx;height: 470rpx;margin-bottom: 4rpx;}
	view{font-size: 26rpx;color: #000000;font-weight: 500;line-height: 42rpx;}	
}
</style>