property/property_ui/components/box/list.vue

<template>
<view>
	<block v-if="datainfo.length>0">
		<!-- 康养 -->
		<block v-if="type=='health'">
			<view class="healthlist flexc" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="hlbox flex1">
					<view class="tit overtwo">吃粗粮能够降血脂吗？这三种吃法让血糖不降反增</view>
					<view class="flexc">
						<view class="txt">2024-11-14</view>
						<view class="flexc">
							<image :src="eye" class="eyeimg"></image>
							<view class="txt">1361</view>
						</view>
					</view>
				</view>
				<image :src="noiconpimg" class="hrimg"></image>
			</view>
		</block>
		<view class="shax">{{wtdt}}</view>
	</block>
	
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<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("@/static/nodata.png"),
				eye:require('@/static/images/eye.png'),
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			getDetail(e){
				this.$emit('getDetail',e)
			},
		}
	}
</script>

<style lang="scss" scoped>
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.mb10{margin-bottom: 20rpx;}
.healthlist{
	padding:26rpx 22rpx;border-bottom: 2rpx solid #E5E5E5;
	.hlbox{
		.tit{font-weight: bold;font-size: 28rpx;color: #272727;line-height:48rpx;margin-bottom: 10rpx;}
		.txt{font-weight: 500;line-height: 36rpx;font-size: 22rpx;color: #AAAAAA;}
		.eyeimg{width: 24rpx;height: 18rpx;margin-right: 10rpx;margin-left: 34rpx;}
		
	}
	.hrimg{width: 210rpx;height: 138rpx;flex: 0 0 auto;margin-left: 36rpx;}
}

// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>