index.wxss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. page,
  12. .container {
  13. min-height: 100%;
  14. height: auto;
  15. background: #ffffff;
  16. }
  17. image {
  18. width: 100%;
  19. height: 100%;
  20. }
  21. .banner {
  22. width: 750rpx;
  23. height: 375rpx;
  24. position: relative;
  25. }
  26. .banner .carousel {
  27. width: 750rpx;
  28. height: 375rpx;
  29. }
  30. .banner .carousel .carousel-item {
  31. width: 100%;
  32. height: 100%;
  33. }
  34. .banner .swiper-dots {
  35. position: absolute;
  36. bottom: 16rpx;
  37. left: 0;
  38. right: 0;
  39. display: flex;
  40. justify-content: center;
  41. }
  42. .banner .swiper-dots .swiper-dots-item {
  43. margin: 0 5rpx;
  44. width: 10rpx;
  45. height: 10rpx;
  46. background: #ffffff;
  47. border-radius: 50%;
  48. }
  49. .banner .swiper-dots .current {
  50. opacity: 0.71;
  51. }
  52. .swiper-btm {
  53. height: 60rpx;
  54. width: 750rpx;
  55. background-color: #ebf7f5;
  56. margin-bottom: 20rpx;
  57. font-size: 21rpx;
  58. font-weight: 500;
  59. color: #7c8584;
  60. }
  61. .swiper-btm .btm-item {
  62. flex-grow: 1;
  63. justify-content: center;
  64. }
  65. .swiper-btm .btm-item .image1 {
  66. width: 28rpx;
  67. height: 24rpx;
  68. margin-right: 14rpx;
  69. }
  70. .swiper-btm .btm-item .image2 {
  71. width: 24rpx;
  72. height: 24rpx;
  73. margin-right: 14rpx;
  74. }
  75. .swiper-btm .btm-item .image3 {
  76. width: 28rpx;
  77. height: 24rpx;
  78. margin-right: 14rpx;
  79. }
  80. .main {
  81. margin: 30rpx auto 0;
  82. width: 702rpx;
  83. background: #ffffff;
  84. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  85. border-radius: 10rpx;
  86. padding: 30rpx 0 33rpx;
  87. }
  88. .main .main-item {
  89. width: 33%;
  90. display: flex;
  91. flex-direction: column;
  92. align-items: center;
  93. }
  94. .main .main-item .main-image {
  95. width: 82rpx;
  96. height: 82rpx;
  97. }
  98. .main .main-item .main-font {
  99. margin-top: 8rpx;
  100. font-size: 28rpx;
  101. font-family: PingFang SC;
  102. font-weight: bold;
  103. color: #262626;
  104. }
  105. .title {
  106. margin: 40rpx 0 0 24rpx;
  107. display: flex;
  108. align-items: center;
  109. }
  110. .title .xian {
  111. width: 9rpx;
  112. height: 30rpx;
  113. background: #45bc9a;
  114. border-radius: 5rpx;
  115. }
  116. .title .title-font {
  117. margin-left: 20rpx;
  118. font-size: 30rpx;
  119. font-family: PingFang SC;
  120. font-weight: bold;
  121. color: #262626;
  122. }
  123. .dbfw {
  124. margin-top: 34rpx;
  125. flex-wrap: wrap;
  126. justify-content: space-around;
  127. }
  128. .dbfw .dbfw-item {
  129. margin-top: 28rpx;
  130. width: 340rpx;
  131. height: 116rpx;
  132. background: #ffffff;
  133. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  134. border-radius: 15rpx;
  135. padding: 20rpx 18rpx;
  136. display: flex;
  137. align-items: center;
  138. }
  139. .dbfw .dbfw-item .dbfw-left {
  140. width: 76rpx;
  141. height: 76rpx;
  142. }
  143. .dbfw .dbfw-item .dbfw-right {
  144. margin-left: 18rpx;
  145. line-height: 1;
  146. }
  147. .dbfw .dbfw-item .dbfw-right .dbfw-title {
  148. font-size: 30rpx;
  149. font-family: PingFang SC;
  150. font-weight: bold;
  151. color: #000000;
  152. }
  153. .dbfw .dbfw-item .dbfw-right .dbfw-tip {
  154. margin-top: 10rpx;
  155. font-size: 22rpx;
  156. font-family: PingFang SC;
  157. font-weight: 500;
  158. color: #999999;
  159. }
  160. .card {
  161. margin: 18rpx auto 0;
  162. width: 750rpx;
  163. height: 210rpx;
  164. }
  165. .listBox {
  166. margin-top: 28rpx;
  167. }
  168. .list {
  169. margin-top: 20rpx;
  170. margin-bottom: 50rpx;
  171. padding-left: 34rpx;
  172. padding-right: 40rpx;
  173. display: flex;
  174. }
  175. .list .img {
  176. background-color: #ffffff;
  177. width: 200rpx;
  178. height: 160rpx;
  179. flex-shrink: 0;
  180. }
  181. .list .img image {
  182. width: 100%;
  183. height: 100%;
  184. }
  185. .list .right {
  186. text-align: left;
  187. width: 476rpx;
  188. padding-left: 20rpx;
  189. display: flex;
  190. flex-direction: column;
  191. justify-content: space-between;
  192. }
  193. .list .right .r-title {
  194. font-size: 32rpx;
  195. font-weight: 400;
  196. color: #333333;
  197. }
  198. .list .right .time {
  199. font-size: 26rpx;
  200. font-weight: 400;
  201. color: #999999;
  202. }