cultivationApp/components/plant/breedInfo.vue

<template>
	<view class="" style="margin-top: 10rpx;">
		<view v-if="info.fenceHouseAttr" class="" style="display: flex;align-items: center;height: 60rpx;">
			<u-icon name="map"></u-icon>
			{{info.fenceHouseAttr.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.sn}}
				</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.brand}}
				</view>
			</view>
			<view class="info-li" style="background-image: url('/static/main/house/lan_she_fu_ze_ren.png');">
				生理阶段
				<view class="">
					{{info.physi_stage}}
				</view>
			</view>
			<view class="info-li" style="background-image: url('/static/main/house/dian_hua.png');">
				体重
				<view class="">
					{{info.current_estimation}}kg
				</view>
			</view>
      <view class="info-li-d"></view>
      <!-- <view class="info-li" style="background-image: url('/static/main/house/dian_hua.png');">
      	健康状况
      	<view class="">
      		健康
      	</view>
      </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>