serviceDetails.css 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  1. /*
  2. @update:2018/06/20
  3. */
  4. /* 面包削导航 */
  5. .navigation{
  6. width: 100%;
  7. height: 34px;
  8. line-height: 34px;
  9. background: #f9f9f9;
  10. overflow: hidden;
  11. margin-top: 10px;
  12. margin-bottom: 22px;
  13. }
  14. .navigation p{
  15. float: left;
  16. font-size: 14px;
  17. margin-right: 12px;
  18. color: #393939;
  19. }
  20. .navigation ol li {
  21. float: left;
  22. margin-right: 15px;
  23. }
  24. .navigation ol li a{
  25. font-size: 12px;
  26. color: #797979;
  27. }
  28. .navigation ol li a:hover{
  29. color: #1697ea;
  30. }
  31. .navigation ol li.active a{
  32. color: #1697ea;
  33. }
  34. /* 主体内容 */
  35. .serviceDetailsImg{
  36. float: left;
  37. width: 370px;
  38. height: 268px;
  39. position: relative;
  40. overflow: hidden;
  41. padding: 18px;
  42. border: 1px solid #efefef;
  43. }
  44. .serviceDetailsImg:hover img{
  45. transform: scale(1.05);
  46. transition: all .2s ease-in;
  47. }
  48. .serviceDetailsImg img{
  49. width:100%;
  50. height: 100%;
  51. display: inline-block;
  52. transition: all .2s ease-in-out;
  53. }
  54. .serviceDetailsImg span{
  55. width: 46px;
  56. height: 40px;
  57. display: inline-block;
  58. background: url(../../../img/newMenu/achievement_26.png) no-repeat;
  59. background-size: 100% 100%;
  60. position: absolute;
  61. top: 0;
  62. left: 0
  63. }
  64. .serviceDetailsTxt{
  65. float: right;
  66. width: 818px;
  67. }
  68. .serviceDetailsTxt .serviceDetailsTitle{
  69. border: 1px solid #efefef;
  70. padding-bottom: 20px;
  71. }
  72. .serviceDetailsTxt .serviceDetailsTitle h4{
  73. font-size: 18px;
  74. line-height: 50px;
  75. height: 50px;
  76. padding-left: 22px;
  77. width: 100%;
  78. background: #f9f9f9;
  79. color: #1f1f1f;
  80. font-weight: 400;
  81. margin-bottom: 12px;
  82. }
  83. .serviceDetailsTxt .serviceDetailsTitle p{
  84. padding-left: 22px;
  85. }
  86. .serviceDetailsTxt .serviceDetailsTitle p{
  87. height: 36px;
  88. line-height: 36px;
  89. font-size: 12px;
  90. }
  91. .serviceDetailsTxt .serviceDetailsTitle p strong{
  92. font-weight: normal;
  93. color: #707070;
  94. width: 110px;
  95. display: inline-block;
  96. }
  97. .serviceDetailsTxt .serviceDetailsTitle p span{
  98. color: #9d9d9d;
  99. font-size: 12px;
  100. }
  101. .serviceDetailsTxt a{
  102. cursor: pointer;
  103. width: 150px;
  104. float: right;
  105. display: inline-block;
  106. height: 54px;
  107. line-height: 54px;
  108. text-align: center;
  109. font-size: 18px;
  110. color: #ffffff;
  111. background: #1697ea;
  112. margin-top: 16px;
  113. }
  114. .serviceDetailsTxt a:hover{
  115. background: #ffff;
  116. border: 1px dashed #1697ea;
  117. color: #1697ea;
  118. }
  119. .collection{
  120. overflow: hidden;
  121. clear: both;
  122. padding-left: 18px;
  123. padding-top: 18px;
  124. }
  125. .collection p span{
  126. vertical-align: top;
  127. color: #ff6a25
  128. }
  129. .collection p img{
  130. margin-right: 12px;
  131. }
  132. .collection .heart{
  133. width: 19px;
  134. height: 18px;
  135. display: inline-block;
  136. background: url(../../../img/newMenu/serviceDetal_03.jpg) no-repeat;
  137. background-size:100% 100%;
  138. margin-right: 12px;
  139. }
  140. .collection p{
  141. cursor: pointer;
  142. float: left;
  143. height: 18px;
  144. line-height: 18px;
  145. font-size: 14px;
  146. margin-right: 40px;
  147. }
  148. .collection .heart.active{
  149. background: url(../../../img/newMenu/serviceDetal_Ok.jpg) no-repeat;
  150. }
  151. /*
  152. 详情
  153. */
  154. .serviceDetailsList{
  155. padding-top: 40px;
  156. width: 100%;
  157. clear: both;
  158. }
  159. .serviceDetailsList .introduction,.serviceDetailsList .requirement{
  160. background: #ffffff;
  161. border: 1px solid #eeeeee;
  162. padding-bottom: 28px;
  163. }
  164. .serviceDetailsList>div{
  165. margin-bottom: 38px;
  166. }
  167. .serviceDetailsList .introduction h3,.serviceDetailsList .requirement h3{
  168. width: 100%;
  169. height: 52px;
  170. line-height: 52px;
  171. font-size: 14px;
  172. color: #1f1f1f;
  173. padding-left: 20px;
  174. background: #f8f8f8;
  175. margin-bottom: 20px;
  176. }
  177. .serviceDetailsList .introduction p,.serviceDetailsList .requirement p{
  178. padding:0 20px;
  179. line-height: 24px;
  180. font-size: 12px;
  181. text-align: justify;
  182. color: #707070;
  183. }
  184. .serviceDetailsList .value{
  185. overflow: hidden;
  186. background: #ffffff;
  187. border: 1px solid #eeeeee;
  188. }
  189. .serviceDetailsList .value h4{
  190. height: 100%;
  191. width: 170px;
  192. vertical-align: middle;
  193. font-size: 14px;
  194. text-align: center;
  195. float: left;
  196. background: #f8f8f8;
  197. }
  198. .serviceDetailsList .value div{
  199. padding-top: 10px;
  200. padding-bottom: 10px;
  201. padding-right: 10px;
  202. width: 1028px;
  203. display: inline-block;
  204. float: left;
  205. line-height: 24px;
  206. padding-left: 20px;
  207. font-size: 12px;
  208. color: #707070;
  209. word-wrap:break-word
  210. }
  211. .serviceDetailsTxt .shopCar{
  212. margin-left: 10px;
  213. }
  214. /* 购物车 */
  215. .shopImg{
  216. position: absolute;
  217. top: 20px;
  218. left: 20px;
  219. z-index: -11;
  220. width: 300px;
  221. height:200px;
  222. transition: all .3s ease-in-out;
  223. opacity: 1;
  224. }
  225. .shopImg.active{
  226. position: fixed;
  227. top: 20px;
  228. right: 500px;
  229. width:0px;
  230. height: 0px;
  231. z-index: 99988;
  232. transition: all .3s ease-in;
  233. opacity: 0;
  234. }
  235. .serviceDetailsTitle p{
  236. clear: both;
  237. }
  238. .numberDiv .input-group{
  239. width: 130px;
  240. margin-left: 85px;
  241. }
  242. .numberDiv{
  243. padding-left: 22px;
  244. overflow: hidden;
  245. }
  246. .numberDiv div{
  247. height: 34px;
  248. line-height: 34px;
  249. font-size: 12px;
  250. color: #707070;
  251. float: left;
  252. }
  253. .shopCar span{
  254. display: inline-block;
  255. margin-right: 5px;
  256. }
  257. .numberDiv div #number{
  258. width: 62px;
  259. border-radius: 5px;
  260. margin-right: 10px;
  261. }
  262. .tabEvaluate{
  263. clear: both;
  264. margin-top: 40px;
  265. width: 100%;
  266. height: 42px;
  267. line-height: 42px;
  268. border: 1px solid #efefef;
  269. background: #fcfcfc;
  270. }
  271. .tabEvaluate li{
  272. cursor: pointer;
  273. float: left;
  274. width: 120px;
  275. text-align: center;
  276. font-size: 16px;
  277. color: #1f1f1f;
  278. border-right: 1px solid #efefef
  279. }
  280. .tabEvaluate li.active{
  281. background: #1697ea;
  282. color: #ffffff;
  283. }
  284. /* 评论 */
  285. .pagination_box{
  286. display: none;
  287. }
  288. .evaluateList .list_none{
  289. padding-top: 20px;
  290. text-align: center;
  291. padding-bottom: 100px;
  292. }
  293. .evaluateList{
  294. display: none;
  295. clear: both;
  296. }
  297. .evaluateList>ul>li {
  298. border-bottom: 1px dotted #efefef;
  299. padding-left: 26px;
  300. overflow: hidden;
  301. }
  302. .evaluateList>ul>li p{
  303. font-size: 14px;
  304. color: #1f1f1f;
  305. float: left;
  306. }
  307. .evaluateList>ul>li>div.stasf{
  308. width: 370px;
  309. overflow: hidden;
  310. padding: 45px 0 34px;;
  311. }
  312. .evaluateList>ul>li>div.stasf>p{
  313. margin-right: 50px;
  314. }
  315. .evaluateList ul>li .satisfied{
  316. float: left;
  317. }
  318. .evaluateList .uName{
  319. margin-left: 10px;
  320. }
  321. .satisfied ol li {
  322. float: left;
  323. }
  324. .satisfied ol li span{
  325. color: #ff580e;
  326. }
  327. .satisfied ol{
  328. float: right;
  329. margin-left: 8px;
  330. font-size: 16px;
  331. }
  332. .satisfiedContent {
  333. clear: both;
  334. overflow: hidden;
  335. padding-bottom: 27px;
  336. }
  337. .satisfiedContent p{
  338. padding-right:20px;
  339. font-size: 12px;
  340. color: #707070!important;
  341. }
  342. .satisfiedContent time{
  343. font-size: 12px;
  344. color: #707070!important;
  345. float: right;
  346. }
  347. .pagination{
  348. float: right;
  349. }
  350. .totalCount {
  351. float: right;
  352. margin-top: 28px;
  353. margin-right: 15px;
  354. }
  355. .pagination_box{
  356. margin-bottom: 100px;
  357. }
  358. .pagination_box .pagePre a{
  359. margin-right: 10px
  360. }
  361. .pagination_box .pageNext a{
  362. margin-left: 10px;
  363. }