mine.page.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. .touxiang {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. width: 100px;
  6. height: 100px;
  7. }
  8. .touxiang img {
  9. transform: scale(1.5);
  10. }
  11. ion-label h2, ion-label p {
  12. margin-left: 30px;
  13. }
  14. ion-label h2 {
  15. margin-bottom: 10px;
  16. font-size: 24px;
  17. }
  18. ion-content {
  19. --ion-background-color: #f5f5f5; /* 设置背景颜色 */
  20. }
  21. ion-card {
  22. background-color: #ffffff; /* 设置卡片背景颜色 */
  23. border-radius: 10px; /* 设置卡片圆角 */
  24. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  25. margin: 10px; /* 设置卡片之间的间距 */
  26. transition: transform 0.3s; /* 添加过渡效果 */
  27. }
  28. ion-card:hover {
  29. transform: translateY(-5px); /* 鼠标悬停时卡片向上移动 */
  30. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加阴影效果 */
  31. background-color: #f8f8f8; /* 鼠标悬停时改变背景颜色 */
  32. }
  33. ion-card-title {
  34. font-size: 1.2em; /* 设置标题字体大小 */
  35. color: #333333; /* 设置标题颜色 */
  36. }
  37. ion-card-content {
  38. font-size: 0.9em; /* 设置内容字体大小 */
  39. color: #555555; /* 设置内容颜色 */
  40. }
  41. ion-button {
  42. font-size: 0.9em; /* 设置按钮字体大小 */
  43. color: #d18111; /* 设置按钮文字颜色 */
  44. border-radius: 5px; /* 设置按钮圆角 */
  45. }
  46. ion-text {
  47. font-size: 0.9em; /* 设置文本字体大小 */
  48. color: hsl(0, 0%, 20%); /* 设置文本颜色 */
  49. }
  50. .red-button {
  51. color: red; /* 设置按钮文字颜色为白色 */
  52. }
  53. .white-button {
  54. // background-color: #007bff; /* 自定义颜色 */
  55. color: rgb(5, 5, 5); /* 设置按钮文字颜色为白色 */
  56. width: max-content;
  57. }