垂直滚动条效果

schangxiang@126.com

2025-05-17 ba72e3d15c5e5336201ab2e48c040fcfde423fc7

垂直滚动条效果

 PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.module.scss

@@ -1,6 +1,9 @@
.pipeAccessoryAssemblyContent { 
  width: 100%; 
  height: 100%; 
  // height: 100% !important; 
  // overflow-y: auto !important; /* 内容超出时显示滚动条 */
  // padding-bottom: 20px; /* 避免内容被底部遮挡 */
 
  .pipeAccessoryAssemblyList { 
    width: 100%; 
@@ -17,6 +20,24 @@
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
  } 

  .h5Form {
    display: flex;
    flex-direction: column;
    gap: 20px; // 表单项之间的间距

    .el-form-item {
      margin-bottom: 0; // 移除默认的底部边距
      width: 100%; // 占满父容器宽度
    }

    .el-form-item__label {
      display: block;
      text-align: left;
      margin-bottom: 8px;
      font-weight: 500;
    }
  } 
} 
 
@@ -112,46 +133,121 @@
  } 
} 
  
.pipeAccessoryAssemblyContent {
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  max-width: 500px; // 限制最大宽度
  margin: 0 auto; // 水平居中
  width: 90%; // 响应式宽度

  .h5Form {

.newPageContent {
    display: flex;
    flex-direction: column;
    gap: 20px; // 表单项之间的间距
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background-color: white;

  .info-block {
    background-color: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    padding: 20px;
    width: calc(33.33% - 20px);

    .block-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .info-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      .info-tag {
        display: flex;
        align-items: center;
        gap: 5px;

        .tag-label {
          font-weight: bold;
        }
      }
    }

    .action-buttons {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }

    .equipment-image {
      width: 100%;
      height: auto;
      margin-top: 20px;
    }

    .status-normal {
      color: green;
    }
  }

  .process-table {
    width: 100%;
    margin-top: 20px;

    .el-table {
      border: 1px solid #eaeaea;
      border-radius: 5px;
    }
  }
}


.modelRrow {
  display: flex; /* 弹性布局 */
  gap: 20px; /* 控件间距 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 12px; /* 底部间距 */
  width: 100%;

    .el-form-item {
      margin-bottom: 0; // 移除默认的底部边距
      width: 100%; // 占满父容器宽度
    flex: 1 !important; /* 均分空间 */
    margin-bottom: 0;
    max-width: none; // 移除最大宽度限制
    }

    .el-form-item__label {
      display: block;
      text-align: left;
      margin-bottom: 8px;
      font-weight: 500;
  .el-select {
    width: 100%; // 确保Select占满父容器宽度
    
    // 移除可能影响宽度的内部样式
    .el-input__wrapper {
      width: 100%;
    }
  }

  .formInput {
    width: 100%; // 输入框占满父容器宽度
  // 响应式设计
  @media (max-width: 1200px) {
    .model-row {
      flex-wrap: wrap;
      
      .el-form-item {
        flex: 1 0 calc(50% - 10px); // 在中等屏幕上每行显示2个
        margin-bottom: 10px;
      }
    }
  }

  .buttonGroup {
  @media (max-width: 768px) {
    .model-row {
      flex-direction: column;
      
      .el-form-item {
        width: 100%; // 在小屏幕上每行显示1个
      }
    }
  }
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 16px; // 按钮间距
    margin-top: 16px;
  gap: 10px;
  margin-top: 20px;
}

    .actionButton {
      flex: 1; // 按钮平均分配空间
      max-width: 200px; // 限制按钮最大宽度
    }
  }
}

 PipeLineLems/pipelinelems_web/src/widgets/PipeAccessoryAssembly/Views/Pages/PipeAccessoryAssembly/PipeAccessoryAssembly.tsx

@@ -1,6 +1,7 @@
import { defineComponent, onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import styles from './PipeAccessoryAssembly.module.scss'
import pipeImage from '@/images/pipe-assembly-drawing-example.png';
import {
  ElInput,
  ElForm,
@@ -9,6 +10,7 @@
  ElSelect,
  ElOption,
  ElMessage,
  ElCol,
} from 'element-plus'
import {
  getPlaceNoForStockList,
@@ -81,13 +83,28 @@

    return () => {
      return (
        <div class={styles.PipeAccessoryAssemblyContent}>
          <ElForm label-position="top" class={styles.h5Form}>
            <ElFormItem label="型号">
        <div class={styles.PipeAccessoryAssemblyContent}  style="overflow-y: auto !important;  height: 100%;">
          <div class={styles.actionButtons}>
            <ElButton type="warning">开工</ElButton>
            <ElButton type="warning">完工</ElButton>
            <ElButton type="warning">暂停</ElButton>
            <ElButton type="warning">自动</ElButton>
            <ElButton type="warning">质检</ElButton>
          </div>
       
          <h2 class={styles.blockTitle}>当前工位/设备信息</h2>

          {/* <div class={styles.modelRrow}> */}
          {/* <div> */}
          <div class={styles.headerContent}>
            <div class={styles.header}>
              <ElForm label-position="right" class={styles.h5Form}>
                <ElFormItem label="型号1">
              <ElSelect
                v-model={queryForm.value.materialModel}
                placeholder="请选择型号"
                clearable
                    disabled
                class={styles.formInput}
              >
                {modelOptions.value.map((item) => (
@@ -99,14 +116,15 @@
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="库位号">
                <ElFormItem label="型号2">
              <ElSelect
                v-model={queryForm.value.placeNo}
                placeholder="请选择库位号"
                    v-model={queryForm.value.materialModel}
                    placeholder="请选择型号"
                clearable
                    disabled
                class={styles.formInput}
              >
                {placeNoOptions.value.map((item) => (
                    {modelOptions.value.map((item) => (
                  <ElOption
                    key={item.value}
                    label={item.label}
@@ -115,40 +133,61 @@
                ))}
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="批次号">
              <ElInput
                v-model={queryForm.value.materialBatch}
                placeholder="请输入批次号"
                <ElFormItem label="型号3">
                  <ElSelect
                    v-model={queryForm.value.materialModel}
                    placeholder="请选择型号"
                clearable
                    disabled
                class={styles.formInput}
                  >
                    {modelOptions.value.map((item) => (
                      <ElOption
                        key={item.value}
                        label={item.label}
                        value={item.value}
              />
                    ))}
                  </ElSelect>
            </ElFormItem>
            <ElFormItem label="数量">
              <ElInput
                v-model={queryForm.value.stockNumber}
                placeholder="请输入数量"
                <ElFormItem label="型号4">
                  <ElSelect
                    v-model={queryForm.value.materialModel}
                    placeholder="请选择型号"
                clearable
                    disabled
                class={styles.formInput}
                  >
                    {modelOptions.value.map((item) => (
                      <ElOption
                        key={item.value}
                        label={item.label}
                        value={item.value}
              />
                    ))}
                  </ElSelect>
            </ElFormItem>
            <div class={styles.buttonGroup}>
              {/* <ElButton
                type="primary"
                onClick={handlePalletize}
                class={styles.actionButton}
              >
                组盘
              </ElButton> */}
              <ElButton
                type="success"
                onClick={handlePalletizeStorage}
                class={styles.actionButton}
              >
                组盘入库
              </ElButton>
            </div>
          </ElForm>
        </div>
          </div>

          <div class="info-block">
            <h2 class="block-title">工艺信息</h2>
            <el-table stripe>
              <el-table-column prop="sequence" label="序"></el-table-column>
              <el-table-column prop="flangeA" label="法兰A"></el-table-column>
              <el-table-column prop="flangeB" label="法兰B"></el-table-column>
            </el-table>
          </div>
          <h2 class="block-title">图纸</h2>
          <img
            src={pipeImage}
            alt="设备图片"
            style="height:1250px;"
            class="equipment-image"
          ></img>

        </div>
      )
    }
  },