一个盒子内有4个盒子

最新推荐文章于 2024-08-04 16:33:59 发布

hmbbpdx

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量373

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/hmbbpdx/article/details/133217861

版权

        <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;
}