yanzhiAPP/pages/feedIng/feedDetail.vue

<template>
	<view class="content">

		<view class="card">
			<view class="tit">
				<view class="">
					农户名称: 1号土地
				</view>
			</view>
			<view class="card-li">
				<view class="">
					种养殖类型: 土豆
				</view>
				<view class="">
					养殖头数: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					土地面积: 20亩
				</view>
				<view class="">
					公猪: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					养殖种类: 20亩
				</view>
				<view class="">
					母猪: 的划分等级
				</view>
			</view>
			<view class="card-li">
				<view class="">
					具体种类: 20亩
				</view>
				<view class="">
					幼崽: 的划分等级
				</view>
			</view>
		</view>

		<view class="serch">
			<u-search bgColor='white' height='63.08rpx' :show-action="false" actionText="搜索"
				:animation="true"></u-search>
			<view class="serch-btn">
				搜索
			</view>
		</view>
		<view class="title">
			<view class="">
				编号: 13645
			</view>
			<view class="">
				查看养殖详情>
			</view>
		</view>

		<view class="card">

			<view class="card-li">
				<view class="">
					养殖类型: 母猪
				</view>
				<view class="">
					年龄: 2年
				</view>
			</view>
			<view class="card-li" style="align-items: center;">
				<view class="">
					状态: 母猪
				</view>
				<view class="" style="display: flex;align-items: center;">
					体重: <up-input style="height: 49.07rpx;width: 215.54rpx;margin-left: 20rpx;" placeholder="请输入内容"
						border="surround" v-model="value" @change="change"></up-input>
				</view>
			</view>
			<view class="head-img">
				<view class="">
					<u--image src="/static/img/GJ.jpg" width="637.85rpx" height=" 394.28rpx" alt=""></u--image>
				</view>
				<view class="poisition">
					<view style="margin-left: 20rpx;">
						分水岭大南山北326米
					</view>
				</view>
			</view>

			<view class="up-plant-btn">
				上传新的种植情况
			</view>



		</view>

		<view class="title">
			<view class="">
				饲养记录
			</view>
			<view class="updata-btn">
				更新生长记录
			</view>
		</view>
		<view class="" style="height: 500rpx;background-color: red;">

		</view>
		<view class="ripe-btn">
			标记状态为出栏
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const value = ref("")
</script>

<style lang="scss" scoped>
	.card {
		margin-bottom: 20rpx;

		.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;
		}
	}

	.title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.updata-btn {
			width: 192.76rpx;
			height: 57.83rpx;
			border: 1px solid #00A15E;
			color: #00A15E;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
			font-size: 26.29rpx;
		}
	}

	.serch {
		position: relative;
		margin-bottom: 20rpx;

		.serch-btn {
			color: white;
			width: 115.65rpx;
			height: 63.08rpx;
			background-color: #1BAB6F;
			text-align: center;
			line-height: 63.08rpx;
			border-radius: 50rpx;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.head-img {
		border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
		margin: 0 auto;
		position: relative;

		.poisition {
			opacity: 0.7;
			position: absolute;
			width: 380.26rpx;
			height: 71rpx;
			background-color: #FFFFFF;
			left: 20rpx;
			bottom: 36rpx;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			display: flex;
			align-items: center;
			font-size: 29.79rpx;

			.dw-cls {

				margin: 0 5rpx;
			}
		}
	}

	.up-plant-btn {
		width: 371.5rpx;
		height: 66.59rpx;
		color: #00A15E;
		margin: 40rpx auto;
		border: 1px solid #00A15E;
		font-weight: bold;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		display: flex;
		align-items: center;
		justify-content: center;


	}

	.ripe-btn {
		width: 588.79rpx;
		height: 84.11rpx;
		background-color: #00A15E;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 85rpx auto;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		background: linear-gradient(to right, #00A15E, #4CC593);
	}
</style>