event.wxss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. page {
  2. min-height: 100vh;
  3. background: linear-gradient(180deg, #eff4fb 0%, #e8eff7 100%);
  4. }
  5. .page {
  6. min-height: 100vh;
  7. }
  8. .shell {
  9. display: grid;
  10. gap: 24rpx;
  11. padding: 28rpx 24rpx 40rpx;
  12. }
  13. .hero,
  14. .panel {
  15. display: grid;
  16. gap: 16rpx;
  17. padding: 24rpx;
  18. border-radius: 24rpx;
  19. }
  20. .hero {
  21. background: linear-gradient(135deg, #163a66 0%, #1f5da1 100%);
  22. color: #ffffff;
  23. }
  24. .hero__eyebrow {
  25. font-size: 22rpx;
  26. letter-spacing: 0.16em;
  27. text-transform: uppercase;
  28. color: rgba(255, 255, 255, 0.72);
  29. }
  30. .hero__title {
  31. font-size: 40rpx;
  32. font-weight: 700;
  33. }
  34. .hero__desc {
  35. font-size: 24rpx;
  36. color: rgba(255, 255, 255, 0.84);
  37. line-height: 1.6;
  38. }
  39. .panel {
  40. background: rgba(255, 255, 255, 0.94);
  41. box-shadow: 0 14rpx 32rpx rgba(40, 63, 95, 0.08);
  42. }
  43. .panel__title {
  44. font-size: 30rpx;
  45. font-weight: 700;
  46. color: #17345a;
  47. }
  48. .summary {
  49. font-size: 24rpx;
  50. line-height: 1.6;
  51. color: #30465f;
  52. }
  53. .actions {
  54. display: flex;
  55. gap: 16rpx;
  56. flex-wrap: wrap;
  57. }
  58. .btn {
  59. margin: 0;
  60. min-height: 76rpx;
  61. padding: 0 24rpx;
  62. line-height: 76rpx;
  63. border-radius: 18rpx;
  64. font-size: 26rpx;
  65. }
  66. .btn::after {
  67. border: 0;
  68. }
  69. .btn--primary {
  70. background: #173d73;
  71. color: #ffffff;
  72. }
  73. .btn--secondary {
  74. background: #dfeaf8;
  75. color: #173d73;
  76. }