index.css 22 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. .index-content {
  7. width: 100%;
  8. background: #f8f8f8;
  9. }
  10. .index-content .index-header {
  11. position: fixed;
  12. z-index: 160;
  13. border-bottom: solid 1px #ddd;
  14. /*background: linear-gradient(to left, #e10a07 0, #FBAA58 100%);*/
  15. border-bottom-color: transparent;
  16. -webkit-transition: all .4s ease 0s;
  17. transform-origin: center;
  18. width: 100%;
  19. }
  20. .index-content .index-header .icon_header {
  21. width: 100%;
  22. line-height: 45px;
  23. position: relative;
  24. background: -webkit-linear-gradient(left, #e10a07 0, #f15b6c 100%);
  25. background: -o-linear-gradient(left, #e10a07 0, #f15b6c 100%);
  26. background: -ms-linear-gradient(left, #e10a07 0, #f15b6c 100%);
  27. background: -webkit-gradient(linear, right top, left top, color-stop(0, #e10a07), to(#f15b6c));
  28. background: -o-linear-gradient(right, #e10a07 0, #f15b6c 100%);
  29. background: linear-gradient(to left, #e10a07 0, #f15b6c 100%);
  30. }
  31. .index-content .index-header .icon_header .index-search {
  32. text-align: center;
  33. font-size: 16px;
  34. color: #fff;
  35. position: relative;
  36. z-index: 2;
  37. zoom: 1;
  38. overflow: hidden;
  39. text-overflow: ellipsis;
  40. white-space: nowrap;
  41. padding-top: 8px;
  42. margin: 0 32upx 0 32upx;
  43. padding-bottom: 6px;
  44. }
  45. .index-content .index-header .icon_header .index-search .icon_search {
  46. background: #F6F6F6;
  47. border-radius: 40upx;
  48. -moz-border-radius: 40upx;
  49. -webkit-border-radius: 40upx;
  50. -o-border-radius: 40upx;
  51. -ms-border-radius: 40upx;
  52. height: 66upx;
  53. line-height: 66upx;
  54. font-size: 26upx;
  55. color: #dcdcdc;
  56. text-align: left;
  57. text-indent: 32upx;
  58. position: relative;
  59. z-index: 1;
  60. zoom: 1;
  61. transition: all .4s ease 0s;
  62. -o-transition: all .4s ease 0s;
  63. -moz-transition: all .4s ease 0s;
  64. -webkit-transition: all .4s ease 0s;
  65. transform-origin: center;
  66. }
  67. .icon_header .icon_search>.iconfont {
  68. margin-right: 20upx;
  69. top: 1px;
  70. color: #ccc;
  71. }
  72. .icon_header .icon_suji {
  73. position: absolute;
  74. top: 0;
  75. width: 90upx;
  76. text-align: center;
  77. right: 0;
  78. color: #FFFFFF;
  79. }
  80. .icon-gender {
  81. position: absolute;
  82. top: 0;
  83. width: 90upx;
  84. text-align: center;
  85. left: 16px;
  86. color: #FFFFFF;
  87. }
  88. .icon_header .icon_suji .icon-zuji {
  89. font-size: 40upx;
  90. }
  91. .index-content .index-banner {
  92. padding-top: 40px;
  93. width: 100%;
  94. }
  95. .index-content .index-banner swiper-item {
  96. height: 400px;
  97. }
  98. .index-content .index-banner .swiper .swiper-container image {
  99. width: 100%;
  100. }
  101. .index-content .index-navlist {
  102. /*border-bottom: 10upx solid #f2f2f2*/
  103. }
  104. .index-content .index-navlist image {
  105. width: 64px;
  106. height: 64px;
  107. }
  108. .index-content .home_ant_juhuasuan {
  109. padding: 0px 5px;
  110. /*border-bottom: 10upx solid #f2f2f2*/
  111. margin-bottom: 6px;
  112. }
  113. .index-content .home_ant_juhuasuan .fl-jutext {
  114. font-size: 0;
  115. height: 45px;
  116. line-height: 500px;
  117. overflow: hidden;
  118. -webkit-background-size: auto 18px;
  119. background-size: auto 18px;
  120. float: left;
  121. width: 25%;
  122. }
  123. .index-content .home_ant_juhuasuan .fr-jutext {
  124. line-height: 45px;
  125. background: url('~@/static/image/my/right_icon.png') center right no-repeat;
  126. color: #999;
  127. -webkit-background-size: auto 11px;
  128. background-size: auto 11px;
  129. width: 65%;
  130. float: right;
  131. text-align: right;
  132. padding-right: 10px;
  133. font-size: 14px;
  134. }
  135. .index-content .juhuasuan-list {
  136. clear: both;
  137. padding-bottom: 10px;
  138. }
  139. .index-content .juhuasuan-list .juhuasuan-list-goods {
  140. width: 25%;
  141. float: left;
  142. }
  143. .index-content .juhuasuan-list .juhuasuan-list-goods .image {
  144. display: block;
  145. margin: 0 2px;
  146. border-radius: 5px;
  147. overflow: hidden;
  148. position: relative;
  149. z-index: 0;
  150. }
  151. .index-content .juhuasuan-list .juhuasuan-list-goods .image image {
  152. width: 91px;
  153. /* height: 91px; */
  154. }
  155. .index-content .juhuasuan-list .juhuasuan-list-goods .name {
  156. position: absolute;
  157. left: 0;
  158. bottom: 0;
  159. height: 20px;
  160. line-height: 22px;
  161. font-size: 12px;
  162. -moz-border-radius: 3px;
  163. -webkit-border-radius: 3px;
  164. -o-border-radius: 3px;
  165. -ms-border-radius: 3px;
  166. background: -webkit-linear-gradient(left, #f15b6c 0, #e10a07 100%);
  167. background: -o-linear-gradient(left, #f15b6c 0, #e10a07 100%);
  168. background: -ms-linear-gradient(left, #f15b6c 0, #e10a07 100%);
  169. background: -webkit-gradient(linear, right top, left top, color-stop(0, #f15b6c), to(#e10a07));
  170. background: -o-linear-gradient(right, #f15b6c 0, #e10a07 100%);
  171. background: linear-gradient(to left, #f15b6c 0, #e10a07 100%);
  172. color: #FFFFFF;
  173. width: 100%;
  174. overflow: hidden;
  175. }
  176. .index-content .juhuasuan-list .juhuasuan-list-goods .name:before {
  177. background: #FFE7C9;
  178. height: 100px;
  179. position: absolute;
  180. -ms-transform: rotate(15deg);
  181. right: 0;
  182. color: #e10a07;
  183. padding-left: 5upx;
  184. padding-right: 5upx;
  185. }
  186. .index-content .juhuasuan-list .juhuasuan-list-goods .name .pinname {
  187. font-size: 12px;
  188. line-height: 20px;
  189. }
  190. .index-content .index-coupon .coupon-tab {
  191. margin: 0 10upx;
  192. }
  193. .index-content .index-coupon .coupon-tab .fl-jutext {
  194. width: 33.33333333%;
  195. font-size: 30upx;
  196. color: #333;
  197. }
  198. .index-content .index-coupon .coupon-tab .fl-jutext:before {
  199. content: "";
  200. float: left;
  201. margin-top: 3px;
  202. width: 3px;
  203. height: 18px;
  204. border-radius: 3px;
  205. -moz-border-radius: 3px;
  206. -webkit-border-radius: 3px;
  207. -o-border-radius: 3px;
  208. -ms-border-radius: 3px;
  209. background: -o-linear-gradient(top, #ff5d06 0, #e10a07 100%);
  210. background: -o-linear-gradient(bottom, #ff5d06 0, #e10a07 100%);
  211. background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ff5d06), to(#e10a07));
  212. background: linear-gradient(to top, #ff5d06 0, #e10a07 100%);
  213. margin-right: 5px;
  214. }
  215. .index-content .index-coupon .coupon-tab .fr-jutext {
  216. float: right;
  217. color: #aaa;
  218. font-size: 14px;
  219. background: url('~@/static/image/my/right_icon.png') center right no-repeat;
  220. -webkit-background-size: auto 11px;
  221. background-size: auto 11px;
  222. width: 65%;
  223. text-align: right;
  224. padding-right: 10px;
  225. }
  226. .index-content .index-coupon .goods-list {}
  227. .index-content .index-coupon .goods-list .coupon-page {
  228. /* padding: 10upx; */
  229. }
  230. .index-content .index-coupon .goods-list .coupon-page .image {
  231. float: left;
  232. width: 40%;
  233. }
  234. .index-content .index-coupon .goods-list .coupon-page .image image {
  235. width: 250rpx;
  236. height: 250rpx;
  237. border-radius: 10px;
  238. }
  239. .index-content .index-coupon .goods-list .coupon-page .content {
  240. float: right;
  241. width: 60%;
  242. }
  243. .index-content .index-coupon .goods-list .coupon-page .content .title {
  244. color: #333;
  245. font-weight: 400;
  246. font-size: 16px;
  247. text-overflow: ellipsis;
  248. display: -webkit-box;
  249. -webkit-line-clamp: 2;
  250. -webkit-box-orient: vertical;
  251. height: 42px;
  252. margin-bottom: 20px;
  253. overflow: hidden;
  254. }
  255. .index-content .index-coupon .goods-list .coupon-page .content .num {
  256. color: #aaa;
  257. line-height: 20px;
  258. font-size: 13px;
  259. padding-top: 13px;
  260. }
  261. .index-content .index-coupon .goods-list .coupon-page .content .num .tmprice {
  262. padding-right: 10px;
  263. margin-right: 10px;
  264. position: relative;
  265. z-index: 1;
  266. zoom: 1;
  267. display: inline-block;
  268. }
  269. .index-content .index-coupon .goods-list .coupon-page .content .num .volume {
  270. /* float: right; */
  271. }
  272. .index-content .index-coupon .goods-list .coupon-page .content .money {
  273. height: 24px;
  274. font-size: 18px;
  275. margin-top: 5px;
  276. }
  277. .index-content .index-coupon .goods-list .coupon-page .content .money .quan {
  278. padding: 0;
  279. position: relative;
  280. z-index: 1;
  281. zoom: 1;
  282. top: 0;
  283. overflow: hidden;
  284. float: right;
  285. }
  286. .index-content .index-coupon .goods-list .coupon-page .content .money .quan {
  287. /*background: -moz-linear-gradient(left, #e10a07 0, #FF927C 100%);*/
  288. /*background: -webkit-gradient(linear, left top, left right, color-stop(0, #e10a07), color-stop(100%, #FF927C));*/
  289. /*background: -webkit-linear-gradient(left, #e10a07 0, #FF927C 100%);*/
  290. /*background: -o-linear-gradient(left, #e10a07 0, #FF927C 100%);*/
  291. /*background: -ms-linear-gradient(left, #e10a07 0, #FF927C 100%);*/
  292. /*background: linear-gradient(to left, #e10a07 0, #FF927C 100%);*/
  293. background: -moz-linear-gradient(left, #f15b6c 0, #FF927C 100%);
  294. background: -webkit-gradient(linear, left top, left right, color-stop(0, #f15b6c), color-stop(100%, #FF927C));
  295. background: -webkit-linear-gradient(left, #f15b6c 0, #FF927C 100%);
  296. background: -o-linear-gradient(left, #f15b6c 0, #FF927C 100%);
  297. background: -ms-linear-gradient(left, #f15b6c 0, #FF927C 100%);
  298. background: linear-gradient(to left, #f15b6c 0, #FF927C 100%);
  299. position: relative;
  300. z-index: 1;
  301. zoom: 1;
  302. font-style: normal;
  303. display: block;
  304. border-radius: 3px;
  305. -moz-border-radius: 3px;
  306. -webkit-border-radius: 3px;
  307. -o-border-radius: 3px;
  308. -ms-border-radius: 3px;
  309. font-size: .785rem;
  310. min-width: 3rem;
  311. text-align: center;
  312. padding: 1px 12upx;
  313. color: #fff;
  314. }
  315. .index-content .index-coupon .goods-list .coupon-page .content .money .quan:before {
  316. position: absolute;
  317. z-index: 1;
  318. zoom: 1;
  319. top: 50%;
  320. margin-top: -3px;
  321. background: #fff;
  322. display: block;
  323. width: 5px;
  324. height: 5px;
  325. content: "";
  326. border-radius: 10px;
  327. border: 1px solid #fff;
  328. left: auto;
  329. right: -4px;
  330. }
  331. .index-content .index-coupon .goods-list .coupon-page .content .money .quan:after {
  332. position: absolute;
  333. z-index: 1;
  334. zoom: 1;
  335. top: 50%;
  336. margin-top: -3px;
  337. background: #fff;
  338. display: block;
  339. width: 5px;
  340. height: 5px;
  341. content: "";
  342. border-radius: 10px;
  343. border: 1px solid #fff;
  344. left: -4px;
  345. }
  346. .index-content .index-coupon .goods-list .coupon-page .content .money .coupon-price {
  347. background: white;
  348. color: #FF563A;
  349. font-size: 24upx;
  350. }
  351. .index-content .index-coupon .goods-list .coupon-page .content .money .coupon-price text {
  352. font-size: 32upx;
  353. padding-left: 5px;
  354. }
  355. /*
  356. ** 商品详情
  357. */
  358. .index-goods {
  359. width: 100%;
  360. }
  361. .index-goods .goods_info {
  362. background: white;
  363. width: 100%;
  364. }
  365. .index-goods .goods_info .title {
  366. padding: 20upx 10upx;
  367. font-size: 32upx;
  368. overflow: hidden;
  369. text-overflow: ellipsis;
  370. white-space: nowrap;
  371. font-weight: 400;
  372. color: #333333;
  373. }
  374. .index-goods .goods_info .title text {
  375. border: 1px solid #e10a07;
  376. color: #e10a07;
  377. border-radius: 2px;
  378. -moz-border-radius: 2px;
  379. -webkit-border-radius: 2px;
  380. -o-border-radius: 2px;
  381. -ms-border-radius: 2px;
  382. padding: 0 5px;
  383. margin-right: 5px;
  384. font-size: 28upx;
  385. top: -1px;
  386. }
  387. .index-goods .goods_info .coupon-price {
  388. margin: 10upx 10upx 0 10upx;
  389. margin-top: 0upx;
  390. }
  391. .index-goods .goods_info .coupon-price .price {
  392. float: left;
  393. font-size: 30upx;
  394. color: #e10a07;
  395. width: 50%;
  396. }
  397. .index-goods .goods_info .coupon-price .price text {
  398. font-size: 46upx;
  399. font-weight: 500;
  400. }
  401. .index-goods .goods_info .coupon-price .volume {
  402. float: right;
  403. font-size: 30upx;
  404. color: #333333;
  405. width: 50%;
  406. text-align: right;
  407. }
  408. .index-goods .goods_info .coupon-price .yprice {
  409. float: left;
  410. color: #888;
  411. width: 40%;
  412. }
  413. .index-goods .goods_info .coupon-price .tag-list {
  414. float: right;
  415. width: 60%;
  416. text-align: right;
  417. }
  418. .index-goods .goods_info .coupon-price .tag-list .tag {
  419. text-align: right;
  420. float: right;
  421. margin-left: 20upx;
  422. color: #888888;
  423. font-size: 28upx;
  424. }
  425. .index-goods .goods_info .coupon-price .tag-list .tag .iconfont {
  426. color: #e10a07;
  427. margin-right: 4upx;
  428. }
  429. .index-goods .goods_quan {
  430. background: white;
  431. position: relative;
  432. z-index: 1;
  433. zoom: 1;
  434. }
  435. .index-goods .goods_quan:before {
  436. content: "";
  437. width: 2px;
  438. height: 55%;
  439. /* background: url('~@/static/img/goods/hr.png'); */
  440. -webkit-background-size: auto 100%;
  441. -moz-background-size: auto 100%;
  442. background-size: auto 100%;
  443. position: absolute;
  444. z-index: 1;
  445. zoom: 1;
  446. left: 64%;
  447. top: 20%;
  448. display: block;
  449. }
  450. .index-goods .goods_quan .row {
  451. display: block;
  452. position: absolute;
  453. z-index: 1;
  454. zoom: 1;
  455. left: 0;
  456. top: 0;
  457. width: 100%;
  458. height: 100%;
  459. text-align: center;
  460. }
  461. .index-goods .goods_quan .row .money {
  462. font-size: 36upx;
  463. color: #FFFFFF;
  464. padding-top: 6%;
  465. line-height: 48upx;
  466. position: relative;
  467. z-index: 1;
  468. zoom: 1;
  469. left: .3rem;
  470. }
  471. .index-goods .goods_quan .row .money .date-coupon {
  472. font-size: 12px;
  473. color: #fff;
  474. }
  475. .index-goods .goods_quan .row .name {
  476. line-height: 100%;
  477. color: #fff;
  478. position: relative;
  479. z-index: 1;
  480. zoom: 1;
  481. top: 50%;
  482. margin-top: -.6rem;
  483. text-align: left;
  484. font-weight: 600;
  485. }
  486. .index-goods .goods_quan .row .name text {
  487. margin-left: 15%;
  488. }
  489. .index-goods .goods_desc {
  490. font-size: 24upx;
  491. line-height: 48upx;
  492. padding: 10upx 20upx;
  493. color: #888888;
  494. }
  495. .hr10 {
  496. background: #F5F5F5;
  497. height: 10upx;
  498. }
  499. .scroll_top {
  500. background: rgba(51, 51, 51, .8);
  501. width: 35px;
  502. height: 35px;
  503. border-radius: 35px;
  504. -moz-border-radius: 35px;
  505. -webkit-border-radius: 35px;
  506. -o-border-radius: 35px;
  507. -ms-border-radius: 35px;
  508. text-align: center;
  509. line-height: 35px;
  510. color: #fff;
  511. position: fixed;
  512. z-index: 1;
  513. zoom: 1;
  514. right: 20px;
  515. bottom: 25px;
  516. opacity: 0;
  517. -webkit-transform: translateY(100px) translateX(0);
  518. transform: translateY(100px) translateX(0);
  519. transition: all .4s ease 0s;
  520. -o-transition: all .4s ease 0s;
  521. -moz-transition: all .4s ease 0s;
  522. -webkit-transition: all .4s ease 0s;
  523. transform-origin: center;
  524. }
  525. .scroll_top.active {
  526. opacity: 1;
  527. -webkit-transform: translateY(-25px) translateX(0);
  528. transform: translateY(-25px) translateX(0);
  529. }
  530. .index-goods .goods_shop {}
  531. .index-goods .goods_shop .info {
  532. padding-top: 20upx;
  533. min-height: 120upx;
  534. }
  535. .index-goods .goods_shop .info image {
  536. float: left;
  537. width: 120upx;
  538. height: 120upx;
  539. background: rgb(245, 245, 245);
  540. margin-left: 20upx;
  541. }
  542. .index-goods .goods_shop .info .shop-text {
  543. position: relative;
  544. z-index: 1;
  545. zoom: 1;
  546. min-height: 120upx;
  547. padding-left: 160upx;
  548. line-height: 60upx;
  549. }
  550. .index-goods .goods_shop .info .shop-text .shop-title {
  551. font-size: 1.1rem;
  552. font-weight: 400;
  553. margin-right: 235upx;
  554. overflow: hidden;
  555. text-overflow: ellipsis;
  556. white-space: nowrap;
  557. }
  558. .index-goods .goods_shop .info .shop-text .icon-taobao {
  559. color: #ff5000;
  560. }
  561. .index-goods .goods_shop .info .shop-text .icon-tianmaotmall {
  562. color: #e10a07;
  563. }
  564. .index-goods .goods_shop .info .shop-text .shop-new {
  565. position: absolute;
  566. z-index: 1;
  567. zoom: 1;
  568. right: 20upx;
  569. top: 50%;
  570. margin-top: -15px;
  571. font-size: 30upx;
  572. color: #888;
  573. }
  574. .index-goods .goods_shop .info .shop-text .shop-new .icon-youjiantou {
  575. font-size: 24upx;
  576. }
  577. .index-goods .goods_shop .goods-tab {
  578. margin-top: 30upx;
  579. border-top: solid 1px #F5F5F5;
  580. font-size: 30upx;
  581. color: #555;
  582. padding: 20upx;
  583. }
  584. .index-goods .goods_shop .goods-tab .lv_p {
  585. color: #FF7800;
  586. margin-left: 8upx;
  587. }
  588. .index-goods .goods_shop .goods-tab .lv_d {
  589. color: #2CA800;
  590. margin-left: 8upx;
  591. }
  592. .index-goods .goods_shop .goods-tab .lv_g {
  593. color: #E31436;
  594. margin-left: 8upx;
  595. }
  596. .index-goods .goods_shop .goods-tab .is-col-8:nth-child(2n):after,
  597. .index-goods .goods_shop .goods-tab .is-col-8:nth-child(2n):before {
  598. position: absolute;
  599. z-index: 1;
  600. zoom: 1;
  601. left: 0;
  602. top: 50%;
  603. width: 1px;
  604. height: 1rem;
  605. margin-top: -.5rem;
  606. background: #eee;
  607. display: block;
  608. content: "";
  609. }
  610. .index-goods .goods_shop .goods-tab .is-col-8:nth-child(2n):after {
  611. left: auto;
  612. right: 0;
  613. }
  614. .index-goods .goods_reco {
  615. background: #FFFFFF;
  616. margin-bottom: 120upx;
  617. }
  618. .index-goods .goods_reco .goods-info-title {
  619. font-weight: 400;
  620. text-align: center;
  621. font-size: 28upx;
  622. height: 80upx;
  623. line-height: 80upx;
  624. color: #333333;
  625. }
  626. .index-goods .goods_reco .imglist {
  627. max-width: 100%;
  628. }
  629. .index-goods .goods_shop_cart {
  630. position: fixed;
  631. zoom: 1;
  632. bottom: 0;
  633. z-index: 500;
  634. left: 0;
  635. width: 100%;
  636. }
  637. .index-goods .goods_shop_cart .cent {
  638. position: relative;
  639. zoom: 1;
  640. z-index: 5;
  641. background: #fff;
  642. box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, .1);
  643. }
  644. .index-goods .goods_shop_cart .but .img {
  645. position: relative;
  646. z-index: 1;
  647. zoom: 1;
  648. padding-top: 8px;
  649. height: 28px;
  650. }
  651. .index-goods .goods_shop_cart .but .img image {
  652. height: 23px;
  653. width: 23px;
  654. }
  655. .index-goods .goods_shop_cart .but .img .iconfont {
  656. font-size: 20px;
  657. color: #777;
  658. top: 1px;
  659. }
  660. .index-goods .goods_shop_cart .is-col-16 {
  661. color: #fff;
  662. border: 0;
  663. padding: 0;
  664. height: 43px;
  665. line-height: 43px;
  666. position: relative;
  667. z-index: 1;
  668. zoom: 1;
  669. top: 10px;
  670. background: linear-gradient(to left, #e10a07 0, #FE9F69 100%);
  671. width: 65%;
  672. }
  673. .index-goods .goods_shop_cart .is-col-16 .btn view {
  674. height: 41px;
  675. color: #fff;
  676. text-align: center;
  677. }
  678. .index-goods .goods_shop_cart .is-col-16 .btn .tkl {
  679. background: #fff;
  680. color: #FE9F69;
  681. zoom: 1;
  682. top: 1px;
  683. left: 1px;
  684. z-index: 5;
  685. position: relative;
  686. /* border-radius: 3px 0 0 3px; */
  687. }
  688. .index-goods .goods_shop_cart .is-col-16 .btn .coupon-buy {
  689. background: linear-gradient(to left, #e10a07 0, #FBAA58 100%);
  690. height: 42px;
  691. }
  692. .index-goods .goods_shop_cart_bg {
  693. width: 100%;
  694. height: 100%;
  695. position: fixed;
  696. z-index: 50;
  697. background: #000;
  698. left: 0;
  699. top: 0;
  700. /* display: none; */
  701. opacity: .5;
  702. }
  703. .index-goods .goods_share {
  704. position: fixed;
  705. left: 2.5%;
  706. width: 95%;
  707. background: #fff;
  708. border-radius: 4px;
  709. opacity: 0;
  710. bottom: -200px;
  711. transition: all .3s cubic-bezier(.4, .68, .15, 1.21) .2s;
  712. -o-transition: all .3s cubic-bezier(.4, .68, .15, 1.21) .2s;
  713. -moz-transition: all .3s cubic-bezier(.4, .68, .15, 1.21) .2s;
  714. -webkit-transition: all .3s cubic-bezier(.4, .68, .15, 1.21) .2s;
  715. z-index: 0;
  716. }
  717. .index-goods .goods_share.active {
  718. opacity: 1;
  719. bottom: 60px;
  720. z-index: 100;
  721. }
  722. .index-goods .goods_share .cent view {
  723. height: 56px;
  724. line-height: 36px;
  725. text-align: center;
  726. color: #666;
  727. display: block;
  728. font-size: 16px;
  729. padding: 10px 0;
  730. }
  731. .index-goods .goods_share .cent view:nth-child(2) {
  732. border-bottom: solid 1px #eee;
  733. }
  734. .index-goods .goods_share .cent view .iconfont {
  735. margin-right: 10upx;
  736. }
  737. .index-goods .goods_share .cent .em {
  738. position: absolute;
  739. left: 44%;
  740. bottom: -10px;
  741. width: 0;
  742. height: 0;
  743. border-left: 12px solid transparent;
  744. border-right: 12px solid transparent;
  745. border-top: 12px solid #fff;
  746. }
  747. .navBarButton {
  748. z-index: 501 !important;
  749. }
  750. .index-goods .h_newlit {
  751. z-index: -50;
  752. top: 45px;
  753. right: 0;
  754. border: 1px solid #ddd;
  755. width: 35%;
  756. -o-transition: all .4s ease 0s;
  757. -moz-transition: all .4s ease 0s;
  758. -webkit-transition: all .4s ease 0s;
  759. opacity: 0;
  760. -webkit-transform: translateY(0) translateX(100%);
  761. transform: translateY(0) translateX(100%);
  762. padding-bottom: 5px;
  763. -moz-box-shadow: -1px 1px 3px rgba(125, 125, 125, .2);
  764. -webkit-box-shadow: -1px 1px 3px rgba(125, 125, 125, .2);
  765. box-shadow: -1px 1px 3px rgba(125, 125, 125, .2);
  766. }
  767. .index-goods .h_newlit.active {
  768. -webkit-transform: translateY(0) translateX(0);
  769. transform: translateY(0) translateX(0);
  770. opacity: 1;
  771. position: fixed;
  772. z-index: 600;
  773. /* #ifndef H5 */
  774. margin-top: 32upx;
  775. /* #endif */
  776. zoom: 1;
  777. }
  778. .index-goods .h_newlit {
  779. width: 120px;
  780. text-align: center;
  781. background: rgba(51, 51, 51, .9);
  782. border: 0;
  783. border-radius: 5px;
  784. -moz-border-radius: 5px;
  785. -webkit-border-radius: 5px;
  786. -o-border-radius: 5px;
  787. -ms-border-radius: 5px;
  788. overflow: inherit;
  789. right: .5rem;
  790. /*margin-top: 50upx;*/
  791. }
  792. .index-goods .h_newlit .em {
  793. position: relative;
  794. z-index: 5;
  795. zoom: 1;
  796. }
  797. .index-goods .h_newlit .em:before {
  798. content: "";
  799. position: absolute;
  800. z-index: 601;
  801. zoom: 1;
  802. top: -7px;
  803. right: 10px;
  804. width: 17px;
  805. height: 12px;
  806. }
  807. .index-goods .h_newlit .em:before {
  808. width: 0;
  809. height: 0;
  810. border-left: 7px transparent solid;
  811. border-right: 7px transparent solid;
  812. border-bottom: 7px rgba(51, 51, 51, .9) solid;
  813. border-top: none;
  814. position: absolute;
  815. z-index: 601;
  816. zoom: 1;
  817. right: 8px;
  818. top: -7px;
  819. }
  820. .index-goods .h_newlit .em view {
  821. border-bottom: solid 1px rgba(102, 102, 102, .9);
  822. color: #fff;
  823. font-size: 1rem;
  824. line-height: 44px;
  825. }
  826. .index-goods .h_newlit .em view:last-child {
  827. border-bottom: 0;
  828. }
  829. .index-goods .h_newlit .em view .iconfont {
  830. margin-right: 10upx;
  831. }
  832. .buy-box-title {
  833. height: 40px;
  834. line-height: 40px;
  835. text-align: center;
  836. background: linear-gradient(to right, #e10a07, #e10a07);
  837. -webkit-background-clip: text;
  838. color: transparent;
  839. font-size: 18px;
  840. padding: 5px 0;
  841. }
  842. .buy-box-title .iconfont {
  843. right: 7px;
  844. font-weight: 600;
  845. color: #e10a07;
  846. position: absolute;
  847. font-size: 38upx;
  848. top: -1px;
  849. }
  850. .buy-box-center .code-cent {
  851. margin: 0 10px;
  852. }
  853. .buy-box-center .cente-text {
  854. margin: 0 10px;
  855. padding: 10px 0;
  856. background: #F1F1F1;
  857. color: #333;
  858. font-size: 14px;
  859. line-height: 24px;
  860. height: 260px;
  861. border-radius: 4px;
  862. overflow: hidden;
  863. text-align: left;
  864. }
  865. .buy-box-center .cente-text .textarea {
  866. padding: 10px;
  867. }
  868. .buy-box-center .code-cent .closeTips {
  869. text-align: left;
  870. line-height: 22px;
  871. color: #AAA;
  872. font-size: 12px;
  873. padding-top: 10px;
  874. margin-left: 10px;
  875. }
  876. .buy-box-center .buy-btn-copy {
  877. background: linear-gradient(to left, #e10a07 0, #e10a07 100%);
  878. display: block;
  879. border-radius: 50px;
  880. line-height: 40px;
  881. height: 40px;
  882. text-align: center;
  883. color: #fff;
  884. font-size: 16px;
  885. width: 90%;
  886. margin: 0 auto;
  887. margin-top: 10px;
  888. margin-bottom: 10px;
  889. }
  890. .buy-box-center .buy-btn-copy.active {
  891. background: #1FB931;
  892. }
  893. .buy-box-center .code-pic-info {
  894. height: 119px;
  895. }
  896. .navBarButtonBox {
  897. width: 0px;
  898. height: 0px;
  899. overflow: hidden;
  900. }
  901. .getTbk {
  902. background: -moz-linear-gradient(left, #e10a07 0, #FBAA58 100%);
  903. background: -webkit-gradient(linear, left top, left right, color-stop(0, #e10a07), color-stop(100%, #FBAA58));
  904. background: -webkit-linear-gradient(left, #e10a07 0, #FBAA58 100%);
  905. background: -o-linear-gradient(left, #e10a07 0, #FBAA58 100%);
  906. background: -ms-linear-gradient(left, #e10a07 0, #FBAA58 100%);
  907. background: linear-gradient(to left, #e10a07 0, #FBAA58 100%);
  908. }
  909. /*
  910. 9.9包邮
  911. */
  912. .jiu-page .main-title {
  913. background: -moz-linear-gradient(left, #e10a07 0, #FBAA58 100%);
  914. background: -webkit-gradient(linear, left top, left right, color-stop(0, #e10a07), color-stop(100%, #FBAA58));
  915. background: -webkit-linear-gradient(left, #e10a07 0, #FBAA58 100%);
  916. background: -o-linear-gradient(left, #e10a07 0, #FBAA58 100%);
  917. background: -ms-linear-gradient(left, #e10a07 0, #FBAA58 100%);
  918. background: linear-gradient(to left, #e10a07 0, #FBAA58 100%);
  919. border-bottom-color: transparent;
  920. padding: 10px;
  921. position: fixed;
  922. top: 0;
  923. left: 0;
  924. width: 100%;
  925. z-index: 120;
  926. display: block;
  927. box-sizing: border-box;
  928. /* #ifdef APP-PLUS */
  929. padding-top: var(--status-bar-height);
  930. /* #endif */
  931. }
  932. .jiu-page .main-title .menu-cat {
  933. font-family: Simhei;
  934. font-size: 17px;
  935. height: 28px;
  936. line-height: 28px;
  937. color: #fff;
  938. text-align: center;
  939. }
  940. .jiu-page .main-title .menu-cat .span {
  941. position: relative;
  942. cursor: pointer;
  943. padding: 6px 22px 6px 15px;
  944. text-align: center;
  945. }
  946. .jiu-page .main-title .menu-cat .span image {
  947. width: 65px;
  948. height: 22px;
  949. margin-left: 42%;
  950. }