金诚优选前端代码
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.

297 lines
6.3 KiB

  1. @import '../../../common/css/global';
  2. #order-detail{
  3. font-size: 15px;
  4. .border-box{
  5. padding-bottom: 50px;
  6. .closeTime {
  7. display: flex;
  8. align-items: center;
  9. justify-content: center;
  10. color: #FFFFFF;
  11. height: 40px;
  12. background-color: #ea4448;
  13. .iconfont {
  14. margin-right: 5px;
  15. }
  16. }
  17. .text-color {
  18. color: #FFFFFF;
  19. }
  20. .attention-box{
  21. height: 40px;
  22. line-height: 40px;
  23. color:#D7770D ;
  24. font-size: 12px;
  25. background-color:#FFF6DD;
  26. padding: 0 15px;
  27. span{
  28. color:#D7770D ;
  29. font-size: 13px;
  30. display: inline-block;
  31. padding-right: 6px;
  32. }
  33. }
  34. .item-add{
  35. background-color: #FFFFFF;
  36. margin-bottom: 10px;
  37. height: 40px;
  38. line-height: 40px;
  39. display: flex;
  40. align-items: center;
  41. justify-content: space-between;
  42. padding: 0 15px;
  43. font-size: 14px;
  44. color:#4A4A4A;
  45. .left-info{
  46. span{
  47. color:#FB5054;
  48. font-size: 12px;
  49. }
  50. }
  51. .right-info{
  52. color:#FB5054;
  53. font-size: 12px;
  54. }
  55. }
  56. .order-item{
  57. margin-bottom: 10px;
  58. .title{
  59. height:35px;
  60. line-height:35px;
  61. color:#000;
  62. padding:0 20px;
  63. font-size:14px;
  64. display: flex;
  65. align-items: center;
  66. justify-content: space-between;
  67. background: #ffffff;
  68. .type{
  69. color: @globalColor;
  70. }
  71. }
  72. .goods-item{
  73. .item-middle {
  74. .express-info{
  75. display: flex;
  76. padding: 10px;
  77. justify-content: space-between;
  78. color:#9b9b9b;
  79. font-size: 12px;
  80. background: #FFFFFF;
  81. .info {
  82. color: #f5a623;
  83. }
  84. }
  85. .middle-item {
  86. font-size: 12px;
  87. display: flex;
  88. padding: 10px;
  89. color: #959595;
  90. background: #FFFFFF;
  91. &.middle-item__active{
  92. margin-bottom: 10px;
  93. }
  94. image {
  95. width: 60px;
  96. height: 60px;
  97. border: 1px solid #e5e5e5;
  98. }
  99. .text {
  100. flex: 1;
  101. padding-left: 10px;
  102. overflow: hidden;
  103. .names {
  104. color: #000000;
  105. white-space: nowrap;
  106. text-overflow: ellipsis;
  107. overflow: hidden;
  108. font-size: 14px;
  109. }
  110. }
  111. .money-box {
  112. text-align: right;
  113. .retreat{
  114. font-size: 13px;
  115. //background: #f8f8f8;
  116. border: 1px solid #838383;
  117. //border-radius: 3px;
  118. padding: 5px 7px;
  119. text-align: center;
  120. margin-top: 10px;
  121. margin-left: 5px;
  122. display: inline-block;
  123. }
  124. }
  125. }
  126. }
  127. .item-bottom {
  128. text-align: right;
  129. padding: 10px;
  130. background: #FFFFFF;
  131. &.item-bottom__active{
  132. display: flex;
  133. justify-content: space-between;
  134. .all{
  135. color:#9b9b9b;
  136. font-size: 12px;
  137. }
  138. }
  139. .all-money{
  140. color: #ee2336;
  141. font-size: 12px;
  142. }
  143. }
  144. }
  145. .member-info{
  146. padding:9px 12px 12px 12px;
  147. background-color: #FFFFFF;
  148. display: flex;
  149. flex-wrap: wrap;
  150. align-items: center;
  151. .avatar{
  152. width:44px;
  153. height: 44px;
  154. margin:6px 3px 3px 3px;
  155. image{
  156. width: 100%;
  157. height: 100%;
  158. border-radius: 50%;
  159. }
  160. .colonel{
  161. position: relative;
  162. top: -14px;
  163. left:4px;
  164. width: 35px;
  165. height: 16px;
  166. line-height: 16px;
  167. border-radius: 8px;
  168. background:linear-gradient(-142.8deg,rgba(246,121,126,1),rgba(234,68,72,1));
  169. border-radius:16px;
  170. font-size:10px;
  171. color: #FFFFFF;
  172. text-align: center;
  173. &.me{
  174. background:linear-gradient(-145.2deg,rgba(251,205,36,1),rgba(247,151,28,1));
  175. }
  176. }
  177. }
  178. }
  179. .order-info{
  180. padding: 10px 20px;
  181. background: #FFFFFF;
  182. &.order-note{
  183. color:#9B9B9B;
  184. font-size: 12px;
  185. }
  186. .info-item{
  187. display: flex;
  188. padding: 2px 0;
  189. font-size: 12px;
  190. .name{
  191. width:80px;
  192. color: #959595;
  193. }
  194. .text{
  195. flex: 1;
  196. .express-order {
  197. float: right;
  198. color: blue;
  199. }
  200. }
  201. }
  202. }
  203. }
  204. .order-detail-info{
  205. padding: 10px 20px;
  206. font-size: 14px;
  207. .item{
  208. display: flex;
  209. align-items: center;
  210. justify-content: space-between;
  211. .name{
  212. color: #8a8a8a;
  213. width: 80px;
  214. text-align: right;
  215. &.big{
  216. color: #000000;
  217. font-weight: bold;
  218. }
  219. }
  220. .big-money{
  221. color: #ed0000;
  222. font-weight: bold;
  223. }
  224. }
  225. }
  226. }
  227. .order-share{
  228. position: fixed;
  229. bottom:15%;
  230. right: 5%;
  231. display: flex;
  232. height: 33px;
  233. line-height: 33px;
  234. align-items: center;
  235. background-color: #FFFFFF;
  236. box-shadow:0px 4px 4px 0px rgba(155,155,155,0.5);
  237. border-radius: 16px;
  238. .text{
  239. width: 85px;
  240. text-align: center;
  241. font-size: 12px;
  242. color: #FFFFFF;
  243. background-color:@mainColor;
  244. height:33px;
  245. line-height: 33px;
  246. border-radius: 16px;
  247. }
  248. }
  249. .button-type{
  250. position: fixed;
  251. bottom: 0;
  252. width: 100%;
  253. height: 50px;
  254. line-height: 50px;
  255. text-align: center;
  256. .type-submit{
  257. display: flex;
  258. view{
  259. flex: 1;
  260. width: 0%;
  261. }
  262. .cancel{
  263. background: #f8f8f8;
  264. }
  265. .submit{
  266. background: @mainColor;
  267. color: #FFFFFF;
  268. }
  269. }
  270. .type-cancel{
  271. background: #f8f8f8;
  272. }
  273. .sbumit-cancel{
  274. background: #1aad19;
  275. color: #FFFFFF;
  276. }
  277. }
  278. .pay-attention{
  279. padding: 18px 15px;
  280. color:#9B9B9B;
  281. font-size: 12px;
  282. line-height: 24px;
  283. }
  284. }