星火官网,前端页面(前台)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.css 6.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. .home_swiper_container.swiper-container .swiper-slide img {
  2. display: block;
  3. width: 100%;
  4. height: 9.42rem;
  5. object-fit: cover;
  6. }
  7. .home_swiper_container.swiper-container .swiper-wrapper .swiper-slide::after {
  8. content: "";
  9. position: absolute;
  10. width: 100%;
  11. height: 9.42rem;
  12. left: 0;
  13. top: 0;
  14. z-index: 1;
  15. background: linear-gradient(
  16. 180deg,
  17. rgba(50, 55, 62, 0) 30.34%,
  18. rgba(13, 27, 46, 0.7) 100%
  19. );
  20. }
  21. .home_main {
  22. background-color: #fff;
  23. }
  24. .home_superiority_title {
  25. margin: 0 auto;
  26. width: 13rem;
  27. padding: 1rem 0;
  28. font-size: 0.4rem;
  29. font-weight: 700;
  30. text-align: center;
  31. color: #333;
  32. }
  33. .home_superiority_info {
  34. display: flex;
  35. justify-content: space-between;
  36. align-items: center;
  37. margin: 0 auto;
  38. width: 13rem;
  39. height: 3.3rem;
  40. }
  41. .home_superiority_info .superiority_item {
  42. max-width: 25%;
  43. text-align: center;
  44. }
  45. .home_superiority_info .superiority_item_img {
  46. display: block;
  47. margin: 0 auto;
  48. width: 0.84rem;
  49. }
  50. .home_superiority_info .superiority_item_title {
  51. padding: 0.25rem 0;
  52. font-size: 0.28rem;
  53. color: #333;
  54. }
  55. .home_superiority_info .superiority_item_stitle {
  56. font-size: 0.16rem;
  57. color: #999;
  58. line-height: 0.3rem;
  59. }
  60. .home_scheme_info {
  61. display: flex;
  62. justify-content: space-between;
  63. align-items: center;
  64. margin: 0 auto;
  65. padding: 0.7rem 0;
  66. width: 13rem;
  67. }
  68. .home_scheme_info .scheme_left {
  69. width: 4.74rem;
  70. }
  71. .home_scheme_info .scheme_left .scheme_left_title {
  72. padding: 0.3rem 0;
  73. font-size: 0.28rem;
  74. color: #333;
  75. }
  76. .home_scheme_info .scheme_left .scheme_left_stitle {
  77. font-size: 0.18rem;
  78. color: #999;
  79. line-height: 0.32rem;
  80. }
  81. .home_scheme_info .scheme_right {
  82. display: inline-block;
  83. width: 8.25rem;
  84. }
  85. .home_scheme_info .scheme_left_btn {
  86. position: relative;
  87. margin-top: 1rem;
  88. width: 2rem;
  89. height: 0.58rem;
  90. font-size: 0.16rem;
  91. font-weight: 700;
  92. border: 0.01rem solid #333;
  93. transition: all .3s ease-out;
  94. -webkit-transition: all .3s ease-out;
  95. cursor: pointer;
  96. }
  97. .home_scheme_info .scheme_left_btn .mask_bg {
  98. position: absolute;
  99. top: 0;
  100. left: 0;
  101. bottom: 0;
  102. margin: 0;
  103. width: 0;
  104. height: 0.58rem;
  105. transition: all .3s ease-out;
  106. -webkit-transition: all .3s ease-out;
  107. }
  108. .home_scheme_info .scheme_left_btn:hover .mask_bg {
  109. position: absolute;
  110. top: 0;
  111. left: 0;
  112. right: 0;
  113. bottom: 0;
  114. margin: 0;
  115. width: 2rem;
  116. height: 0.58rem;
  117. }
  118. .home_scheme_info .scheme_left_btn .scheme_btn_info {
  119. position: relative;
  120. display: flex;
  121. justify-content: center;
  122. align-items: center;
  123. height: 100%;
  124. z-index: 999;
  125. }
  126. .home_scheme_info .scheme_left_btn:hover {
  127. color: #fff;
  128. border: 0.01rem solid #2D8CF0;
  129. }
  130. .home_scheme_info .scheme_left_btn img {
  131. margin-left: 0.2rem;
  132. width: 0.2rem;
  133. height: 0.06rem;
  134. }
  135. .home_scheme_info .scheme_left_btn .jiantou_right {
  136. display: block;
  137. }
  138. .home_scheme_info .scheme_left_btn .jiantou_right1 {
  139. display: none;
  140. }
  141. .home_scheme_info .scheme_left_btn:hover .jiantou_right {
  142. display: none;
  143. }
  144. .home_scheme_info .scheme_left_btn:hover .jiantou_right1 {
  145. display: block;
  146. }
  147. .home_introduce_title {
  148. padding-top: 0.68rem;
  149. font-size: 0.4rem;
  150. color: #000;
  151. text-align: center;
  152. }
  153. .home_introduce_stitle {
  154. padding: 0.22rem 0 0.68rem;
  155. font-size: 0.16rem;
  156. color: #000;
  157. text-align: center;
  158. }
  159. .home_introduce_main {
  160. display: flex;
  161. justify-content: space-between;
  162. align-items: center;
  163. margin: 0 auto 0.5rem;
  164. padding: 0.75rem 0;
  165. width: 13rem;
  166. background-color: #fff;
  167. color: #666;
  168. font-size: 0.16rem;
  169. }
  170. .home_introduce_left {
  171. margin-left: 0.35rem;
  172. width: 3rem;
  173. }
  174. .home_introduce_left .introduce_left_title {
  175. margin-bottom: 0.68rem;
  176. font-size: 0.28rem;
  177. color: #333;
  178. }
  179. .home_introduce_left .introduce_left_content {
  180. line-height: 0.3rem;
  181. }
  182. .home_introduce_left .introduce_left_content_top {
  183. margin-bottom: 0.3rem;
  184. }
  185. .home_introduce_right {
  186. position: relative;
  187. width: 9.65rem;
  188. }
  189. .home_introduce_right .right_main_img {
  190. width: 3.958rem;
  191. /* height: 3.8rem; */
  192. }
  193. .home_introduce_right .right_small_box1 {
  194. position: absolute;
  195. top: 0.4rem;
  196. right: 0rem;
  197. padding-left: 1.2rem;
  198. width: 6rem;
  199. height: 1.1rem;
  200. background-color: #fff;
  201. background-position: top left;
  202. background: url("../img/home/intro/bine01.png");
  203. background-size: 90% 100%;
  204. background-repeat: no-repeat;
  205. box-sizing: border-box;
  206. }
  207. .home_introduce_right .right_small_box2 {
  208. position: absolute;
  209. top: 1.3rem;
  210. right: 0.45rem;
  211. padding-left: 1.2rem;
  212. width: 6rem;
  213. height: 1.1rem;
  214. background-color: #fff;
  215. background-position: top left;
  216. background: url("../img/home/intro/bine02.png");
  217. background-size: 90% 100%;
  218. background-repeat: no-repeat;
  219. box-sizing: border-box;
  220. }
  221. .home_introduce_right .right_small_box3 {
  222. position: absolute;
  223. top: 2.2rem;
  224. right: 0.8rem;
  225. padding-left: 1.2rem;
  226. width: 6rem;
  227. height: 1.1rem;
  228. background-color: #fff;
  229. background-position: top left;
  230. background: url("../img/home/intro/bine03.png");
  231. background-size: 90% 100%;
  232. background-repeat: no-repeat;
  233. box-sizing: border-box;
  234. }
  235. .home_introduce_right .right_small_box4 {
  236. position: absolute;
  237. top: 3.05rem;
  238. right: 1.15rem;
  239. padding-left: 1.2rem;
  240. width: 6rem;
  241. height: 1.1rem;
  242. background-color: #fff;
  243. background-position: top left;
  244. background: url("../img/home/intro/bine04.png");
  245. background-size: 90% 100%;
  246. background-repeat: no-repeat;
  247. box-sizing: border-box;
  248. }
  249. .introduce_right_title {
  250. margin-top: 0.3rem;
  251. margin-bottom: 0.15rem;
  252. padding-left: 0.06rem;
  253. border-left: 0.04rem solid #2D8CF0;
  254. font-size: 0.18rem;
  255. color: #333;
  256. font-weight: 700;
  257. }
  258. .introduce_right_stitle {
  259. font-size: 0.12rem;
  260. }
  261. .home_serve {
  262. background-color: #fff;
  263. }
  264. .home_serve_main {
  265. margin: 0 auto;
  266. width: 13rem;
  267. text-align: center;
  268. background-color: #fff;
  269. }
  270. .home_serve_main .home_serve_title {
  271. padding: 1.07rem 0;
  272. font-size: 0.4rem;
  273. line-height: 0.6rem;
  274. font-weight: 700;
  275. color: #151720;
  276. }
  277. .home_serve_main .home_serve_item_box {
  278. display: flex;
  279. justify-content: space-between;
  280. align-items: center;
  281. }
  282. .home_serve_item_box .home_serve_item {
  283. padding-bottom: 1rem;
  284. width: 20%;
  285. line-height: 0.3rem;
  286. text-align: center;
  287. }
  288. .home_serve_item img {
  289. display: block;
  290. margin: 0 auto;
  291. width: 0.54rem;
  292. height: 0.54rem;
  293. }
  294. .home_serve_item .home_serve_item_title {
  295. padding: 0.27rem 0;
  296. font-size: 0.24rem;
  297. color: #000;
  298. }
  299. .home_serve_item .home_serve_item_stitle {
  300. font-size: 0.16rem;
  301. color: #666;
  302. }