app.wxss 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. /**app.wxss**/
  2. @import "/area-picker/area-picker.wxss";
  3. @import "/commons/extension/extension.wxss";
  4. page {
  5. height: 100%;
  6. font-size: 11pt;
  7. color: #555;
  8. background: #EFEFF4;
  9. overflow-x: hidden;
  10. }
  11. page,
  12. block,
  13. view,
  14. scroll-view,
  15. swiper,
  16. movable-view,
  17. icon,
  18. text,
  19. progress,
  20. button,
  21. checkbox,
  22. form,
  23. input,
  24. label,
  25. picker,
  26. picker-view,
  27. radio,
  28. slider,
  29. switch,
  30. textarea,
  31. navigator,
  32. audio,
  33. image,
  34. video,
  35. map,
  36. canvas,
  37. contact-button {
  38. box-sizing: border-box;
  39. font-family: "yahei"
  40. }
  41. button{
  42. font-size: 11pt;
  43. font-family: inherit;
  44. }
  45. .flex {
  46. display: -webkit-box;
  47. display: -webkit-flex;
  48. display: flex;
  49. }
  50. .flex-row {
  51. display: -webkit-box;
  52. display: -webkit-flex;
  53. display: flex;
  54. -webkit-box-orient: horizontal;
  55. -webkit-flex-direction: row;
  56. flex-direction: row;
  57. }
  58. .flex-col{
  59. display: -webkit-box;
  60. display: -webkit-flex;
  61. display: flex;
  62. -webkit-box-orient: vertical;
  63. -webkit-flex-direction: column;
  64. flex-direction: column;
  65. }
  66. .flex-grow-0{
  67. min-width: 0;
  68. -webkit-box-flex: 0;
  69. -webkit-flex-grow: 0;
  70. -ms-flex-positive: 0;
  71. flex-grow: 0;
  72. -webkit-flex-shrink: 0;
  73. -ms-flex-negative: 0;
  74. flex-shrink: 0;
  75. }
  76. .flex-grow-1{
  77. min-width: 0;
  78. -webkit-box-flex: 1;
  79. -webkit-flex-grow: 1;
  80. -ms-flex-positive: 1;
  81. flex-grow: 1;
  82. -webkit-flex-shrink: 1;
  83. -ms-flex-negative: 1;
  84. flex-shrink: 1;
  85. }
  86. .flex-x-center{
  87. display: -webkit-box;
  88. display: -webkit-flex;
  89. display: flex;
  90. -webkit-box-pack: center;
  91. -webkit-justify-content: center;
  92. -ms-flex-pack: center;
  93. justify-content: center;
  94. }
  95. .flex-y-center{
  96. display: -webkit-box;
  97. display: -webkit-flex;
  98. display: flex;
  99. -webkit-box-align: center;
  100. -webkit-align-items: center;
  101. -ms-flex-align: center;
  102. -ms-grid-row-align: center;
  103. align-items: center;
  104. }
  105. .flex-y-bottom{
  106. display: -webkit-box;
  107. display: -webkit-flex;
  108. display: flex;
  109. -webkit-box-align: end;
  110. -webkit-align-items: flex-end;
  111. -ms-flex-align: end;
  112. -ms-grid-row-align: flex-end;
  113. align-items: flex-end;
  114. }
  115. .spinner {
  116. margin: 0 auto;
  117. width: 100rpx;
  118. height: 50rpx;
  119. text-align: center;
  120. font-size: 10rpx;
  121. }
  122. .spinner > view {
  123. background-color: #8c949a;
  124. height: 100%;
  125. width: 10rpx;
  126. display: inline-block;
  127. margin: 0 2rpx;
  128. animation: sk-stretchdelay 1.2s infinite ease-in-out;
  129. }
  130. .spinner .rect2 {
  131. animation-delay: -1.1s;
  132. }
  133. .spinner .rect3 {
  134. animation-delay: -1.0s;
  135. }
  136. .spinner .rect4 {
  137. animation-delay: -0.9s;
  138. }
  139. .spinner .rect5 {
  140. animation-delay: -0.8s;
  141. }
  142. @keyframes sk-stretchdelay {
  143. 0%, 40%, 100% {
  144. transform: scaleY(0.4);
  145. -webkit-transform: scaleY(0.4);
  146. } 20% {
  147. transform: scaleY(1.0);
  148. -webkit-transform: scaleY(1.0);
  149. }
  150. }
  151. .copy-text-btn{
  152. line-height: normal;
  153. height: auto;
  154. display: inline-block;
  155. font-size: 9pt;
  156. color: #888;
  157. border: 1rpx solid #ddd;
  158. border-radius: 5rpx;
  159. padding: 6rpx 12rpx;
  160. background-color: #fff !important;
  161. box-shadow: none;
  162. }
  163. .no-data-tip{
  164. padding: 150rpx 0;
  165. text-align: center;
  166. color: #888;
  167. }
  168. .no-data-tip .no-data-icon{
  169. width: 160rpx;
  170. height: 160rpx;
  171. font-size: 0;
  172. border-radius: 9999rpx;
  173. background: rgba(0,0,0,.1);
  174. margin-left: auto;
  175. margin-right: auto;
  176. margin-bottom: 32rpx;
  177. }
  178. .bg-white{
  179. background-color: #fff;
  180. }
  181. .mb-20{
  182. margin-bottom: 20rpx;
  183. }
  184. .mb-10{
  185. margin-bottom: 10rpx;
  186. }
  187. button[plain]{
  188. border: none;
  189. background: #fff;
  190. color: inherit;
  191. }
  192. .nowrap{
  193. white-space: nowrap;
  194. }
  195. .fs-0{
  196. font-size: 0;
  197. }
  198. .get-coupon{
  199. position: fixed;
  200. top: 0;
  201. left: 0;
  202. width: 100%;
  203. height: 100%;
  204. background: rgba(0,0,0,.75);
  205. z-index: 999;
  206. }
  207. .get-coupon .get-coupon-box{
  208. position: relative;
  209. width: 100%;
  210. }
  211. .get-coupon .get-coupon-bg{
  212. width: 100%;
  213. position: absolute;
  214. left: 0;
  215. top:-210rpx;
  216. z-index: -1;
  217. }
  218. .get-coupon .coupon-list{
  219. height: 330rpx;
  220. width: 550rpx;
  221. margin: 0 auto;
  222. }
  223. .get-coupon .coupon-item{
  224. width: 520rpx;
  225. height: 264rpx;
  226. margin-bottom: 20rpx;
  227. position: relative;
  228. color: #fff;
  229. padding: 0 40rpx;
  230. }
  231. .get-coupon .coupon-item image{
  232. position: absolute;
  233. z-index: -1;
  234. left: 0;
  235. top:0;
  236. width: 100%;
  237. }
  238. .get-coupon .coupon-item:last-child{
  239. margin-bottom: 0;
  240. }
  241. .get-coupon .use-now{
  242. display: block;
  243. text-align: center;
  244. height: 60rpx;
  245. line-height: 60rpx;
  246. color: #ff4544;
  247. background: #fff;
  248. border-radius: 6rpx;
  249. margin: 15rpx 0;
  250. font-size: 9pt;
  251. }
  252. .fs-sm{
  253. font-size: 9pt;
  254. }
  255. .p-10{
  256. padding: 10rpx 10rpx;
  257. }
  258. .px-24{
  259. padding-left: 24rpx;
  260. padding-right: 24rpx;
  261. }
  262. .float-icon{
  263. position: fixed;
  264. z-index: 20;
  265. right: 50rpx;
  266. bottom: 50rpx;
  267. }
  268. .bar-bottom~.float-icon{
  269. bottom: 150rpx;
  270. }
  271. .float-icon .float-icon-btn{
  272. display: block;
  273. padding: 0;
  274. margin: 0;
  275. border: none;
  276. background: none;
  277. }
  278. .float-icon .float-icon-btn:after{
  279. display: none;
  280. }
  281. .float-icon .float-icon-btn:active{
  282. opacity: .75;
  283. }
  284. .float-icon .float-icon-btn image{
  285. width: 100rpx;
  286. height: 100rpx;
  287. display: block;
  288. }
  289. .w-100{
  290. width: 100%;
  291. }
  292. .h-100{
  293. height: 100%;
  294. }
  295. .wh-100{
  296. width: 100%;
  297. height: 100%;
  298. }
  299. .text-more{
  300. width: 100%;
  301. overflow: hidden;
  302. white-space: nowrap;
  303. text-overflow: ellipsis;
  304. word-break: break-all;
  305. }
  306. .navbar{
  307. position: fixed;
  308. bottom: 0;
  309. left: 0;
  310. width: 100%;
  311. height: 115rpx;
  312. background: #fff;
  313. color: #555;
  314. z-index: 2000;
  315. border-top: 1rpx solid rgba(0,0,0,.1);
  316. box-sizing: border-box;
  317. }
  318. .navbar navigator{
  319. height: 100%;
  320. width: 1%;
  321. }
  322. .navbar navigator > view{
  323. width: 100%;
  324. padding-top: 4px;
  325. }
  326. .navbar .navbar-icon{
  327. width: 64rpx;
  328. height: 64rpx;
  329. display: block;
  330. margin: 0 auto;
  331. }
  332. .navbar .navbar-text{
  333. font-size: 8pt;
  334. text-align: center;
  335. text-overflow: ellipsis;
  336. white-space: nowrap;
  337. overflow: hidden;
  338. }
  339. .navbar + .after-navber{
  340. padding-bottom: 115rpx;
  341. }
  342. .navbar ~ .float-icon,
  343. .navbar + .after-navber .float-icon {
  344. bottom: 170rpx !important;
  345. }
  346. .hidden{
  347. display: none;
  348. }
  349. .text-more-2 {
  350. width: 100%;
  351. overflow: hidden;
  352. text-overflow: ellipsis;
  353. display: -webkit-box;
  354. -webkit-line-clamp: 2;
  355. -webkit-box-orient: vertical;
  356. word-break: break-all;
  357. }
  358. .text-more-1 {
  359. -webkit-line-clamp: 1;
  360. text-align: center;
  361. font-size: 28rpx;
  362. padding: 10rpx 10rpx 0;
  363. }
  364. .no-scroll {
  365. height: 100%;
  366. overflow-y: hidden;
  367. }
  368. .dial {
  369. width: 100rpx;
  370. height: 100rpx;
  371. border-radius: 10rpx;
  372. display: block;
  373. margin-bottom: 32rpx;
  374. }
  375. .navbar button{
  376. display: block;
  377. padding: 0;
  378. border: 0;
  379. background: none;
  380. margin: 0;
  381. width: 100%;
  382. line-height: 1.25;
  383. }
  384. .navbar button::after{
  385. display: none;
  386. }
  387. .btn_bg_red{
  388. border: 1px solid #EB4851;
  389. background: #EB4851;
  390. color: #ffffff;
  391. }
  392. .btn_bg_white{
  393. border: 1px solid #EB4851;
  394. color: #EB4851;
  395. background: #ffffff;
  396. }