#盲盒+码# HarmonyOS卡片----喂奶记录卡片之页面排版 原创
panda_coder
发布于 2022-12-9 17:03
浏览
1收藏
【本文正在参加「盲盒」+码有奖征文活动】https://ost.51cto.com/posts/19288
卡片效果
数据录入卡片 | 统计图卡片 |
---|---|
任何时候在排版前一定要在大脑中大致绘制出版式,整体采用上下结构还是左右结构,再对每个部分的内容进行布局构思。
数据录入卡片
数据录入卡片采用flex布局,将内容分为四个部分,顶部吃奶时间文字,中间吃奶量按钮,排便时间文字以及底部排便按钮。
所以在顶层div采用flex布局,主轴方向采用垂直向下的column,然后再建4个div,4个div都采用主轴方向为水平方向的row,故我们给4个div添加一个共同的class。
<div class="container">
<div class="content-box"><div>
<div class="content-box"><div>
<div class="content-box"><div>
<div class="content-box"><div>
</div>
吃奶时间部分
由于text组件不能嵌套,所以我们需要将文字分为三部分,分别为黑色普通文本,红色时间文本,黑色普通文本,并添加不同class
<div class="content-box">
<text class="show-text">距上次吃奶已过去</text>
<text class="date-text">{{ eatDate }}</text>
<text class="show-text">秒</text>
</div>
排便时间部分
与上述相同
<div class="content-box">
<text class="show-text">距上次排便已过去</text>
<text class="date-text">{{ shitDate }}</text>
<text class="show-text">秒</text>
</div>
吃奶量部分
吃奶量分为左右两部分,左侧文字说明,右侧按钮组,故整体排版为,并且给左侧的文字设定固定宽度,靠右排列
<div class="content-box">
<text class="tips-text" style="width : 72px; text-align : right;">吃奶量:</text>
<div class="btn-tools">
</div>
</div>
而所有按钮都是相同样式,且能换行显示。换行显示则需要给btn-tools
样式添加flex-wrap
参数
完成代码
<div class="content-box">
<text class="tips-text" style="width : 72px; text-align : right;">吃奶量:</text>
<div class="btn-tools">
<button class="btn btn-ml" @click="mbtn-clk1">{{ mbtn1 }}</button>
<button class="btn btn-ml" @click="mbtn-clk2">{{ mbtn2 }}</button>
<button class="btn btn-ml" @click="mbtn-clk3">{{ mbtn3 }}</button>
<button class="btn btn-ml" @click="mbtn-clk4">{{ mbtn4 }}</button>
<button class="btn btn-ml" @click="mbtn-clk5">{{ mbtn5 }}</button>
<button class="btn btn-ml" @click="mbtn-clk6">{{ mbtn6 }}</button>
<button class="btn btn-ml" @click="mbtn-clk7">{{ mbtn7 }}</button>
<button class="btn btn-ml" @click="mbtn-clk8">{{ mbtn8 }}</button>
<button class="btn btn-ml" @click="mbtn-clk9">{{ mbtn9 }}</button>
<button class="btn btn-ml" @click="mbtn-clk10">{{ mbtn10 }}</button>
</div>
</div>
.content-box{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.btn-tools{
display: flex;
flex-wrap: wrap;
}
.btn{
border-radius: 2px;
padding: 3px 6px;
margin:3px;
font-size: 12px;
box-shadow: 1px 1px 1px #ffe3e3e3;
}
.btn-ml{
font-size: 10px;
width: 46px;
background-color: #ff1697de;
}
排便按钮部分
排便按钮部分,依次排列为文本,按钮,按钮
<div class="content-box">
<text class="tips-text">排便颜色:</text>
<button class="btn btn-gold" @click="healthy-shit">正常金黄色</button>
<button class="btn btn-green" @click="unhealthy-shit">非正常色</button>
</div>
统计图卡片排版
统计图卡片分为上下两部分,上部分为chart统计图,下部分为总计吃奶量文本
同样在顶层div采用flex布局,且主轴方向为垂直往下
总计吃奶量参考上述吃奶时间
<div class="container" @click="show">
<chart type="line" options="{{options}}" style="width: 100%;height: 80%;" datasets="{{datasets}}"></chart>
<div class="content-box">
<text class="show-text">今日吃奶总量</text>
<text class="date-text">{{ total }}</text>
<text class="show-text">ml</text>
</div>
</div>
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
赞
1
收藏 1
回复
相关推荐
提前构思,做到胸有成竹