index.wxss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /**首页样式**/
  2. page {
  3. height: 100%;
  4. background: #eff3f8;
  5. }
  6. /** 顶部样式 **/
  7. .index-top {
  8. display: flex;
  9. flex-direction: column;
  10. align-items: center;
  11. background: #2f3e75;
  12. height: 36%;
  13. justify-content: center;
  14. }
  15. .index-top image {
  16. width: 180rpx;
  17. height: 180rpx;
  18. margin-bottom: 20rpx;
  19. margin-top: -20rpx;
  20. }
  21. .index-top text {
  22. color: #fff;
  23. font-size: 32rpx;
  24. }
  25. /**开始面杀样式**/
  26. .index-btn {
  27. width: 590rpx;
  28. height: 120rpx;
  29. background: #6882ff;
  30. color: #fff;
  31. line-height: 120rpx;
  32. text-align: center;
  33. margin-top: -60rpx;
  34. border-radius: 60rpx;
  35. font-size: 36rpx;
  36. margin-right: auto;
  37. margin-left: auto;
  38. }
  39. .index-button-hover {
  40. background: #5874fa;
  41. }
  42. /**底部样式**/
  43. .index-bottom {
  44. display: flex;
  45. flex-wrap: wrap;
  46. height: 550rpx;
  47. justify-content: center;
  48. align-content: space-between;
  49. margin-top:70rpx;
  50. }
  51. .index-bottom-item {
  52. width: 330rpx;
  53. height: 250rpx;
  54. background: #fff;
  55. border-radius: 10rpx;
  56. display: flex;
  57. flex-direction: column;
  58. align-items: center;
  59. justify-content: center;
  60. margin: 0 20rpx;
  61. }
  62. .index-bottom-item image {
  63. width: 129rpx;
  64. height: 122rpx;
  65. margin-bottom: 20rpx;
  66. }
  67. .index-bottom-item text {
  68. font-size: 30rpx;
  69. color: #666;
  70. }