web3-202226701052/src/app/tab1/tab1.page.scss

ion-toolbar {
    --background: #1a73e8; /* 主题颜色 */
    --color: white; /* 文字颜色 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px; /* 调整左右内边距 */
  }
  
  ion-avatar {
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px; /* 调整头像的垂直位置 */
  }
  
  ion-avatar img {
    width: 35px;
    height: 35px;
    border-radius: 25%;
  }
  
  ion-title {
    font-size: 18px;
    font-weight: bold;
    flex: 1; /* 使标题居中 */
    text-align: center;
  }
  
  ion-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  
    ion-label {
      font-size: 16px;
    }
  
    ion-icon {
      font-size: 20px;
    }
  }
  
  .health-banner {
    position: relative;
    width: 100%; /* 占满整个宽度 */
     /* 使用min-height代替padding-top */
     min-height: 300px; /* 根据需要调整 */
    background: url('../../assets/images/user.png') no-repeat center center / cover;
    overflow: hidden;
    margin: 0 0; /* 只保留上下外边距 */
    border-radius: 0; /* 移除圆角 */
     /* 添加过渡效果 */
    transition: background-image 1s ease-in-out;
  
    .banner-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16px;
      box-sizing: border-box;
    }
  
    .banner-header {
      font-size: 20px;
      font-weight: bold;
      color: white;
    }
    
    .banner-footer {
        position: absolute;
        bottom: 60px; /* 调整按钮的位置 */
        left: 0;
        right: 0;
        padding: 0 16px; /* 调整左右内边距 */
    }
  
    .banner-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
    }
  
    .avatar-stack {
      position: relative;
      display: inline-block;
      margin-left: 8px; /* 向左移动 8px */
  
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: absolute;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  
        &:nth-child(2) {
          left: 16px;
        }
  
        &:nth-child(3) {
          left: 32px;
        }
      }
    }
  
    .expert-info {
      font-size: 16px;
      color: white;
      margin-left: 8px; /* 向左移动 8px */
      margin-bottom: 16px; /* 增加底部间距 */
    }
  
    .banner-footer {
      position: relative; /* 使用相对定位 */
      padding: 0 16px; /* 调整左右内边距 */
    }
  
    .full-width-button {
      width: 100%; /* 占满整个宽度 */
    }
  
    .banner-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7); /* 深蓝色半透明 */
      padding: 16px;
      border-radius: 0 0 10px 10px; /* 圆角 */
  
      .bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
  
      .left-content {
        font-size: 14px;
        color: white;
      }
  
      .right-content {
        font-size: 14px;
        color: white;
      }
    }
}

// 推荐医生
.recommended-doctors {
  margin: 16px 0;
  padding: 0 16px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 960px; /* 最大宽度 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.header .title {
  font-size: 16px;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  color: #000000;
  line-height: 21px; /* 确保高度一致 */
}

.header .subtitle {
  font-size: 14px;
  color: #999;
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  position: relative;
  width: 100%; /* 宽度为100%，确保容器不会过大 */
  min-height: 200px; /* 设置最小高度 */
  white-space: nowrap; /* 防止换行 */
}

.card {
  display: inline-flex; /* 使用inline-flex以允许水平排列 */
  flex-direction: column;
  align-items: center;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  scroll-snap-align: start;
  min-width: 200px; /* 确保卡片有一定的宽度 */
  transition: transform 0.5s ease-in-out;
  margin-right: 16px; /* 卡片间距 */
  position: relative;
}

.card .tag {
  font-size: 12px;
  background: #ff4d4d;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  position: absolute;
  top: 16px;
  left: 16px;
}

.card .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 8px;
}

.card .name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.card .specialty {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.card ion-button {
  width: 100%; /* 占满卡片的宽度 */
  margin-top: 8px;
}

.controls {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;

  button {
    margin: 0 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    font-size: 14px;
    transition: background-color 0.3s;

    &:hover {
      background-color: #0056b3;
    }
  }
}

/* 边界提示 */
.scroll-container::before,
.scroll-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px; /* 边界提示区域的宽度 */
  z-index: 1;
  pointer-events: none; /* 使提示区域不影响触摸事件 */
}


/* 媒体查询 - 适应小屏幕 */
@media (max-width: 600px) {
  .card {
    min-width: 150px; /* 减小卡片宽度以适应小屏幕 */
  }

  .scroll-container::before,
  .scroll-container::after {
    width: 30px; /* 减小边界提示区域的宽度 */
  }
}

// 功能区
.function-area {
  margin: 16px 0;
  padding: 0 16px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 960px; /* 最大宽度 */
}

.function-row {
  display: flex; // 使用 Flexbox 布局
  justify-content: space-between; // 按空间均匀分布
  align-items: center; // 垂直居中
  overflow-x: auto; // 允许水平滚动
  scroll-snap-type: x mandatory; // 启用滚动捕捉
  -webkit-overflow-scrolling: touch; // 平滑滚动
  padding: 16px 0;

  .function-item {
    flex: 1 0 20%; // 每个项目占 20% 宽度
    min-width: 0; // 确保项目可以缩小
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    scroll-snap-align: start; // 滚动时对齐

    .icon {
      font-size: 24px;
      margin-bottom: 8px;
    }

    .label {
      font-size: 14px;
      color: #333;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .function-row {
    .function-item {
      .icon {
        font-size: 20px; // 减小图标大小
      }

      .label {
        font-size: 12px; // 减小标签文字大小
      }
    }
  }

  .promotion-carousel .poster {
    min-height: 150px; // 减小海报高度
  }

  .floating-action-button {
    width: 50px;
    height: 50px;

    ion-icon {
      font-size: 20px; // 减小图标大小
    }

    .label {
      font-size: 10px; // 减小标签文字大小
    }
  }
}