Home.wxss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. .container {
  2. display: flex;
  3. flex-direction: column;
  4. gap: 20px;
  5. padding: 20px;
  6. background-color: #f5f5f5;
  7. margin-top: 20px;
  8. padding-bottom: 70px;
  9. }
  10. .card {
  11. display: flex; /* 使用 flexbox 布局 */
  12. align-items: center;
  13. width: 90%;
  14. background-color: #ffffff;
  15. padding: 20px;
  16. border-radius: 12px;
  17. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  18. transition: transform 0.2s ease;
  19. cursor: pointer;
  20. }
  21. .card:hover {
  22. transform: scale(1.05);
  23. }
  24. .card-icon {
  25. width: 40px;
  26. height: 40px;
  27. margin-bottom: 20px;
  28. margin-right: 90px; /* 与内容保持间距 */
  29. }
  30. .card-content {
  31. flex: 1; /* 占据剩余空间,保证布局一致 */
  32. text-align: center; /* 内容水平居中 */
  33. }
  34. .card-title {
  35. font-size: 18px;
  36. font-weight: bold;
  37. color: #333;
  38. }
  39. .card:nth-child(1) {
  40. background-color: #FFDDC1; /* 软件简介卡片颜色 */
  41. }
  42. .card:nth-child(2) {
  43. background-color: #C1E1FF; /* 项目简介卡片颜色 */
  44. }
  45. .card:nth-child(3) {
  46. background-color: #D4F4DD; /* 研究成果卡片颜色 */
  47. }
  48. .card:nth-child(4) {
  49. background-color: #FFF8DC; /* 团队信息卡片颜色 */
  50. }
  51. .card:nth-child(5) {
  52. background-color: #E6E6FA; /* 团队信息卡片颜色 */
  53. }