index.module.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. .home {
  2. width: 100%;
  3. height: 100%;
  4. :global {
  5. .back {
  6. width: 75px;
  7. height: 60px;
  8. position: absolute;
  9. top: 50%;
  10. left: 50%;
  11. cursor: pointer;
  12. transform: translate(-900px, -410px);
  13. img {
  14. object-fit: contain;
  15. width: 100%;
  16. height: 100%;
  17. }
  18. }
  19. .title {
  20. width: 750px;
  21. height: 200px;
  22. position: absolute;
  23. top: 50%;
  24. left: 50%;
  25. transform: translate(-50%, -350px);
  26. img {
  27. object-fit: contain;
  28. width: 100%;
  29. height: 100%;
  30. }
  31. }
  32. .content {
  33. margin-top: 20px;
  34. width: 752px;
  35. height: 98px;
  36. display: flex;
  37. align-items: center;
  38. justify-content: center;
  39. font-size: 28px;
  40. line-height: 40px;
  41. color: #fff;
  42. text-align: center;
  43. position: absolute;
  44. top: 50%;
  45. left: 50%;
  46. transform: translate(-50%, -120px);
  47. background: url('../../assets/img/rule-info.svg') no-repeat center / contain;
  48. }
  49. .btn-group {
  50. width: 270px;
  51. height: 200px;
  52. position: absolute;
  53. top: 50%;
  54. left: 50%;
  55. transform: translate(-50%, 160px);
  56. display: flex;
  57. align-items: center;
  58. flex-direction: column;
  59. justify-content: center;
  60. gap: 35px;
  61. .btn-start, .btn-rank {
  62. width: 100%;
  63. height: 80px;
  64. cursor: pointer;
  65. }
  66. }
  67. }
  68. }