goodsDetail.scss 84 KB

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