23 changed files with 222 additions and 69 deletions
@ -1,5 +1,74 @@ |
|||
<app-page [pageTitle]="'使用流程'"> |
|||
<nz-card> |
|||
<div class="flow"> |
|||
<div class="ellipse item"> |
|||
开始 |
|||
|
|||
</div> |
|||
<div class="item"> |
|||
进入【配餐设置】,修改三餐摄入能量、营养比例 |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
</div> |
|||
<div class="item"> |
|||
进入【菜品管理】,新增/编辑菜品,并打印营养标签 |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
</div> |
|||
<div class="item"> |
|||
进入【食谱管理-食谱库】,创建食谱 |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
<div> |
|||
1、填写食谱名称 |
|||
</div> |
|||
<div> |
|||
2、选择营养标准 |
|||
</div> |
|||
<div> |
|||
3、选择适用月份 |
|||
</div> |
|||
<div> |
|||
4、选择配餐天数 |
|||
</div> |
|||
<div> |
|||
5、选择配餐餐次 |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
<div> |
|||
1、按餐次添加菜品及重量 |
|||
</div> |
|||
<div> |
|||
2、根据营养分析实时调整菜品 |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
<div> |
|||
1、点击右上角【食谱预览】完成查看食谱全貌 |
|||
</div> |
|||
<div> |
|||
2、确认食谱应用分析结果 |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
保存食谱 |
|||
</div> |
|||
<div class="item"> |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
在食谱库列表中发起审核 |
|||
</div> |
|||
<div class="item"> |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
等待审核通过后发布食谱 |
|||
</div> |
|||
<div class="item ellipse"> |
|||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
|||
结束 |
|||
</div> |
|||
</div> |
|||
</nz-card> |
|||
</app-page> |
@ -0,0 +1,39 @@ |
|||
.flow { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
|
|||
.item { |
|||
width: 256px; |
|||
margin-bottom: 48px; |
|||
padding: 24px; |
|||
position: relative; |
|||
border-radius: 4px; |
|||
border: 1px solid #333; |
|||
text-align: center; |
|||
|
|||
&:not(:last-child):after { |
|||
content: ''; |
|||
width: 1px; |
|||
height: 48px; |
|||
position: absolute; |
|||
bottom: -48px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
background-color: #333; |
|||
} |
|||
|
|||
&.ellipse { |
|||
width: 180px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.arrow { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: -12px; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
} |
Loading…
Reference in new issue