new2.css 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952
  1. .widgets-cover .cover-content.hasFooter .cover-footer, .widgets-cover .cover-content.hasHeader .cover-header {
  2. display: block
  3. }
  4. .widgets-cover {
  5. position: fixed;
  6. top: 0;
  7. bottom: 0;
  8. left: 0;
  9. right: 0;
  10. z-index: 999;
  11. pointer-events: none;
  12. opacity: 0;
  13. transition: opacity .3s 80ms;
  14. will-change: opacity;
  15. bottom: var(--safe-area-inset-bottom)
  16. }
  17. .widgets-cover.show {
  18. pointer-events: auto;
  19. opacity: 1;
  20. }
  21. .widgets-cover.show .cover-bg {
  22. background-color: rgba(0, 0, 0, .5)
  23. }
  24. .widgets-cover.show .cover-content {
  25. -webkit-transform: translate3d(0, 0, 0);
  26. transform: translate3d(0, 0, 0)
  27. }
  28. .widgets-cover.hideCover .cover-bg {
  29. background-color: none !important
  30. }
  31. .widgets-cover .cover-bg {
  32. position: absolute;
  33. left: 0;
  34. right: 0;
  35. bottom: 0;
  36. top: 0;
  37. background-color: rgba(0, 0, 0, .5)
  38. }
  39. .widgets-cover .cover-content {
  40. position: absolute;
  41. left: 0;
  42. right: 0;
  43. bottom: 0;
  44. top: 20%;
  45. background-color: #fff;
  46. -webkit-transition: -webkit-transform .3s cubic-bezier(0, 0, .25, 1) 80ms;
  47. transition: transform .3s cubic-bezier(0, 0, .25, 1) 80ms;
  48. -webkit-transform: translate3d(0, 100%, 0);
  49. transform: translate3d(0, 100%, 0);
  50. will-change: transform;
  51. box-shadow: 0 -1px 40px rgba(0, 0, 0, .3)
  52. }
  53. .widgets-cover .cover-content.hasFooter .cover-body {
  54. bottom: 48px
  55. }
  56. .widgets-cover .cover-content.hasHeader .cover-body {
  57. top: 48px
  58. }
  59. .widgets-cover .cover-content.top50 {
  60. top: 50%
  61. }
  62. .widgets-cover .cover-content.top40 {
  63. top: 40%
  64. }
  65. .widgets-cover .cover-content.top30 {
  66. top: 30
  67. }
  68. .widgets-cover .cover-content.top20 {
  69. top: 20
  70. }
  71. .widgets-cover .cover-content.top10 {
  72. top: 10
  73. }
  74. .widgets-cover .cover-content.top0 {
  75. top: 0
  76. }
  77. .widgets-cover .cover-content .cover-header {
  78. display: none;
  79. height: 48px;
  80. text-align: center;
  81. line-height: 48px;
  82. font-size: 15px
  83. }
  84. .widgets-cover .cover-content .cover-body {
  85. position: absolute;
  86. bottom: 0;
  87. top: 0;
  88. left: 0;
  89. right: 0;
  90. overflow: auto;
  91. -webkit-overflow-scrolling: touch
  92. }
  93. .widgets-cover .cover-content .cover-body iframe {
  94. border: 0;
  95. width: 100%;
  96. height: 100%
  97. }
  98. .widgets-cover .cover-content .cover-footer {
  99. display: none;
  100. height: 48px;
  101. text-align: center;
  102. line-height: 48px;
  103. width: 100%;
  104. position: absolute;
  105. bottom: 0;
  106. background: #FF0036;
  107. color: #FFF
  108. }
  109. .widgets-cover .cover-content .cover-footer:active {
  110. opacity: .8
  111. }
  112. .widgets-cover .ui-loading {
  113. margin-top: 40%
  114. }
  115. .tm-detail-font, em, i {
  116. font-style: normal
  117. }
  118. * {
  119. margin: 0;
  120. padding: 0
  121. }
  122. table {
  123. border-collapse: collapse;
  124. border-spacing: 0
  125. }
  126. h1, h2, h3, h4, h5, h6 {
  127. font-size: 100%
  128. }
  129. li, ol, ul {
  130. list-style: none
  131. }
  132. img {
  133. border: none
  134. }
  135. img, input {
  136. vertical-align: middle
  137. }
  138. a {
  139. color: #000;
  140. text-decoration: none
  141. }
  142. body, html {
  143. background: #fff;
  144. width: 100%;
  145. font-family: Helvetica, sans-serif;
  146. -webkit-text-size-adjust: none
  147. }
  148. a, html {
  149. -webkit-tap-highlight-color: transparent
  150. }
  151. input.fixAKeyboard:focus, textarea.fixAndroidKeyboard:focus {
  152. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  153. -webkit-user-modify: read-write-plaintext-only
  154. }
  155. .installment-wrap, .installment-wrap label, .pickup-wrap {
  156. -webkit-tap-highlight-color: transparent
  157. }
  158. :root {
  159. --origin-safe-area-inset-top: 0px;
  160. --origin-safe-area-inset-bottom: 0px;
  161. --safe-area-inset-top: var(--windvane-safe-area-inset-top, var(--origin-safe-area-inset-top));
  162. --safe-area-inset-bottom: var(--windvane-safe-area-inset-bottom, var(--origin-safe-area-inset-bottom))
  163. }
  164. @supports (width: constant(safe-area-inset-top)) {
  165. :root {
  166. --origin-safe-area-inset-top: constant(safe-area-inset-top);
  167. --origin-safe-area-inset-bottom: constant(safe-area-inset-bottom)
  168. }
  169. }
  170. @supports (width: env(safe-area-inset-top)) {
  171. :root {
  172. --origin-safe-area-inset-top: env(safe-area-inset-top);
  173. --origin-safe-area-inset-bottom: env(safe-area-inset-bottom)
  174. }
  175. }
  176. .clearfix:after {
  177. content: ' ';
  178. display: block;
  179. clear: both;
  180. height: 0;
  181. font-size: 0;
  182. overflow: hidden
  183. }
  184. .tm-detail-font {
  185. font-family: tm-detail-font
  186. }
  187. .rule-color-main {
  188. color: #FF0036
  189. }
  190. .rule-color-second {
  191. color: #FFF5F7
  192. }
  193. .rule-background-main {
  194. background-color: #FF0036
  195. }
  196. .rule-background-second {
  197. background-color: #FFF5F7
  198. }
  199. .app-tb .rule-color-main {
  200. color: #FF5000
  201. }
  202. .app-tb .rule-color-second {
  203. color: #FFF1EB
  204. }
  205. .app-tb .rule-background-main {
  206. background-color: #FF5000
  207. }
  208. .app-tb .rule-background-second {
  209. background-color: #FFF1EB
  210. }
  211. @font-face {
  212. font-family: tm-detail-sku;
  213. src: url(data:font/ttf;base64,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) format('truetype')
  214. }
  215. .sku-wrap {
  216. position: absolute;
  217. top: 0;
  218. bottom: 0;
  219. left: 0;
  220. right: 0
  221. }
  222. .sku-wrap .header {
  223. padding: 10px 0 10px 126px;
  224. position: relative
  225. }
  226. .sku-wrap .header .price-wrap {
  227. width: 210px
  228. }
  229. .sku-wrap .header .img-wrap {
  230. width: 100px;
  231. height: 100px;
  232. position: absolute;
  233. top: -28px;
  234. left: 10px;
  235. border-radius: 4px;
  236. overflow: hidden;
  237. border: 1px solid rgba(0, 0, 0, .1);
  238. padding: 1px;
  239. background-color: #fff
  240. }
  241. .sku-wrap .header .img-wrap img {
  242. width: 100%;
  243. height: 100%
  244. }
  245. .sku-wrap .header .main {
  246. color: #051b28;
  247. font-size: 13px;
  248. line-height: 18px;
  249. padding-right: 20px
  250. }
  251. .sku-wrap .header .main .price {
  252. font-family: arial;
  253. font-size: 18px;
  254. color: #FF0036;
  255. word-wrap: break-word;
  256. line-height: 30px;
  257. }
  258. .sku-wrap .header .main .sku-info {
  259. display: -webkit-box;
  260. -webkit-line-clamp: 2;
  261. -webkit-box-orient: vertical;
  262. height: 36px;
  263. overflow: hidden;
  264. font-size: 16px;
  265. line-height: 36px;
  266. }
  267. .sku-wrap .header .main .sku-info span {
  268. margin-right: 5px
  269. }
  270. .sku-wrap .header .sku-close {
  271. position: absolute;
  272. top: 6px;
  273. right: 10px
  274. }
  275. .sku-wrap .body {
  276. padding: 0 15px 10px;
  277. position: absolute;
  278. bottom: 48px;
  279. top: 93px;
  280. left: 0;
  281. right: 0;
  282. overflow: auto;
  283. -webkit-overflow-scrolling: touch
  284. }
  285. .sku-wrap .body:before {
  286. content: "";
  287. display: block;
  288. border-bottom: 1px solid rgba(0, 0, 0, .1)
  289. }
  290. .sku-wrap .body h2 {
  291. color: #666;
  292. font-size: 13px;
  293. font-weight: 400;
  294. padding-bottom: 10px;
  295. padding-top: 10px
  296. }
  297. .sku-wrap .footer {
  298. display: block;
  299. display: -webkit-box;
  300. display: flex;
  301. height: 48px;
  302. text-align: center;
  303. line-height: 48px;
  304. color: #FFF;
  305. width: 100%;
  306. position: absolute;
  307. bottom: 0
  308. }
  309. .sku-wrap .footer span {
  310. -webkit-box-flex: 1;
  311. -webkit-flex: 1;
  312. flex: 1
  313. }
  314. .sku-wrap .footer .info {
  315. display: none
  316. }
  317. .sku-wrap .footer .ok {
  318. display: block;
  319. font-size: 15px;
  320. line-height: 50px;
  321. -webkit-box-flex: 1;
  322. -webkit-flex: 1;
  323. flex: 1;
  324. color: #fff;
  325. background-color: #FF0036
  326. }
  327. .sku-wrap .footer .ok.disabled {
  328. background-color: #cfcfcf;
  329. color: rgba(255, 255, 255, .4)
  330. }
  331. .bundle-wrap li, .sku-list-wrap li {
  332. border-bottom: 1px solid rgba(0, 0, 0, .1);
  333. padding-bottom: 10px
  334. }
  335. .bundle-wrap .items a, .sku-list-wrap .items a {
  336. position: relative;
  337. display: inline-block;
  338. border: 1px solid #f5f5f5;
  339. background-color: #f5f5f5;
  340. padding: 6px 12px;
  341. border-radius: 8px;
  342. font-size: 13px;
  343. margin: 0 8px 8px 0;
  344. color: #555
  345. }
  346. .sku-list-wrap .items a .sku-dot {
  347. display: inline-block;
  348. vertical-align: middle;
  349. width: 16px;
  350. height: 16px;
  351. border-radius: 50%;
  352. border: 1px solid #fff;
  353. position: relative;
  354. top: -1px;
  355. margin-right: 5px
  356. }
  357. .sku-list-wrap .items a .cornerIcon {
  358. position: absolute;
  359. right: -1px;
  360. top: -1px;
  361. width: 13px;
  362. max-height: 20px
  363. }
  364. .bundle-wrap .items .disabled, .sku-list-wrap .items .disabled {
  365. color: #cfcfcf
  366. }
  367. .bundle-wrap .items .checked, .sku-list-wrap .items .checked {
  368. border-color: #FF0036;
  369. background-color: #FF0036;
  370. color: #fff
  371. }
  372. .address-wrap .deliveryContent, .bundle-wrap .bundlesListTo, .number-wrap .number-line, .services-wrap .items {
  373. border-bottom: 1px solid rgba(0, 0, 0, .1)
  374. }
  375. .address-wrap .deliveryContent {
  376. font-size: 12px;
  377. padding-bottom: 10px
  378. }
  379. .address-wrap .deliveryContent .deliveryTo {
  380. padding-bottom: 10px;
  381. overflow: hidden;
  382. text-overflow: ellipsis;
  383. white-space: nowrap
  384. }
  385. .address-wrap .deliveryContent .deliveryTo i {
  386. font-size: 14px;
  387. font-family: tm-detail-font;
  388. color: #5F646E
  389. }
  390. .address-wrap .deliveryContent .deliveryTo i.hd {
  391. margin-right: 5px
  392. }
  393. .address-wrap .deliveryContent .deliveryTo i.hd:before {
  394. content: '\e616'
  395. }
  396. .address-wrap .deliveryContent .deliveryTo i.ft {
  397. float: right
  398. }
  399. .address-wrap .deliveryContent .deliveryTo i.ft:before {
  400. content: '\e611'
  401. }
  402. .services-wrap .items {
  403. padding-bottom: 10px
  404. }
  405. .services-wrap .service-item {
  406. line-height: 30px;
  407. overflow: hidden
  408. }
  409. .services-wrap .service-item .checkicon {
  410. float: right
  411. }
  412. .services-wrap input[type=checkbox] {
  413. visibility: hidden;
  414. display: none
  415. }
  416. .services-wrap input[type=checkbox] + .checkicon {
  417. float: right;
  418. line-height: 30px
  419. }
  420. .services-wrap input[type=checkbox] + .checkicon:after {
  421. visibility: visible;
  422. content: '\e621';
  423. font-family: tm-detail-sku;
  424. font-size: 17px;
  425. color: #5f646e;
  426. line-height: 30px
  427. }
  428. .services-wrap input[type=checkbox]:checked + .checkicon:after {
  429. content: '\e620';
  430. color: #FF0036
  431. }
  432. .services-wrap input[type=radio] {
  433. visibility: hidden;
  434. display: none
  435. }
  436. .services-wrap input[type=radio] + .checkicon {
  437. float: right;
  438. line-height: 30px
  439. }
  440. .services-wrap input[type=radio] + .checkicon:after {
  441. visibility: visible;
  442. content: '\e621';
  443. font-family: tm-detail-sku;
  444. font-size: 17px;
  445. color: #5f646e;
  446. line-height: 30px
  447. }
  448. .services-wrap input[type=radio]:checked + .checkicon:after {
  449. content: '\e622';
  450. color: #FF0036
  451. }
  452. .number-wrap .number-line {
  453. padding-bottom: 10px;
  454. padding-top: 10px;
  455. line-height: 36px
  456. }
  457. .number-wrap .number-line::after {
  458. content: '\20';
  459. height: 0;
  460. display: block;
  461. clear: both
  462. }
  463. .number-wrap label {
  464. color: #666;
  465. font-size: 13px;
  466. font-weight: 400
  467. }
  468. .number-wrap .limit-txt {
  469. color: #666;
  470. font-size: 12px
  471. }
  472. .number-wrap .number {
  473. height: 36px;
  474. width: 100px;
  475. border-radius: 3px;
  476. float: right
  477. }
  478. .number-wrap .number button, .number-wrap .number input[type=number] {
  479. float: left
  480. }
  481. .number-wrap .number input[type=number] {
  482. line-height: 32px;
  483. height: 34px;
  484. width: 36px;
  485. text-align: center;
  486. font-size: 13px;
  487. font-weight: 700;
  488. border: 1px solid #f5f5f5;
  489. background-color: #f5f5f5;
  490. box-sizing: border-box;
  491. -webkit-appearance: none;
  492. -moz-appearance: none;
  493. -o-appearance: none;
  494. appearance: none;
  495. margin: 0
  496. }
  497. .number-wrap .number button {
  498. border: none;
  499. outline: 0;
  500. line-height: 32px;
  501. height: 34px;
  502. width: 30px;
  503. font-size: 24px;
  504. border: 1px solid #f5f5f5;
  505. background-color: #f5f5f5
  506. }
  507. .number-wrap .number .decrease {
  508. border-right: 1px solid #fff
  509. }
  510. .number-wrap .number .increase {
  511. border-left: 1px solid #fff
  512. }
  513. .number-wrap .number .disabled {
  514. color: #cfcfcf
  515. }
  516. .installment-wrap label {
  517. position: relative;
  518. display: inline-block;
  519. background-color: #f5f5f5;
  520. padding: 6px 12px;
  521. font-size: 13px;
  522. margin: 0 8px 8px 0;
  523. color: #555;
  524. text-align: center;
  525. -webkit-border-radius: 8px;
  526. border-radius: 8px
  527. }
  528. .installment-wrap label.checked {
  529. background-color: #FF0036;
  530. color: #fff
  531. }
  532. .installment-wrap label.disabled, .installment-wrap label.tb-out-of-stock {
  533. color: #cfcfcf
  534. }
  535. .installment-wrap label .installment-line {
  536. display: block
  537. }
  538. .installment-wrap label .coupon {
  539. position: absolute;
  540. left: 0;
  541. right: 0;
  542. bottom: -12px;
  543. background: #FF0036;
  544. color: #fff;
  545. border-bottom-right-radius: 8px;
  546. border-bottom-left-radius: 8px;
  547. font-size: 12px
  548. }
  549. .installment-wrap .installmentContent {
  550. overflow: auto;
  551. white-space: nowrap;
  552. -webkit-overflow-scrolling: touch;
  553. padding-left: 15px;
  554. margin-left: -15px;
  555. margin-right: -15px;
  556. padding-bottom: 5px
  557. }
  558. .bundle-wrap .bundlesListTo {
  559. padding-bottom: 10px
  560. }
  561. .bundle-wrap .bundlesListTo span {
  562. padding-right: 20px;
  563. display: block;
  564. line-height: 16px;
  565. position: relative;
  566. overflow: hidden;
  567. white-space: nowrap;
  568. text-overflow: ellipsis
  569. }
  570. .bundle-wrap .bundlesListTo span:after {
  571. position: absolute;
  572. right: 0;
  573. top: 50%;
  574. margin-top: -8px;
  575. height: 16px;
  576. line-height: 16px;
  577. content: '\e611';
  578. font-size: 14px;
  579. font-family: tm-detail-font;
  580. color: #5F646E
  581. }
  582. .pickup-wrap li {
  583. padding: 1em 0 .5em
  584. }
  585. .pickup-wrap h2 {
  586. color: #999
  587. }
  588. .pickup-wrap input {
  589. display: none
  590. }
  591. .pickup-wrap input:checked + label {
  592. border-color: #FF0036;
  593. background-color: #FF0036;
  594. color: #fff
  595. }
  596. .pickup-wrap input[disabled] + label {
  597. color: #cfcfcf;
  598. border-color: #cfcfcf
  599. }
  600. .pickup-wrap label {
  601. display: inline-block;
  602. border: 1px solid #f5f5f5;
  603. background-color: #f5f5f5;
  604. padding: 6px 12px;
  605. border-radius: 8px;
  606. font-size: 13px;
  607. margin: 0 8px 8px 0;
  608. color: #555;
  609. text-align: center;
  610. -webkit-box-sizing: border-box;
  611. box-sizing: border-box
  612. }
  613. .pickup-wrap .pickType {
  614. padding-bottom: 10px;
  615. border-bottom: 1px solid rgba(0, 0, 0, .1)
  616. }
  617. .pickup-wrap .pickShop {
  618. padding: .05rem 0;
  619. overflow: hidden
  620. }
  621. .pickup-wrap .pickShop::after {
  622. content: '\20';
  623. height: 0;
  624. display: block;
  625. clear: both
  626. }
  627. .pickup-wrap .pickShop .inner {
  628. background-color: #FF0036;
  629. border: 1px solid #FF0036;
  630. color: #fff;
  631. padding: 6px 12px;
  632. border-radius: 8px;
  633. font-size: 13px;
  634. margin: 0 8px 8px 0;
  635. min-width: 2em;
  636. max-width: 68%;
  637. float: left
  638. }
  639. .pickup-wrap .pickShop .locationIcon {
  640. font-size: .24rem;
  641. width: .3rem;
  642. line-height: .24rem;
  643. height: .24rem
  644. }
  645. .pickup-wrap .pickShop .shopAddr, .pickup-wrap .pickShop .shopName {
  646. overflow: hidden;
  647. text-overflow: ellipsis;
  648. white-space: nowrap
  649. }
  650. .pickup-wrap .pickShop .rightArrow {
  651. float: right;
  652. padding: .5em 0;
  653. color: #999;
  654. line-height: .24rem
  655. }
  656. .pickup-wrap .pickShop .rightArrow i {
  657. font-size: .24rem;
  658. width: .2rem;
  659. line-height: .24rem;
  660. position: relative;
  661. top: .04rem
  662. }
  663. .pickup-wrap .validDate div {
  664. margin-bottom: .5em
  665. }
  666. .pickup-wrap #s-pickup > div:last-child {
  667. border-bottom: 1px solid rgba(0, 0, 0, .1)
  668. }
  669. /*选择套餐属性页面*/
  670. #page-order {
  671. width: 100%;
  672. height: 100%;
  673. left: 100%;
  674. position: fixed;
  675. top: 0;
  676. z-index: 11;
  677. background: #fff;
  678. min-height: 100vh;
  679. display: none;
  680. }
  681. #page-order > .tt {
  682. text-align: center;
  683. box-shadow: 0 2px 6px #f6f6f6;
  684. margin-bottom: 5px;
  685. height: 44px;
  686. line-height: 44px;
  687. position: relative
  688. }
  689. #page-order > .tt .back {
  690. width: 10px;
  691. height: 10px;
  692. border-bottom: 2px solid;
  693. border-left: 2px solid;
  694. -webkit-transform: rotate(45deg);
  695. transform: rotate(45deg);
  696. position: absolute;
  697. left: 6%;
  698. top: 16px
  699. }
  700. .dt-paramselect {
  701. height: calc(100% - 44px);
  702. background: #fff;
  703. padding: 0 20px;
  704. font-size: 14px;
  705. z-index: 11;
  706. overflow: auto;
  707. }
  708. .u-format {
  709. padding: 10px 0
  710. }
  711. .u-format .tt {
  712. margin-top: 10px;
  713. color: #A2A2A2
  714. }
  715. .u-format .con .tab, label.tab {
  716. display: inline-block;
  717. text-align: center
  718. }
  719. .u-format .con .tab.tab-sel {
  720. border: 2px solid #FF0036;
  721. min-width: 38px
  722. }
  723. label.tab {
  724. font-size: 14px;
  725. line-height: 34px;
  726. margin: 10px auto 0;
  727. border: 1px solid #e1e1e1;
  728. border-radius: 3px;
  729. padding: 0 10px
  730. }
  731. label.tab.tab-sel {
  732. border: 2px solid #FF0036;
  733. }
  734. .u-format .con {
  735. font-size: 0;
  736. }
  737. .u-format .con .tab {
  738. font-size: 13px;
  739. min-width: 40px;
  740. margin: 10px 6px 0 0;
  741. border: 1px solid #D5D5D5;
  742. border-radius: 3px
  743. }
  744. .u-format .con .tab img {
  745. width: 50px;
  746. height: 50px
  747. }
  748. .u-fornum {
  749. padding: 16px 0
  750. }
  751. .u-fornum > span {
  752. color: #a2a2a2;
  753. margin-bottom: 10px;
  754. display: inline-block
  755. }
  756. .u-fornum .con {
  757. display: -webkit-flex;
  758. display: flex;
  759. align-items: center;
  760. justify-content: space-between
  761. }
  762. .u-fornum .con > div {
  763. min-width: 125px
  764. }
  765. .u-fornum .m-selnum {
  766. font-size: 0;
  767. display: -webkit-flex;
  768. display: flex;
  769. margin-right: 10px
  770. }
  771. .u-fornum .m-selnum div {
  772. display: inline-block;
  773. font-size: 14px;
  774. line-height: 40px;
  775. flex: 1;
  776. text-align: center;
  777. width: 44px
  778. }
  779. .u-fornum .m-selnum .less, .u-fornum .m-selnum .more {
  780. border: 1px solid #d5d5d5;
  781. font-size: 22px;
  782. font-family: monospace
  783. }
  784. .u-fornum .m-selnum .textWrap {
  785. border-top: 1px solid #d5d5d5;
  786. border-bottom: 1px solid #d5d5d5;
  787. background: #F4F4F4
  788. }
  789. .u-fornum .con > div {
  790. min-width: 125px
  791. }
  792. .u-fornum .con a {
  793. width: 100%;
  794. color: #fff;
  795. background: #FF0036;
  796. font-size: 15px;
  797. border-radius: 3px;
  798. height: 40px;
  799. text-align: center;
  800. display: inline-block;
  801. line-height: 40px
  802. }