add.vue 2.38 KB
<template>
	<view>
		<view>
		<uni-list>
		     <uni-list-item>
				    <view slot="header" class="slot-box"><text class="require">物料名称</text></view>
		            <template slot="footer">
		                <input class="uni-input" type="text"  placeholder="请输入名称" />
		            </template>
		        </uni-list-item>
				<uni-list-item>
					<view slot="header" class="slot-box"><text class="require">物料编号</text></view>
				       <template slot="footer">
				           <input class="uni-input" type="number" placeholder="请输入编号" />
				       </template>
				   </uni-list-item>
		        <uni-list-item title="规格">
		                <template slot="footer">
		                    <input class="uni-input" type="number" placeholder="请输入规格" />
		                </template>
		        </uni-list-item>
				<uni-list-item title="单位">
				        <template slot="footer">
				            <input class="uni-input" type="number" placeholder="请输入单位" />
				        </template>
				</uni-list-item>
				<uni-list-item title="物料类型">
				        <template slot="footer">
				          <label class="radio"><radio value="r1"  />成品</label>
						  <label class="radio"><radio value="r2"  />原材料</label>
				        </template>
				</uni-list-item>
		</uni-list>
		</view>
		<view class="btn u-f u-f-aic">
			<button>保存</button>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
			}
		},
		methods:{
			onNavigationBarButtonTap() {
				uni.navigateTo({
					url: "./material/add"
				})
			},
			 radioChange: function(evt) {
				 console.log(evt.target.value)
			          
			        }
			    
		}
	}
</script>

<style lang="scss" scoped>
	.require {
		// padding-left: 18rpx;
	}
	.uni-list-item__container {
		.uni-input {
			text-align: right;
		}
		.uni-label-pointer {
		margin-left: 30rpx;
	}
	}
	.slot-box {
		position: relative;
		&::after {
				position: absolute;
				content: '*';
				color: red;
				font-size: 50rpx;
				top: 0;
				left: -18rpx;
			} 
	}
	
		.btn {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 160rpx;
			background-color: #fff;
			border-top: 2rpx solid #E1F3D8;
			uni-button {
				width: 95%;
				height: 100rpx;
				color: #fff;
				border-radius: 50rpx;
				background-image: linear-gradient(to right, rgb(2, 177, 251), rgb(1, 133, 250));
			}
		}
	
		
</style>