index.less 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. .punchClock{
  2. position: relative;
  3. background: #F5F5F5;
  4. min-height: 100vh;
  5. padding: 25px;
  6. .header{
  7. background: #FFFFFF;
  8. padding: 30px;
  9. border-radius: 30px;
  10. margin-bottom: 20px;
  11. display: flex;
  12. flex-flow: row nowrap;
  13. align-items: center;
  14. .userAvatarUrl{
  15. width: 100px;
  16. height: 100px;
  17. border-radius: 20px;
  18. overflow: hidden;
  19. }
  20. .infor{
  21. padding-left: 15px;
  22. .name{
  23. font-size: 28px;
  24. padding-bottom: 18px;
  25. }
  26. .address{
  27. font-size: 25px;
  28. color: #8e8d8d;
  29. }
  30. }
  31. .state{
  32. margin-left: auto;
  33. font-size: 25px;
  34. align-self: flex-start;
  35. }
  36. }
  37. .content{
  38. background: #FFFFFF;
  39. padding: 30px;
  40. border-radius: 30px;
  41. margin-bottom: 20px;
  42. display: flex;
  43. flex-flow: column nowrap;
  44. align-items: center;
  45. .timeContent{
  46. width: 100%;
  47. padding-top: 20px;
  48. display: flex;
  49. flex-flow: row nowrap;
  50. justify-content: space-between;
  51. padding-bottom: 30px;
  52. .timeItem{
  53. background: #eae8e8;
  54. padding: 20px;
  55. border-radius: 20px;
  56. .timeTitle{
  57. font-size: 30px;
  58. padding-bottom: 8px;
  59. }
  60. .timeValue{
  61. font-size: 27px;
  62. color: #767272;
  63. }
  64. }
  65. }
  66. .map{
  67. height:600px;
  68. width:100%;
  69. border-radius: 20px;
  70. overflow: hidden;
  71. }
  72. .tips{
  73. color: #999999;
  74. font-size: 18px;
  75. padding-top: 10px;
  76. align-self: flex-start;
  77. }
  78. .punchClockContent{
  79. width: 250px;
  80. height: 250px;
  81. border-radius: 250px;
  82. margin-top: 45px;
  83. display: flex;
  84. flex-flow: column nowrap;
  85. justify-content: center;
  86. align-items: center;
  87. margin-bottom: 75px;
  88. .punchClockTitle{
  89. color: white;
  90. font-size: 35px;
  91. padding-bottom: 8px;
  92. }
  93. .punchClockTime{
  94. color: #e8e6e6;
  95. font-size: 25px;
  96. }
  97. }
  98. .photographContent{
  99. display: flex;
  100. flex-flow: row nowrap;
  101. align-items: center;
  102. justify-content: space-between;
  103. width: 100%;
  104. padding-left: 20px;
  105. padding-right: 20px;
  106. padding-bottom: 25px;
  107. .photographTitle{
  108. font-size: 30px;
  109. }
  110. .photograph{
  111. }
  112. }
  113. }
  114. }