msg_list.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. .flex-container {
  2. display: flex;
  3. flex-direction: column;
  4. flex-wrap: wrap;
  5. justify-content: space-between;
  6. height: 100%;
  7. width: 100%;
  8. section {
  9. overflow: hidden;
  10. margin: 3px;
  11. padding: 2px;
  12. color: #eeeeee;
  13. background-color: #23262d;
  14. ul {
  15. li {
  16. display: flex;
  17. padding: 5px;
  18. .cont {
  19. font-size: 16px;
  20. }
  21. }
  22. }
  23. }
  24. }
  25. #secA {
  26. height: 32%;
  27. }
  28. #secB {
  29. height: 32%;
  30. ul.title{
  31. height: 100%;
  32. margin-bottom: 0;
  33. li{
  34. font-weight: 800;
  35. font-size: 18px;
  36. writing-mode: vertical-lr;
  37. }
  38. }
  39. }
  40. #secC {
  41. position: relative;
  42. height: 32%;
  43. }
  44. #weather {
  45. margin-right: 200px;
  46. height: 100%;
  47. #weatherArea {
  48. margin: auto 0;
  49. }
  50. }
  51. #clock {
  52. position: absolute;
  53. top: 0;
  54. right: 0;
  55. width: 200px;
  56. background-color: #0055a6;
  57. height: 100%;
  58. display: flex;
  59. flex-direction: column;
  60. flex-wrap: wrap;
  61. justify-content: space-around;
  62. .time {
  63. text-align: center;
  64. height: 20px;
  65. }
  66. .pic {
  67. width: 80px;
  68. margin: 0 auto;
  69. img{
  70. width: 100%;
  71. }
  72. .feelTemper {
  73. text-align: center;
  74. font-size: 28px;
  75. font-weight: bold;
  76. }
  77. }
  78. .otherWeather {
  79. height: 20px;
  80. padding-left: 6px;
  81. span {
  82. display: inline-block;
  83. width: 48%;
  84. text-align: center;
  85. }
  86. }
  87. }