interact.page.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. ion-title {
  2. flex: 1; // 使标题占据可用空间
  3. text-align: left; // 确保文字左对齐
  4. margin-left: 16px; // 左侧边距,可以根据需要调整
  5. margin-top: 5px;
  6. }
  7. ion-header {
  8. background-color: #3880ff; // 设置头部背景色
  9. }
  10. ion-card {
  11. margin: 10px; // 设置卡片之间的间距
  12. border-radius: 10px; // 设置卡片圆角
  13. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
  14. }
  15. ion-card-header {
  16. background-color: #f0f0f0; // 设置卡片头部背景色
  17. }
  18. ion-card-title {
  19. font-size: 1.2em; // 设置卡片标题字体大小
  20. font-weight: bold; // 设置卡片标题字体加粗
  21. }
  22. ion-item {
  23. --ion-item-background: transparent; // 设置列表项背景透明
  24. }
  25. ion-avatar {
  26. border-radius: 50%; // 设置头像圆形
  27. width: 50px; // 设置头像宽度
  28. height: 50px; // 设置头像高度
  29. }
  30. h2 {
  31. font-size: 1em; // 设置二级标题字体大小
  32. margin: 0; // 去掉默认外边距
  33. }
  34. p {
  35. font-size: 0.9em; // 设置段落字体大小
  36. color: #666; // 设置段落文字颜色
  37. }
  38. ion-thumbnail {
  39. width: 100px; // 设置封面图宽度
  40. height: 150px; // 设置封面图高度
  41. }