ss-dp/src/views/Home/components/Business/SiQuan/index.less

.siquan-view {
  width: 100%;
  height: 100%;
  position: relative; // Establish positioning context
  
  .side-panel {
     position: absolute;
     top: 20px;
     bottom: 20px;
     width: 25%; // Or use vw
     min-width: 300px;
     display: flex;
     flex-direction: column;
     z-index: 10; // Ensure panels are above map
     transition: all 0.3s;
     pointer-events: none; // Allow clicks to pass through transparent areas if any
 
     &.left {
       left: 20px;
     }
 
     &.right {
       right: 20px;
     }
 
     // Re-enable pointer events for the cards themselves
     > * {
       pointer-events: auto;
     }
   }

  // Responsive adjustments
  @media screen and (max-width: 1366px) {
    gap: 10px;
    .side-panel {
      flex: 0 0 28%;
    }
  }

  .left-part, .right-part {
    width: 95%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0; // Padding handled by parent or margin in cards
    box-sizing: border-box;

    .panel-card {
        margin-bottom: 10px;
        &:last-child {
        margin-bottom: 0;
        }
    }
  }

  .left-part {
    .card-1 { flex: 4; }
    .card-2 { flex: 5; }
  }

  .right-part {
    .card-1 { flex: 4; }
    .card-2 { flex: 3; }
    .card-3 { flex: 1; }
  }

  .placeholder-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
  }
}