index.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. .container{
  2. margin-top: 90px;
  3. background-color: #E5E5E5;
  4. min-height: 760px;
  5. width: 100%;
  6. .banner{
  7. width:100%;
  8. }
  9. .section1{
  10. width: 100%;
  11. min-height: 104px;
  12. background-color: #FFF;
  13. margin: 3px auto;
  14. .row {
  15. display: flex; /* 设置为Flex布局 */
  16. width: 95%; /* 行宽度占满容器 */
  17. margin: 0 auto;
  18. }
  19. .column {
  20. flex: 1; /* 每列平均分配空间 */
  21. display: flex;
  22. flex-direction: column; /* 列内部元素垂直排列 */
  23. padding: 20px 3px;
  24. text-align: center; /* 文本居中 */
  25. }
  26. .cell {
  27. flex: 1; /* 在列内部,每行平均分配空间 */
  28. font-size: 16px;
  29. color: #666666;
  30. display: flex;
  31. font-weight: bold;
  32. padding: 0px 0px; /* 内边距 */
  33. .cl{
  34. text-align: left; /* 文本靠左 */
  35. }
  36. }
  37. .full-row {
  38. font-size: 14px;
  39. margin-top: -20px;
  40. text-align: center; /* 文本居中 */
  41. display: flex;
  42. width: 70%;
  43. .column {
  44. flex: 0 0 59px; /* 每列平均分配空间 */
  45. display: flex;
  46. flex-direction: column; /* 列内部元素垂直排列 */
  47. padding: 10px 0px 0px 10px;
  48. text-align: left; /* 文本居中 */
  49. }
  50. .column2 {
  51. flex: 0 0 7px; /* 每列平均分配空间 */
  52. display: flex;
  53. flex-direction: column; /* 列内部元素垂直排列 */
  54. padding: 15px 20px 0px 0px;
  55. text-align: left; /* 文本居中 */
  56. }
  57. }
  58. }
  59. .section2{
  60. width: 100%;
  61. min-height: 132px;
  62. background-color: #FFF;
  63. border-radius: 10px;
  64. margin: -28px auto;
  65. position: relative;
  66. display: flex;
  67. flex-direction: column; /* 子元素垂直排列 */
  68. align-items: center; /* 子元素在交叉轴上居中对齐 */
  69. .row {
  70. width: 95%; /* 行宽度占满容器 */
  71. padding: 10px 20px; /* 行内边距 */
  72. text-align: left; /* 文本居中 */
  73. border-bottom: 1px dotted #ccc; /* 每行的底部边框 */
  74. margin-top: 10px;
  75. margin-left: 5px;
  76. margin-right: 5px;
  77. display: flex;
  78. flex-wrap: nowrap;
  79. }
  80. .divider {
  81. width: 80%; /* 分割线宽度 */
  82. height: 2px; /* 分割线高度 */
  83. background-color: #000; /* 分割线颜色 */
  84. margin: 20px 0; /* 分割线的上下外边距 */
  85. }
  86. }
  87. .section3{
  88. width: 100%;
  89. min-height: 502px;
  90. .item{
  91. width: 100%;
  92. height: 180px;
  93. background-color: #FFF;
  94. margin-top: 5px;
  95. border-radius: 5px;
  96. display: flex;
  97. .item_img{
  98. margin: 15px 0px 10px 10px;
  99. width: 222px;
  100. height: 147px;
  101. border-radius: 7px;
  102. overflow: hidden;
  103. flex: 0 0 200px;
  104. img{
  105. width: 100%;
  106. height: 100%;
  107. }
  108. }
  109. .item_info{
  110. flex: 0 0 45%;
  111. line-height: 22px;
  112. height: 80px;
  113. .title{
  114. font-size: 14px;
  115. padding: 10px 10px 0px 15px;
  116. font-weight: bold;
  117. height: 75px;
  118. overflow: hidden;
  119. margin-bottom: 7px;
  120. }
  121. }
  122. }
  123. }
  124. .time_yuyue{
  125. width: 95%;
  126. padding: 2px 0px 0px 2px;
  127. font-size: 12px;
  128. color: #666666;
  129. display: flex;
  130. line-height: 18px;
  131. height: 30px;
  132. flex-wrap: wrap;
  133. .ico{
  134. padding-top: 2px;
  135. flex:0 0 20px;
  136. padding-left: 5px;
  137. }
  138. .time{
  139. flex:0 0 80%;
  140. text-align: left;
  141. }
  142. .didian{
  143. flex:0 0 80%;
  144. text-align: left;
  145. }
  146. }
  147. .yuyue_btn{
  148. margin-left: 70px;
  149. margin-top: 12px;
  150. image{
  151. justify-content: flex-end;
  152. }
  153. }
  154. }
  155. .slide-image{
  156. width: 100%;
  157. height: 300px;
  158. }