manage_mobile/pages/stock/mana.vue

<style lang="scss">
	.container{
		min-height:100%;
		background:#F6F6F6;
		.head_btns{
			width:90rpx;
			display:flex;
			image{
				height:32rpx;
			}
		}
		&>.btns{
			margin:28rpx 30rpx 0;
			display:flex;
			border-radius: 30rpx;
			button{
				width:50%;
				color:#999;
				&:first-child{
					border-radius: 30rpx 0 0 30rpx;
				}
				&:nth-child(2){
					border-radius:0 30rpx 30rpx 0;
				}
				&.active{
					background:#10C176;
					color:#fff;
				}
			}
		}
		&>.item{
			&>.info{
				display:flex;
				align-items: center;
				margin-bottom:20rpx;
				text{
					&:first-child{
						color:#fff;
						background:#10C176;
						height:40rpx;
						width:80rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 0 20rpx 0 20rpx;
						margin-right:10rpx;
					}
					&:nth-child(2){
						&:after{
							content:"("attr(data-unit)")";
							color:#999;
							font-size:20rpx;
							line-height: 40rpx;
							margin-left:6rpx;
						}
					}
					&:nth-child(3){
						margin-left:auto;
						color:#F34848;
						font-size:24rpx;
					}
				}
			}
			&>.company{
				font-size:24rpx;
				margin-bottom:14rpx;
				text{
					color:var(--c);
				}
			}
			&>.num{
				display:flex;
				align-items: center;
				&>text{
					font-size:24rpx;
					color:#999;
				}
				&>.btns{
					margin-left:auto;
					button{
						padding:0;
						height:48rpx;
						width: 96rpx;
						font-size:24rpx;
						&:first-child{
							color:#10C176;
							background:rgba(16, 193, 119, 0.1);
						}
						&:nth-child(2){
							margin-left:20rpx;
							color:#fff;
							background:#10C176;
						}
						// background:transparent;
						// border:2rpx solid transparent;
						// color:var(--c);
						// font-weight: bold;
						// font-size:30rpx;
						// height:50rpx;
						// width:50rpx;
						// &:first-child{
						// 	border-radius: 30rpx 0 0 30rpx;
						// 	border-color:var(--c);
						// }
						// &:nth-child(2){
						// 	border-radius: 0 30rpx 30rpx 0;
						// 	border-color:var(--c);
						// }
					}
				}
			}
		}
	}
</style>
<template>
	<view class="container">
		<d-navbar style="--bg:#10C176;--c:#fff;" isBack text="库存管理">
			<view slot="right" class="head_btns">
				<image @click="$u.route({url:'pages/stock/already'})" mode="aspectFit" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAh9JREFUOE+N0++rz2ccx/HH+5z5EZ1QZ+aGJEsStjgKIxrJIkUxRqa1pIlsmrM7ItzbuSN/gJw782Oo5dcN3BFlOYrdIto525EkzhlKjWNvu04fOr7ODe/61Oe6rvf1vN4/Xu/Qj2XmRGzHLNSjB+fQEhF3a69E7UZmrsFufI8/MQ2d+Bh7sDYiLva99xYkM2fgAGZHxD+Z+TnmV6BRWI+zmBcR5YFeewPJzDrcwCpccC3GYAvmqHPQ5O6/DBj+W7W3LiK+7A8yHodxzMvnna4P2qxhwQwxgPoGun/doCln4gT2Y2pEPK2NpBRxB4a5FEsN+aDLyK0MnsTgCdya3aMpi8+Kki6+iYg7tZDp2IcHOpo36Wq556Pm0POIhoW0r/5bU27DuAq0KiI6aiEf4hpWYqe2OKJOq/oR5H88ezzWZ3kaX5WUI2LCOzUpG5n5M27iu/JFRFu2aYzpHlbn6yOiNbM3rUvoxpPaFhdhLcInGIEuHMe/1atFaEPQXvlsKme9kMwsB40oIjqEU9Wlofgag6r13Aq4BPdxBZMiM0stfsdoLIuIM69zzcxPUfTy2n6sOngZV8t/RJwtkNv4CUUnJbwpEfGkinB5DaR043xVjzJHv/R2JzOLQssLpTP38G1fUN8ZycyBld/eiDj6VncqUDMWYzJKSn/0M+Cl8Lsi4mS/A1iBfkBriSYiivjey2pbXIZqI76IiBfvRfjf6RX9Zrpq7UEdfAAAAABJRU5ErkJggg=="/>
				<image @click="$u.route({url:'pages/stock/record'})" mode="aspectFit" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAYAAAACCvahAAAAAXNSR0IArs4c6QAAAYlJREFUOE+Nkz1LnFEQhZ8TjR+gAREbBVFIlUZS5BeEFDZBVmysBAthC0nENBtSSZpIkiIhIkKwsFJLQRtFBBv1L6iNkEKi4lciEU8YuRte1102F25zZ56ZuWdmZLsZ+AL0A01UP+fAIjAq23NAPZCXdFiNtd0GfAOuAr4EOiQdVwOLdtstwEHAlqT/BTMB/A+2XQsMAg/LBFqXtJt9tz2ThWuAYaCxDLxUCofPnbKT8kg6y5RXB8SNcyXpT9GWzfwI2AaugR5J17bfA4WSSsYlfbyXueRPq8AD4EUECpvtBmAT2JM0UFZt23lgAHgu6cb2vqTuFCC02QE+VILDOCZpIwF32mm773aoyvU5DU6rpF8V4HZgqxJ8CnRKOknwD2BCUoxl/L0LWK8Eh1jTkuaT8+NwBl5LWrA9cquH7YuU5Wemt73AV+CZpKMU4AmwBgwB34FcwLNArOUboLgcv4G3SfF3wHJq2ysgsk5K+hxw7PAn4GVazUg0JalgOxeqA0+BmxApgSvh9BeDHNvqf9R6EgAAAABJRU5ErkJggg=="/>
			</view>
		</d-navbar>

		<d-search />

		<view class="btns shadow bg-white">
			<button class="cu-btn bg-white active">农资</button>
			<button class="cu-btn bg-white">农产品</button>
		</view>

		<view class="card item">
			<view class="info">
				<text>化肥</text>
				<text data-unit="100kg/袋">中量元素水溶肥</text>
				<text>补货量≥300kg</text>
			</view>
			<view class="company">
				<text style="--c:#FBA83C;margin-right:14rpx;">微量元素肥</text>
				<text style="--c:#999;">云南云天化股份有限公司</text>
			</view>
			<view class="num">
				<text>库存量：200kg</text>
				<view class="btns" @click="$u.route({url:'pages/stock/list'})">
					<button class="cu-btn">出库</button>
					<button class="cu-btn">入库</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	
}
</script>