index.wxss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. }
  37. .index-button-hover {
  38. background: #5874fa;
  39. }
  40. /**底部样式**/
  41. .index-bottom {
  42. display: flex;
  43. flex-wrap: wrap;
  44. height: 550rpx;
  45. justify-content: center;
  46. align-content: space-between;
  47. margin-top:70rpx;
  48. }
  49. .index-bottom-item {
  50. width: 330rpx;
  51. height: 250rpx;
  52. background: #fff;
  53. border-radius: 10rpx;
  54. display: flex;
  55. flex-direction: column;
  56. align-items: center;
  57. justify-content: center;
  58. margin: 0 20rpx;
  59. }
  60. .index-bottom-item image {
  61. width: 129rpx;
  62. height: 122rpx;
  63. margin-bottom: 20rpx;
  64. }
  65. .index-bottom-item text {
  66. font-size: 30rpx;
  67. color: #666;
  68. }