pointGoodsDetail.scss 68 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872
  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 #dfdfdf;
  40. border-right: 1px solid#DFDFDF;
  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 #dfdfdf;
  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. }
  210. .goods_about_right {
  211. .goods_about_store {
  212. span:nth-child(1) {
  213. font-size: 14px;
  214. //font-family: Microsoft YaHei;
  215. font-weight: 400;
  216. color: #666666;
  217. line-height: 14px;
  218. &:hover {
  219. color: $colorMain;
  220. }
  221. }
  222. span:nth-child(2) {
  223. font-size: 12px;
  224. //font-family: Microsoft YaHei;
  225. font-weight: 400;
  226. color: #fefefe;
  227. line-height: 14px;
  228. width: 31px;
  229. height: 16px;
  230. background: $colorMain;
  231. border-radius: 2px;
  232. text-align: center;
  233. margin-left: 10px;
  234. }
  235. }
  236. .contact_service {
  237. margin: 0 20px 0 30px;
  238. cursor: pointer;
  239. &:hover {
  240. span {
  241. color: $colorMain;
  242. }
  243. }
  244. span {
  245. font-size: 14px;
  246. //font-family: Microsoft YaHei;
  247. font-weight: 400;
  248. color: #666666;
  249. line-height: 14px;
  250. }
  251. img {
  252. width: 20px;
  253. height: 20px;
  254. }
  255. }
  256. .focus_store {
  257. line-height: 20px;
  258. margin-left: 20px;
  259. width: 180px;
  260. text-align: right;
  261. span {
  262. line-height: 20px;
  263. text-align: center;
  264. float: right;
  265. margin-right: 10px;
  266. }
  267. img {
  268. float: right;
  269. }
  270. }
  271. }
  272. }
  273. }
  274. // 商品所属分类 ,联系客服,关注店铺 end
  275. // 商品主要信息 start
  276. .main_con {
  277. width: 1200px;
  278. margin: 20px auto 0;
  279. .goods_des {
  280. display: flex;
  281. margin-bottom: 40px;
  282. .goods_des_left {
  283. margin-right: 20px;
  284. .goods_main_picture {
  285. position: relative;
  286. .preview-box {
  287. position: relative;
  288. width: 350px;
  289. height: 350px;
  290. border-radius: 2px;
  291. .default_image {
  292. width: 350px;
  293. height: 350px;
  294. border-radius: 2px;
  295. background-size: contain;
  296. background-repeat: no-repeat;
  297. background-position: center;
  298. &.skeleton_default_image {
  299. background: $colorSkeleton;
  300. }
  301. }
  302. .v_btn {
  303. width: 350px;
  304. z-index: 990;
  305. position: absolute;
  306. bottom: 62px;
  307. img {
  308. cursor: pointer;
  309. display: block;
  310. margin: 0 auto;
  311. }
  312. }
  313. .mask {
  314. position: absolute;
  315. top: 0;
  316. left: 0;
  317. width: 120px;
  318. height: 120px;
  319. z-index: 10;
  320. background: #ffffff;
  321. opacity: 0.2;
  322. cursor: move;
  323. }
  324. .magnifier_icon {
  325. position: absolute;
  326. bottom: 0;
  327. right: 0;
  328. width: 27px;
  329. height: 27px;
  330. background: rgba(0, 0, 0, 0.3);
  331. z-index: 10;
  332. i {
  333. font-size: 16px;
  334. color: #ffffff;
  335. text-align: center;
  336. line-height: 27px;
  337. }
  338. }
  339. }
  340. .goods_picture_big {
  341. position: absolute;
  342. left: 370px;
  343. top: 0;
  344. z-index: 50;
  345. width: 500px;
  346. height: 500px;
  347. overflow: hidden;
  348. .default_image_big {
  349. position: absolute;
  350. width: 1458px;
  351. height: 1458px;
  352. background-size: contain;
  353. background-repeat: no-repeat;
  354. background-position: center;
  355. }
  356. }
  357. }
  358. .goods_picture_con {
  359. margin-top: 11px;
  360. width: 350px;
  361. &.skeleton_goods_picture_con {
  362. background: #eee;
  363. height: 59px;
  364. }
  365. .left_arrow {
  366. font-size: 6px;
  367. color: #999999;
  368. cursor: pointer;
  369. }
  370. .show_box {
  371. position: relative;
  372. flex: 1;
  373. overflow: hidden;
  374. width: 326px;
  375. margin: 0 2px;
  376. height: 59px;
  377. .goods_picture_list {
  378. position: absolute;
  379. top: 0;
  380. left: 0;
  381. .goods_img {
  382. width: 58px;
  383. height: 58px;
  384. margin-right: 8px;
  385. border: 1px solid #cccccc;
  386. cursor: pointer;
  387. &:nth-last-child(1) {
  388. margin-right: 0;
  389. }
  390. .goods_image {
  391. width: 56px;
  392. height: 56px;
  393. background-size: contain;
  394. background-repeat: no-repeat;
  395. background-position: center;
  396. }
  397. }
  398. .goods_img_active {
  399. border: 1px solid $colorMain;
  400. }
  401. }
  402. }
  403. .right_arrow {
  404. font-size: 6px;
  405. color: #999999;
  406. cursor: pointer;
  407. }
  408. .no_left_arrow {
  409. color: #dddddd;
  410. }
  411. }
  412. // 分享 收藏 start
  413. .collection_share_btn {
  414. padding-left: 10px;
  415. .collection_btn {
  416. margin-top: 25px;
  417. img {
  418. width: 24px;
  419. height: 24px;
  420. }
  421. span {
  422. font-size: 12px;
  423. //font-family: Microsoft YaHei;
  424. font-weight: 400;
  425. color: #666666;
  426. margin-left: 3px;
  427. margin-right: 2px;
  428. }
  429. }
  430. .share_btn {
  431. position: relative;
  432. margin-left: 18px;
  433. margin-top: 25px;
  434. .share_btn_con {
  435. padding-left: 10px;
  436. img {
  437. width: 24px;
  438. height: 24px;
  439. }
  440. span {
  441. font-size: 12px;
  442. //font-family: Microsoft YaHei;
  443. font-weight: 400;
  444. color: #666666;
  445. margin-left: 8px;
  446. }
  447. &:hover span {
  448. color: #333333;
  449. }
  450. }
  451. .share_list {
  452. margin-left: -1px;
  453. width: 80px;
  454. height: 140px;
  455. border: 1px solid #dfdfdf;
  456. border-radius: 2px;
  457. padding: 10px 0 10px 10px;
  458. position: absolute;
  459. top: -12px;
  460. display: none;
  461. .share_btn_pre {
  462. margin-top: 1px;
  463. margin-bottom: 8px;
  464. &:nth-last-of-type(1) {
  465. margin-bottom: 0;
  466. }
  467. img {
  468. width: 24px;
  469. height: 24px;
  470. }
  471. span {
  472. font-size: 12px;
  473. //font-family: Microsoft YaHei;
  474. font-weight: 400;
  475. color: #666666;
  476. margin-left: 8px;
  477. }
  478. &:hover span {
  479. color: #333333;
  480. }
  481. }
  482. .wx_share_code {
  483. position: absolute;
  484. right: -135px;
  485. bottom: 0px;
  486. width: 130px;
  487. height: 135px;
  488. background: #ffffff;
  489. border: 1px solid #d9d9d9;
  490. .wx_share_code_img {
  491. canvas {
  492. width: 90px !important;
  493. height: 90px !important;
  494. }
  495. }
  496. .wx_share_code_title {
  497. font-size: 10px;
  498. //font-family: Microsoft YaHei;
  499. font-weight: 400;
  500. color: #333333;
  501. margin-top: 6px;
  502. }
  503. }
  504. }
  505. &:hover .share_btn_con {
  506. display: none;
  507. }
  508. &:hover .share_list {
  509. display: block;
  510. }
  511. }
  512. }
  513. // 分享 收藏 end
  514. }
  515. .m_item_inner {
  516. float: left;
  517. .item_info {
  518. position: relative;
  519. width: 630px;
  520. padding-bottom: 20px;
  521. }
  522. .detaile_name {
  523. font-size: 16px;
  524. //font-family: Microsoft YaHei;
  525. font-weight: bold;
  526. color: #333333;
  527. margin-bottom: 6px;
  528. text-overflow: -o-ellipsis-lastline;
  529. overflow: hidden;
  530. text-overflow: ellipsis;
  531. display: -webkit-box;
  532. -webkit-line-clamp: 2;
  533. line-clamp: 2;
  534. -webkit-box-orient: vertical;
  535. line-height: 25px;
  536. &.skeleton_detaile_name {
  537. background: $colorSkeleton;
  538. width: 100%;
  539. height: 18px;
  540. }
  541. }
  542. .p_ad {
  543. font-size: 14px;
  544. //font-family: Microsoft YaHei;
  545. font-weight: 400;
  546. color: #e2231a;
  547. text-overflow: ellipsis;
  548. overflow: hidden;
  549. word-break: break-all;
  550. margin-bottom: 12px;
  551. line-height: 18px;
  552. &.skeleton_p_ad {
  553. background: $colorSkeleton;
  554. width: 100%;
  555. height: 16px;
  556. }
  557. }
  558. .summary {
  559. width: 630px;
  560. height: 160px;
  561. background: url(/point/point_detail_bg.png) 100% 100%;
  562. padding: 10px 20px 18px;
  563. box-sizing: border-box;
  564. }
  565. }
  566. }
  567. }
  568. // 商品主要信息 end
  569. }
  570. .point_sales {
  571. padding-right: 10px;
  572. text-align: right;
  573. height: 30px;
  574. font-size: 14px;
  575. //font-family: Microsoft YaHei;
  576. font-weight: 400;
  577. color: #ffffff;
  578. line-height: 30px;
  579. margin-bottom: 25px;
  580. }
  581. .sld_summary_goods_left {
  582. display: flex;
  583. justify-content: space-between;
  584. .goods_price {
  585. display: flex;
  586. .price_title1 {
  587. margin-right: 20px;
  588. letter-spacing: 10px;
  589. font-size: 14px;
  590. //font-family: Microsoft YaHei;
  591. font-weight: 400;
  592. color: #666666;
  593. }
  594. .p_price {
  595. color: $colorMain2;
  596. font-size: 16px;
  597. font-weight: 600;
  598. margin-left: -6px;
  599. &.skeleton_p_price {
  600. background: $colorSkeleton;
  601. width: 70px;
  602. display: inline-block;
  603. height: 18px;
  604. }
  605. span:nth-child(1),
  606. span:nth-child(4) {
  607. font-size: 24px;
  608. }
  609. }
  610. }
  611. }
  612. .market_price {
  613. font-size: 12px;
  614. //font-family: Microsoft YaHei;
  615. font-weight: 400;
  616. color: #999999;
  617. margin-top: 27px;
  618. .price_title {
  619. margin-right: 20px;
  620. text-transform: uppercase;
  621. font-size: 14px;
  622. font-family: Microsoft YaHei;
  623. font-weight: 400;
  624. color: #666666;
  625. }
  626. .price {
  627. text-decoration: line-through;
  628. }
  629. }
  630. .actual_sales {
  631. font-size: 14px;
  632. font-weight: 400;
  633. color: #aaaaaa;
  634. line-height: 30px;
  635. span {
  636. color: $colorMain;
  637. }
  638. }
  639. // 优惠券 start
  640. .coupon {
  641. margin-top: 10px;
  642. .coupon_title {
  643. font-size: 14px;
  644. //font-family: Microsoft YaHei;
  645. font-weight: 400;
  646. color: #666666;
  647. line-height: 30px;
  648. }
  649. .coupon_list {
  650. margin-left: 22px;
  651. .coupon_pre_rules {
  652. height: 26px;
  653. border: 1px solid $colorMain;
  654. border-radius: 3px;
  655. background: #ffffff;
  656. font-size: 14px;
  657. //font-family: PingFang SC;
  658. font-weight: 500;
  659. color: $colorMain;
  660. line-height: 26px;
  661. padding: 0 8px;
  662. text-align: center;
  663. margin-right: 10px;
  664. }
  665. }
  666. }
  667. // 优惠券 end
  668. // 促销 start
  669. .promotion {
  670. margin-top: 10px;
  671. .promotion_left {
  672. .promotion_title {
  673. font-size: 14px;
  674. //font-family: Microsoft YaHei;
  675. font-weight: 400;
  676. color: #666666;
  677. line-height: 30px;
  678. margin-right: 20px;
  679. letter-spacing: 10px;
  680. }
  681. .promotion_list {
  682. width: 415px;
  683. white-space: nowrap;
  684. text-overflow: ellipsis;
  685. overflow: hidden;
  686. word-break: break-all;
  687. .promotion_block {
  688. .promotion_pre {
  689. font-size: 14px;
  690. //font-family: Microsoft YaHei;
  691. font-weight: 400;
  692. color: #666666;
  693. line-height: 30px;
  694. }
  695. }
  696. }
  697. }
  698. .promotion_right {
  699. font-size: 14px;
  700. //font-family: Microsoft YaHei;
  701. font-weight: 400;
  702. color: #306fbc;
  703. line-height: 30px;
  704. cursor: pointer;
  705. }
  706. .full_discount_model {
  707. height: 250px;
  708. overflow-y: auto;
  709. .full_discount_pre {
  710. .full_pre_tips {
  711. width: 5px;
  712. height: 5px;
  713. background: $colorMain2;
  714. border-radius: 50%;
  715. margin-top: 5px;
  716. }
  717. .full_pre_con {
  718. margin-left: 10px;
  719. margin-bottom: 15px;
  720. .full_pre_title {
  721. font-size: 16px;
  722. //font-family: Microsoft YaHei;
  723. font-weight: bold;
  724. color: #333333;
  725. }
  726. .full_pre_des {
  727. width: 450px;
  728. border-bottom: 1px dashed #e6e6e6;
  729. border-radius: 2px;
  730. padding: 10px;
  731. box-sizing: border-box;
  732. margin-top: 10px;
  733. .full_pre_name {
  734. span {
  735. display: block;
  736. &:nth-child(1) {
  737. // width: 159px;
  738. font-size: 14px;
  739. //font-family: Microsoft YaHei;
  740. font-weight: bold;
  741. color: #333333;
  742. border-radius: 8px;
  743. //font-family: Microsoft YaHei;
  744. font-weight: 400;
  745. line-height: 16px;
  746. // text-align: center;
  747. }
  748. &:nth-child(2) {
  749. font-size: 12px;
  750. //font-family: Microsoft YaHei;
  751. font-weight: 400;
  752. color: #999999;
  753. margin-left: 20px;
  754. }
  755. }
  756. }
  757. .full_pre_desc {
  758. margin-top: 10px;
  759. .full_pre_img {
  760. width: 40px;
  761. height: 40px;
  762. background: #ffffff;
  763. border-radius: 2px;
  764. background-size: contain;
  765. background-repeat: no-repeat;
  766. background-position: center;
  767. margin-right: 7px;
  768. }
  769. .full_pre_right {
  770. p,
  771. span {
  772. width: 328px;
  773. font-size: 12px;
  774. //font-family: Microsoft YaHei;
  775. font-weight: 400;
  776. color: #333333;
  777. overflow: hidden;
  778. text-overflow: ellipsis;
  779. white-space: nowrap;
  780. }
  781. span {
  782. color: #666666;
  783. margin-top: 6px;
  784. }
  785. }
  786. }
  787. }
  788. }
  789. }
  790. }
  791. }
  792. i {
  793. font-style: normal;
  794. }
  795. // 促销 end
  796. // 配送地 start
  797. .delivery {
  798. padding-left: 20px;
  799. margin-top: 22px;
  800. .delivery_title {
  801. font-size: 14px;
  802. //font-family: Microsoft YaHei;
  803. font-weight: 400;
  804. color: #666666;
  805. line-height: 30px;
  806. }
  807. .delivery_address {
  808. width: 180px;
  809. height: 30px;
  810. background: #ffffff;
  811. border: 1px solid #dfdfdf;
  812. border-radius: 3px;
  813. padding: 0 11px;
  814. box-sizing: border-box;
  815. margin-left: 20px;
  816. span {
  817. font-size: 14px;
  818. //font-family: Microsoft YaHei;
  819. font-weight: 400;
  820. color: #999999;
  821. line-height: 30px;
  822. }
  823. i {
  824. font-size: 12px;
  825. }
  826. }
  827. }
  828. // 配送地 end
  829. // 运费 start
  830. .freight {
  831. padding-left: 20px;
  832. margin-top: 20px;
  833. .freight_title {
  834. font-size: 14px;
  835. //font-family: Microsoft YaHei;
  836. font-weight: 400;
  837. color: #666666;
  838. letter-spacing: 12px;
  839. .skeleton_freight_amount {
  840. background: $colorSkeleton;
  841. display: inline-block;
  842. width: 50px;
  843. height: 16px;
  844. }
  845. }
  846. span {
  847. font-size: 14px;
  848. //font-family: Microsoft YaHei;
  849. font-weight: 400;
  850. color: #333333;
  851. margin-left: 8px;
  852. }
  853. }
  854. // 运费 end
  855. // 商品规格 start
  856. .goods_spec {
  857. padding-left: 20px;
  858. margin-top: 20px;
  859. flex-wrap: wrap;
  860. .goods_spec_pre {
  861. .goods_spec_pre_title {
  862. justify-content: space-between;
  863. font-size: 14px;
  864. //font-family: Microsoft YaHei;
  865. font-weight: 400;
  866. color: #666666;
  867. line-height: 30px;
  868. // min-width: 42px;
  869. text-indent: "justify";
  870. white-space: nowrap;
  871. }
  872. .goods_spec_pre_list {
  873. margin-left: 20px;
  874. flex-wrap: wrap;
  875. .specval_pre {
  876. margin-right: 21px;
  877. margin-bottom: 20px;
  878. .specval_pre_image {
  879. width: 48px;
  880. height: 48px;
  881. border-radius: 3px;
  882. background-size: contain;
  883. background-repeat: no-repeat;
  884. background-position: center;
  885. }
  886. span {
  887. display: inline-block;
  888. max-width: 190px;
  889. overflow: hidden;
  890. text-overflow: ellipsis;
  891. white-space: nowrap;
  892. background: #ffffff;
  893. border: 1px solid #dfdfdf;
  894. border-radius: 3px;
  895. font-size: 14px;
  896. //font-family: Microsoft YaHei;
  897. font-weight: 400;
  898. color: #333333;
  899. display: block;
  900. padding: 10px 20px;
  901. box-sizing: border-box;
  902. }
  903. }
  904. .specval_pre_active {
  905. position: relative;
  906. span {
  907. display: inline-block;
  908. max-width: 184px;
  909. border: 1px solid $colorMain;
  910. }
  911. .check_mark {
  912. width: 14px;
  913. height: 14px;
  914. position: absolute;
  915. bottom: 3px;
  916. right: 0;
  917. }
  918. }
  919. .specval_pre_disabled {
  920. position: relative;
  921. opacity: 0.2;
  922. }
  923. }
  924. }
  925. }
  926. // 商品规格 end
  927. // 数量加减及库存 start
  928. .quantity_inventory {
  929. padding: 0 20px 0;
  930. padding-bottom: 40px;
  931. border-bottom: 1px solid #dfdfdf;
  932. .quantity_title {
  933. font-size: 14px;
  934. //font-family: Microsoft YaHei;
  935. font-weight: 400;
  936. color: #666666;
  937. line-height: 30px;
  938. letter-spacing: 10px;
  939. }
  940. .quantity_edit {
  941. border: 1px solid #dddddd;
  942. margin-left: 10px;
  943. span {
  944. display: block;
  945. width: 30px;
  946. height: 30px;
  947. border: none;
  948. border-radius: 3px;
  949. text-align: center;
  950. line-height: 30px;
  951. cursor: pointer;
  952. }
  953. input {
  954. width: 60px;
  955. height: 30px;
  956. border: none;
  957. border-left: 1px solid #ddd;
  958. border-right: 1px solid #ddd;
  959. text-align: center;
  960. cursor: pointer;
  961. }
  962. /*** 消除input元素 type="number" 时默认的 加减按钮*/
  963. input[type="number"]::-webkit-inner-spin-button,
  964. input[type="number"]::-webkit-outer-spin-button {
  965. -webkit-appearance: none;
  966. margin: 0;
  967. }
  968. /*** 消除input元素 type="number" 时默认的 加减按钮---moz版*/
  969. input[type="number"] {
  970. -moz-appearance: textfield;
  971. }
  972. }
  973. .inventory {
  974. font-size: 12px;
  975. //font-family: Microsoft YaHei;
  976. font-weight: 400;
  977. color: #999999;
  978. line-height: 30px;
  979. margin-left: 17px;
  980. }
  981. }
  982. // 数量加减及库存 end
  983. //立即购买 加入购物车 start
  984. .options_btn {
  985. margin-top: 30px;
  986. .option_desc {
  987. color: #bbbbbb;
  988. font-size: 14px;
  989. margin-bottom: 20px;
  990. }
  991. .recoOffShop {
  992. width: 829px;
  993. display: flex;
  994. flex-wrap: wrap;
  995. margin-top: 20px;
  996. border: 1px solid #e7e7e7;
  997. .reCon {
  998. display: block;
  999. width: 182px;
  1000. margin: 15px 0 15px 20px;
  1001. .reComImg {
  1002. display: block;
  1003. width: 182px;
  1004. height: 182px;
  1005. img {
  1006. width: 100%;
  1007. height: 100%;
  1008. }
  1009. }
  1010. .recomName {
  1011. color: #333333;
  1012. cursor: pointer;
  1013. display: block;
  1014. width: 182px;
  1015. height: 35px;
  1016. line-height: 17px;
  1017. margin-top: 10px;
  1018. margin-bottom: 10px;
  1019. font-size: 13px;
  1020. letter-spacing: 1px;
  1021. word-break: break-all;
  1022. text-overflow: ellipsis;
  1023. display: -webkit-box;
  1024. -webkit-box-orient: vertical;
  1025. -webkit-line-clamp: 2;
  1026. overflow: hidden;
  1027. &:hover {
  1028. color: $colorMain;
  1029. }
  1030. }
  1031. span {
  1032. font-size: 13px;
  1033. font-weight: bold;
  1034. color: $colorMain;
  1035. }
  1036. }
  1037. }
  1038. .goods_off_shelves {
  1039. width: 180px;
  1040. height: 50px;
  1041. background: #bbbbbb;
  1042. border-radius: 5px;
  1043. font-size: 20px;
  1044. //font-family: Microsoft YaHei;
  1045. font-weight: 400;
  1046. color: #ffffff;
  1047. line-height: 50px;
  1048. text-align: center;
  1049. cursor: pointer;
  1050. }
  1051. .goods_out_stock {
  1052. width: 180px;
  1053. height: 50px;
  1054. background: #bbbbbb;
  1055. border-radius: 5px;
  1056. font-size: 20px;
  1057. //font-family: Microsoft YaHei;
  1058. font-weight: 400;
  1059. color: #ffffff;
  1060. line-height: 50px;
  1061. text-align: center;
  1062. cursor: pointer;
  1063. }
  1064. .buy_now {
  1065. width: 180px;
  1066. height: 50px;
  1067. background: #b64cfb;
  1068. border: 1px solid #b64cfb;
  1069. border-radius: 5px;
  1070. font-size: 20px;
  1071. //font-family: Microsoft YaHei;
  1072. font-weight: 400;
  1073. color: #fff;
  1074. line-height: 30px;
  1075. cursor: pointer;
  1076. margin-right: 20px;
  1077. }
  1078. .add_cart {
  1079. width: 180px;
  1080. height: 50px;
  1081. background: $colorMain;
  1082. border-radius: 5px;
  1083. font-size: 20px;
  1084. //font-family: Microsoft YaHei;
  1085. font-weight: 400;
  1086. color: #ffffff;
  1087. line-height: 30px;
  1088. cursor: pointer;
  1089. img {
  1090. margin-right: 10px;
  1091. }
  1092. }
  1093. }
  1094. //立即购买 加入购物车 end
  1095. // 看了又看 start
  1096. .more_goods {
  1097. margin-left: 24px;
  1098. margin-bottom: 24px;
  1099. .more_goods_title {
  1100. font-size: 14px;
  1101. //font-family: Microsoft YaHei;
  1102. font-weight: 400;
  1103. color: #333333;
  1104. line-height: 30px;
  1105. text-align: center;
  1106. }
  1107. .more_goods_list {
  1108. .more_goods_pre {
  1109. margin-bottom: 10px;
  1110. cursor: pointer;
  1111. .skeleton_more_goods_pre_goods_name {
  1112. background: $colorSkeleton;
  1113. width: 100%;
  1114. height: 13px;
  1115. }
  1116. .skeleton_more_goods_pre_goods_price {
  1117. background: $colorSkeleton;
  1118. height: 13px;
  1119. width: 60px;
  1120. display: inline-block;
  1121. }
  1122. .more_goods_pre_img {
  1123. width: 150px;
  1124. height: 150px;
  1125. overflow: hidden;
  1126. position: relative;
  1127. &.skeleton_more_goods_pre_img {
  1128. background: $colorSkeleton;
  1129. }
  1130. &:hover {
  1131. img {
  1132. -webkit-transform: scale(1.05);
  1133. -ms-transform: scale(1.05);
  1134. -o-transform: scale(1.05);
  1135. -moz-transform: scale(1.05);
  1136. transform: scale(1.05);
  1137. }
  1138. }
  1139. img {
  1140. max-width: 100%;
  1141. max-width: 100%;
  1142. -webkit-transition: -webkit-transform 0.5s;
  1143. transition: -webkit-transform 0.5s;
  1144. -moz-transition: transform 0.5s, -moz-transform 0.5s;
  1145. transition: transform 0.5s;
  1146. transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s;
  1147. }
  1148. .price {
  1149. width: 150px;
  1150. position: absolute;
  1151. bottom: 0;
  1152. height: 30px;
  1153. background: rgba(0, 0, 0, 0.3);
  1154. color: #fff;
  1155. line-height: 30px;
  1156. text-align: center;
  1157. font-size: 12px;
  1158. //font-family: Microsoft YaHei;
  1159. }
  1160. }
  1161. .goodName {
  1162. width: 150px;
  1163. font-size: 12px;
  1164. //font-family: Microsoft YaHei;
  1165. font-weight: 400;
  1166. color: #333333;
  1167. white-space: nowrap;
  1168. text-overflow: ellipsis;
  1169. overflow: hidden;
  1170. word-break: break-all;
  1171. text-align: center;
  1172. margin: 10px 0;
  1173. }
  1174. }
  1175. }
  1176. }
  1177. // 看了又看 end
  1178. // 店铺信息 start
  1179. .store_info {
  1180. width: 250px;
  1181. background: #ffffff;
  1182. border: 1px solid #dfdfdf;
  1183. border-radius: 2px;
  1184. padding-bottom: 15px;
  1185. .store_info_title {
  1186. width: 248px;
  1187. height: 48px;
  1188. background: #f9f9f9;
  1189. border-radius: 2px 2px 0 0;
  1190. padding-left: 15px;
  1191. box-sizing: border-box;
  1192. .store_type {
  1193. width: 31px;
  1194. height: 16px;
  1195. background: $colorMain;
  1196. border-radius: 3px;
  1197. font-size: 12px;
  1198. //font-family: Microsoft YaHei;
  1199. font-weight: 400;
  1200. color: #ffffff;
  1201. line-height: 16px;
  1202. text-align: center;
  1203. }
  1204. .store_title {
  1205. font-size: 16px;
  1206. //font-family: Microsoft YaHei;
  1207. font-weight: bold;
  1208. color: #333333;
  1209. line-height: 39px;
  1210. margin: 0 10px;
  1211. cursor: pointer;
  1212. }
  1213. img {
  1214. width: 20px;
  1215. height: 20px;
  1216. cursor: pointer;
  1217. }
  1218. }
  1219. .store_des {
  1220. .store_des_pre {
  1221. padding-left: 15px;
  1222. margin-top: 18px;
  1223. span:nth-of-type(1) {
  1224. font-size: 12px;
  1225. //font-family: Microsoft YaHei;
  1226. font-weight: 400;
  1227. color: #666666;
  1228. margin-right: 18px;
  1229. }
  1230. span:nth-of-type(2),
  1231. span:nth-of-type(3) {
  1232. font-size: 12px;
  1233. //font-family: Microsoft YaHei;
  1234. font-weight: 400;
  1235. color: #ff5501;
  1236. margin-right: 18px;
  1237. }
  1238. }
  1239. .pre_deliver {
  1240. span:nth-of-type(2),
  1241. span:nth-of-type(3) {
  1242. font-size: 12px;
  1243. //font-family: Microsoft YaHei;
  1244. font-weight: 400;
  1245. color: $colorMain2;
  1246. }
  1247. }
  1248. .pre_service {
  1249. span:nth-of-type(2),
  1250. span:nth-of-type(3) {
  1251. font-size: 12px;
  1252. //font-family: Microsoft YaHei;
  1253. font-weight: 400;
  1254. color: #333333;
  1255. }
  1256. }
  1257. }
  1258. .store_btn {
  1259. margin-top: 14px;
  1260. .store_btn_pre {
  1261. width: 103px;
  1262. height: 29px;
  1263. background: $colorMain;
  1264. border-radius: 3px;
  1265. margin-right: 14px;
  1266. cursor: pointer;
  1267. img {
  1268. width: 20px;
  1269. height: 20px;
  1270. margin-right: 5px;
  1271. }
  1272. .go_store_btn {
  1273. font-size: 12px;
  1274. //font-family: Microsoft YaHei;
  1275. font-weight: 400;
  1276. color: #ffffff;
  1277. line-height: 39px;
  1278. }
  1279. &:nth-child(2) {
  1280. margin-right: 0;
  1281. border: 1px solid #dfdfdf;
  1282. background: #ffffff;
  1283. span {
  1284. color: #333333;
  1285. }
  1286. }
  1287. }
  1288. }
  1289. }
  1290. // 店铺信息 end
  1291. //店铺推荐及热门收藏 start
  1292. .store_popular {
  1293. width: 250px;
  1294. background: #ffffff;
  1295. border: 1px solid #dfdfdf;
  1296. border-radius: 3px;
  1297. .store_popular_btn {
  1298. span {
  1299. width: 250px;
  1300. height: 40px;
  1301. font-size: 14px;
  1302. //font-family: Microsoft YaHei;
  1303. font-weight: bold;
  1304. background: #f8f8f8;
  1305. color: #333333;
  1306. line-height: 40px;
  1307. text-align: center;
  1308. display: block;
  1309. cursor: pointer;
  1310. }
  1311. .store_popular_active {
  1312. background: $colorMain;
  1313. color: #ffffff;
  1314. }
  1315. }
  1316. .store_popular_list {
  1317. padding: 20px 21px 0;
  1318. .store_popular_pre {
  1319. margin-bottom: 20px;
  1320. border-bottom: 1px solid #f2f2f2;
  1321. &:nth-last-child(1) {
  1322. border-bottom: none;
  1323. }
  1324. cursor: pointer;
  1325. .store_popular_img {
  1326. width: 208px;
  1327. height: 208px;
  1328. border-radius: 2px;
  1329. overflow: hidden;
  1330. &:hover {
  1331. img {
  1332. -webkit-transform: scale(1.05);
  1333. -ms-transform: scale(1.05);
  1334. -o-transform: scale(1.05);
  1335. -moz-transform: scale(1.05);
  1336. transform: scale(1.05);
  1337. }
  1338. }
  1339. img {
  1340. max-width: 100%;
  1341. max-width: 100%;
  1342. -webkit-transition: -webkit-transform 0.5s;
  1343. transition: -webkit-transform 0.5s;
  1344. -moz-transition: transform 0.5s, -moz-transform 0.5s;
  1345. transition: transform 0.5s;
  1346. transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s;
  1347. }
  1348. }
  1349. p {
  1350. width: 197px;
  1351. font-size: 14px;
  1352. //font-family: Microsoft YaHei;
  1353. font-weight: 400;
  1354. color: #333333;
  1355. white-space: nowrap;
  1356. text-overflow: ellipsis;
  1357. overflow: hidden;
  1358. word-break: break-all;
  1359. margin-top: 14px;
  1360. }
  1361. p:nth-of-type(2) {
  1362. margin: 21px 0 13px;
  1363. span {
  1364. font-size: 14px;
  1365. //font-family: Microsoft YaHei;
  1366. font-weight: bold;
  1367. color: $colorMain2;
  1368. // &:nth-child(2) {
  1369. // font-size: 12px;
  1370. // font-family: Microsoft YaHei;
  1371. // color: $colorMain2;
  1372. // }
  1373. }
  1374. }
  1375. }
  1376. }
  1377. }
  1378. // 店铺推荐及热门收藏 end
  1379. // 商品详情 评价 商品服务 店铺热销 start
  1380. .goods_description {
  1381. margin-left: 15px;
  1382. border: 1px solid #dfdfdf;
  1383. border-radius: 3px;
  1384. .goods_description_title {
  1385. width: 934px;
  1386. height: 40px;
  1387. background: #f8f8f8;
  1388. .description_title_left {
  1389. span {
  1390. min-width: 120px;
  1391. height: 40px;
  1392. display: block;
  1393. font-size: 14px;
  1394. //font-family: Microsoft YaHei;
  1395. font-weight: 400;
  1396. color: #333333;
  1397. text-align: center;
  1398. line-height: 39px;
  1399. }
  1400. .description_active {
  1401. background: #ffffff;
  1402. border-top: 2px solid $colorMain2;
  1403. color: $colorMain2;
  1404. }
  1405. }
  1406. .description_title_right {
  1407. padding-right: 10px;
  1408. .mobile_order {
  1409. position: relative;
  1410. &:hover {
  1411. .mobile_order_model {
  1412. display: block;
  1413. }
  1414. }
  1415. span {
  1416. font-size: 12px;
  1417. //font-family: Microsoft YaHei;
  1418. font-weight: 400;
  1419. color: #666666;
  1420. line-height: 74px;
  1421. }
  1422. .goods_code {
  1423. margin-left: 16px;
  1424. }
  1425. .mobile_order_model {
  1426. position: absolute;
  1427. display: none;
  1428. top: 70px;
  1429. width: 180px;
  1430. height: 190px;
  1431. background: #ffffff;
  1432. border: 1px solid #dfdfdf;
  1433. left: -15px;
  1434. &::before {
  1435. box-sizing: content-box;
  1436. width: 0;
  1437. height: 0;
  1438. position: absolute;
  1439. top: -16px;
  1440. right: 81px;
  1441. padding: 0;
  1442. border-bottom: 8px solid #ffffff;
  1443. border-top: 8px solid transparent;
  1444. border-left: 8px solid transparent;
  1445. border-right: 8px solid transparent;
  1446. display: block;
  1447. content: "";
  1448. z-index: 12;
  1449. }
  1450. &::after {
  1451. box-sizing: content-box;
  1452. width: 0px;
  1453. height: 0px;
  1454. position: absolute;
  1455. top: -18px;
  1456. right: 80px;
  1457. padding: 0;
  1458. border-bottom: 9px solid #cccccc;
  1459. border-top: 9px solid transparent;
  1460. border-left: 9px solid transparent;
  1461. border-right: 9px solid transparent;
  1462. display: block;
  1463. content: "";
  1464. z-index: 10;
  1465. }
  1466. .model_goods_code {
  1467. width: 126px;
  1468. height: 126px;
  1469. margin: 20px auto 0;
  1470. img {
  1471. max-width: 126px;
  1472. max-height: 126px;
  1473. margin: auto;
  1474. }
  1475. }
  1476. p {
  1477. text-align: center;
  1478. margin-top: 12px;
  1479. }
  1480. }
  1481. }
  1482. .line {
  1483. width: 1px;
  1484. height: 27px;
  1485. background: #dddddd;
  1486. margin: 0 10px;
  1487. }
  1488. .go_add_cart {
  1489. width: 90px;
  1490. height: 30px;
  1491. background: $colorMain;
  1492. border-radius: 3px;
  1493. font-size: 14px;
  1494. //font-family: Microsoft YaHei;
  1495. font-weight: 400;
  1496. color: #ffffff;
  1497. line-height: 30px;
  1498. text-align: center;
  1499. }
  1500. }
  1501. }
  1502. .goods_description_con {
  1503. width: 934px;
  1504. min-height: 500px;
  1505. .goods_des_con {
  1506. padding-top: 31px;
  1507. .brand {
  1508. margin-bottom: 31px;
  1509. padding-left: 30px;
  1510. span {
  1511. font-size: 14px;
  1512. //font-family: Microsoft YaHei;
  1513. font-weight: 400;
  1514. color: #999999;
  1515. &:nth-child(1) {
  1516. margin-right: 3px;
  1517. }
  1518. &:nth-child(2) {
  1519. color: #6195ff;
  1520. }
  1521. }
  1522. }
  1523. .goods_parameter_list {
  1524. // margin-top: 32px;
  1525. display: flex;
  1526. flex-wrap: wrap;
  1527. padding: 0 30px;
  1528. box-sizing: border-box;
  1529. &.goods_paramter_more {
  1530. overflow: hidden;
  1531. height: 130px;
  1532. }
  1533. .goods_parameter_pre {
  1534. margin-bottom: 21px;
  1535. margin-right: 24px;
  1536. width: 200px;
  1537. span {
  1538. font-size: 12px;
  1539. //font-family: Microsoft YaHei;
  1540. font-weight: 400;
  1541. color: #999999;
  1542. display: inline-block;
  1543. white-space: nowrap;
  1544. text-overflow: ellipsis;
  1545. overflow: hidden;
  1546. word-break: break-all;
  1547. &:nth-child(1) {
  1548. max-width: 80px;
  1549. margin-right: 6px;
  1550. }
  1551. &:nth-child(2) {
  1552. color: #333333;
  1553. width: 135px;
  1554. }
  1555. }
  1556. &:nth-of-type(4n) {
  1557. margin-right: 0;
  1558. }
  1559. }
  1560. }
  1561. .collapse_unfold {
  1562. span {
  1563. font-size: 12px;
  1564. //font-family: Microsoft YaHei;
  1565. font-weight: 400;
  1566. color: #333333;
  1567. line-height: 21px;
  1568. }
  1569. i {
  1570. font-size: 12px;
  1571. color: #333333;
  1572. margin-left: 10px;
  1573. }
  1574. }
  1575. .goods_html {
  1576. padding: 0 21px 0 24px;
  1577. .goods_htmls {
  1578. img {
  1579. max-width: 100%;
  1580. max-height: 100%;
  1581. }
  1582. }
  1583. }
  1584. }
  1585. // 商品评价 start
  1586. .goods_comments {
  1587. padding: 20px;
  1588. .goods_comments_top {
  1589. border-bottom: 1px solid #dddddd;
  1590. display: flex;
  1591. .goods_comments_left {
  1592. width: 250px;
  1593. background: #ffffff;
  1594. border: 1px solid #dddddd;
  1595. border-bottom: none;
  1596. padding: 20px 0;
  1597. box-sizing: border-box;
  1598. .comments_title {
  1599. padding: 0 27px;
  1600. box-sizing: border-box;
  1601. .comments_tips {
  1602. font-size: 14px;
  1603. //font-family: Microsoft YaHei;
  1604. font-weight: 400;
  1605. color: #333333;
  1606. }
  1607. }
  1608. .good_comment {
  1609. margin-top: 20px;
  1610. span {
  1611. font-size: 14px;
  1612. //font-family: Microsoft YaHei;
  1613. font-weight: 400;
  1614. color: #333333;
  1615. &:nth-child(2) {
  1616. display: inline-block;
  1617. font-size: 50px;
  1618. //font-family: Microsoft YaHei;
  1619. font-weight: 400;
  1620. color: $colorMain;
  1621. margin-left: 15px;
  1622. }
  1623. }
  1624. }
  1625. }
  1626. .goods_comments_nav {
  1627. display: flex;
  1628. flex-wrap: wrap;
  1629. margin-left: 20px;
  1630. .comments_nav_pre {
  1631. width: 120px;
  1632. height: 30px;
  1633. background: #ffffff;
  1634. border: 1px solid #dddddd;
  1635. font-size: 14px;
  1636. //font-family: PingFang SC;
  1637. font-weight: 500;
  1638. color: #333333;
  1639. line-height: 30px;
  1640. text-align: center;
  1641. margin-right: 20px;
  1642. cursor: pointer;
  1643. &:nth-child(4n) {
  1644. margin-right: 0;
  1645. }
  1646. &.comments_nav_pre_active {
  1647. color: $colorMain2;
  1648. }
  1649. }
  1650. }
  1651. }
  1652. .goods_comments_list {
  1653. .goods_comments_pre {
  1654. margin-top: 30px;
  1655. padding-bottom: 40px;
  1656. border-bottom: 1px dashed #dddddd;
  1657. .goods_comments_avatar {
  1658. width: 50px;
  1659. height: 50px;
  1660. border-radius: 50%;
  1661. background-size: cover;
  1662. }
  1663. .list_des {
  1664. margin-left: 21px;
  1665. .list_top {
  1666. .list_left {
  1667. .list_top_tile {
  1668. .list_top_tips {
  1669. font-size: 16px;
  1670. //font-family: Microsoft YaHei;
  1671. font-weight: bold;
  1672. color: #333333;
  1673. margin-right: 20px;
  1674. }
  1675. }
  1676. .spec {
  1677. font-size: 14px;
  1678. //font-family: Microsoft YaHei;
  1679. font-weight: 400;
  1680. color: #999999;
  1681. margin-top: 10px;
  1682. }
  1683. }
  1684. .list_top_right {
  1685. font-size: 14px;
  1686. //font-family: Microsoft YaHei;
  1687. font-weight: 400;
  1688. color: #999999;
  1689. }
  1690. }
  1691. .list_pre {
  1692. margin-top: 20px;
  1693. .CommentContent {
  1694. width: 813px;
  1695. font-size: 14px;
  1696. //font-family: Microsoft YaHei;
  1697. font-weight: 400;
  1698. color: #333333;
  1699. line-height: 21px;
  1700. }
  1701. .replyContent {
  1702. margin-top: 15px;
  1703. height: 26px;
  1704. line-height: 26px;
  1705. font-size: 13px;
  1706. span {
  1707. color: #999999;
  1708. font-size: 12px;
  1709. }
  1710. }
  1711. .list_pre_img_list {
  1712. margin-top: 15px;
  1713. flex-wrap: wrap;
  1714. .list_pre_img {
  1715. width: 80px;
  1716. height: 80px;
  1717. background-size: contain;
  1718. background-position: center;
  1719. background-repeat: no-repeat;
  1720. margin-right: 10px;
  1721. }
  1722. }
  1723. }
  1724. }
  1725. }
  1726. }
  1727. }
  1728. // 商品评价 end
  1729. // 商品服务 start
  1730. .goods_server_list {
  1731. .goods_server_pre {
  1732. margin: 0 39px 0 51px;
  1733. border-bottom: 1px solid #f2f2f2;
  1734. padding-bottom: 20px;
  1735. padding-top: 22px;
  1736. .server_pre_top {
  1737. .server_pre_tips {
  1738. width: 5px;
  1739. height: 5px;
  1740. background: $colorMain2;
  1741. border-radius: 50%;
  1742. display: block;
  1743. margin-right: 10px;
  1744. }
  1745. .server_pre_name {
  1746. font-size: 16px;
  1747. //font-family: Microsoft YaHei;
  1748. font-weight: bold;
  1749. color: #333333;
  1750. }
  1751. }
  1752. .server_pre_content {
  1753. font-size: 14px;
  1754. //font-family: Microsoft YaHei;
  1755. font-weight: 400;
  1756. padding-left: 12px;
  1757. margin-top: 21px;
  1758. color: #666666;
  1759. }
  1760. }
  1761. }
  1762. // 商品服务 end
  1763. // 店铺热销 start
  1764. .store_hot_sales {
  1765. .store_hot_sales_list {
  1766. display: flex;
  1767. flex-wrap: wrap;
  1768. padding: 11px 13px;
  1769. .goods_pre {
  1770. margin-bottom: 11px;
  1771. width: 216px;
  1772. height: 313px;
  1773. border: 1px solid #dddddd;
  1774. border-radius: 2px;
  1775. margin-right: 12px;
  1776. cursor: pointer;
  1777. padding-bottom: 10px;
  1778. &:hover {
  1779. border: 1px solid $colorMain;
  1780. }
  1781. &:nth-of-type(4n) {
  1782. margin-right: 0;
  1783. }
  1784. .goods_pre_img {
  1785. width: 214px;
  1786. height: 221px;
  1787. border-radius: 2px 2px 0 0;
  1788. background-size: contain;
  1789. background-repeat: no-repeat;
  1790. }
  1791. .goods_name {
  1792. font-size: 14px;
  1793. //font-family: Microsoft YaHei;
  1794. font-weight: 400;
  1795. color: #333333;
  1796. line-height: 18px;
  1797. text-overflow: -o-ellipsis-lastline;
  1798. overflow: hidden;
  1799. text-overflow: ellipsis;
  1800. display: -webkit-box;
  1801. -webkit-line-clamp: 2;
  1802. line-clamp: 2;
  1803. -webkit-box-orient: vertical;
  1804. margin: 10px 10px 19px;
  1805. }
  1806. .goods_price {
  1807. padding-left: 11px;
  1808. .selling_price {
  1809. font-size: 16px;
  1810. //font-family: Microsoft YaHei;
  1811. font-weight: 400;
  1812. color: $colorMain2;
  1813. }
  1814. }
  1815. }
  1816. }
  1817. }
  1818. // 店铺热销 end
  1819. }
  1820. }
  1821. // 商品详情 评价 商品服务 店铺热销 end
  1822. // 优惠券弹框 start
  1823. .coupon_model {
  1824. .model_coupon_list {
  1825. display: flex;
  1826. flex-wrap: wrap;
  1827. .sld_coupon_item {
  1828. margin-right: 10px !important;
  1829. }
  1830. .sld_coupon_item:nth-child(2n) {
  1831. margin-right: 0 !important;
  1832. }
  1833. }
  1834. }
  1835. // 优惠券弹框 end
  1836. .cursor_pointer {
  1837. cursor: pointer;
  1838. }
  1839. // 分页
  1840. .sld_page_bottom {
  1841. margin-top: 20px;
  1842. }
  1843. //空页面数据样式
  1844. .empty_data {
  1845. padding-top: 170px;
  1846. span {
  1847. margin-top: 30px;
  1848. }
  1849. }
  1850. }
  1851. .imgOpen {
  1852. max-width: 1200px;
  1853. max-height: 700px;
  1854. margin: 0 auto;
  1855. display: block;
  1856. }