uni-app UI效果封装
1.UI效果
2.页面背景色
- page标签高度默认100%，在小程序和app中，页面根标签是page标签的直接子元素，可以直接继承其高度，但是H5中，中间隔了一层uni-page-body，需要用条件编译给其设定高度100%(建议在公共样式中统一设定)
/* #ifdef H5 */
uni-page-body{
height: 100%;
}
/* #endif */
- 页面根标签设定最小高度和背景色
3.操作提示
- 因为此元素背景色是白色，推荐将页面背景色设置为#f8f8f8
请扫描设备号
.operation-tip{
background-color: #fff;
text-align: center;
padding: 8px;
font-size: 14px;
color: #007aff;
font-weight: bold;
}
4.键值对单元
- 键值对单元包含标题，文本键值对，数值输入键值对，文本域（备注）
- 标签代码
操作提示
标题(键值对文本)
属性名称：
床前明月光，疑是地上霜
属性名称：
床前明月光，疑是地上霜，举头望明月，低头思故乡
标题(键值对输入框)
可编辑：
不可编辑：
2031662
标题(文本域输入)
- 样式代码
.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;
}
}
}