group-list.wxss 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  1. @charset "UTF-8";
  2. /**
  3. * 这里是uni-app内置的常用样式变量
  4. *
  5. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  6. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  7. *
  8. */
  9. /**
  10. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  11. *
  12. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  13. */
  14. /* 颜色变量 */
  15. /* 行为相关颜色 */
  16. page {
  17. /* 定义一些主题色及基础样式 */
  18. font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  19. font-size: 28rpx;
  20. color: #333333;
  21. padding-bottom: env(safe-area-inset-bottom);
  22. background-color: #F6F6F6;
  23. }
  24. .bold {
  25. font-weight: bold;
  26. }
  27. /* 定义字体颜色 */
  28. .primary {
  29. color: #FF2C3C;
  30. }
  31. .bg-primary {
  32. background-color: #FF2C3C;
  33. }
  34. .bg-white {
  35. background-color: #ffffff;
  36. }
  37. .bg-body {
  38. background-color: #F6F6F6;
  39. }
  40. .bg-gray {
  41. background-color: #E5E5E5;
  42. }
  43. .black {
  44. color: #101010;
  45. }
  46. .white {
  47. color: #ffffff;
  48. }
  49. .normal {
  50. color: #333333;
  51. }
  52. .lighter {
  53. color: #666666;
  54. }
  55. .muted {
  56. color: #999999;
  57. }
  58. /* 定义字体大小 */
  59. .xxl {
  60. font-size: 36rpx;
  61. }
  62. .xl {
  63. font-size: 34rpx;
  64. }
  65. .lg {
  66. font-size: 32rpx;
  67. }
  68. .md {
  69. font-size: 30rpx;
  70. }
  71. .nr {
  72. font-size: 28rpx;
  73. }
  74. .sm {
  75. font-size: 26rpx;
  76. }
  77. .xs {
  78. font-size: 24rpx;
  79. }
  80. .xxs {
  81. font-size: 22rpx;
  82. }
  83. /* 定义常用外边距 */
  84. .ml5 {
  85. margin-left: 5rpx;
  86. }
  87. .ml10 {
  88. margin-left: 10rpx;
  89. }
  90. .ml20 {
  91. margin-left: 20rpx;
  92. }
  93. .ml30 {
  94. margin-left: 30rpx;
  95. }
  96. .mr5 {
  97. margin-right: 5rpx;
  98. }
  99. .mr10 {
  100. margin-right: 10rpx;
  101. }
  102. .mr20 {
  103. margin-right: 20rpx;
  104. }
  105. .mr30 {
  106. margin-right: 30rpx;
  107. }
  108. .mt5 {
  109. margin-top: 5rpx;
  110. }
  111. .mt10 {
  112. margin-top: 10rpx;
  113. }
  114. .mt20 {
  115. margin-top: 20rpx;
  116. }
  117. .mt30 {
  118. margin-top: 30rpx;
  119. }
  120. .mb5 {
  121. margin-bottom: 5rpx;
  122. }
  123. .mb10 {
  124. margin-bottom: 10rpx;
  125. }
  126. .mb20 {
  127. margin-bottom: 20rpx;
  128. }
  129. .mb30 {
  130. margin-bottom: 30rpx;
  131. }
  132. /* 定义常用的弹性布局 */
  133. .flex1 {
  134. flex: 1;
  135. }
  136. .flexnone {
  137. flex: none;
  138. }
  139. .wrap {
  140. flex-wrap: wrap;
  141. }
  142. .row {
  143. display: flex;
  144. align-items: center;
  145. }
  146. .row-center {
  147. display: flex;
  148. align-items: center;
  149. justify-content: center;
  150. }
  151. .row-end {
  152. display: flex;
  153. align-items: center;
  154. justify-content: flex-end;
  155. }
  156. .row-between {
  157. display: flex;
  158. align-items: center;
  159. justify-content: space-between;
  160. }
  161. .row-around {
  162. display: flex;
  163. align-items: center;
  164. justify-content: space-around;
  165. }
  166. .column {
  167. display: flex;
  168. flex-direction: column;
  169. justify-content: center;
  170. }
  171. .column-center {
  172. display: flex;
  173. flex-direction: column;
  174. align-items: center;
  175. justify-content: center;
  176. }
  177. .column-around {
  178. display: flex;
  179. flex-direction: column;
  180. align-items: center;
  181. justify-content: space-around;
  182. }
  183. .column-end {
  184. display: flex;
  185. flex-direction: column;
  186. align-items: center;
  187. justify-content: flex-end;
  188. }
  189. .column-between {
  190. display: flex;
  191. flex-direction: column;
  192. align-items: center;
  193. justify-content: space-between;
  194. }
  195. /* 超出隐藏 */
  196. .line1 {
  197. overflow: hidden;
  198. text-overflow: ellipsis;
  199. white-space: nowrap;
  200. }
  201. .line2 {
  202. word-break: break-all;
  203. display: -webkit-box;
  204. -webkit-line-clamp: 2;
  205. -webkit-box-orient: vertical;
  206. overflow: hidden;
  207. }
  208. /* 中划线 */
  209. .line-through {
  210. text-decoration: line-through;
  211. }
  212. /* br60 */
  213. .br60 {
  214. border-radius: 60rpx;
  215. }
  216. /* 初始化按钮 */
  217. page button {
  218. padding: 0;
  219. margin: 0;
  220. background-color: transparent;
  221. font-weight: normal;
  222. font-size: 28rpx;
  223. overflow: unset;
  224. margin-left: 0;
  225. margin-right: 0;
  226. }
  227. page button::after {
  228. border: none;
  229. }
  230. button[type=primary] {
  231. background-color: #FF2C3C;
  232. }
  233. .button-hover[type=primary] {
  234. background-color: #FF2C3C;
  235. }
  236. button[disabled][type=primary] {
  237. background-color: #FF2C3C;
  238. }
  239. /* 按钮大小 */
  240. button[size="xs"] {
  241. line-height: 58rpx;
  242. height: 58rpx;
  243. font-size: 26rpx;
  244. padding: 0 30rpx;
  245. }
  246. button[size="sm"] {
  247. line-height: 62rpx;
  248. height: 62rpx;
  249. font-size: 28rpx;
  250. padding: 0 30rpx;
  251. }
  252. button[size="md"] {
  253. line-height: 70rpx;
  254. height: 70rpx;
  255. font-size: 30rpx;
  256. padding: 0 30rpx;
  257. }
  258. button[size="lg"] {
  259. line-height: 80rpx;
  260. height: 80rpx;
  261. font-size: 32rpx;
  262. padding: 0 30rpx;
  263. }
  264. .icon-xs {
  265. min-height: 28rpx;
  266. min-width: 28rpx;
  267. height: 28rpx;
  268. width: 28rpx;
  269. vertical-align: middle;
  270. }
  271. .icon-sm {
  272. min-height: 30rpx;
  273. min-width: 30rpx;
  274. height: 30rpx;
  275. width: 30rpx;
  276. vertical-align: middle;
  277. }
  278. .icon {
  279. min-height: 34rpx;
  280. min-width: 34rpx;
  281. height: 34rpx;
  282. width: 34rpx;
  283. vertical-align: middle;
  284. }
  285. .icon-md {
  286. min-height: 44rpx;
  287. min-width: 44rpx;
  288. height: 44rpx;
  289. width: 44rpx;
  290. vertical-align: middle;
  291. }
  292. .icon-lg {
  293. min-height: 52rpx;
  294. min-width: 52rpx;
  295. height: 52rpx;
  296. width: 52rpx;
  297. vertical-align: middle;
  298. }
  299. .icon-xl {
  300. min-height: 64rpx;
  301. min-width: 64rpx;
  302. height: 64rpx;
  303. width: 64rpx;
  304. vertical-align: middle;
  305. }
  306. .icon-xxl {
  307. min-height: 120rpx;
  308. min-width: 120rpx;
  309. height: 120rpx;
  310. width: 120rpx;
  311. vertical-align: middle;
  312. }
  313. .img-null {
  314. width: 300rpx;
  315. height: 300rpx;
  316. }
  317. /* 隐藏滚动条 */
  318. ::-webkit-scrollbar {
  319. width: 0;
  320. height: 0;
  321. color: transparent;
  322. }
  323. /* 单选 */
  324. radio .uni-radio-input {
  325. border-radius: 50%;
  326. width: 34rpx;
  327. height: 34rpx;
  328. }
  329. radio .uni-radio-input {
  330. border-radius: 50%;
  331. width: 34rpx;
  332. height: 34rpx;
  333. }
  334. radio .uni-radio-input.uni-radio-input-checked {
  335. border: 1px solid #FF2C3C !important;
  336. background-color: #FF2C3C !important;
  337. }
  338. /* 多选 */
  339. checkbox .uni-checkbox-input {
  340. border-radius: 50%;
  341. width: 34rpx;
  342. height: 34rpx;
  343. }
  344. checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  345. border: 1px solid #FF2C3C !important;
  346. background-color: #FF2C3C !important;
  347. color: #fff !important;
  348. }
  349. checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
  350. font-size: 35rpx;
  351. }
  352. /* 单选 */
  353. radio .wx-radio-input {
  354. border-radius: 50%;
  355. width: 34rpx;
  356. height: 34rpx;
  357. }
  358. radio .wx-radio-input {
  359. border-radius: 50%;
  360. width: 34rpx;
  361. height: 34rpx;
  362. }
  363. radio .wx-radio-input.wx-radio-input-checked {
  364. border: 1px solid #FF2C3C !important;
  365. background-color: #FF2C3C !important;
  366. }
  367. /* 多选 */
  368. checkbox .wx-checkbox-input {
  369. border-radius: 50%;
  370. width: 34rpx;
  371. height: 34rpx;
  372. }
  373. checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  374. border: 1px solid #FF2C3C !important;
  375. background-color: #FF2C3C !important;
  376. color: #fff !important;
  377. }
  378. checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  379. font-size: 35rpx;
  380. }
  381. .group-list {
  382. min-height: calc(100vh - 80rpx);
  383. padding: 0 20rpx;
  384. overflow: hidden;
  385. }
  386. .group-list .item {
  387. border-radius: 10rpx;
  388. position: relative;
  389. }
  390. .group-list .item .group-header {
  391. height: 80rpx;
  392. padding: 0 24rpx;
  393. border-bottom: 1px dotted #E5E5E5;
  394. }
  395. .group-list .item .team-chief {
  396. position: absolute;
  397. z-index: 100;
  398. top: 105rpx;
  399. padding: 4rpx 20rpx;
  400. border-radius: 0 60rpx 60rpx 0;
  401. background: linear-gradient(87deg, #F95F2F 0%, #FF2C3C 100%);
  402. }
  403. .group-list .item .all-price {
  404. text-align: right;
  405. padding: 0 24rpx 20rpx;
  406. }
  407. .group-list .item .group-footer {
  408. height: 100rpx;
  409. border-top: 1px solid #E5E5E5;
  410. padding: 0 24rpx;
  411. }
  412. .group-list .item .group-footer .btn {
  413. width: 244rpx;
  414. }