1
0

index.wxss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805
  1. .discount-dialog {
  2. position: fixed;
  3. z-index: 5000;
  4. width: 80%;
  5. max-width: 600rpx;
  6. top: 50%;
  7. left: 50%;
  8. transform: translate(-50%, -50%);
  9. background-color: transparent;
  10. text-align: center;
  11. border-radius: 8px;
  12. overflow: hidden;
  13. }
  14. .dialog-title {
  15. height: 60rpx;
  16. line-height: 60rpx;
  17. text-align: center;
  18. color: #fff;
  19. }
  20. .image-box {
  21. height: 90vmin;
  22. overflow: hidden;
  23. }
  24. .image-box image {
  25. width: 100%;
  26. height: 100%;
  27. }
  28. .dialog-close {
  29. margin-top: 16rpx;
  30. margin-bottom: 16rpx;
  31. }
  32. .home-header {
  33. position: fixed;
  34. width: 750rpx;
  35. height: 40rpx;
  36. display: flex;
  37. justify-content: left;
  38. align-items: left;
  39. background-color: #fff;
  40. z-index: 98;
  41. }
  42. .tip-header {
  43. position: fixed;
  44. width: 750rpx;
  45. top: 131rpx;
  46. height: 40rpx;
  47. display: flex;
  48. justify-content: left;
  49. align-items: left;
  50. background-color: #fff;
  51. z-index: 98;
  52. }
  53. .animate {
  54. padding-left: 20px;
  55. font-size: 12px;
  56. color: #000;
  57. display: inline-block;
  58. white-space: nowrap;
  59. animation: 10s wordsLoop linear infinite normal;
  60. }
  61. .tip-text {
  62. color: red;
  63. }
  64. @keyframes wordsLoop {
  65. 0% {
  66. transform: translateX(200px);
  67. -webkit-transform: translateX(200px);
  68. }
  69. 100% {
  70. transform: translateX(-100%);
  71. -webkit-transform: translateX(-100%);
  72. }
  73. }
  74. @-webkit-keyframes wordsLoop {
  75. 0% {
  76. transform: translateX(200px);
  77. -webkit-transform: translateX(200px);
  78. }
  79. 100% {
  80. transform: translateX(-100%);
  81. -webkit-transform: translateX(-100%);
  82. }
  83. }
  84. .current-store {
  85. text-align: left;
  86. position: relative;
  87. margin-left: 35rpx;
  88. font-size: 14px;
  89. }
  90. .search-icon {
  91. width: 40rpx;
  92. height: 40rpx;
  93. margin-left: auto;
  94. }
  95. .search-header {
  96. position: fixed;
  97. top: 40rpx;
  98. width: 750rpx;
  99. height: 91rpx;
  100. display: flex;
  101. background: #fff;
  102. padding: 0 31.25rpx;
  103. font-size: 29rpx;
  104. color: #333;
  105. z-index: 99;
  106. }
  107. .search-header .input-box {
  108. position: relative;
  109. margin-top: 16rpx;
  110. float: left;
  111. width: 0;
  112. flex: 1;
  113. height: 59rpx;
  114. line-height: 59rpx;
  115. padding: 0 20rpx;
  116. background: #f4f4f4;
  117. color: #999;
  118. border-radius: 15px;
  119. }
  120. .search-header .icon {
  121. position: absolute;
  122. top: 14rpx;
  123. left: 20rpx;
  124. width: 31rpx;
  125. height: 31rpx;
  126. }
  127. .search-header .del {
  128. position: absolute;
  129. top: 3rpx;
  130. right: 10rpx;
  131. width: 53rpx;
  132. height: 53rpx;
  133. z-index: 10;
  134. }
  135. .search-header .keywrod {
  136. position: absolute;
  137. top: 0;
  138. width: 506rpx;
  139. height: 59rpx;
  140. font-size: 12px;
  141. }
  142. .search-header .right {
  143. margin-top: 24rpx;
  144. margin-left: 31rpx;
  145. margin-right: 6rpx;
  146. width: 58rpx;
  147. height: 43rpx;
  148. line-height: 43rpx;
  149. float: right;
  150. }
  151. .search-icon-shop {
  152. width: 40rpx;
  153. height: 40rpx;
  154. margin-left: 15rpx;
  155. margin-top: 20rpx;
  156. }
  157. .banner {
  158. width: 710rpx;
  159. height: 365rpx;
  160. background-color: #fff;
  161. padding-top: 170rpx;
  162. justify-content: center;
  163. margin: 0 auto;
  164. border-radius: 15rpx;
  165. box-shadow: 3px 3px 7px rgb(224, 221, 221);
  166. }
  167. .banner image {
  168. width: 100%;
  169. height: 365rpx;
  170. }
  171. .m-menu {
  172. height: 155rpx;
  173. width: 710rpx;
  174. flex-flow: row nowrap;
  175. align-items: center;
  176. background-color: #fff;
  177. display: flex;
  178. justify-content: center;
  179. margin: 10rpx auto 0 auto;
  180. border-radius: 15rpx;
  181. box-shadow: 3px 3px 7px rgb(224, 221, 221);
  182. }
  183. .m-menu .item {
  184. flex: 1;
  185. display: block;
  186. padding: 20rpx 0;
  187. }
  188. .m-menu .itemb {
  189. flex: 1;
  190. display: block;
  191. }
  192. .m-menu image {
  193. display: block;
  194. width: 58rpx;
  195. height: 58rpx;
  196. margin: 0 auto;
  197. margin-bottom: 12rpx;
  198. }
  199. .m-menu text {
  200. display: block;
  201. font-size: 24rpx;
  202. text-align: center;
  203. margin: 0 auto;
  204. line-height: 1;
  205. color: #333;
  206. }
  207. .a-section {
  208. width: 710rpx;
  209. height: auto;
  210. margin: 10rpx auto 0 auto;
  211. justify-content: center;
  212. border-radius: 15rpx;
  213. box-shadow: 3px 3px 7px rgb(224, 221, 221);
  214. }
  215. .a-section .h {
  216. width: 710rpx;
  217. height: 90rpx;
  218. display: flex;
  219. align-items: center;
  220. background: #fff;
  221. justify-content: space-between;
  222. border-radius: 30rpx;
  223. box-shadow: 3px 3px 7px rgb(224, 221, 221);
  224. }
  225. .a-section .h .txt {
  226. padding-left: 40rpx;
  227. display: inline-block;
  228. height: 36rpx;
  229. line-height: 36rpx;
  230. font-size: 33rpx;
  231. }
  232. .a-section .h .more-1 {
  233. padding-right: 30rpx;
  234. justify-content: rigth;
  235. width: 60rpx;
  236. height: 36rpx;
  237. line-height: 36rpx;
  238. }
  239. .a-section .b {
  240. height: auto;
  241. justify-content: center;
  242. margin: 10rpx auto 0 auto;
  243. }
  244. .a-section .b .item {
  245. margin-top: 10rpx;
  246. height: 254rpx;
  247. width: 710rpx;
  248. background: #fff;
  249. border-radius: 30rpx;
  250. box-shadow: 3px 3px 7px rgb(224, 221, 221);
  251. }
  252. .a-section .b .item .c .left {
  253. width: 240rpx;
  254. height: 240rpx;
  255. float: left;
  256. display: flex;
  257. justify-content: center;
  258. align-items: center;
  259. /* border-radius: 20rpx;
  260. margin-top: 36rpx; */
  261. }
  262. .touming-img{
  263. opacity:0.6;
  264. filter:alpha(opacity=60);
  265. }
  266. .a-section .b .img {
  267. margin-top: 10rpx;
  268. margin-right: 15rpx;
  269. float: left;
  270. width: 240rpx;
  271. height: 240rpx;
  272. background-size: 140rpx 140rpx;
  273. }
  274. .a-section .b .right {
  275. float: left;
  276. height: 250rpx;
  277. width: 445rpx;
  278. display: flex;
  279. flex-flow: row nowrap;
  280. }
  281. .a-section .b .text {
  282. display: flex;
  283. flex-wrap: nowrap;
  284. flex-direction: column;
  285. justify-content: center;
  286. overflow: hidden;
  287. height: 264rpx;
  288. width: 460rpx;
  289. margin-left:20rpx;
  290. }
  291. .a-section .b .name {
  292. /* width: 456rpx; */
  293. display: block;
  294. color: #333;
  295. line-height: 50rpx;
  296. font-size: 33rpx;
  297. border-radius: 15px;
  298. /* font-weight: bolder; */
  299. }
  300. .a-section .b .desc {
  301. width: 456rpx;
  302. display: block;
  303. color: #999;
  304. line-height: 50rpx;
  305. font-size: 25rpx;
  306. }
  307. .a-section .b .goods-do {
  308. display: inline;
  309. }
  310. #goods-do-new {
  311. margin-top: 10%;
  312. }
  313. #directionp {
  314. margin-right: 5%;
  315. }
  316. .goods-do-font {
  317. font-size:23rpx;
  318. }
  319. .a-section .b .goods-do .price {
  320. /* width: 50rpx; */
  321. display: inline;
  322. color: #f00910;
  323. line-height: 50rpx;
  324. font-size:42rpx;
  325. /* font-weight: bold; */
  326. }
  327. .bottomprice {
  328. margin-bottom:10%;
  329. }
  330. .a-section .b .goods-do .org-price {
  331. /* width: 40rpx; */
  332. display: inline;
  333. color: #333;
  334. line-height: 50rpx;
  335. font-size: 23rpx;
  336. margin-left: 2rpx;
  337. }
  338. .a-brand .wrap {
  339. position: relative;
  340. }
  341. .a-brand .img {
  342. position: absolute;
  343. left: 0;
  344. top: 0;
  345. }
  346. .a-brand .mt {
  347. position: absolute;
  348. z-index: 2;
  349. padding: 27rpx 31rpx;
  350. left: 0;
  351. top: 0;
  352. }
  353. .a-brand .mt .brand {
  354. display: block;
  355. font-size: 33rpx;
  356. height: 43rpx;
  357. color: #333;
  358. }
  359. .a-brand .mt .price, .a-brand .mt .unit {
  360. font-size: 25rpx;
  361. color: #999;
  362. }
  363. .a-brand .item-1 {
  364. float: left;
  365. width: 375rpx;
  366. height: 252rpx;
  367. overflow: hidden;
  368. border-top: 1rpx solid #fff;
  369. margin-left: 1rpx;
  370. }
  371. .a-brand .item-1:nth-child(2n+1) {
  372. margin-left: 0;
  373. width: 374rpx;
  374. }
  375. .a-brand .item-1 .img {
  376. width: 375rpx;
  377. height: 253rpx;
  378. }
  379. .a-new .b {
  380. border-top: 1px solid #d9d9d9;
  381. width: 750rpx;
  382. height: auto;
  383. overflow: hidden;
  384. padding: 0 31rpx 45rpx 31rpx;
  385. }
  386. .topic-list {
  387. border-top: 1px solid #d9d9d9;
  388. }
  389. .topic-list .item .imgtt .imgline .priceInfo {
  390. float: left;
  391. text-align: left;
  392. width: 60%;
  393. height: 33rpx;
  394. line-height: 38rpx;
  395. overflow: hidden;
  396. color: #fff;
  397. font-size: 33rpx;
  398. margin-top: 25rpx;
  399. padding-left: 33rpx;
  400. }
  401. .a-new .b .item {
  402. float: left;
  403. width: 302rpx;
  404. margin-top: 10rpx;
  405. margin-left: 21rpx;
  406. margin-right: 21rpx;
  407. }
  408. .a-new .b .item-b {
  409. margin-left: 42rpx;
  410. }
  411. .a-new .b .imgt {
  412. width: 302rpx;
  413. height: 302rpx;
  414. }
  415. .a-new .b .img {
  416. width: 100%;
  417. height: 100%;
  418. }
  419. .a-new .b .name {
  420. text-align: center;
  421. display: block;
  422. width: 302rpx;
  423. height: 35rpx;
  424. margin-bottom: 14rpx;
  425. overflow: hidden;
  426. font-size: 30rpx;
  427. color: #333;
  428. }
  429. .a-new .b .price {
  430. display: inline;
  431. text-align: center;
  432. line-height: 30rpx;
  433. font-size: 30rpx;
  434. color: #b4282d;
  435. }
  436. .a-new .b .priceInfo {
  437. float: left;
  438. clear: both;
  439. }
  440. .a-topic .b {
  441. height: 433rpx;
  442. width: 750rpx;
  443. padding: 0 0 48rpx 0;
  444. }
  445. .a-topic .b .list {
  446. width: 750rpx;
  447. white-space: nowrap;
  448. }
  449. .a-topic .b .item {
  450. display: inline-block;
  451. width: 680.5rpx;
  452. margin-left: 30rpx;
  453. overflow: hidden;
  454. }
  455. .a-topic .b .item:last-child {
  456. margin-right: 30rpx;
  457. }
  458. .a-topic .b .img {
  459. height: 387.5rpx;
  460. width: 680.5rpx;
  461. margin-bottom: 10rpx;
  462. }
  463. .a-topic .b .np {
  464. height: 35rpx;
  465. margin-bottom: 13.5rpx;
  466. color: #333;
  467. font-size: 30rpx;
  468. }
  469. .a-topic .b .np .price {
  470. margin-left: 20.8rpx;
  471. color: #b4282d;
  472. }
  473. .a-topic .b .desc {
  474. display: block;
  475. height: 30rpx;
  476. color: #999;
  477. font-size: 24rpx;
  478. white-space: nowrap;
  479. overflow: hidden;
  480. text-overflow: ellipsis;
  481. }
  482. .good-grid {
  483. width: 750rpx;
  484. height: auto;
  485. overflow: hidden;
  486. }
  487. .good-grid .h {
  488. display: flex;
  489. flex-flow: row nowrap;
  490. align-items: center;
  491. justify-content: center;
  492. height: 130rpx;
  493. font-size: 33rpx;
  494. color: #333;
  495. }
  496. .good-grid .b {
  497. width: 750rpx;
  498. padding: 0 6.25rpx;
  499. height: auto;
  500. overflow: hidden;
  501. }
  502. .good-grid .b .item {
  503. float: left;
  504. background: #fff;
  505. width: 365rpx;
  506. margin-bottom: 6.25rpx;
  507. height: 452rpx;
  508. overflow: hidden;
  509. text-align: center;
  510. }
  511. .good-grid .b .item .a {
  512. height: 452rpx;
  513. width: 100%;
  514. }
  515. .good-grid .b .item-b {
  516. margin-left: 6.25rpx;
  517. }
  518. .good-grid .item .img {
  519. margin-top: 20rpx;
  520. width: 302rpx;
  521. height: 302rpx;
  522. }
  523. .good-grid .item .name {
  524. display: block;
  525. width: 365.625rpx;
  526. padding: 0 20rpx;
  527. overflow: hidden;
  528. height: 35rpx;
  529. margin: 11.5rpx 0 22rpx 0;
  530. text-align: center;
  531. font-size: 30rpx;
  532. color: #333;
  533. }
  534. .a-section .item .name {
  535. font-weight: bold;
  536. text-overflow: ellipsis;
  537. overflow: hidden;
  538. }
  539. .good-grid .item .price {
  540. display: block;
  541. width: 365.625rpx;
  542. height: 30rpx;
  543. text-align: center;
  544. font-size: 30rpx;
  545. color: #b4282d;
  546. }
  547. .good-grid .more-item {
  548. height: 100%;
  549. width: 100%;
  550. }
  551. .more-a {
  552. height: 100%;
  553. width: 100%;
  554. display: flex;
  555. flex-direction: column;
  556. align-items: center;
  557. justify-content: center;
  558. }
  559. .good-grid .more-a .txt {
  560. height: 33rpx;
  561. width: 100%;
  562. line-height: 33rpx;
  563. color: #333;
  564. font-size: 33rpx;
  565. }
  566. .good-grid .more-a .icon {
  567. margin: 60rpx auto 0 auto;
  568. width: 70rpx;
  569. height: 70rpx;
  570. }
  571. .line-through {
  572. text-decoration: line-through;
  573. }
  574. .number-item {
  575. display: inline-flex;
  576. -webkit-box-pack: justify;
  577. align-items: center;
  578. position: absolute;
  579. right: 0;
  580. margin-right: 60rpx;
  581. /* margin-top:8rpx; */
  582. }
  583. .number-item .selnum {
  584. /* height: 71rpx; */
  585. display: flex;
  586. }
  587. .number-item .cut {
  588. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAM1BMVEX////Z296wsLD6+vvo6evi5Obe3+Lr7O709fb5+fr3+Pjb3eDw8fLu7/Hl5+nk5ui5ubmS1nTyAAABG0lEQVRIx52WWXLEIAxEeUGSGeNl7n/aME6lUmQWm+5f+5l2A5LSC+XFPCrUcFtyuqDbFHSK6XaCzE7TvpZ8LFnWnSafPyB5g2oldSpWYXvrcgKmkQdNDpbfWDDwVwEE8cH6HMRTIAX8Y7rZofxbByydyKBfKx7MORV9Bn4CPL82EfkKlOMv+QxzuqQZfr++YemijK3Dz9Sb8mb0sib8Z4tqGlDldrA2AtnhKygjUCGOX0tDesS2sI9BO0vzuI5BK5acMgYVPAV5DMpEy71P9P71pHu/J9REDzXmBdVDSJBkTwpCilzaXOkYSQdWuRrSJZSuu1JYpBKmFEupLCsNQGk1SlOT2qfSqJWRQBg+lDFHG6j00U0fEqVx9BvALAkNabHL3QAAAABJRU5ErkJggg==);
  589. box-sizing: border-box;
  590. width: 25px;
  591. border: none;
  592. border-radius: 50%;
  593. height: 25px;
  594. background-size: 100% 100%;
  595. }
  596. .number-item .number {
  597. width: 2em;
  598. text-align: center;
  599. color: #333;
  600. }
  601. .number-item .add {
  602. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEX/0WH///8zMzP/02b//fb/+u7/5qj/45z/3oz/1W1KRDj/8c//78j/7L7/6rX/2HfEo1P/3IXeVLZ3AAAA70lEQVRIx52WWQ7DIAxEJzFrNpL7X7ZIbdUUnITh/aIngW1sY6gwiwspisQU3GLq81KxaxCckLDaW8V6KHh7qRgnUBFndGWOuCTOmrLhlq1WPB7wpXLgkeNf8WjAn5UNTWw/ZUYj81cxEY1E81EcmnFvxQqaEZuVi2jt07TrUcuKhcY0jhM0bFZWaIwZaKxZCZwSBhjhFDFYwClZcKziEFglILFKQiwyOFYUOY0QnFGMMqfSo/AX63k+H+SeVPIF01OWfPHzX6zrI/Ptgm9KfOvjGyzfxvlhwY8kfvDx45Uf4vyqwC8kvWtP/3LFr3AvL0kJEWHNe5sAAAAASUVORK5CYII=);
  603. box-sizing: border-box;
  604. width: 25px;
  605. border: none;
  606. border-radius: 50%;
  607. height: 25px;
  608. background-size: 100% 100%;
  609. }
  610. .group-box {
  611. display: flex;
  612. padding: 10px 10px;
  613. background-color: #fff;
  614. }
  615. .group-box .img {
  616. width: 240rpx;
  617. height: 240rpx;
  618. margin-top: 9px;
  619. }
  620. .group-box .title, .group-box .desc {
  621. text-align: left;
  622. padding: 0;
  623. }
  624. .group-box .imgline {
  625. flex: 1;
  626. padding-left: 15px;
  627. }
  628. .priceInfo .price {
  629. color: #b4282d;
  630. font-size: 40rpx;
  631. }
  632. .btn-view .btn {
  633. color: #fff;
  634. background-color: #f48f18;
  635. width: 200rpx;
  636. margin-top: 10px;
  637. font-size: 28rpx;
  638. float: right;
  639. }
  640. .btn-view .surplus {
  641. float: left;
  642. padding: 5px 10px;
  643. background-color: #ffdf80;
  644. text-align: center;
  645. margin-top: 15px;
  646. align-items: center;
  647. font-size: 28rpx;
  648. border-radius: 16px 16px 16px 16px;
  649. }
  650. .cart{
  651. margin-left: 20rpx;
  652. width: 35rpx;
  653. height: 35rpx;
  654. vertical-align: -6rpx;
  655. }
  656. .container-loc {
  657. box-sizing:border-box;
  658. background-color:#f4f4f4;
  659. font-family:PingFangSC-Light, helvetica, 'Heiti SC';
  660. display:flex;
  661. align-items:center;
  662. height:100vh;
  663. }
  664. .no-location-view{
  665. margin: 0rpx auto;
  666. }
  667. .no-location-text{
  668. color: #999;
  669. font-size: 24rpx;
  670. text-align: center
  671. }
  672. .no-location-text2{
  673. color: #b4282d;
  674. font-size: 30rpx;
  675. text-align: center
  676. }
  677. .no-loc-but-view{
  678. margin: 50rpx auto;
  679. }
  680. .no-loc-but{
  681. color: white;
  682. background: #b4282d;
  683. border-radius: 40rpx;
  684. width: 60%;
  685. height: 60rpx;
  686. line-height: 60rpx;
  687. font-size:34rpx;
  688. }
  689. .no-loc-but::after{
  690. border: none;
  691. }