yss-project/src/app/pages/customer-service/consultation-order/consultation-order-dialog.component.scss

@use '../../../shared/styles/variables';
@use '../../../shared/styles/ios-theme' as ios;

.consultation-order-dialog {
  // 弹窗容器样式
  .mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: ios.$ios-radius-lg;
    background: ios.$ios-card-background;
    box-shadow: ios.$ios-shadow-lg;
    border: 1px solid ios.$ios-border;
    min-width: 800px;
    max-width: 1000px;
    max-height: 90vh;
    overflow: hidden;
  }

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: ios.$ios-spacing-lg ios.$ios-spacing-lg ios.$ios-spacing-md;
    border-bottom: 1px solid ios.$ios-border;
    background: ios.$ios-background;

    .dialog-title {
      color: ios.$ios-text-primary;
      font-weight: ios.$ios-font-weight-semibold;
      font-family: ios.$ios-font-family;
      font-size: ios.$ios-font-size-lg;
      margin: 0;
    }

    .close-button {
      color: ios.$ios-text-secondary;
      transition: color 0.3s ease;

      &:hover {
        color: ios.$ios-primary;
      }
    }
  }

  .dialog-content {
    padding: 0;
    max-height: calc(90vh - 80px);
    overflow-y: auto;

    // 确保咨询订单组件内部样式正常
    app-consultation-order {
      display: block;
      height: 100%;

      ::ng-deep {
        .consultation-order-container {
          height: 100%;
          border-radius: 0;
          box-shadow: none;
          margin: 0;

          .dashboard-header {
            border-radius: 0;
            margin: 0;
          }

          .dashboard-content {
            max-height: calc(90vh - 140px);
            overflow-y: auto;
            padding: ios.$ios-spacing-md;
          }
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 1024px) {
    .mat-mdc-dialog-container .mdc-dialog__surface {
      min-width: 90vw;
      max-width: 95vw;
      margin: ios.$ios-spacing-md;
    }
  }

  @media (max-width: 768px) {
    .mat-mdc-dialog-container .mdc-dialog__surface {
      min-width: 95vw;
      max-width: 95vw;
      margin: ios.$ios-spacing-sm;
    }

    .dialog-header {
      padding: ios.$ios-spacing-md;

      .dialog-title {
        font-size: ios.$ios-font-size-md;
      }
    }

    .dialog-content {
      app-consultation-order {
        ::ng-deep {
          .consultation-order-container {
            .dashboard-content {
              padding: ios.$ios-spacing-sm;
            }
          }
        }
      }
    }
  }
}