cultivationApp/components/plant/landInfo.vue

<template>
	<view class="" style="margin-top: 10rpx;">
		<view class="" style="display: flex;align-items: center;height: 60rpx;">
			<u-icon name="map"></u-icon>
			{{info.fence_house_name}}
		</view>

		<view class="info">
			<view class="info-li" style="background-image: url('/static/main/house/dong_wu_ming_cheng.png');">
				动物名称
				<view class="">
					{{info.animal_name}}
				</view>
			</view>
			<view class="info-li" style="background-image: url('/static/main/house/dong_wu_lei_xing.png');">
				动物类型
				<view class="">
					{{getAnimalType(info.animal_type)}}
				</view>
			</view>
			<view class="info-li" style="background-image: url('/static/main/house/lan_she_rong_liang.png');">
				栏舍容量
				<view class="">
					{{info.capacity}}
				</view>
			</view>
			<view class="info-li" style="background-image: url('/static/main/house/lan_she_fu_ze_ren.png');">
				栏舍负责人
				<view class="">
					{{info.master}}
				</view>
			</view>
			<view class="info-li" style="background-image: url('/static/main/house/dian_hua.png');">
				负责人电话
				<view class="">
					{{info.master_phone}}
				</view>
			</view>
      <view class="info-li-d">
      </view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		watch,
    ref
	} from "vue";
  import {
    animalTypeLists
  } from "@/api/dict.js"
	const props = defineProps({
		info: Object,
		isDetail: Boolean

	})
  
  const animal_type_lists = ref([])
  const initAnimalTypeLists = ()=>{
    animalTypeLists().then(res=>{
      animal_type_lists.value = res.data;
    })
  }
  initAnimalTypeLists();
  const getAnimalType = (type)=>{
    return animal_type_lists.value.find(item=>item.value==type)?.name||'';
  }

	const perviewFn = (url) => {

		uni.previewImage({
			urls: [url]
		})
	}
</script>

<style lang="scss" scoped>
	.info {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.info-li {
			width: 223rpx;
			height: 129rpx;
			border-radius: 10rpx;
			background-size: 100% 100%;
			padding: 20rpx;
			margin-bottom: 20rpx;
			box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
		}
    .info-li-d {
    	width: 223rpx;
    	height: 129rpx;
    	border-radius: 10rpx;
    	padding: 20rpx;
    	margin-bottom: 20rpx;
    }
	}

	.card {
		// width: 710rpx;
		margin: 0 auto;

		.tit {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #EBF1EF;
		}

		.card-li {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>