homepage.wxss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. /* pages/homepage/homepage.wxss */
  2. .container {
  3. min-height: 100vh;
  4. background-color: #f5f7fa;
  5. padding-bottom: 120rpx;
  6. }
  7. .header {
  8. position: relative;
  9. width: 100%;
  10. height: 320rpx;
  11. margin-top: -32rpx;
  12. }
  13. .background {
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. width: 100%;
  18. height: 100%;
  19. }
  20. .logo {
  21. position: absolute;
  22. left: 32rpx;
  23. bottom: 80rpx;
  24. width: 280rpx;
  25. height: 90rpx;
  26. z-index: 2;
  27. }
  28. .welcome-card {
  29. position: relative;
  30. margin: -60rpx 32rpx 0;
  31. border-radius: 16rpx;
  32. overflow: hidden;
  33. background: #fff;
  34. }
  35. .card-bg {
  36. position: absolute;
  37. right: 0;
  38. bottom: 0;
  39. width: 160rpx;
  40. height: 160rpx;
  41. opacity: 0.8;
  42. z-index: 1;
  43. }
  44. .card-content {
  45. position: relative;
  46. padding: 40rpx 32rpx;
  47. z-index: 2;
  48. }
  49. .title {
  50. font-size: 36rpx;
  51. font-weight: 500;
  52. color: #333;
  53. margin-bottom: 12rpx;
  54. }
  55. .subtitle {
  56. font-size: 26rpx;
  57. color: #999;
  58. margin-bottom: 32rpx;
  59. letter-spacing: 4rpx;
  60. }
  61. .bind-button {
  62. width: 200rpx !important;
  63. height: 80rpx;
  64. line-height: 80rpx;
  65. background: #4080FF;
  66. color: #fff;
  67. font-size: 30rpx;
  68. border-radius: 40rpx;
  69. padding: 0;
  70. }
  71. .bind-button::after {
  72. border: none;
  73. }
  74. .notice-list {
  75. margin: 32rpx;
  76. color: #666;
  77. }
  78. .notice-item {
  79. font-size: 26rpx;
  80. line-height: 1.8;
  81. margin-bottom: 16rpx;
  82. color: #999;
  83. }
  84. .tab-bar {
  85. position: fixed;
  86. bottom: 0;
  87. width: 100%;
  88. height: 100rpx;
  89. background: #fff;
  90. display: flex;
  91. padding-bottom: env(safe-area-inset-bottom);
  92. border-top: 1rpx solid #eee;
  93. }
  94. .tab-item {
  95. flex: 1;
  96. display: flex;
  97. flex-direction: column;
  98. align-items: center;
  99. justify-content: center;
  100. font-size: 24rpx;
  101. color: #999;
  102. }
  103. .tab-item.active {
  104. color: #4080FF;
  105. }