tab2.page.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. .custom-toolbar {
  2. --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
  3. display: flex; /* 使用 Flexbox 布局 */
  4. justify-content: center; /* 水平居中 */
  5. align-items: center; /* 垂直居中 */
  6. padding: 0; /* 去掉默认内边距 */
  7. }
  8. .custom-title {
  9. font-size: 1.3em; /* 字体大小 */
  10. font-weight: bold; /* 加粗 */
  11. color: #000000;
  12. text-align: center; /* 文字居中对齐 */
  13. margin: 0; /* 去掉默认外边距 */
  14. text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影效果 */
  15. /* 添加其他美化效果 */
  16. font-family: "微软雅黑"; /* 自定义字体 */
  17. }
  18. .search-bar {
  19. padding: 10px;
  20. text-align: center;
  21. }
  22. .search-bar input {
  23. width: 80%;
  24. padding: 8px;
  25. border: 1px solid #ccc;
  26. border-radius: 4px;
  27. }
  28. .content {
  29. margin-top: -10px;
  30. height: 100%;
  31. width: 100%;
  32. }
  33. ion-card {
  34. width: 100%;
  35. height: 100%;
  36. margin: 0;
  37. padding: 0;
  38. border-radius: 0;
  39. box-shadow: none;
  40. }
  41. ion-card-header {
  42. font-size: 1.5em;
  43. height: auto;
  44. }
  45. ion-card-content {
  46. font-size: 1.2em;
  47. width: 100%;
  48. height: auto;
  49. }
  50. ion-segment-view {
  51. height: auto;
  52. width: 100%;
  53. }
  54. ion-segment-content {
  55. // display: flex;
  56. align-items: center;
  57. justify-content: center;
  58. }
  59. ion-segment-content:nth-of-type(5) {
  60. background: lightpink;
  61. }
  62. ion-segment-content:nth-of-type(2) {
  63. background: lightblue;
  64. }
  65. ion-segment-content:nth-of-type(3) {
  66. background: lightgreen;
  67. }
  68. // .tabs {
  69. // display: flex;
  70. // justify-content: space-around;
  71. // padding: 0px 0;
  72. // background-color: #f8f8f8;
  73. // }
  74. // .tabs ion-button {
  75. // flex: 1;
  76. // text-align: center;
  77. // // border: none;
  78. // --background: transparent;
  79. // --color-checked: #4caf50;
  80. // --indicator-color: #4caf50;
  81. // --color: #666;
  82. // --color-focused: #4caf50;
  83. // --color-hover: #4caf50;
  84. // --color-activated: #4caf50;
  85. // --color-selected: #4caf50;
  86. // }
  87. // .tab {
  88. // cursor: pointer;
  89. // padding: 0px 0px;
  90. // }
  91. // .tab.active {
  92. // color: rgb(81, 255, 0);
  93. // background-color: rgb(255, 255, 255);
  94. // }
  95. //