timeline.less 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. article, section, time, aside {
  6. display: block;
  7. }
  8. article {
  9. padding-top: 50px;
  10. }
  11. body {
  12. color: #9f9f9f;
  13. background: #fff;
  14. font-size: 1.16em;
  15. font-family: 'Lato', Calibri, Arial, sans-serif;
  16. }
  17. .point-time {
  18. content: "";
  19. position: absolute;
  20. width: 13px;
  21. height: 13px;
  22. top: 17px;
  23. left: 20%;
  24. background: #1c87bf;
  25. margin-left: -4px;
  26. border-radius: 50%;
  27. box-shadow: 0 0 0 5px #fff;
  28. }
  29. .text-red {
  30. color: #f6393f;
  31. }
  32. .text-blue {
  33. color: #1c87bf;
  34. }
  35. .text-green {
  36. color: #95c91e;
  37. }
  38. .text-yellow {
  39. color: #ffb902;
  40. }
  41. .text-purple {
  42. color: #d32d93;
  43. }
  44. .point-red {
  45. background-color: #f6393f;
  46. }
  47. .point-blue {
  48. background-color: #1c87bf;
  49. }
  50. .point-green {
  51. background-color: #95c91e;
  52. }
  53. .point-yellow {
  54. background-color: #ffb902;
  55. }
  56. .point-purple {
  57. background-color: #d32d93;
  58. }
  59. .content {
  60. width: 970px;
  61. margin: 30px auto;
  62. padding-top: 30px;
  63. margin-top: 10px;
  64. box-shadow: 5px 5px 17px 3px rgba(0,0,0,0.14);
  65. border-radius: 3px;
  66. /*color: rgba(0,0,0,0.87);*/
  67. background: #fff;
  68. box-sizing: border-box;
  69. position: relative;
  70. min-height: 450px;
  71. }
  72. .content article {
  73. position: relative;
  74. }
  75. .h3Div {
  76. line-height: 70px;
  77. padding-left: 70px;
  78. position: fixed;
  79. background: #fff;
  80. z-index: 2;
  81. width: 900px;
  82. top: 0;
  83. padding-top: 5px;
  84. font-size: 1.4em;
  85. color: #1d1d1d;
  86. box-shadow: rgba(0, 0, 0, 0.14) 5px -5px 26px 0px;
  87. }
  88. .content article div > .h3 {
  89. width: 15%;
  90. height: 20px;
  91. line-height: 20px;
  92. text-align: right;
  93. font-size: 1.4em;
  94. color: #1d1d1d;
  95. padding: 10px 0 20px;
  96. }
  97. .content article section {
  98. padding: 0 0 10px;
  99. position: relative;
  100. }
  101. .content article section:before {
  102. content: "";
  103. width: 5px;
  104. top: 17px;
  105. bottom: -17px;
  106. left: 20%;
  107. background: #e6e6e6;
  108. position: absolute;
  109. }
  110. .content article section:last-child:before {
  111. display: none;
  112. }
  113. .content article section time {
  114. width: 15%;
  115. display: block;
  116. position: absolute;
  117. }
  118. .content article section time > span {
  119. display: block;
  120. text-align: right;
  121. }
  122. .content article section aside {
  123. color: #3a3a38;
  124. margin-left: 25%;
  125. padding-bottom: 10px;
  126. }
  127. .content article section .brief {
  128. color: #9f9f9f;
  129. font-size: 15px;
  130. list-style: none;
  131. }
  132. .content .things {
  133. line-height: 30px;
  134. }
  135. .titleSpan {
  136. position: absolute;
  137. right: 50px;
  138. cursor: pointer;
  139. font-size: 14px;
  140. }