uniapp 简单表单布局1

效果如图:

一、UI界面

	<template>
	<view class="body">
		<uni-forms :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
		<view class="content">
			<uni-forms-item name="name" label="项目编号" labelAlign="left">
				<input type="text" disabled="" v-model="formData.number" class="uni-input-noneborder"></input>
			</uni-forms-item>
       <view class="line"></view>
			<uni-forms-item name="name" label="项目全称" labelAlign="left">
				<input type="text" disabled="" v-model="projectCon.name" class="uni-input-noneborder"
					placeholder="请输入用户名"></input>
			</uni-forms-item>
       <view class="line"></view>
			<uni-forms-item name="name" label="项目简称"  labelAlign="left">
				<input type="text" disabled="" v-model="projectCon.name" class="uni-input-noneborder"
					placeholder="请输入用户名"></input>
			</uni-forms-item>
       <view class="line"></view>
			<uni-forms-item name="birth" label="提交日期" labelAlign="left">
				    <picker  mode="date"  :value="formData.date"  @change="bindDateChange">
					  <view  class="picker uni-input-noneborder">{{formData.date}}</view>
				</picker>
			</uni-forms-item>
      	</view>
<view class="content" style="height:30px"> 
					<view class="TextRight" @click="queryhistory">查看历史记录 ></view>
			 
        	</view>
<view class="content">
			<view class="title">
				<font class="leftTitle">固化物</font>
				<font class="rightTitle">
					库存：{{ghwkucunW - parseFloat(formData.solidWeightOut) }}吨，{{ghwkucunP - parseInt(formData.solidpackageOut) }}包
				</font>
			</view>
       <view class="line"></view>
			<uni-forms-item name="trainNumber" label="固化物转运车次"  labelWidth="110" labelAlign="left">
				<input type="digit" v-model="formData.trainNumber" class="uni-input-border"
					placeholder="请输入固化物转运车次"></input>
				 
			</uni-forms-item>
			<uni-forms-item name="solidpackageOut" label="固化物转运包数" labelWidth="110" labelAlign="left">
				<input type="digit" v-model="formData.solidpackageOut" class="uni-input-border"
					placeholder="请输入固化物转运包数"></input>
			 
			</uni-forms-item>
			<uni-forms-item name="solidWeightOut" label="固化物转运重量" labelWidth="110" labelAlign="left">
				<input type="digit" v-model="formData.solidWeightOut" class="uni-input-border"
					placeholder="请输入固化物转运量"></input>
			 
			</uni-forms-item>
      	</view>
<view class="content">
			<view class="title">
				<font class="leftTitle">榜单图片</font>
			</view>
       <view class="line"></view>
			<view class="content">
				<image class="img" v-for="(item,index) in imgArr" :src="getFlieName(item)">
				</image>
				<image class="img" src="../../static/submit_upload.png" @click="chooseVideoImage" mode=""></image>
			</view>
      	</view>
			<view class="btuSty">
				<button  type="primary" @click="$noMultipleClicks(submitForm)">提交表单</button>
			</view>
        	<view class="btuSty">
			 	</view>
		</uni-forms>
	</view>
</template>

二、css样式

<style lang="less" scoped>
.body {
  background-color: #f4f5f3;
  .content {
    background-color: white;
    margin-bottom: 15px;
    padding-bottom: 10px;
    .TextRight {
      float: right;
      width: 30%;
      font-size: 14px;
      cursor: pointer;
      padding: 5px;
    }
  }
  .line {
    height: 1px;
    width: 94%;
    margin: 0 auto;
    background-color: #e5e5e5;
  }
  .uni-forms-item {
    margin: 0 auto;
    margin-top: 5px;
    width: 90%;
  }
  .uni-forms--top {
    padding: 0px 0px;
  }
  .title {
    align-items: center;
    padding-left: 15px;
    height: 40px;
    line-height: 40px;
    margin-top: 15px;
    font-weight: normal;
    color: #333;
  }
  .leftTitle {
    float: left;
  }
  .rightTitle {
    margin-right: 10px;
    float: right;
  }
  .uni-forms-item__label {
    width: 80px !important;
  }
  .uni-input-noneborder {
    padding: 0 10px;
    height: 35px;
    width: 90%;
    float: left;
    font-size: 14px;
    color: #666;
    border-radius: 5px;
    box-sizing: border-box;
  }
  .uni-input-border {
    padding: 0 10px;
    height: 35px;
    width: 100%;
    float: left;
    font-size: 14px;
    color: #666;
    border: 1px #e5e5e5 solid;
    box-sizing: border-box;
  }
  .inputText {
    width: 10%;
    line-height: 35px;
    float: right;
    text-align: center;
  }
  .picker {
    padding: 10;
    height: 35px;
    width: 90%;
    float: left;
    font-size: 14px;
    color: #666;
    border-radius: 5px;
    box-sizing: border-box;
    line-height: 40px;
  }
  .content {
    width: 100%;
    height: 100%;
    display: block;
    justify-content: space-around;
    .img {
      width: 120px;
      height: 120px;
    }
  }

  .btuSty {
    margin-top: 20px;
    width: 70%;
    margin: 0 auto;
    height: 60px;
  }
}
</style>

end! 复制就能用