index.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. body {
  6. background-color: #ebf1fd;
  7. }
  8. .header {
  9. display: flex;
  10. flex-direction: column;
  11. background-color: white;
  12. }
  13. .header .time-message {
  14. display: flex;
  15. height: 44px;
  16. align-items: center;
  17. padding: 0 33.5px;
  18. justify-content: space-between;
  19. }
  20. .header .title {
  21. display: flex;
  22. align-items: center;
  23. justify-content: center;
  24. height: 44px;
  25. }
  26. .header .title span {
  27. font-weight: 500;
  28. font-size: 17px;
  29. }
  30. .img {
  31. width: 120px;
  32. height: 239px;
  33. position: absolute;
  34. top: 50%;
  35. left: 50%;
  36. transform: translate(-50%, -50%);
  37. display: flex;
  38. align-items: center;
  39. flex-direction: column;
  40. }
  41. .img_div {
  42. border-radius: 50%;
  43. overflow: hidden;
  44. width: 88px;
  45. height: 88px;
  46. border: 3px white solid;
  47. display: flex;
  48. justify-content: center;
  49. align-items: center;
  50. }
  51. .hello_text {
  52. font-size: 26px;
  53. font-weight: 600;
  54. position: absolute;
  55. top: 50%;
  56. left: 50%;
  57. transform: translate(-50%, -50%);
  58. }
  59. .hello_text_name {
  60. font-size: 20px;
  61. color: #3370ff;
  62. position: absolute;
  63. top: 50%;
  64. left: 50%;
  65. transform: translate(-50%, 50%);
  66. text-align: center;
  67. }
  68. .hello_text_welcome {
  69. position: absolute;
  70. bottom: 0;
  71. size: 20px;
  72. font-weight: 500;
  73. text-align: center;
  74. white-space: nowrap;
  75. }
  76. .icon {
  77. position: absolute;
  78. bottom: 44px;
  79. left: 50%;
  80. transform: translate(-50%, 0);
  81. }