invoice-detail.css 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. /* 订单详情 */
  2. .order-detail {
  3. background: #f9f9f9;
  4. }
  5. /* 订单状态 */
  6. .order-detail .status-process {
  7. padding: 20px;
  8. border-top: 2px solid #e1251b;
  9. box-shadow: 0 1px 4px rgba(0,0,0,.05);
  10. display: flex;
  11. background: #fff;
  12. }
  13. /* 订单状态 end */
  14. /* 订单信息 */
  15. .order-detail .info-box .invoice-info {
  16. margin-bottom: 30px;
  17. padding: 20px;
  18. box-shadow: 0 1px 4px rgba(0,0,0,.05);
  19. display: flex;
  20. background: #fff;
  21. }
  22. .order-detail .info-box .invoice-info:first-child {
  23. border-top: 2px solid #e1251b;
  24. margin-bottom: 30px;
  25. padding: 20px;
  26. box-shadow: 0 1px 4px rgba(0,0,0,.05);
  27. display: flex;
  28. background: #fff;
  29. }
  30. .order-detail .invoice-info .item {
  31. width: 25%;
  32. /* border-left: 1px solid #f5f5f5; */
  33. line-height: 20px;
  34. padding: 0 30px;
  35. }
  36. .order-detail .invoice-info .item:first-child {
  37. padding-left: 10px;
  38. border: 0;
  39. }
  40. .order-detail .invoice-info .item .tit {
  41. font-weight: 600;
  42. margin-bottom: 10px;
  43. }
  44. .order-detail .invoice-info .item .con {
  45. padding-top: 10px;
  46. }
  47. .order-detail .invoice-info .item .con-item {
  48. margin-top: 5px;
  49. display: flex;
  50. }
  51. .order-detail .invoice-info .item .con-item .download{
  52. cursor:pointer;
  53. }
  54. .order-detail .invoice-info .item .con-item .item-tit {
  55. min-width: 70px;
  56. color: #999;
  57. }
  58. .order-detail .invoice-info .item .con-item .item-tit.invoice-en {
  59. width: 120px;
  60. color: #999;
  61. }
  62. .order-detail .invoice-info .item .con-item .item-con {
  63. flex: 1;
  64. font-family: arial;
  65. word-break:break-word;
  66. }
  67. .order-detail .invoice-info .item .con-item .item-con.invoice-status {
  68. color: #E03B32
  69. }
  70. .order-detail .invoice-info .item .con-item .item-con.invoice-update {
  71. color: #E03B32;
  72. cursor:pointer;
  73. }
  74. /* 订单信息 end */
  75. /* 商品信息 */
  76. .order-detail .goods-box {
  77. margin-top: 30px;
  78. }
  79. .order-detail .goods-box .shop {
  80. height: 14px;
  81. line-height: 14px;
  82. padding: 0 10px 0;
  83. margin-bottom: 15px;
  84. }
  85. .order-detail .goods-box .shop .shop-icon {
  86. display: inline-block;
  87. vertical-align: top;
  88. width: 14px;
  89. height: 14px;
  90. margin-right: 3px;
  91. background: url(../images/icons.png) no-repeat -28px -458px;
  92. }
  93. .order-detail .goods-box .shop:hover .shop-icon {
  94. background-position: -9px -458px;
  95. }
  96. .order-detail .goods-box .shop .name {
  97. display: inline-block;
  98. vertical-align: top;
  99. font-weight: bold;
  100. color: #333333;
  101. }
  102. .order-detail .goods-box .goods-con {
  103. background: #fff;
  104. padding: 25px 20px 15px;
  105. box-shadow: 0 1px 4px rgba(0,0,0,.05);
  106. }
  107. .order-detail .goods-box .order-table {
  108. margin-bottom: 20px;
  109. }
  110. .order-detail .goods-box .order-table .box {
  111. width: 100%;
  112. text-align: center;
  113. }
  114. .order-detail .goods-box .order-table .box-tit th {
  115. background: #f9f9f9;
  116. height: 32px;
  117. line-height: 32px;
  118. text-align: center;
  119. font-weight: 400;
  120. border: 1px solid #f9f9f9;
  121. }
  122. .order-detail .goods-box .order-table .box-tit .tal {
  123. text-align: left;
  124. }
  125. .order-detail .goods-box .order-table .box-tr td {
  126. padding: 15px 0;
  127. border-bottom: 1px solid #eee;
  128. text-align: center;
  129. }
  130. .order-detail .goods-box .order-table .box-tr .goods-info {
  131. /* max-width: 100%; */
  132. max-width: 635px;
  133. padding-left: 15px;
  134. padding-right: 20px;
  135. text-align: left;
  136. display: flex;
  137. box-sizing: border-box;
  138. }
  139. .order-detail .goods-box .order-table .box-tr .goods-info .name-sku {
  140. max-width: 80%;
  141. box-sizing: border-box;
  142. }
  143. .order-detail .goods-box .order-table .box-tr .goods-info .img {
  144. display: block;
  145. width: 60px;
  146. height: 60px;
  147. max-width: 60px;
  148. height: 60px;
  149. font-size: 0;
  150. margin-right: 15px;
  151. }
  152. .order-detail .goods-box .order-table .box-tr .goods-info .img img {
  153. width: 100%;
  154. height: 100%;
  155. }
  156. .order-detail .goods-box .order-table .box-tr .goods-info .name-sku .name {
  157. max-height: 36px;
  158. line-height: 18px;
  159. /* display: -webkit-box;
  160. -webkit-box-orient: vertical;
  161. -webkit-line-clamp: 2;
  162. overflow: hidden;
  163. text-overflow: ellipsis;
  164. word-break: break-word; */
  165. }
  166. .order-detail .goods-box .order-table .box-tr .goods-info .name-sku .name:hover {
  167. color: #e1251b;
  168. }
  169. .order-detail .goods-box .order-table .box-tr .goods-info .name-sku .sku .activity-logo {
  170. display: inline-block;
  171. background: #fc1b35;
  172. color: #fff;
  173. padding: 4px;
  174. line-height: 1em;
  175. border-radius: 3px;
  176. }
  177. .order-detail .goods-box .order-table .box-tr .goods-info .name-sku .sku {
  178. display: block;
  179. line-height: 18px;
  180. margin-top: 6px;
  181. color: #999;
  182. word-break: break-word;
  183. }
  184. .order-detail .goods-box .order-table .box-tr .goods-info .name-sku .sku > span:first-child{
  185. margin-right: 10px;
  186. }
  187. .order-detail .goods-box .order-table .box-tr .goods-number {
  188. text-align: left;
  189. }
  190. .order-detail .goods-box .order-table .box-tr .goods-number {
  191. font-family: arial;
  192. }
  193. .order-detail .goods-box .order-table .box-tr .price {
  194. font-family: verdana;
  195. color: #000;
  196. }
  197. .order-detail .goods-box .order-table .box-tr .action-btn {
  198. display: block;
  199. border-radius: 2px;
  200. min-width: 85px;
  201. height: 18px;
  202. line-height: 18px;
  203. padding: 2px 0;
  204. margin: 3px auto;
  205. text-align: center;
  206. background: #fff;
  207. color: #e1251b;
  208. border: 1px solid #e1251b;
  209. }
  210. .order-detail .goods-box .order-table .box-tr .action-btn:hover {
  211. background: #e1251b;
  212. color: #fff;
  213. }
  214. .order-detail .goods-box .goods-total {
  215. background: #fff;
  216. padding-right: 10px;
  217. text-align: right;
  218. }
  219. .order-detail .goods-box .goods-total .item {
  220. margin-bottom: 10px;
  221. }
  222. .order-detail .goods-box .goods-total .item .price.weak {
  223. color: #888;
  224. }
  225. .order-detail .goods-box .goods-total .item.refund-btn {
  226. margin-bottom: 30px;
  227. }
  228. /* 整单退款按钮 */
  229. .order-detail .goods-box .goods-total .item .action-btn {
  230. display: inline-block;
  231. border-radius: 2px;
  232. width: 85px;
  233. height: 18px;
  234. line-height: 18px;
  235. padding: 2px 0;
  236. margin: 3px auto;
  237. text-align: center;
  238. background: #fff;
  239. color: #e1251b;
  240. border: 1px solid #e1251b;
  241. margin-right: 15px;
  242. cursor: pointer;
  243. }
  244. .order-detail .goods-box .goods-total .item .action-btn:hover {
  245. background: #e1251b;
  246. color: #fff;
  247. }
  248. .order-detail .goods-box .goods-total .item .tit,
  249. .order-detail .goods-box .goods-total .item .price {
  250. display: inline-block;
  251. vertical-align: top;
  252. line-height: 20px;
  253. }
  254. .order-detail .goods-box .goods-total .item .price {
  255. width: 120px;
  256. color: #000;
  257. font-family: verdana;
  258. }
  259. .order-detail .goods-box .goods-total .item .price.big {
  260. color: #e1251b;
  261. font-size: 16px;
  262. font-weight: 600;
  263. display: inline-block;
  264. width: auto;
  265. }
  266. /* 商品信息 end */
  267. /* 订单详情 end */
  268. /* 常见问题 */
  269. .order-detail .questions-info {
  270. margin-top: 30px;
  271. padding: 20px;
  272. /* border-top: 2px solid #e1251b; */
  273. box-shadow: 0 1px 4px rgba(0,0,0,.05);
  274. background: #fff;
  275. }
  276. .order-detail .questions-info .title{
  277. font-size: 12px;
  278. font-family: Microsoft YaHei;
  279. font-weight: 400;
  280. line-height: 24px;
  281. color: #333333;
  282. }
  283. .order-detail .questions-info .text{
  284. font-size: 12px;
  285. font-family: Microsoft YaHei;
  286. font-weight: 400;
  287. line-height: 24px;
  288. color: #999999;
  289. }
  290. /* 常见问题 end */