s202226701024/src/app/explore-container/tab1/tab1.page.scss

ion-header {
  background-color: #ffffff; // 设置头部背景色
  color: white; // 设置头部文字颜色
}

ion-title {
  flex: 1; // 使标题占据可用空间
  text-align: left; // 确保文字左对齐
  margin-left: 16px; // 左侧边距，可以根据需要调整
  margin-top: 5px;
}

ion-card {
  margin: 10px; // 设置卡片之间的间距
  border-radius: 10px; // 设置卡片圆角
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
}

ion-card-header {
  background-color: #d8e5fa; // 设置头部背景色
  color: white; // 设置头部文字颜色
}

ion-card-title {
  font-size: 1.2em; // 设置卡片标题字体大小
  font-weight: bold; // 设置卡片标题字体加粗
}

ion-item {
  --ion-item-background: transparent; // 设置列表项背景透明
}

ion-label {
  color: #333; // 设置标签文字颜色
}

ion-button {
  --background: #3880ff; // 设置按钮背景色
  --color: white; // 设置按钮文字颜色
  margin-top: 10px; // 设置按钮与上方内容的间距
  border-radius: 5px; // 设置按钮圆角
}

ion-avatar {
  border-radius: 50%; // 设置头像圆形
  width: 50px; // 设置头像宽度
  height: 50px; // 设置头像高度
}

h2 {
  font-size: 1em; // 设置二级标题字体大小
  margin: 0; // 去掉默认外边距
}

p {
  font-size: 0.9em; // 设置段落字体大小
  color: #666; // 设置段落文字颜色
}

ion-list {
  padding: 0; // 去掉列表内边距
}

ion-card-content {
  padding: 10px; // 设置卡片内容内边距
}

ion-content {
  --background: #f9f9f9; /* 设置内容背景色 */
}

swiper-container {
  width: 100%;
  height: 250px;
}

swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.slide-card {
  width: 100%;
  height: 100%;
  margin: 0;
  
  img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
}

.slide-content {
  padding: 10px;
  
  h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
  }
  
  p {
    margin: 5px 0;
    font-size: 0.9em;
    color: #666;
  }
  
  ion-badge {
    margin-top: 5px;
  }
}