tab1.page.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. ion-toolbar {
  2. --background: #3880ff;
  3. }
  4. ion-label h2 {
  5. font-weight: bold;
  6. }
  7. ion-label p {
  8. color: gray;
  9. }
  10. ion-searchbar {
  11. margin: 10px;
  12. }
  13. ion-row {
  14. margin-top: 20px;
  15. }
  16. .scroll-container {
  17. display: flex;
  18. overflow-x: scroll;
  19. white-space: nowrap;
  20. }
  21. .scroll-content {
  22. display: inline-flex;
  23. }
  24. ion-card {
  25. display: flex;
  26. align-items: center;
  27. padding: 10px;
  28. margin: 10px 0;
  29. }
  30. ion-avatar {
  31. margin-right: 15px;
  32. }
  33. ion-card-content {
  34. flex: 1;
  35. }
  36. // .card-image {
  37. // width: 100px; /* 增大头像宽度 */
  38. // height: 100px; /* 增大头像高度 */
  39. // border-radius: 50%;
  40. // object-fit: cover;
  41. // }
  42. ion-item.recommended-player-card {
  43. --background: #fff;
  44. border: 1px solid #ddd;
  45. border-radius: 8px;
  46. margin: 15px 0; /* 增加卡片之间的间距 */
  47. padding: 15px; /* 增加卡片内部的间距 */
  48. display: flex;
  49. align-items: center;
  50. }
  51. // ion-item.recommended-player-card ion-avatar {
  52. // margin-right: 20px; /* 增加头像与内容之间的间距 */
  53. // }
  54. // ion-item.recommended-player-card ion-avatar img {
  55. // width: 100px; /* 增大头像宽度 */
  56. // height: 100px; /* 增大头像高度 */
  57. // border-radius: 50%;
  58. // object-fit: cover;
  59. // }
  60. // ion-item.recommended-player-card ion-label {
  61. // flex: 1;
  62. // font-size: 1.2em; /* 增大字体尺寸 */
  63. // }
  64. ion-item.recommended-player-card ion-label h2 {
  65. margin: 0;
  66. font-size: 1.5em; /* 增大标题字体尺寸 */
  67. }
  68. // ion-item.recommended-player-card ion-label p {
  69. // margin: 5px 0 0;
  70. // font-size: 1.2em; /* 增大内容字体尺寸 */
  71. // }
  72. .more-button {
  73. margin: 20px 0;
  74. --background: #3880ff;
  75. --color: white;
  76. }