goodsDetail.scss 84 KB

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