|
|
|
@ -100,6 +100,9 @@ const volumeChange = async (item: System.ChannelState) => { |
|
|
|
<template lang="pug"> |
|
|
|
div.home-container(v-loading="loading") |
|
|
|
el-card(v-for="item in channelList" :key="item.channelCode" :class="{'card-selected': item.selected }" @click="() => cardClick(item)") |
|
|
|
div.select-icon-box(v-if="item.selected") |
|
|
|
el-icon(color="#fff" size="16px") |
|
|
|
Select |
|
|
|
div.top-box(@click.stop) |
|
|
|
p.title {{channelMap[item.channelCode]}} |
|
|
|
div.solution-box(@click.stop="() => receiveHandle(item)") |
|
|
|
@ -108,7 +111,7 @@ const volumeChange = async (item: System.ChannelState) => { |
|
|
|
|
|
|
|
div.input-box(@click.stop) |
|
|
|
p.label(@click.stop) |
|
|
|
img(:src="item.selected ? solutionSelectIcon: solutionIcon" alt="") |
|
|
|
img(:src="item.selected ? solutionIcon: solutionIcon" alt="") |
|
|
|
span 每次加液体积 |
|
|
|
div.solution-box(@click.stop) |
|
|
|
el-select(v-model="item.targetVolume" placeholder="请选择" no-data-text="无数据, 请添加对应配方" :disabled="!item.solutionName" @change="() => volumeChange(item)") |
|
|
|
@ -116,7 +119,7 @@ const volumeChange = async (item: System.ChannelState) => { |
|
|
|
div.unit mL |
|
|
|
div.input-box(@click.stop) |
|
|
|
p.label(@click.stop) |
|
|
|
img(:src="item.selected ? solutionSelectIcon: solutionIcon" alt="") |
|
|
|
img(:src="item.selected ? solutionIcon: solutionIcon" alt="") |
|
|
|
span 剩余液量体积 |
|
|
|
div.solution-box(@click.stop) |
|
|
|
div.content {{item.currentVolume}} |
|
|
|
@ -135,15 +138,30 @@ const volumeChange = async (item: System.ChannelState) => { |
|
|
|
gap 20px |
|
|
|
.el-card |
|
|
|
transform: all 0.3s; |
|
|
|
border: 3px solid transparent; |
|
|
|
.card-selected |
|
|
|
background-color #1778D2 |
|
|
|
color #fff |
|
|
|
background-color #F0F7FF |
|
|
|
border: 3px solid #2892F3; |
|
|
|
.solution-box |
|
|
|
background: #fff; |
|
|
|
:deep(.el-card__body) |
|
|
|
height 100% |
|
|
|
display flex |
|
|
|
flex-direction column |
|
|
|
align-items center |
|
|
|
justify-content space-around |
|
|
|
position relative |
|
|
|
.select-icon-box |
|
|
|
position absolute |
|
|
|
top 0 |
|
|
|
right 0 |
|
|
|
width 40px |
|
|
|
height 30px |
|
|
|
background: #2892F3; |
|
|
|
border-radius 0 0 0 8px |
|
|
|
display flex |
|
|
|
align-items center |
|
|
|
justify-content center |
|
|
|
.top-box |
|
|
|
width 100% |
|
|
|
.title |
|
|
|
|
