index.wxss 20 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340
  1. page {
  2. height: 100vh;
  3. }
  4. .container {
  5. background: #f8f8f8;
  6. padding:20rpx 30rpx 30rpx;
  7. }
  8. /*弹窗*/
  9. .mask {
  10. width: 100%;
  11. height: 100%;
  12. position: fixed;
  13. top: 0;
  14. left: 0;
  15. background: #000;
  16. z-index: 9000;
  17. opacity: 0.7;
  18. }
  19. .guanbi {
  20. border: 5rpx solid #7F7F7F;
  21. position: absolute;
  22. bottom: -70rpx;
  23. color: #7F7F7F;
  24. font-size: 60rpx;
  25. border-radius: 40rpx;
  26. width: 60rpx;
  27. height: 60rpx;
  28. text-align: center;
  29. line-height: 57rpx;
  30. }
  31. .modalDlg {
  32. width: 580rpx;
  33. /* height: 750rpx; */
  34. position: fixed;
  35. top: 45%;
  36. left: 0;
  37. z-index: 9999;
  38. margin: -370rpx 85rpx;
  39. background-color: #fff;
  40. border-radius: 36rpx;
  41. display: flex;
  42. flex-direction: column;
  43. align-items: center;
  44. background: #EE4749;
  45. }
  46. .modalDlg button {
  47. margin-top: 30rpx;
  48. margin-bottom: 30rpx;
  49. font-size: 24rpx;
  50. color: #47C5FA;
  51. background: #E7F7FF;
  52. border-radius: 30rpx;
  53. }
  54. .modalDlg .table {
  55. /* border:1px solid red; */
  56. overflow: scroll;
  57. max-height: 600rpx;
  58. min-height: 200rpx;
  59. }
  60. .modalDlg .huode {
  61. color: white;
  62. margin-top: 30rpx;
  63. font-size: 30rpx;
  64. }
  65. .modalDlg .youhuiquan {
  66. margin-top: 10rpx;
  67. font-size: 24rpx;
  68. color: white;
  69. }
  70. .modalDlg .line {
  71. width: 520rpx;
  72. /* border: 2px solid blue; */
  73. background: white;
  74. height: 140rpx;
  75. border-radius: 30rpx;
  76. overflow: hidden;
  77. text-align: center;
  78. margin-top: 20rpx;
  79. }
  80. .modalDlg .line .left {
  81. width: 150rpx;
  82. height: 140rpx;
  83. background: #E7F7FF;
  84. float: left;
  85. }
  86. .modalDlg .line .left .ljsy {
  87. width: 100rpx;
  88. font-size: 20rpx;
  89. background: #47C5FA;
  90. color: white;
  91. margin: 0px auto;
  92. border-radius: 20rpx;
  93. margin-top: 5rpx;
  94. }
  95. .modalDlg .line .right .mz {
  96. margin-top: 30rpx;
  97. overflow: hidden;
  98. color: black;
  99. font-weight: 600;
  100. font-size: 26rpx;
  101. }
  102. .modalDlg .line .right .sj {
  103. color: #C8C5C5;
  104. font-size: 20rpx;
  105. margin-top: 20rpx;
  106. }
  107. .adv {
  108. position: fixed;
  109. left: 0rpx;
  110. bottom: 0;
  111. z-index: 100;
  112. width: 750rpx;
  113. height: 165rpx;
  114. display: flex;
  115. /* border: 1px solid red; */
  116. }
  117. .banner {
  118. width: 690rpx;
  119. height: 462rpx;
  120. z-index: 20;
  121. }
  122. .banner image {
  123. width: 690rpx;
  124. height: 462rpx;
  125. }
  126. .m-menu {
  127. /* background: #fff; */
  128. margin: 20rpx 0;
  129. display: flex;
  130. align-items: center;
  131. flex-wrap: wrap;
  132. height: 270rpx;
  133. justify-content: space-between;
  134. }
  135. .category-item {
  136. width: 164rpx;
  137. height: 270rpx;
  138. position: relative;
  139. }
  140. .item-name {
  141. position: absolute;
  142. left: 0;
  143. right: 0;
  144. top: 30rpx;
  145. text-align: center;
  146. font-size: 24rpx;
  147. color: #fff;
  148. margin: 0 0 12rpx 0;
  149. }
  150. .item-desc {
  151. position: absolute;
  152. left: 0;
  153. right: 0;
  154. top: 64rpx;
  155. text-align: center;
  156. font-size: 20rpx;
  157. color: #fff;
  158. }
  159. .m-menu .item {
  160. width: 245rpx;
  161. height: 126rpx;
  162. margin-top: 10rpx;
  163. margin-bottom: 10rpx;
  164. }
  165. .hot-item {
  166. /* padding: 0 20rpx; */
  167. /* height: 148rpx; */
  168. font-size: 0;
  169. }
  170. .hot-item image {
  171. width: 690rpx;
  172. height: 148rpx;
  173. /* margin-bottom: 18rpx; */
  174. }
  175. .hot-item-nav{
  176. border-radius: 32rpx; margin-bottom:18rpx
  177. }
  178. .m-menu image {
  179. width: 164rpx;
  180. height: 270rpx;
  181. border-radius: 10rpx;
  182. }
  183. .m-menu text {
  184. display: block;
  185. font-size: 24rpx;
  186. text-align: center;
  187. margin: 0 auto;
  188. line-height: 1;
  189. color: #333;
  190. }
  191. .shoadow {
  192. box-shadow: 1px 2px 2px 2px #f7f7f1;
  193. }
  194. .image-margin {
  195. margin-bottom: 20rpx;
  196. }
  197. .a-section {
  198. width: 750rpx;
  199. height: auto;
  200. overflow: hidden;
  201. /* margin-top: 20rpx; */
  202. }
  203. .a-section .h {
  204. display: flex;
  205. flex-flow: row nowrap;
  206. align-items: center;
  207. justify-content: center;
  208. height: 92rpx;
  209. padding:40rpx 0 20rpx;
  210. }
  211. .popular-title {
  212. display: flex;
  213. align-items: center;
  214. justify-content: space-between;
  215. height: 32rpx;
  216. width: 100%;
  217. }
  218. .a-section .h .txt1 {
  219. width: 4rpx;
  220. height: 34rpx;
  221. background: #09AFFF;
  222. margin: 0 12rpx 0 0;
  223. }
  224. .devide-bar {
  225. width: 4rpx;
  226. height: 34rpx;
  227. background: #09AFFF;
  228. margin: 0 12rpx 0 0;
  229. }
  230. .title-text {
  231. font-size: 33rpx;
  232. font-weight: bold;
  233. }
  234. .title-left {
  235. display: flex;
  236. align-items: center;
  237. height: 34rpx;
  238. }
  239. .title-right {
  240. display: flex;
  241. align-items: center;
  242. height: 34rpx;
  243. font-size: 24rpx;
  244. }
  245. .a-section .h .txt {
  246. padding-right: 30rpx;
  247. font-size: 33rpx;
  248. font-weight: bold;
  249. }
  250. .a-brand .b {
  251. width: 750rpx;
  252. height: auto;
  253. overflow: hidden;
  254. position: relative;
  255. }
  256. .a-brand .wrap {
  257. position: relative;
  258. }
  259. .a-brand .img {
  260. position: absolute;
  261. left: 0;
  262. top: 0;
  263. }
  264. .a-brand .mt {
  265. position: absolute;
  266. z-index: 2;
  267. padding: 27rpx 31rpx;
  268. left: 0;
  269. top: 0;
  270. }
  271. .a-brand .mt .brand {
  272. display: block;
  273. font-size: 33rpx;
  274. height: 43rpx;
  275. color: #fff;
  276. }
  277. .a-brand .mt .price,
  278. .a-brand .mt .unit {
  279. font-size: 25rpx;
  280. color: #fff;
  281. }
  282. .a-brand .item-1 {
  283. float: left;
  284. width: 375rpx;
  285. height: 252rpx;
  286. overflow: hidden;
  287. border-top: 1rpx solid #fff;
  288. margin-left: 1rpx;
  289. }
  290. .a-brand .item-1:nth-child(2n+1) {
  291. margin-left: 0;
  292. width: 374rpx;
  293. }
  294. .a-brand .item-1 .img {
  295. width: 375rpx;
  296. height: 253rpx;
  297. }
  298. .a-coupon {
  299. width: 750rpx;
  300. height: auto;
  301. overflow: hidden;
  302. }
  303. .a-coupon .b .item {
  304. position: relative;
  305. height: 200rpx;
  306. width: 700rpx;
  307. background: linear-gradient(to right, #cfa568, #e3bf79);
  308. margin-bottom: 10rpx;
  309. margin-left: 30rpx;
  310. margin-right: 30rpx;
  311. padding-top: 30rpx;
  312. }
  313. .a-coupon .b .tag {
  314. height: 32rpx;
  315. background: #a48143;
  316. padding-left: 16rpx;
  317. padding-right: 16rpx;
  318. position: absolute;
  319. left: 20rpx;
  320. color: #fff;
  321. top: 20rpx;
  322. font-size: 20rpx;
  323. text-align: center;
  324. line-height: 32rpx;
  325. }
  326. .a-coupon .b .content {
  327. margin-top: 24rpx;
  328. margin-left: 40rpx;
  329. display: flex;
  330. margin-right: 40rpx;
  331. flex-direction: row;
  332. }
  333. .a-coupon .b .content .left {
  334. flex: 1;
  335. }
  336. .a-coupon .b .discount {
  337. font-size: 50rpx;
  338. color: #b4282d;
  339. }
  340. .a-coupon .b .min {
  341. color: #fff;
  342. }
  343. .a-coupon .b .content .right {
  344. width: 400rpx;
  345. }
  346. .a-coupon .b .name {
  347. font-size: 44rpx;
  348. color: #fff;
  349. margin-bottom: 14rpx;
  350. }
  351. .a-coupon .b .desc {
  352. font-size: 24rpx;
  353. color: #fff;
  354. }
  355. .a-coupon .b .time {
  356. font-size: 24rpx;
  357. color: #fff;
  358. line-height: 30rpx;
  359. }
  360. .a-groupon {
  361. width: 750rpx;
  362. height: auto;
  363. overflow: hidden;
  364. }
  365. .a-groupon .b .item {
  366. border-top: 1px solid #d9d9d9;
  367. margin: 0 20rpx;
  368. height: 244rpx;
  369. width: 710rpx;
  370. }
  371. .a-groupon .b .img {
  372. margin-top: 12rpx;
  373. margin-right: 12rpx;
  374. float: left;
  375. width: 220rpx;
  376. height: 220rpx;
  377. }
  378. .a-groupon .b .right {
  379. float: left;
  380. height: 244rpx;
  381. width: 476rpx;
  382. display: flex;
  383. flex-flow: row nowrap;
  384. }
  385. .a-groupon .b .text {
  386. display: flex;
  387. flex-wrap: nowrap;
  388. flex-direction: column;
  389. justify-content: center;
  390. overflow: hidden;
  391. height: 244rpx;
  392. width: 476rpx;
  393. }
  394. .a-groupon .b .name {
  395. float: left;
  396. display: block;
  397. color: #333;
  398. line-height: 50rpx;
  399. font-size: 30rpx;
  400. }
  401. .a-groupon .b .desc {
  402. width: 476rpx;
  403. display: block;
  404. color: #999;
  405. line-height: 50rpx;
  406. font-size: 25rpx;
  407. }
  408. .a-groupon .b .price {
  409. width: 476rpx;
  410. display: flex;
  411. color: #ab956d;
  412. line-height: 50rpx;
  413. font-size: 33rpx;
  414. }
  415. .a-groupon .b .counterPrice {
  416. text-decoration: line-through;
  417. font-size: 28rpx;
  418. color: #999;
  419. }
  420. .a-groupon .b .retailPrice {
  421. margin-left: 30rpx;
  422. font-size: 28rpx;
  423. color: #a98f76;
  424. }
  425. .a-new .b {
  426. width: 750rpx;
  427. height: auto;
  428. overflow: hidden;
  429. padding: 0 31rpx 45rpx 31rpx;
  430. }
  431. .a-new .b .item {
  432. float: left;
  433. width: 302rpx;
  434. margin-top: 10rpx;
  435. margin-left: 21rpx;
  436. margin-right: 21rpx;
  437. }
  438. .a-new .b .item-b {
  439. margin-left: 42rpx;
  440. }
  441. .a-new .b .img {
  442. width: 298rpx;
  443. height: 300rpx;
  444. }
  445. .a-new .b .name {
  446. /*text-align: center;*/
  447. display: block;
  448. width: 302rpx;
  449. height: 60rpx;
  450. margin-bottom: 14rpx;
  451. overflow: hidden;
  452. font-size: 30rpx;
  453. color: #333;
  454. /*white-space: nowrap;*/
  455. overflow: hidden;
  456. text-overflow: ellipsis;
  457. margin-top: 5rpx;
  458. margin-left: 0rpx;
  459. line-height: 1em;
  460. /*行间距*/
  461. }
  462. .a-new .b .price {
  463. display: block;
  464. /*text-align: center;*/
  465. line-height: 30rpx;
  466. font-size: 30rpx;
  467. color: darkred;
  468. margin-left: 10rpx;
  469. }
  470. .a-new .b .brand {
  471. font-size: 20rpx;
  472. color: #a98f76;
  473. display: block;
  474. line-height: 30rpx;
  475. margin-bottom: 5rpx;
  476. margin-left: 12rpx;
  477. }
  478. .a-popular {
  479. width: 690rpx;
  480. height: auto;
  481. overflow: hidden;
  482. /* padding: 0 20rpx; */
  483. margin: -18rpx 0 0;
  484. }
  485. .popular-item {
  486. /* box-shadow: 0 0 10rpx 0 rgba(100, 100, 100, 0.2); */
  487. border-radius: 20rpx;
  488. margin: 0 0 20rpx 0;
  489. min-height: 380rpx;
  490. width: 690rpx;
  491. background: #fff;
  492. padding: 20rpx 20rpx 24rpx;
  493. display: flex;
  494. flex-direction: column;
  495. }
  496. .item-img-wrapper {
  497. position: relative;
  498. /* padding:20rpx;
  499. background: #C4ECFF; */
  500. border-radius: 20rpx;
  501. font-size: 0;
  502. }
  503. .self-tag {
  504. height: 24rpx;
  505. line-height: 24rpx;
  506. background: #3DBFFE;
  507. color: #fff;
  508. padding: 0 8rpx;
  509. /* line-height: 28rpx; */
  510. font-size: 18rpx;
  511. margin: 0 12rpx 0 0;
  512. border-radius: 4rpx;
  513. }
  514. .popular-item .product-item-name {
  515. width: 380rpx;
  516. overflow: hidden;
  517. white-space: nowrap;
  518. text-overflow: ellipsis;
  519. font-size: 28rpx;
  520. }
  521. .popular-item .item-brief {
  522. width: 400rpx;
  523. overflow: hidden;
  524. /* white-space: nowrap; */
  525. text-overflow: ellipsis;
  526. font-size: 20rpx;
  527. display: -webkit-box;
  528. color: #999;
  529. -webkit-box-orient: vertical;
  530. -webkit-line-clamp: 2;
  531. margin-top: 5rpx;
  532. /*超过两行省略号*/
  533. }
  534. .counter-price {
  535. font-size: 20rpx;
  536. text-decoration: line-through;
  537. color: #999;
  538. line-height: 28rpx;
  539. text-align: center;
  540. }
  541. .retail-price {
  542. font-size: 32rpx;
  543. font-weight: bold;
  544. color: #DD483E;
  545. text-align: center;
  546. }
  547. .retail-price .title {
  548. font-size: 26rpx;
  549. color: #DD483E;
  550. line-height: 48rpx;
  551. }
  552. .retail-price .unit {
  553. font-size: 21rpx;
  554. font-weight: 400;
  555. color: #DD483E;
  556. }
  557. .retail-price .price {
  558. font-size: 32rpx;
  559. font-weight: bold;
  560. color: #DD483E;
  561. margin-left: 10rpx;
  562. }
  563. /* 活动商品显示样式 */
  564. .activity {
  565. height: 75rpx;
  566. background: linear-gradient(67deg, #4F43DD, #689CF2, #BA64E2);
  567. border-radius: 10rpx;
  568. display: flex;
  569. justify-content: space-between;
  570. flex-direction: row;
  571. align-items: center;
  572. }
  573. .activity .clock {
  574. width: 42rpx;
  575. height: 42rpx;
  576. margin-right: 10rpx;
  577. }
  578. .activity .time {
  579. font-size: 20rpx;
  580. font-weight: 400;
  581. color: #F4F4F4;
  582. line-height: 30rpx;
  583. }
  584. .activity .arrow {
  585. width: 10rpx;
  586. height: 16rpx;
  587. margin-left: 10rpx;
  588. margin-right: 10rpx;
  589. }
  590. .activity .limit {
  591. width: 131rpx;
  592. height: 32rpx;
  593. background-image: url(https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/activity2.png);
  594. background-size: 100% 100%;
  595. color: #fff;
  596. font-size: 23rpx;
  597. text-align: center;
  598. margin-left: 20rpx;
  599. }
  600. .a-popular .b .img {
  601. width: 650rpx;
  602. height: 400rpx;
  603. border-radius: 20rpx;
  604. }
  605. .item-tag {
  606. position: absolute;
  607. left: 0;
  608. top: 20rpx;
  609. height: 32rpx;
  610. width: 116rpx;
  611. text-align: center;
  612. color: #fff;
  613. font-size: 22rpx;
  614. background: #09AFFF;
  615. border-radius: 0 32rpx 32rpx 0;
  616. }
  617. .item-main {
  618. display: flex;
  619. /* align-items: center; */
  620. justify-content: space-between;
  621. height: 90rpx;
  622. margin: 20rpx 0 10rpx;
  623. padding-left:20rpx;
  624. }
  625. .item-sub {
  626. display: flex;
  627. align-items: center;
  628. justify-content: space-between;
  629. /* height: 20rpx; */
  630. }
  631. .item-left {
  632. display: flex;
  633. /* align-items: center; */
  634. flex-direction: column;
  635. }
  636. .a-popular .b .right {
  637. float: left;
  638. height: 264rpx;
  639. width: 456rpx;
  640. display: flex;
  641. flex-flow: row nowrap;
  642. }
  643. .a-popular .b .text {
  644. display: flex;
  645. flex-wrap: nowrap;
  646. flex-direction: column;
  647. justify-content: center;
  648. overflow: hidden;
  649. height: 264rpx;
  650. width: 456rpx;
  651. }
  652. .a-popular .b .name {
  653. width: 456rpx;
  654. display: block;
  655. color: #333;
  656. line-height: 40rpx;
  657. font-size: 30rpx;
  658. }
  659. .a-popular .b .desc {
  660. width: 456rpx;
  661. display: block;
  662. color: #a98f76;
  663. line-height: 50rpx;
  664. font-size: 25rpx;
  665. }
  666. /*
  667. .a-popular .b .price {
  668. width: 456rpx;
  669. display: block;
  670. color: darkred;
  671. line-height: 50rpx;
  672. font-size: 33rpx;
  673. } */
  674. .a-popular .b .brand {
  675. font-size: 20rpx;
  676. color: #a98f76;
  677. display: block;
  678. line-height: 30rpx;
  679. padding: 2rpx;
  680. }
  681. .a-topic .b {
  682. /*height: 533rpx;*/
  683. height: auto;
  684. width: 750rpx;
  685. padding: 0 0 48rpx 0;
  686. }
  687. .good-nva {
  688. border: 1px #eee solid;
  689. }
  690. /*
  691. .a-topic .b .list {
  692. height: auto;
  693. width: 750rpx;
  694. white-space: nowrap;
  695. }
  696. .a-topic .b .item {
  697. display: block;
  698. height: 533rpx;
  699. width: 680.5rpx;
  700. margin-left: 30rpx;
  701. overflow: hidden;
  702. }
  703. .a-topic .b .t {
  704. height: 100rpx;
  705. background: #fff;
  706. display: flex;
  707. align-items: center;
  708. justify-content: center;
  709. }
  710. .a-topic .b .item:last-child {
  711. margin-right: 30rpx;
  712. }
  713. .a-topic .b .img {
  714. height: 387.5rpx;
  715. width: 680.5rpx;
  716. margin-bottom: 30rpx;
  717. }
  718. .a-topic .b .np {
  719. height: 35rpx;
  720. margin-bottom: 13.5rpx;
  721. color: #333;
  722. font-size: 30rpx;
  723. }
  724. .a-topic .b .np .price {
  725. margin-left: 20.8rpx;
  726. color: #ab956d;
  727. }
  728. .a-topic .b .np .discount {
  729. width: 476rpx;
  730. display: block;
  731. color: #999;
  732. line-height: 50rpx;
  733. font-size: 25rpx;
  734. }
  735. .a-topic .b .desc {
  736. display: block;
  737. height: 30rpx;
  738. color: #999;
  739. font-size: 24rpx;
  740. white-space: nowrap;
  741. overflow: hidden;
  742. text-overflow: ellipsis;
  743. } */
  744. .good-grid {
  745. width: 750rpx;
  746. height: auto;
  747. overflow: hidden;
  748. }
  749. .good-grid .h {
  750. display: flex;
  751. flex-flow: row nowrap;
  752. align-items: center;
  753. justify-content: center;
  754. height: 130rpx;
  755. font-size: 33rpx;
  756. color: #333;
  757. }
  758. .good-grid .b {
  759. width: 750rpx;
  760. padding: 0 6.25rpx;
  761. height: auto;
  762. overflow: hidden;
  763. }
  764. .good-grid .b .item {
  765. float: left;
  766. background: #fff;
  767. width: 365rpx;
  768. margin-bottom: 6.25rpx;
  769. height: 452rpx;
  770. overflow: hidden;
  771. text-align: center;
  772. }
  773. .good-grid .b .item .a {
  774. height: 452rpx;
  775. width: 100%;
  776. }
  777. .good-grid .b .item-b {
  778. margin-left: 6.25rpx;
  779. }
  780. .good-grid .item .img {
  781. margin-top: 20rpx;
  782. width: 302rpx;
  783. height: 302rpx;
  784. }
  785. .good-grid .item .name {
  786. display: block;
  787. width: 365.625rpx;
  788. padding: 0 20rpx;
  789. overflow: hidden;
  790. height: 35rpx;
  791. margin: 11.5rpx 0 22rpx 0;
  792. text-align: center;
  793. font-size: 30rpx;
  794. color: #333;
  795. }
  796. .good-grid .item .price {
  797. display: block;
  798. width: 365.625rpx;
  799. height: 30rpx;
  800. text-align: center;
  801. font-size: 30rpx;
  802. color: #a98f76;
  803. }
  804. .good-grid .t {
  805. height: 100rpx;
  806. background: #fff;
  807. display: flex;
  808. align-items: center;
  809. justify-content: center;
  810. }
  811. .address {
  812. padding: 0 50rpx;
  813. height: 68rpx;
  814. display: flex;
  815. align-items: center;
  816. }
  817. .address .name {
  818. display: flex;
  819. align-items: center;
  820. /* height: 40rpx; */
  821. width: 600rpx;
  822. overflow: hidden;
  823. float: left;
  824. }
  825. .address .shar {
  826. background: #fff;
  827. }
  828. .address button::after {
  829. border: none;
  830. }
  831. .address .shar image {
  832. float: right;
  833. width: 40rpx;
  834. height: 40rpx;
  835. margin-top: 6rpx;
  836. /* border:1px solid red; */
  837. }
  838. .address .name .address-name {
  839. height: 68rpx;
  840. line-height: 68rpx;
  841. text-overflow: ellipsis;
  842. /* word-wrap: break-word; */
  843. margin: 0 12rpx;
  844. white-space: nowrap;
  845. overflow: hidden;
  846. width: 240rpx;
  847. }
  848. .address .warning {
  849. font-size: 26rpx;
  850. color: red;
  851. margin-left: 40rpx;
  852. }
  853. .search {
  854. height: 68rpx;
  855. width: 690rpx;
  856. display: flex;
  857. align-items: center;
  858. margin: 0 0 20rpx 0;
  859. }
  860. .search .van-icon-search {
  861. line-height: 59rpx;
  862. color: #ffffff;
  863. }
  864. .search .input {
  865. width: 690rpx;
  866. height: 68rpx;
  867. background: #fff;
  868. border-radius: 68rpx;
  869. /* border:1rpx solid gray; */
  870. display: flex;
  871. align-items: center;
  872. justify-content: center;
  873. }
  874. .search .txt {
  875. height: 42rpx;
  876. line-height: 42rpx;
  877. /* color: #ffffff; */
  878. color: #666;
  879. /* padding-left: 10rpx; */
  880. font-size: 28rpx;
  881. }
  882. .no-login {
  883. width: 100%;
  884. height: auto;
  885. margin: 0 auto;
  886. background-color: #fff;
  887. }
  888. .no-login .c {
  889. width: 100%;
  890. height: auto;
  891. margin-top: 400rpx;
  892. }
  893. .no-login .c text {
  894. margin: 0 auto;
  895. display: block;
  896. width: 258rpx;
  897. height: 59rpx;
  898. line-height: 29rpx;
  899. text-align: center;
  900. font-size: 35rpx;
  901. }
  902. .no-login button {
  903. width: 90%;
  904. margin: 0 auto;
  905. color: #fff;
  906. font-size: 30rpx;
  907. height: 96rpx;
  908. line-height: 96rpx;
  909. right: 0;
  910. display: flex;
  911. justify-content: center;
  912. align-items: center;
  913. position: flex;
  914. bottom: 0;
  915. left: 0;
  916. border-radius: 0;
  917. padding: 0;
  918. margin-left: 5%;
  919. text-align: center;
  920. border-radius: 6rpx;
  921. letter-spacing: 3rpx;
  922. background-color: #242a48;
  923. /*background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);*/
  924. }
  925. .wechat {
  926. width: 80rpx;
  927. height: 80rpx;
  928. margin-right: 15rpx;
  929. }
  930. /* 关于鲸致 */
  931. .about-jz {
  932. padding: 10rpx 0rpx 0;
  933. }
  934. .jzhz-img {
  935. width: 710rpx;
  936. }
  937. .service-tel {
  938. font-size: 20rpx;
  939. text-align: center;
  940. display: flex;
  941. align-items: center;
  942. justify-content: center;
  943. }
  944. .partner-title {
  945. font-size: 30rpx;
  946. margin: 40rpx 0 24rpx;
  947. text-align: center;
  948. font-weight: bold;
  949. }
  950. .jz-feature {
  951. margin: 40rpx 0 0;
  952. height: 60rpx;
  953. display: flex;
  954. align-items: center;
  955. justify-content: space-between;
  956. }
  957. .devide-line {
  958. height: 50rpx;
  959. width: 2rpx;
  960. background: #85868A;
  961. }
  962. .feature-item {
  963. display: flex;
  964. flex-direction: column;
  965. justify-content: space-between;
  966. font-size: 20rpx;
  967. align-items: center;
  968. height: 50rpx;
  969. }
  970. .jz-logo-wrapper {
  971. text-align: center;
  972. margin: 30rpx 0 10rpx;
  973. }
  974. .jz-logo {
  975. width: 306rpx;
  976. height: 42rpx;
  977. }
  978. .jz-company {
  979. color: #A4A4A4;
  980. font-size: 20rpx;
  981. margin: 24rpx 0 0;
  982. text-align: center;
  983. }
  984. .member-price {
  985. height: 34rpx;
  986. display: flex;
  987. align-items: center;
  988. justify-content: flex-end;
  989. }
  990. .memberPrice {
  991. font-size: 26rpx;
  992. color: #DD483E;
  993. margin: 0 0 0 30rpx;
  994. }
  995. .member-price-tag {
  996. width: 120rpx;
  997. height: 32rpx;
  998. line-height: 32rpx;
  999. background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/member-price-bg.png') no-repeat center center;
  1000. background-size: 100% 100%;
  1001. color: #5E3A11;
  1002. font-size: 22rpx;
  1003. padding: 0 8rpx 0 0;
  1004. text-align: right;
  1005. }
  1006. /* 新客角标 */
  1007. .isNew {
  1008. position: absolute;
  1009. width: 80rpx;
  1010. height: 120rpx;
  1011. right: 30rpx;
  1012. }
  1013. .phone-btn{
  1014. position: fixed;
  1015. z-index: 999;
  1016. right: 20rpx;
  1017. top: 500rpx;
  1018. font-size: 60rpx;
  1019. animation-iteration-count: infinite;
  1020. width: 100rpx;
  1021. height: 100rpx;
  1022. border-radius: 100rpx;
  1023. background: rgba(255,255,255,0.8);
  1024. display: flex;
  1025. align-items: center;
  1026. justify-content: center;
  1027. color: #09afff;
  1028. }
  1029. .phone-wrapper{
  1030. display: flex;
  1031. align-items: center;
  1032. }
  1033. .right-icon{
  1034. color: #09afff;
  1035. font-size: 30rpx;
  1036. margin-left:6rpx;
  1037. }
  1038. .shop-name{
  1039. font-size: 24rpx;
  1040. border:2rpx solid #09afff;
  1041. line-height: 30rpx;
  1042. padding:0 8rpx;
  1043. border-radius:8rpx;
  1044. margin:0 8rpx 0 0;
  1045. word-break: keep-all;
  1046. max-width: 240rpx;
  1047. overflow: hidden;
  1048. text-overflow: ellipsis;
  1049. }
  1050. .ad-wrapper{
  1051. position: relative;
  1052. }
  1053. .kt-img{
  1054. position: absolute;
  1055. bottom:8rpx;
  1056. right:0;
  1057. z-index:99;
  1058. width:246rpx;
  1059. height:200rpx;
  1060. }
  1061. .jz-video{
  1062. width:690rpx;
  1063. height:380rpx;
  1064. border-radius:12rpx;
  1065. margin:20rpx 0;
  1066. }
  1067. .jz-about{
  1068. /* width: 690rpx; */
  1069. height: 220rpx;
  1070. padding:0 4rpx;
  1071. display: flex;
  1072. align-items: center;
  1073. justify-content: space-between;
  1074. }
  1075. .about-item{
  1076. display: flex;
  1077. flex-direction: column;
  1078. align-items: center;
  1079. flex:1;
  1080. }
  1081. .about-item image{
  1082. width:80rpx;
  1083. height:80rpx;
  1084. margin-bottom:20rpx;
  1085. }
  1086. .about-item .middle-text{
  1087. height: 26rpx;
  1088. font-size: 26rpx;
  1089. color: #000000;
  1090. line-height: 26rpx;
  1091. margin-bottom:18rpx;
  1092. }
  1093. .about-item .small-text{
  1094. font-size: 20rpx;
  1095. color: #999999;
  1096. line-height: 20rpx;
  1097. height: 20rpx;
  1098. }
  1099. .category-navi{
  1100. border-radius: 32rpx;
  1101. }
  1102. .company-yj{
  1103. display: flex;
  1104. justify-content: space-between;
  1105. margin:20rpx 0;
  1106. }
  1107. .yj-left{
  1108. width:200rpx;
  1109. height:260rpx;
  1110. background: url('https://jzmall.lifejingzhi.com/file/mall-uni/bg-yj.png') no-repeat center;
  1111. background-size: 100% 100%;
  1112. padding:32rpx 0 0 40rpx;
  1113. }
  1114. .yj-left view{
  1115. color: #2BB9FE;
  1116. font-size: 20rpx;
  1117. line-height: 26rpx;
  1118. }
  1119. .yj-left view.yj-head{
  1120. font-size: 26rpx;
  1121. margin-bottom:20rpx;
  1122. height:26rpx;
  1123. line-height: 26rpx;
  1124. }
  1125. .yj-right{
  1126. height:260rpx;
  1127. width:480rpx;
  1128. display: flex;
  1129. flex-direction: column;
  1130. justify-content: space-between;
  1131. }
  1132. .com-sm{
  1133. width:480rpx;
  1134. height:124rpx;
  1135. background: url('https://jzmall.lifejingzhi.com/file/mall-uni/bg-sm.png') no-repeat center;
  1136. background-size: 100% 100%;
  1137. padding:30rpx 0 0 40rpx;
  1138. }
  1139. .com-sm.com-jzg{
  1140. background-image: url('https://jzmall.lifejingzhi.com/file/mall-uni/bg-jzg.png')
  1141. }
  1142. .com-sm view{
  1143. color: #FF682D;
  1144. font-size: 20rpx;
  1145. line-height: 20rpx;
  1146. height:20rpx;
  1147. }
  1148. .com-sm.com-jzg view{
  1149. color: #F04445;
  1150. }
  1151. .com-sm view.sm-head{
  1152. height:26rpx;
  1153. line-height: 26rpx;
  1154. font-size: 26rpx;
  1155. margin-bottom:20rpx;
  1156. }
  1157. .bx-line{
  1158. height:62rpx;
  1159. padding:0rpx 0 26rpx;
  1160. display: flex;
  1161. align-items: center;
  1162. justify-content: center;
  1163. border-bottom: 1rpx solid #Eee;
  1164. }
  1165. .bx-line image{
  1166. width:28rpx;
  1167. height:36rpx;
  1168. }
  1169. .bx-line view{
  1170. font-size: 24rpx;
  1171. color: #000000;
  1172. }
  1173. .bx-line view.bx-head{
  1174. font-size: 32rpx;
  1175. font-weight: bold;
  1176. margin:0 18rpx 0 10rpx;
  1177. }
  1178. .com-bottom-wrapper{
  1179. background: #FFFFFF;
  1180. border-radius: 14rpx;
  1181. padding:32rpx 20rpx 0;
  1182. }