main.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. /* 这三个 tailwind指令告诉 Tailwind CSS 注入三类样式: */
  2. /* 基础样式重置(如 margin、padding 的默认值)*/
  3. @tailwind base;
  4. /* 组件样式(如按钮、输入框等)*/
  5. @tailwind components;
  6. /* 工具类样式(如 bg-blue-500、flex、p-4 等)*/
  7. @tailwind utilities;
  8. body {
  9. /* min-height: 1024px; */
  10. font-family: ui-sans-serif, system-ui, sans-serif;
  11. }
  12. .circle-button {
  13. width: 120px;
  14. height: 120px;
  15. display: flex;
  16. flex-direction: column;
  17. align-items: center;
  18. justify-content: center;
  19. border-radius: 50%;
  20. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  21. transition: all 0.3s ease;
  22. }
  23. .circle-button:hover {
  24. transform: translateY(-5px);
  25. box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  26. }
  27. .circle-button i {
  28. font-size: 32px;
  29. margin-bottom: 8px;
  30. }
  31. .circle-button span {
  32. font-weight: 500;
  33. }
  34. .user-info {
  35. background-color: #f9fafb;
  36. padding: 8px 16px;
  37. border-radius: 9999px;
  38. display: flex;
  39. align-items: center;
  40. }
  41. .action-btn {
  42. padding: 8px 16px;
  43. border-radius: 9999px;
  44. font-weight: 500;
  45. transition: all 0.2s ease;
  46. }
  47. .action-btn:hover {
  48. opacity: 0.9;
  49. }