202226701011/FitMind-app/src/app/page-news/page-news.component.scss

/* page-news.component.scss */

/* 设置全局样式 */
ion-header {
  background-color: #f8f9fa; /* 浅色背景 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

ion-toolbar {
  --background: #ffffff; /* 工具栏背景 */
}

ion-title {
  font-size: 1.5rem; /* 增加标题字体大小 */
  color: #333; /* 深色字体 */
}

/* 内容样式 */
ion-content {
  background-color: #f0f2f5; /* 页面背景 */
  padding: 16px; /* 内边距 */
}

/* 列表样式 */
ion-list {
  --ion-item-background: transparent; /* 透明背景 */
  --ion-item-border-color: transparent; /* 透明边框 */
}

/* 每个新闻项 */
ion-item {
  background: white; /* 每个新闻项的背景 */
  border-radius: 8px; /* 圆角 */
  margin-bottom: 16px; /* 下边距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影 */
  transition: transform 0.2s, box-shadow 0.2s; /* 动画效果 */

  &:hover {
    transform: translateY(-2px); /* 悬停效果 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 悬停阴影 */
  }
}

/* 缩略图样式 */
ion-thumbnail {
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 防止图片溢出 */
}

/* 图片样式 */
ion-thumbnail img {
  width: 100%; /* 图片宽度100% */
  height: auto; /* 高度自适应 */
}

/* 标签样式 */
ion-label {
  padding: 8px; /* 内边距 */
  color: #555; /* 标签颜色 */
}

/* 标题样式 */
h2 {
  font-size: 1.2rem; /* 标题字体大小 */
  color: #333; /* 深色字体 */
  margin: 0; /* 去掉默认外边距 */
}

/* 日期样式 */
h3 {
  font-size: 1rem; /* 日期字体大小 */
  color: #888; /* 灰色字体 */
  margin: 4px 0; /* 上下边距 */
}

/* 描述样式 */
p {
  font-size: 0.9rem; /* 描述字体大小 */
  line-height: 1.5; /* 行高 */
  color: #666; /* 中灰色字体 */
  margin: 0; /* 去掉默认外边距 */
}