goodsDetail.scss 82 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281
  1. .sld_goods_detail {
  2. width: 100%;
  3. .contain_con {
  4. width: 100%;
  5. background: #ffffff;
  6. height: 48px;
  7. position: fixed;
  8. top: 0;
  9. box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
  10. z-index: 100;
  11. -webkit-animation: goodsFixed 0.5s ease-in-out;
  12. animation: goodsFixed 0.5s ease-in-out;
  13. @-webkit-keyframes goodsFixed {
  14. 0% {
  15. top: -50px;
  16. }
  17. to {
  18. top: 0;
  19. }
  20. }
  21. @keyframes goodsFixed {
  22. 0% {
  23. top: -50px;
  24. }
  25. to {
  26. top: 0;
  27. }
  28. }
  29. .contain_content {
  30. width: 1200px;
  31. margin: 0 auto;
  32. .contain_con_left {
  33. width: 250px;
  34. height: 48px;
  35. background: #f9f9f9;
  36. border-radius: 2px 2px 0 0;
  37. padding-left: 15px;
  38. box-sizing: border-box;
  39. border-left: 1px solid #eee;
  40. border-right: 1px solid#eee;
  41. .store_type {
  42. width: 31px;
  43. height: 16px;
  44. background: $colorMain;
  45. border-radius: 3px;
  46. font-size: 12px;
  47. //font-family: Microsoft YaHei;
  48. font-weight: 400;
  49. color: #ffffff;
  50. line-height: 16px;
  51. text-align: center;
  52. }
  53. .store_title {
  54. font-size: 16px;
  55. //font-family: Microsoft YaHei;
  56. font-weight: bold;
  57. color: #333333;
  58. line-height: 39px;
  59. margin: 0 10px;
  60. }
  61. img {
  62. width: 20px;
  63. height: 20px;
  64. cursor: pointer;
  65. }
  66. }
  67. .contain_con_right {
  68. width: 935px;
  69. margin-left: 15px;
  70. border: 1px solid #eee;
  71. border-radius: 3px;
  72. .goods_description_title {
  73. height: 46px;
  74. background: #f8f8f8;
  75. .description_title_left {
  76. span {
  77. min-width: 120px;
  78. height: 46px;
  79. display: block;
  80. font-size: 14px;
  81. //font-family: Microsoft YaHei;
  82. font-weight: 400;
  83. color: #333333;
  84. text-align: center;
  85. line-height: 46px;
  86. }
  87. .description_active {
  88. background: #ffffff;
  89. border-top: 2px solid $colorMain2;
  90. color: $colorMain2;
  91. }
  92. }
  93. .description_title_right {
  94. padding-right: 10px;
  95. .mobile_order {
  96. position: relative;
  97. &:hover {
  98. .mobile_order_model {
  99. display: block;
  100. }
  101. }
  102. span {
  103. font-size: 12px;
  104. //font-family: Microsoft YaHei;
  105. font-weight: 400;
  106. color: #666666;
  107. line-height: 74px;
  108. }
  109. .goods_code {
  110. margin-left: 16px;
  111. }
  112. .mobile_order_model {
  113. position: absolute;
  114. display: none;
  115. top: 70px;
  116. width: 180px;
  117. height: 190px;
  118. background: #ffffff;
  119. border: 1px solid #dfdfdf;
  120. left: -15px;
  121. &::before {
  122. box-sizing: content-box;
  123. width: 0;
  124. height: 0;
  125. position: absolute;
  126. top: -16px;
  127. right: 81px;
  128. padding: 0;
  129. border-bottom: 8px solid #ffffff;
  130. border-top: 8px solid transparent;
  131. border-left: 8px solid transparent;
  132. border-right: 8px solid transparent;
  133. display: block;
  134. content: "";
  135. z-index: 12;
  136. }
  137. &::after {
  138. box-sizing: content-box;
  139. width: 0px;
  140. height: 0px;
  141. position: absolute;
  142. top: -18px;
  143. right: 80px;
  144. padding: 0;
  145. border-bottom: 9px solid #cccccc;
  146. border-top: 9px solid transparent;
  147. border-left: 9px solid transparent;
  148. border-right: 9px solid transparent;
  149. display: block;
  150. content: "";
  151. z-index: 10;
  152. }
  153. .model_goods_code {
  154. width: 126px;
  155. height: 126px;
  156. margin: 20px auto 0;
  157. img {
  158. max-width: 126px;
  159. max-height: 126px;
  160. margin: auto;
  161. }
  162. }
  163. p {
  164. text-align: center;
  165. margin-top: 12px;
  166. }
  167. }
  168. }
  169. .line {
  170. width: 1px;
  171. height: 27px;
  172. background: #dddddd;
  173. margin: 0 10px;
  174. }
  175. .go_add_cart {
  176. width: 90px;
  177. height: 30px;
  178. background: $colorMain;
  179. border-radius: 3px;
  180. font-size: 14px;
  181. //font-family: Microsoft YaHei;
  182. font-weight: 400;
  183. color: #ffffff;
  184. line-height: 30px;
  185. text-align: center;
  186. }
  187. }
  188. }
  189. }
  190. }
  191. }
  192. .goods_detail_content {
  193. width: 100%;
  194. margin: 0 auto;
  195. // 商品所属分类 ,联系客服,关注店铺 start
  196. .goods_about_con {
  197. width: 100%;
  198. height: 40px;
  199. background: #f8f8f8;
  200. .goods_about {
  201. width: 1200px;
  202. height: 40px;
  203. margin: 0 auto;
  204. .goods_classify {
  205. font-size: 12px;
  206. //font-family: Microsoft YaHei;
  207. font-weight: 400;
  208. color: #999999;
  209. a,
  210. a:visited {
  211. text-decoration: none;
  212. color: #999999;
  213. }
  214. a:hover {
  215. color: $colorMain;
  216. }
  217. }
  218. .goods_about_right {
  219. .goods_about_store {
  220. span:nth-child(1) {
  221. font-size: 14px;
  222. //font-family: Microsoft YaHei;
  223. font-weight: 400;
  224. color: #666666;
  225. line-height: 14px;
  226. &:hover {
  227. color: $colorMain;
  228. }
  229. }
  230. span:nth-child(2) {
  231. font-size: 12px;
  232. //font-family: Microsoft YaHei;
  233. font-weight: 400;
  234. color: #fefefe;
  235. line-height: 14px;
  236. width: 31px;
  237. height: 16px;
  238. background: $colorMain;
  239. border-radius: 2px;
  240. text-align: center;
  241. margin-left: 10px;
  242. }
  243. }
  244. .contact_service {
  245. margin: 0 18px 0 26px;
  246. cursor: pointer;
  247. &:hover {
  248. span {
  249. color: $colorMain;
  250. }
  251. }
  252. span {
  253. font-size: 14px;
  254. //font-family: Microsoft YaHei;
  255. font-weight: 400;
  256. color: #666666;
  257. line-height: 14px;
  258. }
  259. img {
  260. width: 20px;
  261. height: 20px;
  262. margin-left: 8px;
  263. }
  264. }
  265. .focus_store {
  266. line-height: 20px;
  267. margin: 0;
  268. width: 180px;
  269. text-align: right;
  270. span {
  271. line-height: 20px;
  272. text-align: center;
  273. float: right;
  274. margin-right: 8px;
  275. }
  276. img {
  277. float: right;
  278. margin-left: 0;
  279. }
  280. }
  281. }
  282. }
  283. }
  284. // 商品所属分类 ,联系客服,关注店铺 end
  285. // 商品主要信息 start
  286. .main_con {
  287. width: 1200px;
  288. margin: 20px auto 0;
  289. background: #fff;
  290. .goods_des {
  291. display: flex;
  292. margin-bottom: 30px;
  293. .goods_des_left {
  294. margin-right: 20px;
  295. .goods_main_picture {
  296. position: relative;
  297. .preview-box {
  298. position: relative;
  299. width: 350px;
  300. height: 350px;
  301. border-radius: 2px;
  302. .v_btn {
  303. width: 350px;
  304. z-index: 990;
  305. position: absolute;
  306. bottom: 144px;
  307. img {
  308. cursor: pointer;
  309. display: block;
  310. margin: 0 auto;
  311. }
  312. }
  313. .default_image {
  314. width: 350px;
  315. height: 350px;
  316. border-radius: 2px;
  317. background-size: contain;
  318. background-repeat: no-repeat;
  319. background-position: center;
  320. &.skeleton_default_image {
  321. background: $colorSkeleton;
  322. }
  323. }
  324. .mask {
  325. position: absolute;
  326. top: 0;
  327. left: 0;
  328. width: 120px;
  329. height: 120px;
  330. z-index: 10;
  331. background: #ffffff;
  332. opacity: 0.2;
  333. cursor: move;
  334. }
  335. .magnifier_icon {
  336. position: absolute;
  337. bottom: 0;
  338. right: 0;
  339. width: 27px;
  340. height: 27px;
  341. background: rgba(0, 0, 0, 0.3);
  342. z-index: 10;
  343. i {
  344. font-size: 16px;
  345. color: #ffffff;
  346. text-align: center;
  347. line-height: 27px;
  348. }
  349. }
  350. }
  351. .goods_picture_big {
  352. position: absolute;
  353. left: 370px;
  354. top: 0;
  355. z-index: 50;
  356. width: 500px;
  357. height: 500px;
  358. overflow: hidden;
  359. .default_image_big {
  360. position: absolute;
  361. width: 1458px;
  362. height: 1458px;
  363. background-size: contain;
  364. background-repeat: no-repeat;
  365. background-position: center;
  366. }
  367. }
  368. }
  369. .goods_picture_con {
  370. margin-top: 11px;
  371. width: 350px;
  372. &.skeleton_goods_picture_con {
  373. background: #eee;
  374. height: 59px;
  375. }
  376. .left_arrow {
  377. font-size: 6px;
  378. color: #999999;
  379. cursor: pointer;
  380. }
  381. .show_box {
  382. position: relative;
  383. flex: 1;
  384. overflow: hidden;
  385. width: 326px;
  386. margin: 0 2px;
  387. height: 59px;
  388. .goods_picture_list {
  389. position: absolute;
  390. top: 0;
  391. left: 0;
  392. .goods_img {
  393. width: 58px;
  394. height: 58px;
  395. margin-right: 8px;
  396. border: 1px solid #cccccc;
  397. cursor: pointer;
  398. &:nth-last-child(1) {
  399. margin-right: 0;
  400. }
  401. .goods_image {
  402. width: 56px;
  403. height: 56px;
  404. background-size: contain;
  405. background-repeat: no-repeat;
  406. background-position: center;
  407. }
  408. }
  409. .goods_img_active {
  410. border: 1px solid $colorMain;
  411. }
  412. }
  413. }
  414. .right_arrow {
  415. font-size: 6px;
  416. color: #999999;
  417. cursor: pointer;
  418. }
  419. .no_left_arrow {
  420. color: #dddddd;
  421. }
  422. }
  423. // 分享 收藏 start
  424. .collection_share_btn {
  425. padding-left: 10px;
  426. .collection_btn {
  427. margin-top: 25px;
  428. img {
  429. width: 24px;
  430. height: 24px;
  431. }
  432. span {
  433. display: inline-block;
  434. width: 36px;
  435. font-size: 12px;
  436. //font-family: Microsoft YaHei;
  437. font-weight: 400;
  438. color: #666666;
  439. margin-left: 3px;
  440. margin-right: 2px;
  441. }
  442. }
  443. .share_btn {
  444. position: relative;
  445. margin-left: 18px;
  446. margin-top: 25px;
  447. .share_btn_con {
  448. padding-left: 10px;
  449. img {
  450. width: 24px;
  451. height: 24px;
  452. }
  453. span {
  454. font-size: 12px;
  455. //font-family: Microsoft YaHei;
  456. font-weight: 400;
  457. color: #666666;
  458. margin-left: 8px;
  459. }
  460. &:hover span {
  461. color: #333333;
  462. }
  463. }
  464. .share_list {
  465. margin-left: -1px;
  466. width: 80px;
  467. height: 140px;
  468. border: 1px solid #dfdfdf;
  469. border-radius: 2px;
  470. padding: 10px 0 10px 10px;
  471. position: absolute;
  472. top: -12px;
  473. display: none;
  474. z-index: 999;
  475. background: #fff;
  476. .share_btn_pre {
  477. margin-top: 1px;
  478. margin-bottom: 8px;
  479. &:nth-last-of-type(1) {
  480. margin-bottom: 0;
  481. }
  482. img {
  483. width: 24px;
  484. height: 24px;
  485. }
  486. span {
  487. font-size: 12px;
  488. //font-family: Microsoft YaHei;
  489. font-weight: 400;
  490. color: #666666;
  491. margin-left: 8px;
  492. }
  493. &:hover span {
  494. color: #333333;
  495. }
  496. }
  497. .wx_share_code {
  498. position: absolute;
  499. right: -135px;
  500. bottom: 0px;
  501. width: 130px;
  502. height: 135px;
  503. background: #ffffff;
  504. border: 1px solid #d9d9d9;
  505. .wx_share_code_img {
  506. canvas {
  507. width: 90px !important;
  508. height: 90px !important;
  509. }
  510. }
  511. .wx_share_code_title {
  512. font-size: 10px;
  513. //font-family: Microsoft YaHei;
  514. font-weight: 400;
  515. color: #333333;
  516. margin-top: 6px;
  517. }
  518. }
  519. }
  520. &:hover .share_btn_con {
  521. display: none;
  522. }
  523. &:hover .share_list {
  524. display: block;
  525. }
  526. }
  527. }
  528. // 分享 收藏 end
  529. }
  530. .m_item_inner {
  531. float: left;
  532. .item_info {
  533. position: relative;
  534. width: 630px;
  535. padding-bottom: 20px;
  536. }
  537. .detaile_name {
  538. font-size: 16px;
  539. //font-family: Microsoft YaHei;
  540. font-weight: bold;
  541. color: #333333;
  542. margin-bottom: 6px;
  543. text-overflow: -o-ellipsis-lastline;
  544. overflow: hidden;
  545. text-overflow: ellipsis;
  546. display: -webkit-box;
  547. -webkit-line-clamp: 2;
  548. line-clamp: 2;
  549. -webkit-box-orient: vertical;
  550. line-height: 25px;
  551. &.skeleton_detaile_name {
  552. background: $colorSkeleton;
  553. width: 100%;
  554. height: 18px;
  555. }
  556. }
  557. .p_ad {
  558. font-size: 14px;
  559. //font-family: Microsoft YaHei;
  560. font-weight: 400;
  561. color: $colorMain;
  562. text-overflow: ellipsis;
  563. overflow: hidden;
  564. word-break: break-all;
  565. margin-bottom: 12px;
  566. line-height: 18px;
  567. &.skeleton_p_ad {
  568. background: $colorSkeleton;
  569. width: 100%;
  570. height: 16px;
  571. }
  572. }
  573. .summary {
  574. width: 630px;
  575. // min-height: 160px;
  576. background: url(/goods/goods_detail_bg.png) 100% 100%;
  577. padding: 20px 20px 20px;
  578. box-sizing: border-box;
  579. }
  580. .download_warp{
  581. a{
  582. font-size: 12px;
  583. display: inline-block;
  584. text-decoration: underline;
  585. margin: 5px;
  586. }
  587. }
  588. .act_banner {
  589. width: 630px;
  590. height: 50px;
  591. background-position: center center;
  592. padding-left: 18px;
  593. padding-right: 20px;
  594. display: flex;
  595. align-items: center;
  596. position: relative;
  597. &.pre_not {
  598. background: url(/activity/pre_not_open.png) 100% 100%;
  599. }
  600. &.pre_do {
  601. background: url(/activity/pre_do_open.png) 100% 100%;
  602. }
  603. &.pin_not {
  604. background: url(/activity/pin_not_open.png) 100% 100%;
  605. }
  606. &.pin_do {
  607. background: url(/activity/pin_do_open.png) 100% 100%;
  608. }
  609. &.sec_not {
  610. background: url(/activity/sec_not_open.png) 100% 100%;
  611. }
  612. &.sec_do {
  613. background: url(/activity/sec_do_open.png) 100% 100%;
  614. }
  615. &.ladder_not {
  616. background: url(/activity/ladder_not_open.png) 100% 100%;
  617. }
  618. &.ladder_do {
  619. background: url(/activity/ladder_do_open.png) 100% 100%;
  620. }
  621. }
  622. .pintuan_left_num {
  623. min-width: 96px;
  624. height: 25px;
  625. border-radius: 11px;
  626. display: flex;
  627. align-items: center;
  628. justify-content: center;
  629. border: 1px solid #ffffff;
  630. box-sizing: border-box;
  631. margin-right: 13px;
  632. img {
  633. width: 20px;
  634. height: 17px;
  635. margin-right: 4px;
  636. }
  637. }
  638. .group_return_regiment {
  639. padding: 0 12px;
  640. box-sizing: border-box;
  641. height: 25px;
  642. background: rgba(255, 255, 255, 1);
  643. border-radius: 0 15px 0 15px;
  644. font-size: 13px;
  645. //font-family: PingFang SC;
  646. font-weight: 400;
  647. color: rgba(233, 17, 30, 1);
  648. display: flex;
  649. align-items: center;
  650. justify-content: center;
  651. margin-left: -12px;
  652. }
  653. .SorC_remind {
  654. padding: 0 10px;
  655. height: 25px;
  656. background: #ffffff;
  657. border-radius: 11px;
  658. display: flex;
  659. align-items: center;
  660. justify-content: center;
  661. cursor: pointer;
  662. img {
  663. width: 20px;
  664. height: 20px;
  665. margin-right: 3px;
  666. }
  667. .remind_on {
  668. color: #e60012;
  669. font-size: 13px;
  670. letter-spacing: 1px;
  671. font-weight: bold;
  672. //font-family: Microsoft YaHei;
  673. }
  674. .remind_off {
  675. color: #dbdbdb;
  676. font-size: 13px;
  677. letter-spacing: 1px;
  678. font-weight: bold;
  679. //font-family: Microsoft YaHei;
  680. }
  681. }
  682. .countDown0 {
  683. font-size: 14px;
  684. //font-family: PingFang SC;
  685. font-weight: 700;
  686. color: #ffffff;
  687. }
  688. .countDown1 {
  689. // width: 20px;
  690. // height: 18px;
  691. padding: 2px 3px;
  692. background: #ffffff;
  693. border-radius: 50%;
  694. font-size: 13px;
  695. //font-family: PingFang SC;
  696. font-weight: 500;
  697. color: #f12826;
  698. text-align: center;
  699. line-height: 18px;
  700. margin-left: 5px;
  701. }
  702. .countDown2 {
  703. font-size: 13px;
  704. color: #fff;
  705. margin-left: 5px;
  706. }
  707. .title {
  708. font-size: 20px;
  709. //font-family: HelloFont WenYiHei;
  710. font-weight: bold;
  711. font-style: italic;
  712. color: #ffffff;
  713. }
  714. .time_title {
  715. font-size: 14px;
  716. margin-left: 20px;
  717. color: #fff;
  718. }
  719. .desc {
  720. font-size: 14px;
  721. color: #fff;
  722. position: absolute;
  723. right: 20px;
  724. display: flex;
  725. }
  726. .activity_addDesc {
  727. margin-top: 10px;
  728. .preSale_addDesc {
  729. padding-left: 60px;
  730. font-size: 14px;
  731. //font-family: Microsoft YaHei;
  732. font-weight: 400;
  733. color: #999999;
  734. line-height: 22px;
  735. }
  736. }
  737. }
  738. }
  739. }
  740. // 商品主要信息 end
  741. }
  742. .sld_summary_goods_left {
  743. display: flex;
  744. justify-content: space-between;
  745. .goods_price {
  746. display: flex;
  747. .price_title {
  748. margin-right: 20px;
  749. text-transform: uppercase;
  750. font-size: 14px;
  751. font-family: Microsoft YaHei;
  752. font-weight: 400;
  753. color: #666666;
  754. &.activity_title {
  755. letter-spacing: 1px !important;
  756. }
  757. }
  758. .p_price {
  759. color: $colorMain2;
  760. font-size: 16px;
  761. font-weight: 600;
  762. margin-left: -6px;
  763. margin-right: 16px;
  764. &.skeleton_p_price {
  765. background: $colorSkeleton;
  766. width: 70px;
  767. display: inline-block;
  768. height: 18px;
  769. }
  770. span:nth-child(2) {
  771. font-size: 24px;
  772. }
  773. }
  774. }
  775. }
  776. .goodsMinOrder{
  777. font-size: 14px;
  778. margin: 10px 0;
  779. font-weight: bold;
  780. }
  781. .market_price {
  782. font-size: 12px;
  783. //font-family: Microsoft YaHei;
  784. font-weight: 400;
  785. text-decoration: line-through;
  786. color: #666;
  787. margin-top: 8px;
  788. &.activity_style {
  789. text-decoration: none !important;
  790. }
  791. }
  792. .actual_sales {
  793. font-size: 14px;
  794. font-weight: 400;
  795. color: #aaaaaa;
  796. line-height: 30px;
  797. span {
  798. // color: $colorMain;
  799. color: #ec2116;
  800. }
  801. }
  802. // 优惠券 start
  803. .coupon {
  804. margin-top: 10px;
  805. .coupon_title {
  806. font-size: 14px;
  807. //font-family: Microsoft YaHei;
  808. font-weight: 400;
  809. color: #666666;
  810. line-height: 30px;
  811. }
  812. .coupon_list {
  813. margin-left: 22px;
  814. .coupon_pre_rules {
  815. height: 26px;
  816. border: 1px solid $colorMain;
  817. border-radius: 3px;
  818. background: #feeaeb;
  819. font-size: 14px;
  820. //font-family: PingFang SC;
  821. font-weight: 500;
  822. color: $colorMain;
  823. line-height: 26px;
  824. padding: 0 8px;
  825. text-align: center;
  826. margin-right: 10px;
  827. }
  828. }
  829. }
  830. // 优惠券 end
  831. // 促销 start
  832. .promotion {
  833. margin-top: 10px;
  834. .promotion_left {
  835. .promotion_title {
  836. font-size: 14px;
  837. //font-family: Microsoft YaHei;
  838. font-weight: 400;
  839. color: #666666;
  840. line-height: 30px;
  841. margin-right: 20px;
  842. letter-spacing: 10px;
  843. }
  844. .promotion_list {
  845. width: 415px;
  846. white-space: nowrap;
  847. text-overflow: ellipsis;
  848. overflow: hidden;
  849. word-break: break-all;
  850. .promotion_block {
  851. .promotion_pre {
  852. font-size: 14px;
  853. //font-family: Microsoft YaHei;
  854. font-weight: 400;
  855. color: #666666;
  856. line-height: 30px;
  857. }
  858. }
  859. }
  860. }
  861. .promotion_right {
  862. font-size: 14px;
  863. //font-family: Microsoft YaHei;
  864. font-weight: 400;
  865. color: #306fbc;
  866. line-height: 30px;
  867. cursor: pointer;
  868. }
  869. .full_discount_model {
  870. height: 250px;
  871. overflow-y: auto;
  872. .full_discount_pre {
  873. .full_pre_tips {
  874. width: 5px;
  875. height: 5px;
  876. background: $colorMain2;
  877. border-radius: 50%;
  878. margin-top: 5px;
  879. }
  880. .full_pre_con {
  881. margin-left: 10px;
  882. margin-bottom: 15px;
  883. .full_pre_title {
  884. font-size: 16px;
  885. //font-family: Microsoft YaHei;
  886. font-weight: bold;
  887. color: #333333;
  888. }
  889. .full_pre_des {
  890. width: 450px;
  891. border-bottom: 1px dashed #e6e6e6;
  892. border-radius: 2px;
  893. padding: 10px;
  894. box-sizing: border-box;
  895. margin-top: 10px;
  896. .full_pre_name {
  897. span {
  898. display: block;
  899. &:nth-child(1) {
  900. // width: 159px;
  901. font-size: 14px;
  902. //font-family: Microsoft YaHei;
  903. font-weight: bold;
  904. color: #333333;
  905. border-radius: 8px;
  906. //font-family: Microsoft YaHei;
  907. font-weight: 400;
  908. line-height: 16px;
  909. // text-align: center;
  910. }
  911. &:nth-child(2) {
  912. font-size: 12px;
  913. //font-family: Microsoft YaHei;
  914. font-weight: 400;
  915. color: #999999;
  916. margin-left: 20px;
  917. }
  918. }
  919. }
  920. .full_pre_desc {
  921. margin-top: 10px;
  922. .full_pre_img {
  923. width: 40px;
  924. height: 40px;
  925. background: #ffffff;
  926. border-radius: 2px;
  927. background-size: contain;
  928. background-repeat: no-repeat;
  929. background-position: center;
  930. margin-right: 7px;
  931. }
  932. .full_pre_right {
  933. p,
  934. span {
  935. width: 328px;
  936. font-size: 12px;
  937. //font-family: Microsoft YaHei;
  938. font-weight: 400;
  939. color: #333333;
  940. overflow: hidden;
  941. text-overflow: ellipsis;
  942. white-space: nowrap;
  943. }
  944. span {
  945. color: #666666;
  946. margin-top: 6px;
  947. }
  948. }
  949. }
  950. }
  951. }
  952. }
  953. }
  954. }
  955. i {
  956. font-style: normal;
  957. }
  958. // 促销 end
  959. // 配送地 start
  960. .delivery {
  961. padding-left: 20px;
  962. margin-top: 22px;
  963. position: relative;
  964. .delivery_title {
  965. font-size: 14px;
  966. //font-family: Microsoft YaHei;
  967. font-weight: 400;
  968. color: #666666;
  969. line-height: 30px;
  970. }
  971. .delivery_address {
  972. height: 30px;
  973. background: #ffffff;
  974. border: 1px solid #dfdfdf;
  975. border-radius: 3px;
  976. padding: 0 11px;
  977. box-sizing: border-box;
  978. margin-left: 18px;
  979. cursor: pointer;
  980. span {
  981. display: inline-block;
  982. font-size: 14px;
  983. //font-family: Microsoft YaHei;
  984. font-weight: 400;
  985. color: #999999;
  986. line-height: 30px;
  987. text-overflow: ellipsis;
  988. max-width: 275px;
  989. overflow: hidden;
  990. text-overflow: ellipsis;
  991. white-space: nowrap;
  992. }
  993. i {
  994. font-size: 12px;
  995. margin-left: 10px;
  996. }
  997. }
  998. .address_dia {
  999. position: absolute;
  1000. z-index: 1000;
  1001. height: 310px;
  1002. border: 1px solid #dfdfdf;
  1003. background: #ffffff;
  1004. top: 32px;
  1005. width: 397px;
  1006. left: 81px;
  1007. overflow: auto;
  1008. .add_dia_top {
  1009. height: 30px;
  1010. background: #f8f8f8;
  1011. display: flex;
  1012. .dia_top_item {
  1013. padding: 0 25px;
  1014. line-height: 30px;
  1015. font-size: 13px;
  1016. //font-family: Microsoft YaHei;
  1017. font-weight: 400;
  1018. color: #666666;
  1019. cursor: pointer;
  1020. }
  1021. .sel_item {
  1022. background: #ffffff !important;
  1023. color: $colorMain;
  1024. box-shadow: 0 2px 0px $colorMain inset;
  1025. }
  1026. }
  1027. .add_dia_bottom {
  1028. margin-top: 10px;
  1029. padding: 0 20px;
  1030. .usual_addr {
  1031. padding-top: 10px;
  1032. }
  1033. .other_addr {
  1034. .o_add_top {
  1035. display: flex;
  1036. .o_addr_item {
  1037. padding: 4px 11px;
  1038. border: 1px solid #dfdfdf;
  1039. background: #eeeeee;
  1040. color: #333333;
  1041. font-size: 12px;
  1042. font-weight: 400;
  1043. cursor: pointer;
  1044. }
  1045. .o_sel {
  1046. border-bottom: none;
  1047. //font-family: Microsoft YaHei;
  1048. background: #fff !important;
  1049. }
  1050. }
  1051. .o_add_bottom {
  1052. border-top: 1px solid #dfdfdf;
  1053. margin-top: -1px;
  1054. padding-top: 15px;
  1055. display: flex;
  1056. flex-wrap: wrap;
  1057. .o_addrC_item {
  1058. padding: 2px 6px;
  1059. margin: 5px 9px;
  1060. font-size: 12px;
  1061. color: #333333;
  1062. cursor: pointer;
  1063. &:hover {
  1064. color: $colorMain;
  1065. }
  1066. }
  1067. .o_selected {
  1068. color: $colorMain;
  1069. }
  1070. }
  1071. }
  1072. }
  1073. }
  1074. }
  1075. // 配送地 end
  1076. // 运费 start
  1077. .freight {
  1078. padding-left: 20px;
  1079. margin-top: 20px;
  1080. .freight_title {
  1081. font-size: 14px;
  1082. //font-family: Microsoft YaHei;
  1083. font-weight: 400;
  1084. color: #666666;
  1085. letter-spacing: 12px;
  1086. .skeleton_freight_amount {
  1087. background: $colorSkeleton;
  1088. display: inline-block;
  1089. width: 50px;
  1090. height: 16px;
  1091. }
  1092. }
  1093. span {
  1094. font-size: 14px;
  1095. //font-family: Microsoft YaHei;
  1096. font-weight: 400;
  1097. color: #333333;
  1098. margin-left: 6px;
  1099. }
  1100. }
  1101. // 运费 end
  1102. // 商品规格 start
  1103. .goods_spec {
  1104. padding-left: 20px;
  1105. margin-top: 20px;
  1106. flex-wrap: wrap;
  1107. .goods_spec_pre {
  1108. .goods_spec_pre_title {
  1109. justify-content: space-between;
  1110. font-size: 14px;
  1111. //font-family: Microsoft YaHei;
  1112. font-weight: 400;
  1113. color: #666666;
  1114. line-height: 30px;
  1115. min-width: 52px;
  1116. text-indent: "justify";
  1117. white-space: nowrap;
  1118. letter-spacing: 12px;
  1119. }
  1120. .goods_spec_pre_list {
  1121. margin-left: 7px;
  1122. flex-wrap: wrap;
  1123. .specval_pre {
  1124. margin-right: 7px;
  1125. margin-bottom: 20px;
  1126. .specval_pre_image {
  1127. width: 48px;
  1128. height: 48px;
  1129. border-radius: 3px;
  1130. background-size: contain;
  1131. background-repeat: no-repeat;
  1132. background-position: center;
  1133. }
  1134. span {
  1135. display: inline-block;
  1136. max-width: 190px;
  1137. overflow: hidden;
  1138. text-overflow: ellipsis;
  1139. white-space: nowrap;
  1140. background: #ffffff;
  1141. border: 1px solid #dfdfdf;
  1142. border-radius: 3px;
  1143. font-size: 14px;
  1144. //font-family: Microsoft YaHei;
  1145. font-weight: 400;
  1146. color: #333333;
  1147. display: block;
  1148. padding: 10px 20px;
  1149. box-sizing: border-box;
  1150. }
  1151. }
  1152. .specval_pre_active {
  1153. position: relative;
  1154. span {
  1155. display: inline-block;
  1156. max-width: 184px;
  1157. border: 1px solid $colorMain;
  1158. }
  1159. .check_mark {
  1160. width: 14px;
  1161. height: 14px;
  1162. position: absolute;
  1163. bottom: 3px;
  1164. right: 0;
  1165. }
  1166. }
  1167. .specval_pre_disabled {
  1168. position: relative;
  1169. opacity: 0.2;
  1170. }
  1171. }
  1172. }
  1173. }
  1174. // 商品规格 end
  1175. // 数量加减及库存 start
  1176. .quantity_inventory {
  1177. padding: 0 20px 0;
  1178. // padding-bottom: 40px;
  1179. // border-bottom: 1px solid #dfdfdf;
  1180. .quantity_title {
  1181. font-size: 14px;
  1182. //font-family: Microsoft YaHei;
  1183. font-weight: 400;
  1184. color: #666666;
  1185. line-height: 30px;
  1186. letter-spacing: 11px;
  1187. }
  1188. .quantity_edit {
  1189. border: 1px solid #dddddd;
  1190. margin-left: 10px;
  1191. border-radius: 3px;
  1192. // span {
  1193. // -moz-user-select: none; /*火狐*/
  1194. // -webkit-user-select: none; /*webkit浏览器*/
  1195. // -ms-user-select: none; /*IE10*/
  1196. // user-select: none;
  1197. // display: block;
  1198. // width: 30px;
  1199. // height: 30px;
  1200. // border: none;
  1201. // border-radius: 3px;
  1202. // text-align: center;
  1203. // line-height: 30px;
  1204. // cursor: pointer;
  1205. // }
  1206. .numred {
  1207. display: flex;
  1208. flex-direction: column;
  1209. border-left: 1px solid #ddd;
  1210. .sp {
  1211. height: 20px;
  1212. -moz-user-select: none; /*火狐*/
  1213. -webkit-user-select: none; /*webkit浏览器*/
  1214. -ms-user-select: none; /*IE10*/
  1215. user-select: none;
  1216. display: flex;
  1217. align-items: center;
  1218. justify-content: center;
  1219. width: 20px;
  1220. border: none;
  1221. font-size: 14px;
  1222. color: #666666;
  1223. cursor: pointer;
  1224. background-color: #f5f5f5;
  1225. &:first-child {
  1226. border-bottom: 1px solid #ddd;
  1227. }
  1228. }
  1229. }
  1230. input {
  1231. width: 46px;
  1232. height: 30px;
  1233. border: none;
  1234. // border-left: 1px solid #ddd;
  1235. // border-right: 1px solid #ddd;
  1236. text-align: center;
  1237. cursor: pointer;
  1238. }
  1239. /*** 消除input元素 type="number" 时默认的 加减按钮*/
  1240. input[type="number"]::-webkit-inner-spin-button,
  1241. input[type="number"]::-webkit-outer-spin-button {
  1242. -webkit-appearance: none;
  1243. margin: 0;
  1244. }
  1245. /*** 消除input元素 type="number" 时默认的 加减按钮---moz版*/
  1246. input[type="number"] {
  1247. -moz-appearance: textfield;
  1248. }
  1249. }
  1250. .inventory {
  1251. font-size: 12px;
  1252. //font-family: Microsoft YaHei;
  1253. font-weight: 400;
  1254. color: #999999;
  1255. line-height: 30px;
  1256. margin-left: 17px;
  1257. }
  1258. }
  1259. // 数量加减及库存 end
  1260. //立即购买 加入购物车 start
  1261. .options_btn {
  1262. .goods_code {
  1263. position: absolute;
  1264. bottom: -164px;
  1265. border: 1px solid #cccccc;
  1266. padding: 10px;
  1267. &::before {
  1268. box-sizing: content-box;
  1269. width: 0;
  1270. height: 0;
  1271. position: absolute;
  1272. top: -16px;
  1273. right: 81px;
  1274. padding: 0;
  1275. border-bottom: 8px solid #ffffff;
  1276. border-top: 8px solid transparent;
  1277. border-left: 8px solid transparent;
  1278. border-right: 8px solid transparent;
  1279. display: block;
  1280. content: "";
  1281. z-index: 12;
  1282. }
  1283. &::after {
  1284. box-sizing: content-box;
  1285. width: 0px;
  1286. height: 0px;
  1287. position: absolute;
  1288. top: -18px;
  1289. right: 80px;
  1290. padding: 0;
  1291. border-bottom: 9px solid #cccccc;
  1292. border-top: 9px solid transparent;
  1293. border-left: 9px solid transparent;
  1294. border-right: 9px solid transparent;
  1295. display: block;
  1296. content: "";
  1297. z-index: 10;
  1298. }
  1299. }
  1300. .option_desc {
  1301. color: #bbbbbb;
  1302. font-size: 14px;
  1303. margin-bottom: 20px;
  1304. }
  1305. .recoOffShop {
  1306. width: 829px;
  1307. display: flex;
  1308. flex-wrap: wrap;
  1309. margin-top: 20px;
  1310. border: 1px solid #e7e7e7;
  1311. .reCon {
  1312. display: block;
  1313. width: 182px;
  1314. margin: 15px 0 15px 20px;
  1315. .reComImg {
  1316. display: block;
  1317. width: 182px;
  1318. height: 182px;
  1319. img {
  1320. width: 100%;
  1321. height: 100%;
  1322. }
  1323. }
  1324. .recomName {
  1325. color: #333333;
  1326. cursor: pointer;
  1327. display: block;
  1328. width: 182px;
  1329. height: 35px;
  1330. line-height: 17px;
  1331. margin-top: 10px;
  1332. margin-bottom: 10px;
  1333. font-size: 13px;
  1334. letter-spacing: 1px;
  1335. word-break: break-all;
  1336. text-overflow: ellipsis;
  1337. display: -webkit-box;
  1338. -webkit-box-orient: vertical;
  1339. -webkit-line-clamp: 2;
  1340. overflow: hidden;
  1341. &:hover {
  1342. color: $colorMain;
  1343. }
  1344. }
  1345. span {
  1346. font-size: 13px;
  1347. font-weight: bold;
  1348. color: $colorMain;
  1349. }
  1350. }
  1351. }
  1352. .goods_off_shelves {
  1353. width: 180px;
  1354. height: 50px;
  1355. background: #bbbbbb;
  1356. border-radius: 5px;
  1357. font-size: 20px;
  1358. //font-family: Microsoft YaHei;
  1359. font-weight: 400;
  1360. color: #ffffff;
  1361. line-height: 50px;
  1362. text-align: center;
  1363. cursor: pointer;
  1364. }
  1365. .goods_out_stock {
  1366. width: 180px;
  1367. height: 50px;
  1368. background: #bbbbbb;
  1369. border-radius: 5px;
  1370. font-size: 20px;
  1371. //font-family: Microsoft YaHei;
  1372. font-weight: 400;
  1373. color: #ffffff;
  1374. line-height: 50px;
  1375. text-align: center;
  1376. cursor: pointer;
  1377. }
  1378. .buy_now {
  1379. padding: 5px;
  1380. height: 30px;
  1381. border: 1px solid #00985e;
  1382. border-radius: 5px;
  1383. font-size: 16px;
  1384. color: #00985e;
  1385. line-height: 30px;
  1386. cursor: pointer;
  1387. font-weight: 700;
  1388. }
  1389. .add_cart {
  1390. width: 175px;
  1391. height: 50px;
  1392. background: $colorMain;
  1393. border-radius: 5px;
  1394. font-size: 20px;
  1395. //font-family: Microsoft YaHei;
  1396. font-weight: 400;
  1397. color: #ffffff;
  1398. line-height: 30px;
  1399. cursor: pointer;
  1400. img {
  1401. width: 22px;
  1402. height: 22px;
  1403. margin-right: 10px;
  1404. }
  1405. }
  1406. .preSell_but {
  1407. width: 180px;
  1408. height: 50px;
  1409. background: #ec2116;
  1410. border-radius: 3px;
  1411. display: flex;
  1412. align-items: center;
  1413. justify-content: center;
  1414. font-size: 19px;
  1415. //font-family: Microsoft YaHei;
  1416. font-weight: 400;
  1417. color: #ffffff;
  1418. cursor: pointer;
  1419. img {
  1420. margin-right: 5px;
  1421. }
  1422. }
  1423. .pin_but_text {
  1424. font-size: 16px;
  1425. line-height: 20px;
  1426. }
  1427. }
  1428. //立即购买 加入购物车 end
  1429. // 看了又看 start
  1430. .more_goods {
  1431. margin-left: 24px;
  1432. .more_goods_title {
  1433. font-size: 14px;
  1434. //font-family: Microsoft YaHei;
  1435. font-weight: 400;
  1436. color: #333333;
  1437. line-height: 30px;
  1438. text-align: center;
  1439. }
  1440. .more_goods_list {
  1441. .more_goods_pre {
  1442. margin-bottom: 10px;
  1443. cursor: pointer;
  1444. .skeleton_more_goods_pre_goods_name {
  1445. background: $colorSkeleton;
  1446. width: 100%;
  1447. height: 13px;
  1448. }
  1449. .skeleton_more_goods_pre_goods_price {
  1450. background: $colorSkeleton;
  1451. height: 13px;
  1452. width: 60px;
  1453. display: inline-block;
  1454. }
  1455. .more_goods_pre_img {
  1456. width: 150px;
  1457. height: 150px;
  1458. overflow: hidden;
  1459. &.skeleton_more_goods_pre_img {
  1460. background: $colorSkeleton;
  1461. }
  1462. &:hover {
  1463. img {
  1464. -webkit-transform: scale(1.05);
  1465. -ms-transform: scale(1.05);
  1466. -o-transform: scale(1.05);
  1467. -moz-transform: scale(1.05);
  1468. transform: scale(1.05);
  1469. }
  1470. }
  1471. img {
  1472. max-width: 100%;
  1473. max-width: 100%;
  1474. -webkit-transition: -webkit-transform 0.5s;
  1475. transition: -webkit-transform 0.5s;
  1476. -moz-transition: transform 0.5s, -moz-transform 0.5s;
  1477. transition: transform 0.5s;
  1478. transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s;
  1479. }
  1480. }
  1481. p:nth-of-type(1) {
  1482. width: 150px;
  1483. font-size: 12px;
  1484. //font-family: Microsoft YaHei;
  1485. font-weight: 400;
  1486. color: #333333;
  1487. white-space: nowrap;
  1488. text-overflow: ellipsis;
  1489. overflow: hidden;
  1490. word-break: break-all;
  1491. text-align: center;
  1492. margin: 10px 0;
  1493. }
  1494. p:nth-of-type(2) {
  1495. width: 150px;
  1496. font-size: 12px;
  1497. //font-family: Microsoft YaHei;
  1498. font-weight: bold;
  1499. color: $colorMain;
  1500. text-align: center;
  1501. }
  1502. }
  1503. }
  1504. }
  1505. // 看了又看 end
  1506. // 店铺信息 start
  1507. .store_info {
  1508. width: 250px;
  1509. background: #ffffff;
  1510. border: 1px solid #eee;
  1511. border-radius: 2px;
  1512. padding-bottom: 15px;
  1513. .store_info_title {
  1514. width: 248px;
  1515. height: 48px;
  1516. background: #f9f9f9;
  1517. border-radius: 2px 2px 0 0;
  1518. padding-left: 15px;
  1519. box-sizing: border-box;
  1520. .store_type {
  1521. width: 31px;
  1522. height: 16px;
  1523. background: $colorMain;
  1524. border-radius: 3px;
  1525. font-size: 12px;
  1526. //font-family: Microsoft YaHei;
  1527. font-weight: 400;
  1528. color: #ffffff;
  1529. line-height: 16px;
  1530. text-align: center;
  1531. }
  1532. .store_title {
  1533. font-size: 16px;
  1534. //font-family: Microsoft YaHei;
  1535. font-weight: bold;
  1536. color: #333333;
  1537. line-height: 39px;
  1538. margin: 0 10px;
  1539. cursor: pointer;
  1540. white-space: nowrap;
  1541. text-overflow: ellipsis;
  1542. overflow: hidden;
  1543. }
  1544. img {
  1545. width: 20px;
  1546. height: 20px;
  1547. cursor: pointer;
  1548. }
  1549. }
  1550. .store_des {
  1551. .store_des_pre {
  1552. padding-left: 15px;
  1553. margin-top: 18px;
  1554. span:nth-of-type(1) {
  1555. font-size: 12px;
  1556. //font-family: Microsoft YaHei;
  1557. font-weight: 400;
  1558. color: #666666;
  1559. margin-right: 18px;
  1560. }
  1561. span:nth-of-type(2),
  1562. span:nth-of-type(3) {
  1563. font-size: 12px;
  1564. //font-family: Microsoft YaHei;
  1565. font-weight: 400;
  1566. margin-right: 18px;
  1567. }
  1568. }
  1569. .pre_deliver {
  1570. span:nth-of-type(2),
  1571. span:nth-of-type(3) {
  1572. font-size: 12px;
  1573. //font-family: Microsoft YaHei;
  1574. font-weight: 400;
  1575. color: $colorMain2;
  1576. }
  1577. }
  1578. .pre_service {
  1579. span:nth-of-type(2),
  1580. span:nth-of-type(3) {
  1581. font-size: 12px;
  1582. //font-family: Microsoft YaHei;
  1583. font-weight: 400;
  1584. }
  1585. }
  1586. }
  1587. .store_btn {
  1588. margin-top: 14px;
  1589. .store_btn_pre {
  1590. -moz-user-select: none; /*火狐*/
  1591. -webkit-user-select: none; /*webkit浏览器*/
  1592. -ms-user-select: none; /*IE10*/
  1593. user-select: none;
  1594. width: 114px;
  1595. height: 29px;
  1596. background: #ffffff;
  1597. border-radius: 3px;
  1598. margin-right: 4px;
  1599. cursor: pointer;
  1600. border: 1px solid #dfdfdf;
  1601. img {
  1602. width: 20px;
  1603. height: 20px;
  1604. margin-right: 5px;
  1605. }
  1606. .go_store_btn {
  1607. font-size: 12px;
  1608. //font-family: Microsoft YaHei;
  1609. font-weight: 400;
  1610. color: #333333;
  1611. line-height: 39px;
  1612. margin-top: 3px;
  1613. }
  1614. .btn_pre_img {
  1615. width: 16px;
  1616. height: 16px;
  1617. }
  1618. &:nth-child(2) {
  1619. margin-right: 0;
  1620. border: 1px solid #dfdfdf;
  1621. background: #ffffff;
  1622. span {
  1623. color: #333333;
  1624. }
  1625. }
  1626. }
  1627. }
  1628. }
  1629. // 店铺信息 end
  1630. //店铺推荐及热门收藏 start
  1631. .store_popular {
  1632. width: 250px;
  1633. background: #ffffff;
  1634. border: 1px solid #eee;
  1635. border-radius: 3px;
  1636. margin-top: 15px;
  1637. .flex_row_between_center{
  1638. .store_popular_active{
  1639. width: 100%;
  1640. }
  1641. }
  1642. .store_popular_btn {
  1643. span {
  1644. width: 125px;
  1645. height: 40px;
  1646. background: $colorMain;
  1647. font-size: 14px;
  1648. //font-family: Microsoft YaHei;
  1649. font-weight: bold;
  1650. background: #f8f8f8;
  1651. color: #333333;
  1652. line-height: 40px;
  1653. text-align: center;
  1654. display: block;
  1655. cursor: pointer;
  1656. }
  1657. .store_popular_active {
  1658. background: $colorMain;
  1659. color: #ffffff;
  1660. }
  1661. }
  1662. .store_popular_list {
  1663. padding: 20px 21px 0;
  1664. .store_popular_pre {
  1665. margin-bottom: 20px;
  1666. border-bottom: 1px solid #f2f2f2;
  1667. &:nth-last-child(1) {
  1668. border-bottom: none;
  1669. }
  1670. cursor: pointer;
  1671. .store_popular_img {
  1672. width: 208px;
  1673. height: 208px;
  1674. border-radius: 2px;
  1675. overflow: hidden;
  1676. &:hover {
  1677. img {
  1678. -webkit-transform: scale(1.05);
  1679. -ms-transform: scale(1.05);
  1680. -o-transform: scale(1.05);
  1681. -moz-transform: scale(1.05);
  1682. transform: scale(1.05);
  1683. }
  1684. }
  1685. img {
  1686. max-width: 100%;
  1687. max-width: 100%;
  1688. -webkit-transition: -webkit-transform 0.5s;
  1689. transition: -webkit-transform 0.5s;
  1690. -moz-transition: transform 0.5s, -moz-transform 0.5s;
  1691. transition: transform 0.5s;
  1692. transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s;
  1693. }
  1694. }
  1695. p {
  1696. width: 197px;
  1697. font-size: 14px;
  1698. //font-family: Microsoft YaHei;
  1699. font-weight: 400;
  1700. color: #333333;
  1701. white-space: nowrap;
  1702. text-overflow: ellipsis;
  1703. overflow: hidden;
  1704. word-break: break-all;
  1705. margin-top: 14px;
  1706. }
  1707. p:nth-of-type(2) {
  1708. margin: 21px 0 13px;
  1709. span {
  1710. font-size: 12px;
  1711. //font-family: Microsoft YaHei;
  1712. font-weight: 400;
  1713. color: #999999;
  1714. &:nth-child(2) {
  1715. font-size: 14px;
  1716. //font-family: Microsoft YaHei;
  1717. font-weight: bold;
  1718. color: $colorMain2;
  1719. }
  1720. }
  1721. }
  1722. }
  1723. }
  1724. }
  1725. // 店铺推荐及热门收藏 end
  1726. // 商品详情 评价 商品服务 店铺热销 start
  1727. .goods_description {
  1728. margin-left: 15px;
  1729. border: 1px solid #eee;
  1730. border-radius: 3px;
  1731. .goods_description_title {
  1732. width: 934px;
  1733. height: 40px;
  1734. background: #f8f8f8;
  1735. .description_title_left {
  1736. width: 100%;
  1737. span {
  1738. min-width: 120px;
  1739. height: 40px;
  1740. display: block;
  1741. font-size: 14px;
  1742. //font-family: Microsoft YaHei;
  1743. font-weight: 400;
  1744. color: #333333;
  1745. text-align: center;
  1746. line-height: 39px;
  1747. flex: 0 0 25%;
  1748. }
  1749. .description_active {
  1750. background: #ffffff;
  1751. border-top: 2px solid $colorMain2;
  1752. color: $colorMain2;
  1753. }
  1754. }
  1755. .description_title_right {
  1756. padding-right: 10px;
  1757. .mobile_order {
  1758. position: relative;
  1759. &:hover {
  1760. .mobile_order_model {
  1761. display: block;
  1762. }
  1763. }
  1764. span {
  1765. font-size: 12px;
  1766. //font-family: Microsoft YaHei;
  1767. font-weight: 400;
  1768. color: #666666;
  1769. line-height: 74px;
  1770. }
  1771. .goods_code {
  1772. margin-left: 16px;
  1773. }
  1774. .mobile_order_model {
  1775. position: absolute;
  1776. display: none;
  1777. top: 70px;
  1778. width: 180px;
  1779. height: 190px;
  1780. background: #ffffff;
  1781. border: 1px solid #dfdfdf;
  1782. left: -15px;
  1783. &::before {
  1784. box-sizing: content-box;
  1785. width: 0;
  1786. height: 0;
  1787. position: absolute;
  1788. top: -16px;
  1789. right: 81px;
  1790. padding: 0;
  1791. border-bottom: 8px solid #ffffff;
  1792. border-top: 8px solid transparent;
  1793. border-left: 8px solid transparent;
  1794. border-right: 8px solid transparent;
  1795. display: block;
  1796. content: "";
  1797. z-index: 12;
  1798. }
  1799. &::after {
  1800. box-sizing: content-box;
  1801. width: 0px;
  1802. height: 0px;
  1803. position: absolute;
  1804. top: -18px;
  1805. right: 80px;
  1806. padding: 0;
  1807. border-bottom: 9px solid #cccccc;
  1808. border-top: 9px solid transparent;
  1809. border-left: 9px solid transparent;
  1810. border-right: 9px solid transparent;
  1811. display: block;
  1812. content: "";
  1813. z-index: 10;
  1814. }
  1815. .model_goods_code {
  1816. width: 126px;
  1817. height: 126px;
  1818. margin: 20px auto 0;
  1819. img {
  1820. max-width: 126px;
  1821. max-height: 126px;
  1822. margin: auto;
  1823. }
  1824. }
  1825. p {
  1826. text-align: center;
  1827. margin-top: 12px;
  1828. }
  1829. }
  1830. }
  1831. .line {
  1832. width: 1px;
  1833. height: 27px;
  1834. background: #dddddd;
  1835. margin: 0 10px;
  1836. }
  1837. .go_add_cart {
  1838. width: 90px;
  1839. height: 30px;
  1840. background: $colorMain;
  1841. border-radius: 3px;
  1842. font-size: 14px;
  1843. //font-family: Microsoft YaHei;
  1844. font-weight: 400;
  1845. color: #ffffff;
  1846. line-height: 30px;
  1847. text-align: center;
  1848. }
  1849. }
  1850. }
  1851. .goods_description_con {
  1852. width: 934px;
  1853. min-height: 500px;
  1854. .goods_des_con {
  1855. padding-top: 31px;
  1856. word-break: break-all;
  1857. font-size: 16px;
  1858. .brand {
  1859. margin-bottom: 31px;
  1860. padding-left: 30px;
  1861. span {
  1862. font-size: 14px;
  1863. //font-family: Microsoft YaHei;
  1864. font-weight: 400;
  1865. color: #999999;
  1866. &:nth-child(1) {
  1867. margin-right: 3px;
  1868. }
  1869. &:nth-child(2) {
  1870. color: #6195ff;
  1871. }
  1872. }
  1873. }
  1874. .goods_parameter_list {
  1875. // margin-top: 32px;
  1876. display: flex;
  1877. flex-wrap: wrap;
  1878. padding: 0 30px;
  1879. box-sizing: border-box;
  1880. &.goods_paramter_more {
  1881. // overflow: hidden;
  1882. // height: 130px;
  1883. .goods_parameter_pre:nth-child(n + 13) {
  1884. display: none;
  1885. }
  1886. }
  1887. .goods_parameter_pre {
  1888. margin-bottom: 21px;
  1889. margin-right: 24px;
  1890. width: 200px;
  1891. span {
  1892. font-size: 12px;
  1893. line-height: 17px;
  1894. //font-family: Microsoft YaHei;
  1895. font-weight: 400;
  1896. color: #999999;
  1897. display: inline-block;
  1898. white-space: nowrap;
  1899. text-overflow: ellipsis;
  1900. overflow: hidden;
  1901. word-break: break-all;
  1902. &:nth-child(1) {
  1903. max-width: 80px;
  1904. margin-right: 6px;
  1905. }
  1906. &:nth-child(2) {
  1907. color: #333333;
  1908. width: 135px;
  1909. }
  1910. }
  1911. &:nth-of-type(4n) {
  1912. margin-right: 0;
  1913. }
  1914. }
  1915. }
  1916. .collapse_unfold {
  1917. span {
  1918. font-size: 12px;
  1919. //font-family: Microsoft YaHei;
  1920. font-weight: 400;
  1921. color: #333333;
  1922. line-height: 21px;
  1923. }
  1924. i {
  1925. font-size: 12px;
  1926. color: #333333;
  1927. margin-left: 10px;
  1928. }
  1929. }
  1930. .goods_html {
  1931. padding: 0 21px 0 24px;
  1932. .goods_htmls {
  1933. img {
  1934. max-width: 100%;
  1935. max-height: 100%;
  1936. }
  1937. }
  1938. }
  1939. }
  1940. // 商品评价 start
  1941. .goods_comments {
  1942. padding: 20px;
  1943. .goods_comments_top {
  1944. border-bottom: 1px solid #dddddd;
  1945. display: flex;
  1946. .goods_comments_left {
  1947. width: 250px;
  1948. background: #ffffff;
  1949. border: 1px solid #dddddd;
  1950. border-bottom: none;
  1951. padding: 20px 0;
  1952. box-sizing: border-box;
  1953. .comments_title {
  1954. padding: 0 27px;
  1955. box-sizing: border-box;
  1956. .comments_tips {
  1957. font-size: 14px;
  1958. //font-family: Microsoft YaHei;
  1959. font-weight: 400;
  1960. color: #333333;
  1961. }
  1962. }
  1963. .good_comment {
  1964. margin-top: 20px;
  1965. span {
  1966. font-size: 14px;
  1967. //font-family: Microsoft YaHei;
  1968. font-weight: 400;
  1969. color: #333333;
  1970. &:nth-child(2) {
  1971. display: inline-block;
  1972. font-size: 50px;
  1973. //font-family: Microsoft YaHei;
  1974. font-weight: 400;
  1975. color: $colorMain;
  1976. margin-left: 15px;
  1977. }
  1978. }
  1979. }
  1980. }
  1981. .goods_comments_nav {
  1982. display: flex;
  1983. flex-wrap: wrap;
  1984. margin-left: 20px;
  1985. .comments_nav_pre {
  1986. width: 120px;
  1987. height: 30px;
  1988. background: #ffffff;
  1989. border: 1px solid #dddddd;
  1990. font-size: 14px;
  1991. //font-family: PingFang SC;
  1992. font-weight: 500;
  1993. color: #333333;
  1994. line-height: 30px;
  1995. text-align: center;
  1996. margin-right: 20px;
  1997. cursor: pointer;
  1998. &:nth-child(4n) {
  1999. margin-right: 0;
  2000. }
  2001. &.comments_nav_pre_active {
  2002. color: $colorMain2;
  2003. }
  2004. }
  2005. }
  2006. }
  2007. .goods_comments_list {
  2008. .goods_comments_pre {
  2009. margin-top: 30px;
  2010. padding-bottom: 40px;
  2011. border-bottom: 1px dashed #dddddd;
  2012. .goods_comments_avatar {
  2013. width: 50px;
  2014. height: 50px;
  2015. border-radius: 50%;
  2016. background-size: cover;
  2017. }
  2018. .list_des {
  2019. margin-left: 21px;
  2020. .list_top {
  2021. .list_left {
  2022. .list_top_tile {
  2023. .list_top_tips {
  2024. font-size: 16px;
  2025. //font-family: Microsoft YaHei;
  2026. font-weight: bold;
  2027. color: #333333;
  2028. margin-right: 20px;
  2029. }
  2030. }
  2031. .spec {
  2032. font-size: 14px;
  2033. //font-family: Microsoft YaHei;
  2034. font-weight: 400;
  2035. color: #999999;
  2036. margin-top: 10px;
  2037. }
  2038. }
  2039. .list_top_right {
  2040. font-size: 14px;
  2041. //font-family: Microsoft YaHei;
  2042. font-weight: 400;
  2043. color: #999999;
  2044. }
  2045. }
  2046. .list_pre {
  2047. margin-top: 20px;
  2048. .CommentContent {
  2049. width: 813px;
  2050. font-size: 14px;
  2051. //font-family: Microsoft YaHei;
  2052. font-weight: 400;
  2053. color: #333333;
  2054. line-height: 21px;
  2055. word-break: break-all;
  2056. }
  2057. .replyContent {
  2058. max-width: 790px;
  2059. margin-top: 15px;
  2060. line-height: 20px;
  2061. font-size: 13px;
  2062. .seller {
  2063. color: #999999;
  2064. font-size: 12px;
  2065. }
  2066. .contentRe {
  2067. margin-right: 5px;
  2068. word-break: break-all;
  2069. }
  2070. }
  2071. .list_pre_img_list {
  2072. margin-top: 15px;
  2073. flex-wrap: wrap;
  2074. .list_pre_img {
  2075. width: 80px;
  2076. height: 80px;
  2077. background-size: contain;
  2078. background-position: center;
  2079. background-repeat: no-repeat;
  2080. margin-right: 10px;
  2081. border: 1px solid #dcdcdc;
  2082. }
  2083. }
  2084. }
  2085. }
  2086. }
  2087. }
  2088. }
  2089. // 商品评价 end
  2090. // 商品服务 start
  2091. .goods_server_list {
  2092. .goods_server_pre {
  2093. margin: 0 39px 0 51px;
  2094. border-bottom: 1px solid #f2f2f2;
  2095. padding-bottom: 20px;
  2096. padding-top: 22px;
  2097. .server_pre_top {
  2098. .server_pre_tips {
  2099. width: 5px;
  2100. height: 5px;
  2101. background: $colorMain2;
  2102. border-radius: 50%;
  2103. display: block;
  2104. margin-right: 10px;
  2105. }
  2106. .server_pre_name {
  2107. font-size: 16px;
  2108. //font-family: Microsoft YaHei;
  2109. font-weight: bold;
  2110. color: #333333;
  2111. }
  2112. }
  2113. .server_pre_content {
  2114. font-size: 14px;
  2115. //font-family: Microsoft YaHei;
  2116. font-weight: 400;
  2117. padding-left: 12px;
  2118. margin-top: 21px;
  2119. color: #666666;
  2120. }
  2121. }
  2122. }
  2123. // 商品服务 end
  2124. // 店铺热销 start
  2125. .store_hot_sales {
  2126. .store_hot_sales_list {
  2127. display: flex;
  2128. flex-wrap: wrap;
  2129. padding: 11px 13px;
  2130. .goods_pre {
  2131. margin-bottom: 11px;
  2132. width: 216px;
  2133. height: 313px;
  2134. border: 1px solid #f5f5f5;
  2135. border-radius: 2px;
  2136. margin-right: 12px;
  2137. cursor: pointer;
  2138. padding-bottom: 10px;
  2139. &:hover a{
  2140. border: 1px solid $colorMain;
  2141. }
  2142. &:nth-of-type(4n) {
  2143. margin-right: 0;
  2144. }
  2145. .goods_pre_img {
  2146. width: 214px;
  2147. height: 221px;
  2148. border-radius: 2px 2px 0 0;
  2149. background-size: contain;
  2150. background-repeat: no-repeat;
  2151. }
  2152. .goods_name {
  2153. font-size: 14px;
  2154. //font-family: Microsoft YaHei;
  2155. font-weight: 400;
  2156. color: #333333;
  2157. line-height: 18px;
  2158. text-overflow: -o-ellipsis-lastline;
  2159. overflow: hidden;
  2160. text-overflow: ellipsis;
  2161. word-break: break-all;
  2162. display: -webkit-box;
  2163. -webkit-line-clamp: 2;
  2164. line-clamp: 2;
  2165. -webkit-box-orient: vertical;
  2166. margin: 10px;
  2167. }
  2168. .goods_price {
  2169. padding-left: 11px;
  2170. .selling_price {
  2171. font-size: 16px;
  2172. //font-family: Microsoft YaHei;
  2173. font-weight: 400;
  2174. color: $colorMain2;
  2175. }
  2176. }
  2177. }
  2178. }
  2179. }
  2180. // 店铺热销 end
  2181. }
  2182. }
  2183. // 商品详情 评价 商品服务 店铺热销 end
  2184. // 优惠券弹框 start
  2185. .coupon_model {
  2186. .model_coupon_list {
  2187. display: flex;
  2188. flex-wrap: wrap;
  2189. .sld_coupon_item {
  2190. margin-right: 10px !important;
  2191. }
  2192. .sld_coupon_item:nth-child(2n) {
  2193. margin-right: 0 !important;
  2194. }
  2195. }
  2196. }
  2197. // 优惠券弹框 end
  2198. .cursor_pointer {
  2199. cursor: pointer;
  2200. }
  2201. // 分页
  2202. .sld_page_bottom {
  2203. margin-top: 20px;
  2204. }
  2205. //空页面数据样式
  2206. .empty_data {
  2207. padding-top: 170px;
  2208. span {
  2209. margin-top: 30px;
  2210. }
  2211. }
  2212. }
  2213. .imgOpen {
  2214. max-width: 1200px;
  2215. max-height: 700px;
  2216. margin: 0 auto;
  2217. display: block;
  2218. }
  2219. .detail-info{
  2220. border-bottom: 1px solid #e9eef4;
  2221. border-top: 1px solid #e9eef4;
  2222. margin: 10px 0;
  2223. table{
  2224. width: 100%;
  2225. table-layout: fixed;
  2226. word-break: break-word;
  2227. font-size: 14px;
  2228. line-height: 21px;
  2229. th{
  2230. color: #333;
  2231. padding-bottom: 15px;
  2232. padding-right: 20px;
  2233. vertical-align: top;
  2234. text-align: left;
  2235. font-weight: 400;
  2236. }
  2237. .th-label{
  2238. word-break: break-word;
  2239. }
  2240. td{
  2241. color: #222;
  2242. padding: 0 10px;
  2243. vertical-align: top;
  2244. word-break: keep-all;
  2245. word-wrap: break-word;
  2246. }
  2247. }
  2248. }