test/sf_warehouse/static/src/css/kanban_location_custom.scss

// 定义看板公共样式的Mixin
@mixin kanban-common-styles($record-count-each-row, $record-gap: 16px) {
    $record-gap-total-width: $record-gap * ($record-count-each-row - 1);
    
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    gap: $record-gap !important;
    width: 100% !important;
    height: 100% !important;
  
    // === 卡片基础样式（完全保留）===
    .o_kanban_record {
      flex: 0 0 calc((100% - #{$record-gap-total-width}) / #{$record-count-each-row}) !important;
      height: calc((100% - #{$record-gap * 6}) / 6) !important;
      margin: 0 !important;
      padding: 0 !important;
      background-color: white !important;
      border: 1px solid #dee2e6 !important;
      border-radius: 4px !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
      min-width: calc((100% - #{$record-gap-total-width}) / #{$record-count-each-row}) !important;
      max-width: calc((100% - #{$record-gap-total-width}) / #{$record-count-each-row}) !important;
      position: relative;
      transition: all 0.25s ease !important;
      overflow: visible !important; // 允许悬停条溢出卡片边界
  
      // === 状态标签（保留原设计）===
      .status-label {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 3px 8px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #e0e0e0;
        border-radius: 3px;
        font-size: 11px;
        color: #424242;
        z-index: 2;
      }
  
      // === 优化：悬停信息条（核心改动）===
      .status-hover-bar {
        position: absolute;
        bottom: calc(100% + 8px); // 默认显示在卡片上方
        left: 0;
        z-index: 1000;
        min-width: max-content;    // 宽度自适应内容
        max-width: 300px;          // 防止过宽
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-size: 12px;
        color: #424242;
        white-space: nowrap;       // 强制单行显示
        opacity: 0;
        pointer-events: none;      // 避免阻挡卡片交互
        transition: opacity 0.2s ease, transform 0.2s ease;
        transform: translateY(10px);
        
        // 三角形指示器
        &::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 15px;
          border: 6px solid transparent;
          border-top-color: rgba(0, 0, 0, 0.85);
        }
  
        div {
          margin-bottom: 4px;
          line-height: 1.4;
        }
      }
  
      // === 悬停触发逻辑 ===
      &:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        z-index: 10;
  
        .status-hover-bar {
        background: rgba(50, 50, 50, 0.9);
        color: #fff !important;
        font-size: 12px;
          opacity: 0.9;
          transform: translateY(0);
          pointer-events: auto; // 悬停时允许交互
        }
      }
  
      // === 边界保护（智能定位）===
      // 左侧卡片：左对齐
      &:nth-child(#{$record-count-each-row}n+1) .status-hover-bar {
        left: 0;
        right: auto;
        &::after { left: 15px; }
      }
  
      // 右侧卡片：右对齐
      &:nth-child(#{$record-count-each-row}n) .status-hover-bar {
        left: auto;
        right: 0;
        &::after {
          left: auto;
          right: 15px;
        }
      }
      &:nth-child(#{$record-count-each-row}n + #{$record-count-each-row - 1}) .status-hover-bar {
        left: auto;
        right: 0;
        &::after {
          left: auto;
          right: 15px;
        }
      }
      // 顶部卡片：悬停条显示在下方
      &:nth-child(-n+#{$record-count-each-row}) .status-hover-bar {
        bottom: auto;
        top: calc(100% + 8px);
        &::after {
          top: auto;
          bottom: 100%;
          border-top-color: transparent;
          border-bottom-color: rgba(255, 255, 255, 0.95);
        }
      }
  
      // === 禁用状态样式（保留原效果）===
      &.kanban_color_3 {
        opacity: 0.6;
        &:hover {
          opacity: 0.85;
          .status-hover-bar {
            background:rgba(0, 0, 0, 0.85);
            color: white !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important; 
          }
        }
      }
    }
  }
  
  // === 看板视图样式（完全保留）===
  .o_kanban_view {
    // 卡片内部结构（不修改）
    .o_kanban_record {
      .o_kanban_record_bottom {
        margin: 0;
      }
      .oe_kanban_card.kanban_color_3,
      .oe_kanban_card.kanban_color_1,
      .oe_kanban_card.kanban_color_2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        .sf_kanban_custom_location_info_style {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          width: 100%;
          font-size: 15px;
          color: #000000;
          padding:0px;
        }
  
        .sf_kanban_no {
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          font-size: 18px;
          color: #000000;
        }
      }
    }
  
    // 不同列数的看板样式
    .sf_kanban_location_style12 {
      @include kanban-common-styles(12);
    }
    .sf_kanban_location_style19 {
      @include kanban-common-styles(19);
    }
    .sf_kanban_location_style4 {
      @include kanban-common-styles(4);
    }
    .sf_kanban_location_style3 {
      @include kanban-common-styles(3);
    }
  }