一个盒子内有4个盒子

最新推荐文章于 2024-07-13 14:05:55 发布

原创最新推荐文章于 2024-07-13 14:05:55 发布 · 562 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

文章描述了一个仓库管理系统的界面，涉及重力货位和挂钩货位的货品操作，包括使用不同颜色的el-button进行发货、补货和待机操作。CSS样式定义了按钮和货位区域的布局和样式。

        <div class="levels" v-for="(i, j) in index.levels.slice().reverse()" :key="i"
             v-if="index.name.slice(0,4) == '重力货位' ">
          <!--<el-text class="mx-1" type="primary">{{ i.id }}</el-text>-->
          <div class="cargoCabsOne" v-for="(a,b) in i.cargoCabs" :key="a">
            <div class="gravitySlot">
              <div class="gravitySlotItem">
                <div class="gravitySlotBox">
                  <el-button class="gravitySlotButton" type="primary" plain size="small">{{ a.id }}</el-button>
                </div>
                <div class="gravitySlotBox">
                  <el-button class="gravitySlotButton" type="success" plain>发货</el-button>
                </div>
              </div>

              <div class="gravitySlotItem">
                <div class="gravitySlotBox">
                  <el-button class="gravitySlotButton" type="danger" plain>补货</el-button>
                </div>
                <div class="gravitySlotBox">
                  <el-button class="gravitySlotButton" type="warning" plain>待机</el-button>
                </div>
              </div>

            </div>
          </div>
        </div>

css

.gravitySlotItem{
  display: flex;
  align-items: center;
}

.gravitySlotBox {
  margin: 2%;
  background-color: #87ff41;
  flex: 1;
  overflow: hidden;
}

.gravitySlotButton {
  width:100%;
  height: 32px;
}

竖着的

        <div class="levels" v-for="(i, j) in index.levels.slice().reverse()" :key="i"
             v-if="index.name.slice(0,4) == '挂钩货位' ">
          <!--<el-text class="mx-1" type="primary">{{ i.id }}</el-text>-->
          <div class="cargoCabsTwo" v-for="(a,b) in i.cargoCabs" :key="a">
            <div class="hookSlot">
              <div class="hookSlotBox">
                <el-button class="hookSlotButton" type="primary" plain>{{ a.id }}</el-button>
              </div>
              <div class="hookSlotBox">
                <el-button class="hookSlotButton" type="success" plain>发货</el-button>
              </div>
              <div class="hookSlotBox">
                <el-button class="hookSlotButton" type="danger" plain>补货</el-button>
              </div>
              <div class="hookSlotBox">
                <el-button class="hookSlotButton" type="warning" plain>待机</el-button>
              </div>
            </div>
          </div>
        </div>

css

.cargoCabsTwo{
  border: 1px solid red;
  margin: 1%;
  width: 100%;
  /* 隐藏超出父容器宽度的内容 */
  overflow: hidden;
}

.hookSlot {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hookSlotBox {
  margin: 2%;
  background-color: #ff6a6a;
}

.hookSlotButton {
  height: 100%;
  flex: 1;
  white-space: nowrap;
  font-size: xx-small;
}