company_product.css 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. /* ���岼�� */
  2. body{
  3. /*font:14px "宋体",Arial,Helvetica,sans-serif;*/
  4. /*font-family: FZY3JW--GB1-0;*/
  5. font-family: '思源宋体 CN Medium'; /*这里是说明调用来的字体名字*/
  6. src: url('../../../../data/font/SourceHanSerifCN-Medium.otf'); /*这里是字体文件路径*/
  7. color:#A1A1A1;
  8. margin:0;
  9. padding:0;
  10. /* background-image:linear-gradient(to top,#282828 0,#101010 100%); */
  11. min-width: 1280px;
  12. background: #F8F9FD;
  13. }
  14. ul,li,p,h1,h2,h3,h4,h5,h6,dl,dd{
  15. margin:0;
  16. padding:0;
  17. list-style:none;
  18. }
  19. .lf{float:left;}
  20. .rt{float:right;}
  21. .clear{clear:both;}
  22. img{
  23. /*width:1920px;*/
  24. /*height:568px;*/
  25. vertical-align:bottom;
  26. }
  27. a{
  28. color:#9A9A96;
  29. text-decoration:none;
  30. }
  31. a:hover{
  32. color:#D9D9D9;
  33. text-decoration:none;
  34. }
  35. /*���岼��*/
  36. .dynamics_promotion{
  37. width: 80%;
  38. height: 370px;
  39. margin: 0 auto;
  40. /*background: yellow;*/
  41. overflow: hidden;
  42. }
  43. .dynamics_promotion div{
  44. width: 18%;
  45. height: 85%;
  46. margin-right: 2.5%;
  47. margin-top: 30px;
  48. float: left;
  49. position: relative;
  50. overflow: hidden;
  51. /*background: royalblue;*/
  52. }
  53. .dynamics_promotion div:last-child{
  54. margin-right: 0;
  55. }
  56. .dynamics_promotion div a img{
  57. /*width: 300px;*/
  58. /*height: 300px; */
  59. width: 100%;
  60. height: 100%;
  61. border-radius: 8px;
  62. overflow: hidden;
  63. position: absolute;
  64. /*overflow: hidden;*/
  65. }
  66. .dynamics_promotion div a p{
  67. width: 100%;
  68. height: 35px;
  69. line-height: 35px;
  70. text-align: center;
  71. position: absolute;
  72. top: 90%;
  73. left: 0;
  74. /*color: #1A1A1A;*/
  75. color: #282828;
  76. /*background: #D1BF5B;*/
  77. background: #fff;
  78. border-bottom-left-radius: 8px;
  79. border-bottom-right-radius: 8px;
  80. opacity: .5;
  81. font-size: 14px;
  82. }
  83. /*.promotion .dynamics_promotion .promotion_img div{*/
  84. /*.promotion .dynamics_promotion .promotion_img article{*/
  85. /*width: 100%;*/
  86. /*height: 70%;*/
  87. /*!*background: red;*!*/
  88. /*border-radius: 8px;*/
  89. /*position: absolute;*/
  90. /*!*background: red;*!*/
  91. /*margin-right: 30px;*/
  92. /*float: left;*/
  93. /*}*/
  94. /*.dynamics_promotion .promotion_img div a img{*/
  95. .dynamics_promotion .promotion_img article a img{
  96. width: 100%;
  97. height: 90%;
  98. }
  99. /*.promotion_img div p{*/
  100. .promotion_img article p{
  101. width: 100%;
  102. height: 20px;
  103. text-align: center;
  104. position: absolute;
  105. top: 90%;
  106. left: 0;
  107. color: #4C5458;
  108. }
  109. .promotion_img{
  110. width: 80%;
  111. /*height: 560px;*/
  112. height: auto;
  113. margin: 0 auto;
  114. /*background: yellow;*/
  115. overflow: hidden;
  116. }
  117. /*.promotion_img div{*/
  118. .promotion_img article{
  119. /*width: 300px;*/
  120. /*height: 300px; */
  121. width: 18%;
  122. /*height: 48%;*/
  123. /*margin-right: 30px;*/
  124. margin-right: 2.5%;
  125. margin-bottom: 20px;
  126. float: left;
  127. position: relative;
  128. overflow: hidden;
  129. background: #fff;
  130. border-bottom-left-radius: 8px;
  131. border-bottom-right-radius: 8px;
  132. }
  133. .promotion_img article img{
  134. width: 100%;
  135. height: auto;
  136. max-width: 100%;
  137. max-height: 100%;
  138. }
  139. /*.promotion_img div:nth-child(5),.promotion_img div:last-child{*/
  140. .promotion_img article:nth-child(5),.promotion_img article:last-child{
  141. margin-right: 0;
  142. }
  143. /*.promotion_img div a img{*/
  144. .promotion_img article a img{
  145. /*width: 100%;*/
  146. /*!*height: 90%;*!*/
  147. /*height: 88%;*/
  148. width: 100%;
  149. height: auto;
  150. /*border-radius: 8px;*/
  151. overflow: hidden;
  152. position: absolute;
  153. border-top-left-radius: 8px;
  154. border-top-right-radius: 8px;
  155. }
  156. /*.promotion_img div p {*/
  157. .promotion_img article p {
  158. width: 100%;
  159. /*height: 23px;*/
  160. height: 32px;
  161. line-height: 32px;
  162. text-align: center;
  163. position: absolute;
  164. /*top:90%;*/
  165. top: 83%;
  166. left: 0;
  167. color: #000;
  168. font-size: 16px;
  169. font-weight: bold;
  170. /*background: red;*/
  171. }
  172. .page_box{
  173. width: 80%;
  174. height: 30px;
  175. line-height: 30px;
  176. /*background: red;*/
  177. margin: 0 auto 80px;
  178. }
  179. .pagination{
  180. width: 600px;
  181. height: 30px;
  182. margin: 0 auto;
  183. /*background: yellow;*/
  184. display: flex;
  185. display: -webkit-flex;
  186. justify-content: space-between;
  187. }
  188. .pagination li{
  189. float: left;
  190. cursor: pointer;
  191. box-sizing: border-box;
  192. border: 1px solid #aaa;
  193. text-align: center;
  194. width: 30px;
  195. height: 30px;
  196. color: #000;
  197. border-radius: 5px;
  198. }
  199. .pagination li a{
  200. display: block;
  201. width: 100%;
  202. height: 100%;
  203. color: #000;
  204. }
  205. .pagination .last+li{
  206. width: auto;
  207. }
  208. .pagination li:hover{
  209. background: #666FE8;
  210. }
  211. .pagination li:hover span{
  212. color: #fff;
  213. }
  214. .pagination li:hover a{
  215. color: #fff;
  216. }
  217. .pagination .first,.pagination .prev,.pagination .next,.pagination .last{
  218. width: auto;
  219. }