order_detail.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. @charset "utf-8";
  2. body{background: #f5f5f5;}
  3. /*订单详情整体*/
  4. .order-detail1{
  5. width: 100%;
  6. background-color: #f5f5f5;
  7. }
  8. /*订单详情2页面整体*/
  9. .order-detail2,
  10. .order-detail3
  11. {
  12. width: 100%;
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. }
  17. /*订单详情中部*/
  18. .order-detail1 .order-detail1-middle{
  19. width: 100%;
  20. background-color: #F5F5F5;
  21. padding-top: .72rem;
  22. margin-bottom: .81rem;
  23. }
  24. .order-detail2 .order-detail1-middle,
  25. .order-detail3 .order-detail1-middle
  26. {
  27. height: 39.35rem;
  28. }
  29. .order-detail1-middle .detail1-middle-list{
  30. width: 100%;
  31. padding-left: .65rem;
  32. padding-right: .65rem;
  33. margin-bottom: .81rem;
  34. border-top: 1px solid #eee;
  35. border-bottom: 1px solid #eee;
  36. background-color: #fff;
  37. }
  38. .order-detail1-middle .detail1-middle-list:last-child{
  39. margin-bottom:0;
  40. }
  41. .order-detail1-middle .detail1-middle-list:nth-child(1){
  42. height:8.72rem;
  43. }
  44. .detail1-middle-list:nth-child(1) .detail1-list-items{
  45. width: 100%;
  46. }
  47. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(1){
  48. height: 2.76rem;
  49. border-bottom: 1px solid #eee;
  50. }
  51. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(1) span{
  52. line-height: 2.76rem;
  53. }
  54. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(1) span:nth-child(1){
  55. display: inline-block;
  56. width: 4.55rem;
  57. height: 2.76rem;
  58. line-height: 2.66rem;
  59. float: left;
  60. font-size:0.85rem;
  61. color:#7E7E7E;
  62. }
  63. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(1) span:nth-child(2){
  64. display: inline-block;
  65. width: 14.95rem;
  66. height: 2.76rem;
  67. float: left;
  68. color:#7E7E7E;
  69. }
  70. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(1) span:nth-child(3){
  71. display: inline-block;
  72. width: 4.20rem;
  73. height: 2.76rem;
  74. float: left;
  75. position: relative;
  76. }
  77. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(1) span:nth-child(3) em{
  78. display: inline-block;
  79. width: 4.20rem;
  80. height: 1.48rem;
  81. background-color: #fd5c2d;
  82. border-radius:0.15rem;
  83. font-size:.85rem;
  84. color:#fff;
  85. text-align: center;
  86. line-height: 1.40rem;
  87. position: absolute;
  88. top: 0.6rem;
  89. left: 0;
  90. }
  91. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(2){
  92. height: 5.96rem;
  93. }
  94. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(2) span{
  95. display: inline-block;
  96. float: left;
  97. }
  98. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(2) span:nth-child(1){
  99. width: 2.71rem;
  100. height: 5.96rem;
  101. position: relative;
  102. }
  103. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(2) span:nth-child(1) em{
  104. display: inline-block;
  105. width: 1.61rem;
  106. height: 1.96rem;
  107. background:url(../images/address.png) no-repeat;
  108. background-size:contain;
  109. position: absolute;
  110. top:2.1rem;
  111. left:0.10rem;
  112. }
  113. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(2) span:nth-child(2){
  114. width: 4.11rem;
  115. height: 2.26rem;
  116. }
  117. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(2) span:nth-child(2){
  118. width: 4.04rem;
  119. height: 2.26rem;
  120. line-height: 2.66rem;
  121. }
  122. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(2) span:nth-child(3){
  123. width: 7.01rem;
  124. height: 2.26rem;
  125. line-height: 2.66rem;
  126. letter-spacing: 0.04rem;
  127. font-size:1.02rem;
  128. }
  129. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(2) span:nth-child(4),
  130. .detail1-middle-list:nth-child(1) .detail1-list-items:nth-child(2) span:nth-child(5){
  131. width: 11.03rem;
  132. height: 1.26rem;
  133. font-size:0.80rem;
  134. letter-spacing: 0.02rem;
  135. line-height: 1.46rem;
  136. color:#7E7E7E;
  137. }
  138. .detail1-middle-list:nth-child(2){
  139. width: 100%;
  140. }
  141. .order-detail2 .detail1-middle-list:nth-child(2),
  142. .order-detail3 .detail1-middle-list:nth-child(2)
  143. {
  144. width: 100%;
  145. height: auto;
  146. }
  147. .detail1-middle-list:nth-child(2) .detail1-list-items,
  148. .detail1-middle-list:nth-child(2) .detail1-list-items
  149. {
  150. width: 100%;
  151. height: 5.89rem;
  152. border-bottom: 1px solid #eee;
  153. padding-top: 0.72rem;
  154. }
  155. .order-detail2 .detail1-middle-list:nth-child(2) .detail1-list-items,
  156. .order-detail2 .detail1-middle-list:nth-child(2) .detail1-list-items,
  157. .order-detail3 .detail1-middle-list:nth-child(2) .detail1-list-items,
  158. .order-detail3 .detail1-middle-list:nth-child(2) .detail1-list-items
  159. {
  160. border-bottom: none;
  161. }
  162. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(1) span,
  163. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(2) span,
  164. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(3) span
  165. {
  166. display: inline-block;
  167. float: left;
  168. }
  169. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(1) img,
  170. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(2) img,
  171. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(3) img
  172. {
  173. display: inline-block;
  174. float: left;
  175. width: 4.48rem;
  176. height: 4.45rem;
  177. margin-right: 0.70rem;
  178. border-radius:0.25rem;
  179. }
  180. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(1) span:nth-child(2),
  181. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(2) span:nth-child(2),
  182. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(3) span:nth-child(2)
  183. {
  184. width: 14.75rem;
  185. height: 2.65rem;
  186. line-height: 1.15rem;
  187. font-size:0.87rem;
  188. letter-spacing: 0.03rem;
  189. }
  190. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(1) span:nth-child(3),
  191. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(2) span:nth-child(3),
  192. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(3) span:nth-child(3)
  193. {
  194. width: 3.75rem;
  195. height: 2.65rem;
  196. position: relative;
  197. }
  198. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(1) span:nth-child(3) em:nth-child(1),
  199. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(2) span:nth-child(3) em:nth-child(1),
  200. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(3) span:nth-child(3) em:nth-child(1)
  201. {
  202. display: inline-block;
  203. width: 100%;
  204. height: 1.35rem;
  205. float: left;
  206. font-size:0.88rem;
  207. letter-spacing: 0.01rem;
  208. }
  209. .order-detail2 .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(1) span:nth-child(3) em:nth-child(1),
  210. .order-detail3 .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(1) span:nth-child(3) em:nth-child(1)
  211. {
  212. text-align: right;
  213. }
  214. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(1) span:nth-child(3) em:nth-child(2),
  215. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(2) span:nth-child(3) em:nth-child(2),
  216. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(3) span:nth-child(3) em:nth-child(2)
  217. {
  218. display: inline-block;
  219. width: 1.10rem;
  220. height: 1.10rem;
  221. float: right;
  222. letter-spacing: 0.04rem;
  223. color:#7E7E7E;
  224. }
  225. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(1) span:nth-child(3) em:nth-child(2) i,
  226. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(2) span:nth-child(3) em:nth-child(2) i,
  227. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(3) span:nth-child(3) em:nth-child(2) i
  228. {
  229. color:#000;
  230. }
  231. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(4){
  232. width: 100%;
  233. height: 2.60rem;
  234. border-bottom: none;
  235. text-align:center;
  236. line-height: 0.15rem;
  237. }
  238. .detail1-middle-list:nth-child(2) .detail1-list-items:nth-child(4) span{
  239. display: inline-block;
  240. width: 5.65rem;
  241. height: 1.55rem;
  242. line-height: 1.15rem;
  243. letter-spacing: -0.01rem;
  244. font-size:0.88rem;
  245. color:#7E7E7E;
  246. }
  247. .order-detail1-middle .detail1-middle-list:nth-child(3){
  248. width: 100%;
  249. padding-top: 0.65rem;
  250. overflow: hidden;
  251. }
  252. .order-detail1-middle .detail1-middle-list:nth-child(4)
  253. {
  254. width: 100%;
  255. height: 8.13rem;
  256. padding-top: 0.65rem;
  257. }
  258. .order-detail1-middle .detail1-middle-list:nth-child(4){
  259. height: 5.91rem;
  260. }
  261. .order-detail1-middle .detail1-middle-list:nth-child(3) .detail1-list-items,
  262. .order-detail1-middle .detail1-middle-list:nth-child(4) .detail1-list-items
  263. {
  264. width: 100%;
  265. height: 1.21rem;
  266. margin-bottom: 0.40rem;
  267. }
  268. .order-detail1-middle .detail1-middle-list:nth-child(3) .detail1-list-items:nth-child(5)
  269. {
  270. height:;
  271. }
  272. .order-detail1-middle .detail1-middle-list:nth-child(4) .detail1-list-items:nth-child(3){
  273. height: 1.61rem;
  274. }
  275. .order-detail1-middle .detail1-middle-list:nth-child(3) .detail1-list-items span{
  276. display: inline-block;
  277. width: 50%;
  278. float: left;
  279. font-size:.83rem;
  280. line-height: 1.21rem;
  281. color:#7E7E7E;
  282. }
  283. .order-detail1-middle .detail1-middle-list:nth-child(4) .detail1-list-items span{
  284. display: inline-block;
  285. width: 50%;
  286. height: 1.21rem;
  287. float: left;
  288. font-size:.83rem;
  289. line-height: 1.21rem;
  290. color:#7E7E7E;
  291. }
  292. .order-detail1-middle .detail1-middle-list:nth-child(4) .detail1-list-items span{
  293. line-height: 1.31rem;
  294. letter-spacing: 0.03rem;
  295. }
  296. .order-detail1-middle .detail1-middle-list:nth-child(3) .detail1-list-items span:nth-child(2),
  297. .order-detail1-middle .detail1-middle-list:nth-child(4) .detail1-list-items span:nth-child(2)
  298. {
  299. text-align: right;
  300. }
  301. .order-detail1-middle .detail1-middle-list:nth-child(4) .detail1-list-items:nth-child(3) span{
  302. height: 1.61rem;
  303. font-size:1.00rem;
  304. line-height: 1.75rem;
  305. color:#000;
  306. }
  307. .order-detail1-middle .detail1-middle-list:nth-child(4) .detail1-list-items:nth-child(3) span:nth-child(2){
  308. color:#f00;
  309. }
  310. .order-detail1-middle .detail1-middle-list:nth-child(5){
  311. width: 100%;
  312. height: 5.70rem;
  313. }
  314. .order-detail1-middle .detail1-middle-list:nth-child(5) .detail1-list-items{
  315. width: 100%;
  316. height: 2.62rem;
  317. border-bottom:1px solid #eee;
  318. line-height: 2.60rem;
  319. }
  320. .order-detail1-middle .detail1-middle-list:nth-child(5) .detail1-list-items:nth-child(2){
  321. height: 3.00rem;
  322. line-height: 2.95rem;
  323. border-bottom:none;
  324. }
  325. .order-detail1-middle .detail1-middle-list:nth-child(5) .detail1-list-items:nth-child(2) span{
  326. display: inline-block;
  327. width: 1.95rem;
  328. height: 3.00rem;
  329. float: left;
  330. position: relative;
  331. margin-right: 0.88rem;
  332. line-height:3.00rem;
  333. }
  334. .order-detail1-middle .detail1-middle-list:nth-child(5) .detail1-list-items:nth-child(2) span em{
  335. display: inline-block;
  336. width: 1.65rem;
  337. height: 1.65rem;
  338. background: url(../images/weichat.png) no-repeat;
  339. background-size:contain;
  340. position: absolute;
  341. top: 0.65rem;
  342. left: 0.15rem;
  343. }
  344. .order-detail2 .order-detail1-middle .detail1-middle-list:nth-child(5),
  345. .order-detail3 .order-detail1-middle .detail1-middle-list:nth-child(5)
  346. {
  347. width: 100%;
  348. height: 2.70rem;
  349. padding-left: 9.75rem;
  350. }
  351. .order-detail2 .order-detail1-middle .detail1-middle-list:nth-child(5) span,
  352. .order-detail3 .order-detail1-middle .detail1-middle-list:nth-child(5) span
  353. {
  354. display: inline-block;
  355. float: left;
  356. }
  357. .order-detail2 .order-detail1-middle .detail1-middle-list:nth-child(5) span:nth-child(1)
  358. {
  359. width: 1.00rem;
  360. height: 1.00rem;
  361. background:url(../images/service.png) no-repeat;
  362. background-size:contain;
  363. margin-top: 0.88rem;
  364. margin-right: 0.10rem;
  365. }
  366. .order-detail3 .order-detail1-middle .detail1-middle-list:nth-child(5) span:nth-child(1){
  367. width: 1.00rem;
  368. height: 1.00rem;
  369. background:url(../images/list.png) no-repeat;
  370. background-size:contain;
  371. margin-top: 0.85rem;
  372. background-size:100% 100% ;
  373. }
  374. .order-detail2 .order-detail1-middle .detail1-middle-list:nth-child(5) span:nth-child(2){
  375. width: 4.10rem;
  376. height: 2.70rem;
  377. line-height: 2.70rem;
  378. font-size: 0.9rem;
  379. margin-left: 0.2rem;
  380. color: #333;
  381. }
  382. .order-detail3 .order-detail1-middle .detail1-middle-list:nth-child(5) span:nth-child(2){
  383. width: 6.10rem;
  384. height: 2.70rem;
  385. line-height: 2.70rem;
  386. color:#EE3930;
  387. }
  388. .order-detail2 .order-detail1-middle .detail1-middle-list:nth-child(6),
  389. .order-detail3 .order-detail1-middle .detail1-middle-list:nth-child(6)
  390. {
  391. clear: both;
  392. margin-top: -.83rem;
  393. font-size:0.78rem;
  394. height:2.00rem;
  395. line-height: 2.00rem;
  396. text-align: center;
  397. color: #BBBDBC;
  398. background-color: #F5F5F5;
  399. border:none;
  400. }
  401. /*订单详情底部*/
  402. .order-detail1 .order-detail1-bottom{
  403. width: 100%;
  404. height: 3.02rem;
  405. background-color: #fff;
  406. padding-top: 0.5rem;
  407. padding-right: 0.72rem;
  408. box-shadow: 0 -0.1812rem 0.30rem 0.03rem #eee;
  409. }
  410. .order-detail1 .order-detail1-bottom input{
  411. width: 5.80rem;
  412. height: 2.11rem;
  413. border-radius:0.15rem;
  414. float: right;
  415. margin-left: 0.73rem;
  416. border: 0.08rem solid #979797;
  417. font-size:1.00rem;
  418. line-height: 2.00rem;
  419. text-align:center;
  420. }
  421. .order-detail1 .order-detail1-bottom input:focus{
  422. outline:none;
  423. }
  424. .order-detail1 .order-detail1-bottom input:nth-child(1){
  425. color:#fff;
  426. background-color:#F03D29;
  427. border:none;
  428. }
  429. .order-detail1 .order-detail1-bottom input:nth-child(2){
  430. color:#979797;
  431. background-color: #fff;
  432. }