manage_mobile/pages/massif/mana/plantPlan.vue

<style lang="scss" scoped>
	.plant_plan{
		.card{
			&>.info{
				display:flex;
				image{
					width:170rpx;
					height:140rpx;
					margin-right:20rpx;
					position:relative;
					border-radius: 20rpx;
					&:before{
						content:"蔬菜";
						position:absolute;
						top:0;
						left:0;
						border-radius: 20rpx 20rpx 20rpx 0;
						background:rgba(60, 84, 44, 0.5);
						color:#fff;
						padding:6rpx 2rpx;
						min-width:80rpx;
						text-align: center;
					}
				}
				&>.detail{
					flex-grow: 1;
					width:1rpx;
					.name{
						display:flex;
						margin-bottom: 6rpx;
						text{
							&:first-child{
								flex-shrink: 0;
								font-size:20rpx;
								color:#fff;
								background:#10C176;
								height:40rpx;
								width:80rpx;
								line-height: 40rpx;
								text-align: center;
								border-radius: 6rpx;
								margin-right:12rpx;
							}
							&:nth-child(2){
								font-weight: bold;
								flex-grow: 1;
							}
						}
					}
					.batch,.recovery{
						font-size:24rpx;
						color:var(--c);
						margin-bottom:6rpx;
					}
					.mu{
						color:#10C176;
						font-size:32rpx;
						font-weight: bold;
						&:after{
							content:"亩";
						}
					}
				}
			}
			&>.date{
				border-top:2rpx solid rgba(216, 216, 216, 0.5);
				margin-top:6rpx;
				padding-top:12rpx;
				display:flex;
				align-items: center;
				text{
					flex-shrink: 0;
					color:#999;
					font-size:24rpx;
					margin-right:auto;
				}
				button{
					margin:0 0 0 20rpx;
					color:rgba(var(--c),1);
					background:rgba(var(--c),0.15);
					height:48rpx;
					font-size:24rpx;
					padding:0 16rpx;
					min-width:100rpx;
				}
			}
		}
	}
</style>
<template>
	<view class="plant_plan">
		<view class="card">
			<view class="info">
				<image src="/static/logo.png"/>
				<view class="detail">
					<view class="name">
						<text>无公害</text> <text>精品小黄瓜</text> <text class="plant-youbian"/>
					</view>
					<view class="batch" style="--c:#999;">种植批次号：A000001</view>
					<view class="recovery" style="--c:#FFC760;">已采收：xxxkg</view>
					<view class="mu">45</view>
				</view>
			</view>
			<view class="date">
				<text>本次预估采收时间：2022-12-12</text>
				<button class="cu-btn" style="--c:255, 196, 87;">结束种植</button>
				<button class="cu-btn" style="--c:153, 153, 153;" @click="$u.route({url:'pages/massif/plant_info'})">采收</button>
			</view>
		</view>
		<button class="cu-btn round bg-green shadow submit" @click="$u.route({url:'pages/massif/plant_plan'})">+新增种植计划</button>
	</view>
</template>
<script>
export default {
	name:"plantPlan",
	data(){
		return{

		}
	}
}
</script>