uc-collection.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. /* 个人中心-商品收藏 */
  2. .user-center .uc-collection .goods-list .list-con {
  3. margin-top: -15px;
  4. width: 1080px;
  5. }
  6. .user-center .uc-collection .goods-list .list-con .item {
  7. border: 1px solid #eee;
  8. width: 253px;
  9. }
  10. .user-center .uc-collection .goods-list .list-con .item:hover {
  11. opacity: 1;
  12. box-shadow: 0 0 8px rgba(0,0,0,.07);
  13. }
  14. .user-center .uc-collection .goods-list .list-con .item .goods-img {
  15. width: 253px;
  16. height: 253px;
  17. line-height: 253px;
  18. }
  19. .user-center .uc-collection .goods-list .list-con .item .goods-img div{
  20. height: 100%;
  21. width: 100%;
  22. }
  23. .user-center .uc-collection .goods-list .list-con .item .goods-msg {
  24. padding: 10px;
  25. }
  26. .user-center .uc-collection .goods-action {
  27. text-align: center;
  28. line-height: 35px;
  29. background: #f9f9f9;
  30. border-top: 1px solid #eee;
  31. display: flex;
  32. }
  33. .user-center .uc-collection .goods-action .action-a {
  34. color: #666;
  35. text-align: center;
  36. width: 50%;
  37. }
  38. .user-center .uc-collection .goods-action .action-a.a1 {
  39. border-right: 1px solid #eee;
  40. }
  41. .user-center .uc-collection .goods-action .action-a .icon {
  42. display: inline-block;
  43. vertical-align: top;
  44. background: url(../images/icons.png) no-repeat;
  45. margin-right: 5px;
  46. }
  47. .user-center .uc-collection .goods-action .action-a.a1 .icon {
  48. width: 17px;
  49. height: 15px;
  50. margin-top: 10px;
  51. background-position: 0 -38px;
  52. }
  53. .user-center .uc-collection .goods-action .action-a.a2 .icon {
  54. width: 14px;
  55. height: 14px;
  56. margin-top: 10px;
  57. background-position: 0 -415px;
  58. }
  59. .user-center .uc-collection .goods-action .action-a:hover {
  60. color: #e1251b;
  61. }
  62. .user-center .uc-collection .goods-action .action-a.a1:hover .icon {
  63. background-position: -22px -38px;
  64. }
  65. .user-center .uc-collection .goods-action .action-a.a2:hover .icon {
  66. background-position: -19px -415px;
  67. }
  68. .user-center .uc-collection .item-mask {
  69. position: absolute;
  70. top: 0;
  71. left: 0;
  72. width: 100%;
  73. height: 100%;
  74. background: rgba(0,0,0,0.2);
  75. display: none;
  76. }
  77. .user-center .uc-collection .batch-edit .item-mask {
  78. display: block;
  79. }
  80. .user-center .uc-collection .goods-list .list-con .item.batch-edit:hover {
  81. opacity: 1;
  82. box-shadow: none;
  83. border-color: #e1251b;
  84. }
  85. .user-center .uc-collection .goods-list .list-con .item.checked {
  86. border-color: #e1251b;
  87. }
  88. .user-center .uc-collection .item-mask .icon {
  89. position: absolute;
  90. right: 0;
  91. top: 0;
  92. width: 30px;
  93. height: 30px;
  94. background: rgba(0,0,0,0.2);
  95. }
  96. .user-center .uc-collection .goods-list .list-con .item.checked .item-mask .icon {
  97. background: #e1251b;
  98. }
  99. .user-center .uc-collection .item-mask .icon::before {
  100. position: absolute;
  101. top: 9px;
  102. left: 7px;
  103. display: block;
  104. width: 16px;
  105. height: 12px;
  106. content: " ";
  107. background: url(../images/icons.png) no-repeat 0 -746px;
  108. }
  109. .user-center .uc-collection .pages {
  110. margin-top: 20px;
  111. margin-right: 10px;
  112. }
  113. /* 个人中心-商品收藏 end */
  114. /* 个人中心-店铺收藏 */
  115. .user-center .uc-collection .shop-list .item {
  116. border: 1px solid #eee;
  117. display: flex;
  118. margin-bottom: 15px;
  119. -moz-transition: all 0.2s;
  120. -webkit-transition: all 0.2s;
  121. -o-transition: all 0.2s;
  122. transition: all 0.2s;
  123. position: relative;
  124. }
  125. .user-center .uc-collection .shop-list .item:hover {
  126. box-shadow: 0 0 8px rgba(0,0,0,.05);
  127. }
  128. .user-center .uc-collection .shop-list .item .shop-msg {
  129. width: 287px;
  130. border-right: 1px solid #eee;
  131. }
  132. .user-center .uc-collection .shop-list .item .shop-msg .shop-logo {
  133. display: block;
  134. width: 120px;
  135. height: 120px;
  136. line-height: 120px;
  137. margin: 10px auto;
  138. font-size: 0;
  139. }
  140. .user-center .uc-collection .shop-list .item .shop-msg .shop-logo img {
  141. max-width: 100%;
  142. max-height: 100%;
  143. vertical-align: middle;
  144. }
  145. .user-center .uc-collection .shop-list .item .shop-msg .shop-name {
  146. font-size: 14px;
  147. display: block;
  148. height: 16px;
  149. line-height: 14px;
  150. text-align: center;
  151. white-space: nowrap;
  152. text-overflow: ellipsis;
  153. overflow: hidden;
  154. }
  155. .user-center .uc-collection .shop-list .item .shop-msg .shop-name .self {
  156. background: #e1251b;
  157. color: #fff;
  158. padding: 0 3px;
  159. display: inline-block;
  160. height: 16px;
  161. line-height: 16px;
  162. border-radius: 2px;
  163. margin-right: 5px;
  164. font-size: 12px;
  165. vertical-align: top;
  166. }
  167. .user-center .uc-collection .shop-list .item .shop-msg .collection-number {
  168. display: block;
  169. height: 19px;
  170. line-height: 19px;
  171. color: #999;
  172. text-align: center;
  173. margin-top: 10px;
  174. font-family: arial;
  175. }
  176. .user-center .uc-collection .shop-list .item .shop-msg .shop-action {
  177. text-align: center;
  178. line-height: 35px;
  179. background: #f9f9f9;
  180. border-top: 1px solid #eee;
  181. display: flex;
  182. margin-top: 20px;
  183. }
  184. .user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a {
  185. color: #666;
  186. text-align: center;
  187. width: 50%;
  188. }
  189. .user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a1 {
  190. border-right: 1px solid #eee;
  191. }
  192. .user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a .icon {
  193. display: inline-block;
  194. vertical-align: top;
  195. background: url(../images/icons.png) no-repeat;
  196. margin-right: 5px;
  197. }
  198. .user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a1 .icon {
  199. width: 14px;
  200. height: 13px;
  201. margin-top: 11px;
  202. background-position: -28px -458px;
  203. }
  204. .user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a2 .icon {
  205. width: 14px;
  206. height: 14px;
  207. margin-top: 10px;
  208. background-position: 0 -415px;
  209. }
  210. .user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a:hover {
  211. color: #e1251b;
  212. }
  213. .user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a1:hover .icon {
  214. background-position: -9px -458px;
  215. }
  216. .user-center .uc-collection .shop-list .item .shop-msg .shop-action .action-a.a2:hover .icon {
  217. background-position: -19px -415px;
  218. }
  219. .user-center .uc-collection .shop-list .item .shop-goods {
  220. flex: 1;
  221. }
  222. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav {
  223. height: 28px;
  224. padding: 15px;
  225. display: flex;
  226. align-items: center;
  227. }
  228. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box {
  229. flex: 1;
  230. display: flex;
  231. }
  232. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box .nav-item {
  233. height: 25px;
  234. line-height: 25px;
  235. padding: 0 14px;
  236. border: 1px solid #eee;
  237. margin-left: -1px;
  238. position: relative;
  239. }
  240. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box .nav-item.active,
  241. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box .nav-item:hover {
  242. border-color: #e1251b;
  243. z-index: 1;
  244. color: #e1251b;
  245. }
  246. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-box .nav-item .number {
  247. font-family: arial;
  248. margin-left: 3px;
  249. }
  250. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page {
  251. display: flex;
  252. align-items: center;
  253. }
  254. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-number {
  255. font-family: arial;
  256. margin-right: 15px;
  257. }
  258. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-number .page-current {
  259. color: #e1251b;
  260. }
  261. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-btn {
  262. display: flex;
  263. }
  264. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-btn .prev,
  265. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-btn .next {
  266. width: 30px;
  267. height: 20px;
  268. line-height: 18px;
  269. border: 1px solid #e4e4e4;
  270. margin-left: -1px;
  271. text-align: center;
  272. font-size: 20px;
  273. font-family: Consolas;
  274. color: #333;
  275. cursor: pointer;
  276. }
  277. .user-center .uc-collection .shop-list .item .shop-goods .shop-nav .nav-page .page-btn .limit {
  278. color: #ccc;
  279. background: #f9f9f9;
  280. cursor: not-allowed;
  281. }
  282. .user-center .uc-collection .shop-list .item .shop-goods .goods-list {
  283. display: flex;
  284. padding-bottom: 15px;
  285. }
  286. .user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item {
  287. text-align: center;
  288. margin-left: 15px;
  289. -moz-transition: all 0.2s;
  290. -webkit-transition: all 0.2s;
  291. -o-transition: all 0.2s;
  292. transition: all 0.2s;
  293. }
  294. .user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item:hover {
  295. opacity: 0.8;
  296. }
  297. .user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item .img {
  298. display: block;
  299. width: 140px;
  300. height: 140px;
  301. line-height: 140px;
  302. font-size: 0;
  303. }
  304. .user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item .img img {
  305. max-width: 100%;
  306. max-height: 100%;
  307. vertical-align: middle;
  308. }
  309. .user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item .price {
  310. margin-top: 10px;
  311. color: #000;
  312. }
  313. .user-center .uc-collection .shop-list .item .shop-goods .goods-list .list-item .price .big {
  314. font-size: 14px;
  315. }
  316. .user-center .uc-collection .shop-list .item .item-mask {
  317. position: absolute;
  318. top: 0;
  319. left: 0;
  320. width: 100%;
  321. height: 100%;
  322. background: rgba(0,0,0,0.2);
  323. z-index: 3;
  324. display: none;
  325. }
  326. .user-center .uc-collection .shop-list .item.batch-edit .item-mask {
  327. display: block;
  328. }
  329. .user-center .uc-collection .shop-list .item.batch-edit:hover {
  330. box-shadow: none;
  331. border-color: #e1251b;
  332. }
  333. .user-center .uc-collection .shop-list .item.checked {
  334. border-color: #e1251b;
  335. }
  336. .user-center .uc-collection .shop-list .item .item-mask .icon {
  337. position: absolute;
  338. right: 0;
  339. top: 0;
  340. width: 30px;
  341. height: 30px;
  342. background: rgba(0,0,0,0.2);
  343. }
  344. .user-center .uc-collection .shop-list .item.checked .item-mask .icon {
  345. background: #e1251b;
  346. }
  347. .user-center .uc-collection .shop-list .item .icon::before {
  348. position: absolute;
  349. top: 9px;
  350. left: 7px;
  351. display: block;
  352. width: 16px;
  353. height: 12px;
  354. content: " ";
  355. background: url(../images/icons.png) no-repeat 0 -746px;
  356. }
  357. /* 个人中心-店铺收藏 end */