time_record.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. .navi_bar {
  2. position: fixed;
  3. left: 0;
  4. right: 0;
  5. top: 0;
  6. }
  7. .time_card_bg {
  8. display: flex;
  9. flex-direction: row;
  10. padding-left: 40px;
  11. padding-right: 40px;
  12. justify-content: space-between;
  13. box-sizing: border-box;
  14. width: 750px;
  15. margin-top: 170px;
  16. }
  17. .time_card {
  18. width: 320px;
  19. border-radius: 24px;
  20. background-color: rgba($color: #ffffff, $alpha: 0.25);
  21. padding: 30px 0;
  22. box-sizing: border-box;
  23. display: flex;
  24. flex-direction: column;
  25. align-items: center;
  26. }
  27. .progress_card {
  28. display: flex;
  29. flex-direction: column;
  30. align-items: center;
  31. overflow: hidden;
  32. width: 698px;
  33. padding-bottom: 60px;
  34. border-radius: 84px;
  35. background-color: rgba($color: #ffffff, $alpha: 0.25);
  36. position: relative;
  37. }
  38. .eat_card {
  39. width: 698px;
  40. height: 168px;
  41. background-color: rgba($color: #ffffff, $alpha: 0.25);
  42. position: relative;
  43. border-radius: 42px;
  44. display: flex;
  45. flex-direction: column;
  46. align-items: center;
  47. justify-content: center;
  48. margin-top: 26px;
  49. }
  50. .eat_card_arrow{
  51. position: absolute;
  52. right: 30px;
  53. top: 0;
  54. bottom: 0;
  55. display: flex;
  56. align-items: center;
  57. justify-content: center;
  58. }
  59. .operate_content{
  60. display: flex;
  61. flex-direction: row;
  62. margin-bottom: 40px;
  63. }
  64. .operate_item{
  65. display: flex;
  66. flex-direction: column;
  67. align-items: center;
  68. width: 320px;
  69. }
  70. .share_icon{
  71. position: absolute;
  72. right: 48px;
  73. top:48px;
  74. }
  75. .share_bg{
  76. position: fixed;
  77. left: 0;
  78. top: 0;
  79. width: 100vw;
  80. height: 100vh;
  81. z-index: 100;
  82. background: linear-gradient(180deg, #000000 0%, #1A1A1A 100%);
  83. display: flex;
  84. flex-direction: column;
  85. align-items: center;
  86. justify-content: center;
  87. }
  88. .share_card{
  89. width: 698px;
  90. height: 932px;
  91. display: flex;
  92. border-radius: 84px;
  93. margin-bottom: 26px;
  94. flex-direction: column;
  95. overflow: hidden;
  96. align-items: center;
  97. }
  98. .share_canvas{
  99. position: absolute;
  100. top:-1000px;
  101. }