双区域
# 流程板
孔位数目从大到小排列。
<template>
<div class="config-details-double-area-workflow-root1">
<div class="config-details-double-area-workflow-container-box1">
<as-workflow-plate-78-hole
shape="circle"
plate-type="source"
:active-arr="[]"
select-mode="dynamic_multiple_item"
comp-mark="config-details-double-area-workflow-78"
></as-workflow-plate-78-hole>
</div>
<div class="config-details-double-area-workflow-container-box1">
<as-workflow-plate-60-hole
shape="circle"
plate-type="source"
:active-arr="[]"
select-mode="dynamic_multiple_item"
comp-mark="config-details-double-area-workflow-60"
></as-workflow-plate-60-hole>
</div>
<div class="config-details-double-area-workflow-container-box1">
<as-workflow-plate-56-hole
shape="circle"
plate-type="source"
:active-arr="[]"
select-mode="dynamic_multiple_item"
comp-mark="config-details-double-area-workflow-56"
></as-workflow-plate-56-hole>
</div>
<div class="config-details-double-area-workflow-container-box1">
<as-workflow-plate-52-hole
shape="circle"
plate-type="source"
:active-arr="[]"
select-mode="dynamic_multiple_item"
comp-mark="config-details-double-area-workflow-52"
></as-workflow-plate-52-hole>
</div>
<div class="config-details-double-area-workflow-container-box1">
<as-workflow-plate-41-hole
shape="circle"
plate-type="source"
:active-arr="[]"
select-mode="dynamic_multiple_item"
comp-mark="config-details-double-area-workflow-41"
></as-workflow-plate-41-hole>
</div>
<div class="config-details-double-area-workflow-container-box1">
<as-workflow-plate-26-hole
shape="circle"
plate-type="source"
:active-arr="[]"
select-mode="dynamic_multiple_item"
comp-mark="config-details-double-area-workflow-26"
></as-workflow-plate-26-hole>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return{
}
},
methods: {}
}
</script>
<style>
.config-details-double-area-workflow-root1{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.config-details-double-area-workflow-container-box1{
width: 30%;
margin-top: 10px;
}
@media screen and (max-width: 480px) {
.config-details-double-area-workflow-root1{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.config-details-double-area-workflow-container-box1{
width: 100%;
margin-top: 15px;
}
}
</style>
Expand Copy Copy
# 平台板
孔位数目从大到小排列。
<template>
<div class="config-details-double-area-worktable-root1">
<div class="config-details-double-area-worktable-container-box1">
<as-worktable-plate-78-hole comp-mark="config-details-double-area-worktable-78"></as-worktable-plate-78-hole>
</div>
<div class="config-details-double-area-worktable-container-box1">
<as-worktable-plate-60-hole comp-mark="config-details-double-area-worktable-60"></as-worktable-plate-60-hole>
</div>
<div class="config-details-double-area-worktable-container-box1">
<as-worktable-plate-56-hole comp-mark="config-details-double-area-worktable-56"></as-worktable-plate-56-hole>
</div>
<div class="config-details-double-area-worktable-container-box1">
<as-worktable-plate-52-hole comp-mark="config-details-double-area-worktable-52"></as-worktable-plate-52-hole>
</div>
<div class="config-details-double-area-worktable-container-box1">
<as-worktable-plate-41-hole comp-mark="config-details-double-area-worktable-41"></as-worktable-plate-41-hole>
</div>
<div class="config-details-double-area-worktable-container-box1">
<as-worktable-plate-26-hole comp-mark="config-details-double-area-worktable-26"></as-worktable-plate-26-hole>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return{
}
},
methods: {}
}
</script>
<style>
.config-details-double-area-worktable-root1{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.config-details-double-area-worktable-container-box1{
width: 30%;
margin-top: 10px;
}
@media screen and (max-width: 480px) {
.config-details-double-area-worktable-root1{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.config-details-double-area-worktable-container-box1{
width: 100%;
margin-top: 15px;
}
}
</style>
Expand Copy Copy
# 试剂板
孔位数目从大到小排列。
<template>
<div class="config-details-double-area-reagent-root1">
<div class="config-details-double-area-reagent-container-box1">
<as-reagent-plate-78-hole
:active-arr="[]"
comp-mark="config-details-double-area-reagent-78"
></as-reagent-plate-78-hole>
</div>
<div class="config-details-double-area-reagent-container-box1">
<as-reagent-plate-60-hole
:active-arr="[]"
comp-mark="config-details-double-area-reagent-60"
></as-reagent-plate-60-hole>
</div>
<div class="config-details-double-area-reagent-container-box1">
<as-reagent-plate-56-hole
:active-arr="[]"
comp-mark="config-details-double-area-reagent-56"
></as-reagent-plate-56-hole>
</div>
<div class="config-details-double-area-reagent-container-box1">
<as-reagent-plate-52-hole
:active-arr="[]"
comp-mark="config-details-double-area-reagent-52"
></as-reagent-plate-52-hole>
</div>
<div class="config-details-double-area-reagent-container-box1">
<as-reagent-plate-41-hole
:active-arr="[]"
comp-mark="config-details-double-area-reagent-41"
></as-reagent-plate-41-hole>
</div>
<div class="config-details-double-area-reagent-container-box1">
<as-reagent-plate-26-hole
:active-arr="[]"
comp-mark="config-details-double-area-reagent-26"
></as-reagent-plate-26-hole>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return{
}
},
methods: {}
}
</script>
<style>
.config-details-double-area-reagent-root1{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.config-details-double-area-reagent-container-box1{
width: 45%;
margin-top: 10px;
}
@media screen and (max-width: 480px) {
.config-details-double-area-reagent-root1{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.config-details-double-area-reagent-container-box1{
width: 100%;
margin-top: 15px;
}
}
</style>
Expand Copy Copy