<template>
	<view class="content">
		<view class="card">
			<view class="card-tit">
				<view class="">
					编号: 13254
				</view>
				<view class="" style="color: green;">
					健康
				</view>
			</view>
			<view class="card-cont">
				<view class="card-l">
					<view class="">
						养殖品种: 黑山🐖
					</view>
					<view class="">
						养殖类型: 黑山🐖
					</view>
					<view class="">
						年龄: 黑山🐖
					</view>
					<view class="">
						体重: 黑山🐖
					</view>
				</view>
				<view class="card-r">
					<u--image src="/static/img/GJ.jpg" width="353.97rpx" height="210.28rpx" alt=""></u--image>
				</view>
			</view>

		</view>

		<view class="card">
			<view class="card-li">
				<view class="card-li-tit">
					养殖品种
				</view>
				<view class="">
					<up-input placeholder="请输入品种" border="surround" v-model="value" @change="change"></up-input>
				</view>
			</view>
			<view class="card-li">
				<view class="card-li-tit">
					年龄
				</view>
				<view class="">
					<up-input placeholder="请输入品种" border="surround" v-model="value" @change="change"></up-input>
				</view>
			</view>
			<view class="card-li">
				<view class="card-li-tit">
					养殖类型
				</view>
				<view class="">
					<up-input placeholder="请输入品种" border="surround" v-model="value" @change="change"></up-input>
				</view>
			</view>
			<view class="card-li">
				<view class="card-li-tit">
					状态
				</view>
				<view class="">
					<up-input placeholder="请输入品种" border="surround" v-model="value" @change="change"></up-input>
				</view>
			</view>
			<view class="card-li">
				<view class="card-li-tit">
					体重
				</view>
				<view class="">
					<up-input placeholder="请输入品种" border="surround" v-model="value" @change="change"></up-input>
				</view>
			</view>

			<view class="uplode">

			</view>
		</view>
		<view class="next-btn">
			下一个
		</view>
		<view class="ripe-btn">
			完成添加
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.card-tit {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F4F4F4;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	.card-cont {
		display: flex;
		justify-content: space-between;

		.card-l {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.card-r {
			overflow: hidden;
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			width: 353.97rpx;
			height: 210.28rpx;
		}
	}

	.card-li-tit {
		margin-bottom: 20rpx;
	}

	.uplode {
		height: 350.47rpx;
		background-color: red;
	}

	.next-btn {
		width: 196.26rpx;
		height: 66.59rpx;
		border: 1px solid #00A15E;
		color: #00A15E;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 66rpx;
	}

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