<style lang="scss">
	.container{
		min-height: 100%;
		background:#F6F6F6;
		padding:30rpx 0;
		.card{
			margin-top:0;
		}
		&>.fertilizer{
			&>.name{
				display:flex;
				align-items: center;
				margin-bottom:14rpx;
				text{
					&:first-child{
						font-size:20rpx;
						color:#fff;
						background:#10C176;
						border-radius: 7rpx;
						min-width:80rpx;
						padding:0 6rpx;
						text-align: center;
						height:40rpx;
						line-height: 40rpx;
						margin-right:16rpx;
						box-sizing: border-box;
					}
					&:nth-child(3){
						border-radius: 50%;
						background:#10C176;
						color:#fff;
						margin-left:auto;
						width:35rpx;
						height:35rpx;
						text-align: center;
						line-height: 35rpx;
					}
				}
			}
			&>.company{
				display:flex;
				align-items: center;
				text{
					&:first-child{
						flex-shrink: 0;
						font-size:20rpx;
						color:#707070;
					}
					&:nth-child(2){
						margin:auto;
						font-size:20rpx;
						color:#FBA83C;
					}
				}
			}
		}
		&>.specs{
			.select{
				flex-grow: 1;
				height:80rpx;
				line-height: 80rpx;
				background:#F7F7F7;
				border-radius: 24rpx;
				padding:0 28rpx;
				display:flex;
				text{
					color:#999;
					&:first-child{
						flex-grow: 1;
					}
					&:nth-child(2){
						flex-shrink: 0;
						transform: rotate(90deg);
					}
				}
			}
			.plant-xinjian{
				color:#10C176;
				border-radius: 24rpx;
				margin-left:24rpx;
				background:#E7FCF3;
				height:80rpx;
				line-height: 80rpx;
				width:120rpx;
				text-align: center;
				box-shadow: 6rpx 6rpx 8rpx rgba(16,193,118,0.1);
			}
			.tip{
				color:#FBA83C;
				font-size:24rpx;
				margin-top:12rpx;
			}
		}
		&>.purchase{
			.input{
				display:flex;
				background:#F7F7F7;
				border-radius: 24rpx;
				padding:20rpx;
				input{
					flex-grow: 1;
				}
				text{
					color:#999;
					line-height: 40rpx;
					margin-left:20rpx;
				}
			}
		}
	}
</style>
<template>
	<view class="container">
		<view class="card fertilizer">
			<view class="name">
				<text>化肥</text>
				<text>中量元素水溶肥</text>
				<text class="plant-jiantou_zuoyouqiehuan"/>
			</view>
			<view class="company">
				<text>云南云天化股份有限公司</text>
				<text>微量元素肥</text>
			</view>
		</view>

		<view class="card specs">
			<view class="title_mast">规格</view>
			<!-- <view class="select" style="margin-bottom:20rpx;">
				<text>请添加规格</text>
				<text class="plant-youbian"/>
			</view> -->
			<view style="display:flex;">
				<view class="select">
					<text>请添加规格</text>
					<text class="plant-youbian"/>
				</view>
				<text class="plant-xinjian">新建</text>
			</view>
			<view class="tip">库存：2袋(200kg)</view>
		</view>

		<view class="card purchase">
			<view class="title_mast">{{({out:"出",in:"入"})[mode]}}库数量</view>
			<view class="input">
				<input placeholder="请输入采购数量" type="digit"/>
				<text>kg</text>
			</view>
		</view>

		<button class="cu-btn round bg-green shadow submit">确定</button>
	</view>
</template>
<script>
export default{
	data(){
		return{
			mode:"",
		}
	},
	onLoad(options){
		this.mode=options.mode
		uni.setNavigationBarTitle({
			title:({out:"出库列表",in:"入库列表"})[this.mode]
		})
	},
}
</script>