uni-app UI效果封装

1.UI效果

2.操作提示

• 因为此元素背景色是白色，推荐将页面背景色设置为#f8f8f8

<view class="operation-tip">请扫描设备号</view>

.operation-tip{
    background-color: #fff;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    color: #007aff;
    font-weight: bold;
}

3.文本键值对

<view class="unit-item" style="margin-top:8px;">
       <view class="title">键值对文本</view>
       <!-- 键值对 -->
       <view class="content-wrap">
            <view class="content-row">
                   <text class="item-name">属性名称：</text>
                   <text class="item-value">床前明月光，疑是地上霜</text>
            </view>

            <view class="content-row">
                   <text class="item-name">属性名称：</text>
                   <text class="item-value">床前明月光，疑是地上霜，举头望明月，低头思故乡</text>
            </view>
      </view>
</view>

4.输入框键值对

<view class="unit-item" style="margin-top:8px;">
       <view class="title">键值对输入框</view>
       <!-- 键值对 -->
       <view class="content-wrap">
            <view class="content-row">
                 <text class="item-name">可编辑：</text>
                 <view class="item-value-box">
                      <view class="input-box">
                          <input type="text"> 
                      </view>
                 </view>
           </view>
           <view class="content-row">
                 <text class="item-name">不可编辑：</text>
                 <view class="item-value-box">
                     <view class="disabled-value"></view>
                 </view>
           </view>
      </view>
</view>

5.文本域（备注）

<view class="unit-item" style="margin-top:8px;">
       <view class="title">标题(文本域输入)</view>
       <!-- 文本域 -->
       <view class="textarea-box">
             <textarea placeholder="请输入备注" auto-height placeholder-style="font-size:14px;" v-model="remark" />
       </view>
</view>

6.工站列表

<view class="unit-item" style="margin-top:8px;" v-show="tab_index==0">
                <view class="title">工站列表</view>
                <view class="step-list-wrap" v-if="step_list.length>0">
                	<view v-for="(step,i) in step_list" :key="i" class="step-box">
                		<view
                		@click="stepChange(step)"
                		class="step-content"
                		:class="{'active':step.step_name==select_step_name}"
                		>{{step.step_name}}
                		</view>
                	</view>
                </view>
                <view class="content-wrap" v-if="step_list.length==0">
                    <view class="text-empty">暂无数据</view>
                </view>
            </view>

7.搜索输入框

<view style="padding:5px 0px;">
     <input type="text" class="search-input" v-model="search_input"
     placeholder-class="iconfont icon-search" placeholder="输入搜索">
</view>

8.提交按钮

• 基本使用

<view class="btn-box" style="margin-top:8px;">
      <view class="btn">提交</view>
</view>

• 固定按钮

<view class="btn-box btn-fixed">
      <view class="btn disabled">提交</view>
</view>

• 按钮颜色备选 warning(橙色) 和 error(红色)

9.样式代码

.unit-item{
    .title {
        font-size: 16px;
        font-weight: bold;
        padding: 3px 0;
        padding-left: 10px;
        color: #007aff;
    }
    .content-wrap{
        background-color: #fff;
        padding: 0 8px;
        font-size: 14px;
        .text-row{
            display: flex;
            align-items: center;
            padding: 7px 5px;
            border-bottom: 1px solid #e8e8e8;
            .text-key{
                flex-grow: 0;
                flex-shrink: 0;
                color: $uni-text-color;
            }
            .text-value{
                width: 300px;
                flex-grow: 1;
                flex-shrink: 1;
                color: $uni-text-color-grey;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            &:last-child{
            	border-bottom: none;
            }
        }
        .input-row{
            display: flex;
            align-items: center;
            padding: 7px 5px;
            // margin-bottom: 8px;
            .input-label{
                flex-grow: 0;
                flex-shrink: 0;
                color: $uni-text-color;
            }
            .disabled-value{
                width: 152px;
                flex-shrink: 1;
                flex-grow: 0;
                border: 1px solid #a2a2a2;
                background-color: #f1f1f1;
                padding: 3px 8px;
                color: $uni-text-color;
            }
            .input-box{
                width: 152px;
                flex-shrink: 1;
                flex-grow: 0;
                .number-input{
                    padding: 3px 8px;
                    border: 1px solid #a2a2a2;
                    border-radius: 2px;
                    font-size: 14px;
                    background-color: #fff;
                    color: $uni-text-color;
                }
            }
            &:last-child{
            	margin-bottom: 0;
            }
        }
    }
    .textarea-box{
    	padding:5px 5px;
        background-color: #fff;
    	.my-textarea{
    		font-size: 14px;
    		background-color: #fff;
    		border-radius: 2px;
    		border: 1px solid rgba(0,0,0,0.2);
    		box-sizing: border-box !important;
    		width: 100%;
    		height: 80px;
    		padding: 5px 8px;
    	}
    	
    }
}