diet-web-ui/projects/client/src/app/pages/dashboard/dashboard.component.html

<app-page [pageTitle]="'使用流程'">

    <nz-card class="mb-4">
        <div class="flex items-center">
            <div class="flow-title">
                基础设计及菜品管理
            </div>
            <div nz-row [nzGutter]="12" class="flex-1">
                <div nz-col nzSpan="8">
                    <div class="card flex items-center">
                        <div class="icon">1</div>
                        <div class="flex-1">
                            进入【配餐设置】，修改三餐摄入能量、营养比例
                        </div>
                    </div>
                </div>
                <div nz-col nzSpan="8">
                    <div class="card flex items-center">
                        <div class="icon">2</div>
                        <div class="flex-1">
                            进入[菜品管理]，新增/编辑菜品并保存
                        </div>
                    </div>
                </div>
                <div nz-col nzSpan="8">
                    <div class="card flex items-center">
                        <div class="icon">3</div>
                        <div class="flex-1">
                            菜品管理列表找到所需菜品,下载[营养标签]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nz-card>
    <nz-card class="mb-4" nzTitle="">
        <div class="flex items-center">
            <div class="flow-title">
                创建食谱
            </div>
            <div nz-row [nzGutter]="[12,12]">
                <div nz-col nzSpan="8">
                    <div class="card flex  min-h-[186px]">
                        <div class="icon">4</div>
                        <div class="flex-1">
                            进入[食谱管理-食谱库]，创建食谱
                        </div>
                    </div>
                </div>
                <div nz-col nzSpan="8">
                    <div class="card flex ">
                        <div class="icon">5</div>
                        <div class="flex-1">
                            <p>
                                配置食谱基础信息:
                            </p>
                            <ul class="ul">
                                <li>
                                    填写食谱名称
                                </li>
                                <li>
                                    选择营养标准
                                </li>
                                <li>
                                    选择适用月份
                                </li>
                                <li>
                                    选择配餐天数
                                </li>
                                <li>
                                    选择配餐餐次
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div nz-col nzSpan="8">
                    <div class="card flex min-h-[186px]">
                        <div class="icon">6</div>
                        <div class="flex-1">
                            <p>按实际情况设置菜品:</p>
                            <ul class="ul">
                                <li>
                                    设置每餐菜品及重量
                                </li>
                                <li>
                                    根据营养分析实时调整菜品
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div nz-col nzSpan="8">
                    <div class="card flex">
                        <div class="icon">7</div>
                        <div class="flex-1">
                            <p>
                                完成食谱配置后进行食谱分析并确认食谱:
                            </p>
                            <ul class="ul">
                                <li>
                                    点击右上角[食谐预览]完成查看食谱全貌
                                </li>
                                <li>
                                    确认食谱应用分析结果
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div nz-col nzSpan="8">
                    <div class="card flex min-h-[120px]">
                        <div class="icon">8</div>
                        <div class="flex-1">
                            保存食谱
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nz-card>
    <nz-card class="mb-4">
        <div class="flex items-center">
            <div class="flow-title">
                食谱审核及发布
            </div>
            <div nz-row [nzGutter]="[12,12]">
                <div nz-col nzSpan="8">
                    <div class="card flex items-center">
                        <div class="icon">9</div>
                        <div class="flex-1">
                            在食谱列表中找到食谱，发起审核
                        </div>
                    </div>
                </div>
                <div nz-col nzSpan="8">
                    <div class="card flex items-center">
                        <div class="icon">10</div>
                        <div class="flex-1">
                            等待审核通过后返回食谱列表查看进行发布
                        </div>
                    </div>
                </div>
                <div nz-col nzSpan="8">
                    <div class="card flex items-center">
                        <div class="icon">11</div>
                        <div class="flex-1">
                            填写发布时间等信息确认发布
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </nz-card>



</app-page>