将我文件class为label的部分的样式改成文件中图片展示的样子

要将 `class` 为 `label` 的部分的样式修改为类似您提供的图片展示的效果，请参考以下 CSS 样式。假设您的目标效果类似于下图所示：


以下是您可以使用的 CSS 样式代码：

.label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 让项目在主轴上均匀分布 */
    padding: 15px; /* 添加内边距 */
    background-color: #f0f0f0; /* 设置背景颜色 */
    border: 1px solid #d9d9d9; /* 添加边框 */
    border-radius: 4px; /* 圆角边框 */
}

.label p {
    flex: 0 0 auto; /* 不允许元素伸缩，并让宽度自动调整 */
    text-align: left; /* 文本左对齐 */
    margin: 0; /* 移除默认外边距 */
    padding: 8px; /* 内边距使文本与边框之间留有空间 */
    width: calc(33.333% - 20px); /* 宽度设置为三分之一减去内外边距占用的空间 */
    box-sizing: border-box; /* 边框盒模型 */
    font-size: 14px; /* 字体大小 */
    line-height: 1.5; /* 行高 */
    font-weight: normal; /* 字体粗细 */
    color: #333333; /* 颜色 */
    white-space: nowrap; /* 文字不换行 */
    overflow: hidden; /* 超出容器的内容隐藏 */
    text-overflow: ellipsis; /* 超出内容显示省略号 */
}

### 应用到文档中的 HTML 结构
将上述样式添加到您的 `<style scoped>` 标签内，并确保您的 `.label` 部分的内容如下的 HTML 结构：

<style scoped>
.label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15px;
    background-color: #f0f0f0;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}

.label p {
    flex: 0 0 auto;
    text-align: left;
    margin: 0;
    padding: 8px;
    width: calc(33.333% - 20px);
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5;
    font-weight: normal;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

<template>
  <div>
    <a-button type="primary" @click="showDrawer">Open</a-button>
    <a-drawer title="入库单详情" :visible="visible" @close="onClose" width="1250">
      <div class="label">
        <p>入库单号:1000000</p>
        <p>入库数:-</p>
        <p>入库日期:2024-01-01</p>
        <p>入库类型：新表入库</p>
        <p>操作人部门:仓管部</p>
        <p>操作人：张三</p>
        <p>操作时间：2024-12-12</p>
      </div>
      <!-- 其他内容 -->
    </a-drawer>
  </div>
</template>

通过以上修改，`.label` 区域将具有更符合预期的布局和样式。您可以进一步调整样式以满足具体需求。