s202226701018/wisdom-app/src/app/page/inquiry-human/inquiry-human.component.scss

ion-header {
  --background: #5c97ff;
  --color: white;
}

ion-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.segment-control {
  margin: 16px;
}

.doctor-card {
  margin: 8px 0;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.doctor-card:hover {
  transform: translateY(-5px);
}

.doctor-header {
  display: flex;
  align-items: center;
  gap: 8px;

  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
  }

  .title, .specialty {
    font-size: 14px;
    color: #555;
  }
}

.hospital-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

.expertise {
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.stats {
  display: flex;
  gap: 16px;
  font-size: 14px;

  div {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.consultation-types {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0;

  ion-button {
    --padding-start: 16px;
    --padding-end: 16px;
    height: 32px;
    font-size: 14px;
    white-space: nowrap;
  }
}

.doctor-detail-card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.doctor-header1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  color: #666;

  .verification-badge {
    display: flex;
    align-items: center;
    gap: 4px;

    ion-icon {
      color: #52c41a;
    }
  }

  .qualification-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #52c41a;
  }
}

.doctor-info1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;

  .left-section {
    flex: 1;

    .name-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;

      h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
      }

      ion-badge {
        --padding-start: 4px;
        --padding-end: 4px;
      }
    }

    .position, .hospital {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
      color: #666;
      font-size: 14px;
    }

    .stats {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 8px 0;
      font-size: 14px;

      .rating {
        display: flex;
        align-items: center;
        gap: 4px;

        .number {
          color: #f90;
          font-weight: 500;
        }
      }
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;

      ion-chip {
        height: 24px;
        --background: rgba(230, 230, 243, 0.7);
        --color: #333;
        border-radius: 10px;
      }
    }
  }

  .right-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    ion-avatar {
      width: 64px;
      height: 64px;
    }

    ion-button {
      --border-color: #666;
      --color: #666;
      font-size: 12px;
    }
  }
}

.info-section {
  margin: 16px 0;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.info-header {
  margin-bottom: 8px;
}

.info-header h1 {
  font-size: 18px;
  color: #333;
}

.info-content p {
  color: #555;
  line-height: 1.6;
}

.guarantee {
  display: flex;
  justify-content: space-around;
  margin-top: 12px;
  font-size: 14px;
  color: gray;

  p {
    margin: 0;
  }
}

.consult-options {
  padding: 16px;
  background: #fff;
  margin: 0 10px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}

.option-item {
  position: relative;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;

  &.selected {
    border-color: var(--ion-color-primary);
    background-color: var(--ion-color-primary-tint);

    .icon-wrapper ion-icon {
      color: var(--ion-color-primary);
    }

    .title1 {
      color: var(--ion-color-primary);
    }
  }

  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;

    .icon-wrapper ion-icon {
      color: #999;
    }

    .title1 {
      color: #999;
    }
  }
}

.option-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-wrapper {
  position: relative;
  margin-bottom: 8px;

  ion-icon {
    font-size: 24px;
    color: #666;
  }

  .check-icon {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 16px;
    color: var(--ion-color-primary);
    background: #fff;
    border-radius: 50%;
  }
}

.title1 {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.price {
  font-size: 12px;
  color: var(--ion-color-primary);
}

.status {
  font-size: 12px;
  color: #999;
}

.consult-button {
  border-radius: 10px;
}

/* 收款码模态框的样式 */
.payment-modal {
  --width: 90%;             /* 增加模态框宽度到90% */
  --max-width: 800px;       /* 增加模态框最大宽度到800px */
  --border-radius: 12px;    /* 模态框圆角 */
}

/* 收款码内容区域的布局 */
.payment-content {
  display: flex;             /* 使用Flex布局 */
  justify-content: center;   /* 水平居中 */
  align-items: center;       /* 垂直居中 */
  flex-direction: column;    /* 垂直排列 */
}

/* 收款码容器的样式 */
.payment-codes {
  display: flex;             /* 使用Flex布局 */
  flex-direction: row;       /* 水平排列，确保收款码并排 */
  align-items: center;       /* 居中对齐 */
  justify-content: center;   /* 水平居中对齐容器内的收款码 */
  gap: 32px;                 /* 两个收款码之间的间距 */
  width: 100%;               /* 设置容器宽度为100%，确保收款码在模态框中居中 */
}

/* 收款码图片的样式 */
.payment-image {
  width: 250px;              /* 增加图片宽度到250px */
  height: auto;              /* 高度自适应，保持图片比例 */
  border: 1px solid #ddd;    /* 边框 */
  border-radius: 8px;        /* 圆角 */
}

/* 响应式设计：屏幕宽度小于等于768px时的样式调整 */
@media (max-width: 768px) {
  /* 医生信息部分改为垂直排列 */
  .doctor-info1 {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 右侧操作部分改为水平排列 */
  .right-section {
    flex-direction: row;
    align-items: center;
  }

  /* 保证服务部分改为垂直排列 */
  .guarantee {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 收款码容器在小屏幕上改为垂直排列 */
  .payment-codes {
    flex-direction: column;  /* 垂直排列 */
    gap: 16px;               /* 减小间距 */
  }

  /* 收款码图片在小屏幕上调整宽度 */
  .payment-image {
    width: 80%;               /* 调整图片宽度以适应小屏幕 */
    max-width: none;         /* 移除最大宽度限制 */
  }
}