三区域

流程板

孔位数目从大到小排列。

<template>
  <div class="config-details-three-area-workflow-root1">
    <div class="config-details-three-area-workflow-container-box1">
      <as-workflow-plate-62-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-three-area-workflow-62"
      ></as-workflow-plate-62-hole>
    </div>
    <div class="config-details-three-area-workflow-container-box1">
      <as-workflow-plate-special-52-hole
          shape="circle"
          plate-type="source"
          :active-arr="[]"
          select-mode="dynamic_multiple_item"
          comp-mark="config-details-three-area-workflow-special-52"
      ></as-workflow-plate-special-52-hole>
    </div>
  </div>
</template>
 <script>
export default {
  name: 'App',
  data() {
    return{
     
    }
  },
   methods: {}
}
</script>

<style>
.config-details-three-area-workflow-root1{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.config-details-three-area-workflow-container-box1{
  width: 45%;
  margin-top: 10px;
}
@media screen and (max-width: 480px) {
  .config-details-three-area-workflow-root1{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .config-details-three-area-workflow-container-box1{
    width: 100%;
    margin-top: 15px;
  }
}

</style>

Expand Copy Copy

平台板

孔位数目从大到小排列。

<template>
  <div class="config-details-three-area-worktable-root1">
    <div class="config-details-three-area-worktable-container-box1">
      <as-worktable-plate-62-hole comp-mark="config-details-three-area-worktable-62"></as-worktable-plate-62-hole>
    </div>
    <div class="config-details-three-area-worktable-container-box1">
      <as-worktable-plate-special-52-hole comp-mark="config-details-three-area-worktable-special-52"></as-worktable-plate-special-52-hole>
    </div>
  </div>
</template>
 <script>
export default {
  name: 'App',
  data() {
    return{
     
    }
  },
   methods: {}
}
</script>

<style>
.config-details-three-area-worktable-root1{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.config-details-three-area-worktable-container-box1{
  width: 45%;
  margin-top: 10px;
}
@media screen and (max-width: 480px) {
  .config-details-three-area-worktable-root1{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .config-details-three-area-worktable-container-box1{
    width: 100%;
    margin-top: 15px;
  }
}

</style>

Expand Copy Copy

试剂板

孔位数目从大到小排列。

<template>
  <div class="config-details-three-area-reagent-root1">
    <div class="config-details-three-area-reagent-container-box1">
      <as-reagent-plate-62-hole
          :active-arr="[]"
          comp-mark="config-details-three-area-reagent-62"
      ></as-reagent-plate-62-hole>
    </div>
    <div class="config-details-three-area-reagent-container-box1">
    <as-reagent-plate-special-52-hole
        :active-arr="[]"
        comp-mark="config-details-three-area-reagent-special-52"
    ></as-reagent-plate-special-52-hole>
  </div>
  </div>
</template>
 <script>
export default {
  name: 'App',
  data() {
    return{
     
    }
  },
   methods: {}
}
</script>

<style>
.config-details-three-area-reagent-root1{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.config-details-three-area-reagent-container-box1{
  width: 45%;
  margin-top: 10px;
}
@media screen and (max-width: 480px) {
  .config-details-three-area-reagent-root1{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .config-details-three-area-reagent-container-box1{
    width: 100%;
    margin-top: 15px;
  }
}

</style>

Expand Copy Copy