PS：任何时候在排版前一定要在大脑中大致绘制出版式，整体采用上下结构还是左右结构，再对每个部分的内容进行布局构思。

数据录入卡片

数据录入卡片采用 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>

鸿蒙“喂奶记录”卡片：页面排版

PS：任何时候在排版前一定要在大脑中大致绘制出版式，整体采用上下结构还是左右结构，再对每个部分的内容进行布局构思。

④排便按钮部分​

④排便按钮部分