8 changed files with 258 additions and 106 deletions
@ -1,74 +1,159 @@ |
|||||
<app-page [pageTitle]="'使用流程'"> |
<app-page [pageTitle]="'使用流程'"> |
||||
<nz-card> |
|
||||
<div class="flow"> |
|
||||
<div class="ellipse item"> |
|
||||
开始 |
|
||||
|
|
||||
|
<nz-card class="mb-4"> |
||||
|
<div class="flex items-center"> |
||||
|
<div class="flow-title"> |
||||
|
基础设计及菜品管理 |
||||
</div> |
</div> |
||||
<div class="item"> |
<div nz-row [nzGutter]="12" class="flex-1"> |
||||
进入【配餐设置】,修改三餐摄入能量、营养比例 |
<div nz-col nzSpan="8"> |
||||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
<div class="card flex items-center"> |
||||
</div> |
<div class="icon">1</div> |
||||
<div class="item"> |
<div class="flex-1"> |
||||
进入【菜品管理】,新增/编辑菜品,并打印营养标签 |
进入【配餐设置】,修改三餐摄入能量、营养比例 |
||||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
</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> |
||||
<div class="item"> |
</div> |
||||
进入【食谱管理-食谱库】,创建食谱 |
</nz-card> |
||||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
<nz-card class="mb-4" nzTitle=""> |
||||
|
<div class="flex items-center"> |
||||
|
<div class="flow-title"> |
||||
|
创建食谱 |
||||
</div> |
</div> |
||||
<div class="item"> |
<div nz-row [nzGutter]="[12,12]"> |
||||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
<div nz-col nzSpan="8"> |
||||
<div> |
<div class="card flex min-h-[186px]"> |
||||
1、填写食谱名称 |
<div class="icon">4</div> |
||||
|
<div class="flex-1"> |
||||
|
进入[食谱管理-食谱库],创建食谱 |
||||
|
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
<div> |
<div nz-col nzSpan="8"> |
||||
2、选择营养标准 |
<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> |
||||
<div> |
<div nz-col nzSpan="8"> |
||||
3、选择适用月份 |
<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> |
||||
<div> |
<div nz-col nzSpan="8"> |
||||
4、选择配餐天数 |
<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> |
||||
<div> |
<div nz-col nzSpan="8"> |
||||
5、选择配餐餐次 |
<div class="card flex min-h-[120px]"> |
||||
|
<div class="icon">8</div> |
||||
|
<div class="flex-1"> |
||||
|
保存食谱 |
||||
|
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<div class="item"> |
</div> |
||||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
</nz-card> |
||||
<div> |
<nz-card class="mb-4"> |
||||
1、按餐次添加菜品及重量 |
<div class="flex items-center"> |
||||
</div> |
<div class="flow-title"> |
||||
<div> |
食谱审核及发布 |
||||
2、根据营养分析实时调整菜品 |
|
||||
</div> |
|
||||
</div> |
</div> |
||||
<div class="item"> |
<div nz-row [nzGutter]="[12,12]"> |
||||
<span class="arrow" nz-icon nzType="down" nzTheme="outline"></span> |
<div nz-col nzSpan="8"> |
||||
<div> |
<div class="card flex items-center"> |
||||
1、点击右上角【食谱预览】完成查看食谱全貌 |
<div class="icon">9</div> |
||||
|
<div class="flex-1"> |
||||
|
在食谱列表中找到食谱,发起审核 |
||||
|
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
<div> |
<div nz-col nzSpan="8"> |
||||
2、确认食谱应用分析结果 |
<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> |
|
||||
<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> |
||||
</div> |
</div> |
||||
|
|
||||
</nz-card> |
</nz-card> |
||||
|
|
||||
|
|
||||
|
|
||||
</app-page> |
</app-page> |
@ -1,39 +1,42 @@ |
|||||
.flow { |
.card { |
||||
display: flex; |
padding: 24px; |
||||
justify-content: center; |
border-radius: 6px; |
||||
align-items: center; |
background-color: #e9f1fe; |
||||
flex-direction: column; |
|
||||
|
|
||||
.item { |
.icon { |
||||
width: 256px; |
display: flex; |
||||
margin-bottom: 48px; |
align-items: center; |
||||
padding: 24px; |
justify-content: center; |
||||
position: relative; |
width: 40px; |
||||
border-radius: 4px; |
height: 40px; |
||||
border: 1px solid #333; |
border-radius: 50%; |
||||
text-align: center; |
background-color: #2e7ef8; |
||||
|
color: #fff; |
||||
|
font-size: 26px; |
||||
|
font-weight: bold; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
&:not(:last-child):after { |
p { |
||||
content: ''; |
margin-bottom: 6px; |
||||
width: 1px; |
} |
||||
height: 48px; |
|
||||
position: absolute; |
|
||||
bottom: -48px; |
|
||||
left: 50%; |
|
||||
transform: translateX(-50%); |
|
||||
background-color: #333; |
|
||||
} |
|
||||
|
|
||||
&.ellipse { |
.ul { |
||||
width: 180px; |
padding-left: 20px; |
||||
border-radius: 50%; |
|
||||
} |
|
||||
|
|
||||
.arrow { |
li { |
||||
position: absolute; |
list-style: disc !important; |
||||
left: 50%; |
|
||||
top: -12px; |
|
||||
transform: translateX(-50%); |
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
|
.flow-title { |
||||
|
width: 100px; |
||||
|
margin-right: 12px; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
|
||||
|
&+div { |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
Loading…
Reference in new issue