爱简收旧衣按件回收前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

310 lines
7.5 KiB

  1. /**
  2. * 这里是uni-app内置的常用样式变量
  3. *
  4. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  5. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  6. *
  7. */
  8. /**
  9. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  10. *
  11. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  12. */
  13. /* 颜色变量 */
  14. /* 行为相关颜色 */
  15. /* 文字基本颜色 */
  16. /* 背景颜色 */
  17. /* 边框颜色 */
  18. /* 尺寸变量 */
  19. /* 文字尺寸 */
  20. /* 图片尺寸 */
  21. /* Border Radius */
  22. /* 水平间距 */
  23. /* 垂直间距 */
  24. /* 透明度 */
  25. /* 文章场景相关 */
  26. .upgrade-page.data-v-a0c82533 {
  27. min-height: 100vh;
  28. background: linear-gradient(180deg, #eaffe6 0%, #fff 30%);
  29. padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  30. }
  31. .nav-bar.data-v-a0c82533 {
  32. position: fixed;
  33. top: 0;
  34. left: 0;
  35. right: 0;
  36. z-index: 1000;
  37. width: 100vw;
  38. background: linear-gradient(to right, #b2f08d 0%, #39e9d2 100%);
  39. box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  40. }
  41. .nav-bar .nav-bar-inner.data-v-a0c82533 {
  42. display: flex;
  43. align-items: center;
  44. height: 44px;
  45. width: 100vw;
  46. position: relative;
  47. }
  48. .nav-bar .back-icon.data-v-a0c82533, .nav-bar .nav-bar-right.data-v-a0c82533 {
  49. width: 44px;
  50. height: 44px;
  51. display: flex;
  52. align-items: center;
  53. justify-content: center;
  54. position: absolute;
  55. top: 0;
  56. }
  57. .nav-bar .back-icon.data-v-a0c82533 {
  58. left: 0;
  59. }
  60. .nav-bar .nav-bar-right.data-v-a0c82533 {
  61. right: 0;
  62. }
  63. .nav-bar .nav-bar-title.data-v-a0c82533 {
  64. flex: 1;
  65. text-align: center;
  66. font-size: 36rpx;
  67. font-weight: bold;
  68. color: #222;
  69. letter-spacing: 2rpx;
  70. line-height: 44px;
  71. }
  72. .feature-tags.data-v-a0c82533 {
  73. position: relative;
  74. z-index: 1;
  75. margin: 0 32rpx;
  76. margin-top: 0;
  77. margin-bottom: 0;
  78. background: linear-gradient(to right, #b2f08d 0%, #39e9d2 100%);
  79. border-radius: 32rpx;
  80. box-shadow: 0 4rpx 24rpx rgba(60, 167, 250, 0.08);
  81. padding: 0 24rpx;
  82. height: 80rpx;
  83. display: flex;
  84. justify-content: space-between;
  85. align-items: center;
  86. }
  87. .feature-tags .tag.data-v-a0c82533 {
  88. flex: 1;
  89. display: flex;
  90. align-items: center;
  91. justify-content: center;
  92. }
  93. .feature-tags .tag .check.data-v-a0c82533 {
  94. width: 36rpx;
  95. height: 36rpx;
  96. background: #fff;
  97. border-radius: 50%;
  98. display: flex;
  99. align-items: center;
  100. justify-content: center;
  101. font-size: 28rpx;
  102. color: #13ac47;
  103. font-weight: bold;
  104. margin-right: 10rpx;
  105. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  106. }
  107. .feature-tags .tag .text.data-v-a0c82533 {
  108. color: #fff;
  109. font-size: 28rpx;
  110. font-weight: bold;
  111. }
  112. .main-content.data-v-a0c82533 {
  113. margin-top: -48rpx;
  114. padding-top: 88rpx;
  115. background: linear-gradient(180deg, #eaffe6 0%, #fff 30%);
  116. min-height: 100vh;
  117. width: 100vw;
  118. box-sizing: border-box;
  119. position: relative;
  120. z-index: 11;
  121. border-radius: 40rpx 40rpx 0 0;
  122. overflow: hidden;
  123. display: flex;
  124. flex-direction: column;
  125. align-items: center;
  126. }
  127. .upgrade-card.data-v-a0c82533 {
  128. width: 92vw;
  129. max-width: 700rpx;
  130. margin: 40rpx auto 0 auto;
  131. background: #fff;
  132. border-radius: 32rpx;
  133. box-shadow: 0 8rpx 32rpx rgba(60, 167, 250, 0.08);
  134. padding: 40rpx 32rpx 32rpx 32rpx;
  135. display: flex;
  136. flex-direction: column;
  137. align-items: stretch;
  138. }
  139. .upgrade-card .upgrade-title-row.data-v-a0c82533 {
  140. display: flex;
  141. justify-content: space-between;
  142. align-items: center;
  143. margin-bottom: 32rpx;
  144. }
  145. .upgrade-card .upgrade-title-row .upgrade-title.data-v-a0c82533 {
  146. font-size: 32rpx;
  147. font-weight: bold;
  148. color: #222;
  149. }
  150. .upgrade-card .upgrade-title-row .contact-service.data-v-a0c82533 {
  151. display: flex;
  152. align-items: center;
  153. padding: 4rpx 12rpx;
  154. border-radius: 12rpx;
  155. border: 2rpx solid #df8155;
  156. background: #fff0d2;
  157. }
  158. .upgrade-card .upgrade-title-row .contact-service .contact-text.data-v-a0c82533 {
  159. color: #df8155;
  160. font-size: 22rpx;
  161. margin-left: 4rpx;
  162. }
  163. .upgrade-card .upgrade-title-row .contact-service uni-icons.data-v-a0c82533 {
  164. font-size: 20rpx !important;
  165. }
  166. .upgrade-card .form-item.data-v-a0c82533 {
  167. margin-bottom: 32rpx;
  168. }
  169. .upgrade-card .form-item .label.data-v-a0c82533 {
  170. font-size: 28rpx;
  171. color: #222;
  172. margin-bottom: 12rpx;
  173. display: block;
  174. }
  175. .upgrade-card .form-item .input.data-v-a0c82533 {
  176. width: 100%;
  177. height: 72rpx;
  178. background: transparent;
  179. padding: 0;
  180. font-size: 30rpx;
  181. border: none;
  182. border-bottom: 1rpx solid #eee;
  183. }
  184. .upgrade-card .form-item .input.data-v-a0c82533::-webkit-input-placeholder {
  185. color: #bbb;
  186. font-size: 30rpx;
  187. }
  188. .upgrade-card .form-item .input.data-v-a0c82533::placeholder {
  189. color: #bbb;
  190. font-size: 30rpx;
  191. }
  192. .upgrade-card .form-item .picker-value.data-v-a0c82533 {
  193. width: 100%;
  194. height: 72rpx;
  195. display: flex;
  196. align-items: center;
  197. justify-content: space-between;
  198. border-bottom: 1rpx solid #eee;
  199. }
  200. .upgrade-card .form-item .picker-value .placeholder.data-v-a0c82533 {
  201. color: #bbb;
  202. }
  203. .upgrade-card .form-item .picker-value text.data-v-a0c82533 {
  204. font-size: 30rpx;
  205. color: #222;
  206. }
  207. .upgrade-card .desc-text.data-v-a0c82533 {
  208. font-size: 26rpx;
  209. color: #666;
  210. line-height: 1.6;
  211. margin-top: 32rpx;
  212. text-align: center;
  213. }
  214. .bottom-btns.data-v-a0c82533 {
  215. position: fixed;
  216. left: 0;
  217. right: 0;
  218. bottom: 0;
  219. display: flex;
  220. justify-content: space-between;
  221. padding: 24rpx 32rpx calc(env(safe-area-inset-bottom) + 24rpx) 32rpx;
  222. background: #fff;
  223. z-index: 100;
  224. }
  225. .bottom-btns .btn.data-v-a0c82533 {
  226. flex: 1;
  227. height: 88rpx;
  228. border-radius: 44rpx;
  229. font-size: 32rpx;
  230. font-weight: bold;
  231. margin: 0 12rpx;
  232. border: none;
  233. box-shadow: none;
  234. }
  235. .bottom-btns .btn.gray.data-v-a0c82533 {
  236. background: linear-gradient(180deg, #f8f8f8 0%, #f2f4f6 100%);
  237. color: #222;
  238. border: 2rpx solid #e5e5e5;
  239. }
  240. .bottom-btns .btn.green.data-v-a0c82533 {
  241. background: linear-gradient(90deg, #b2f08d, #39e9d2);
  242. color: #222;
  243. border: none;
  244. }
  245. .picker-popup.data-v-a0c82533 {
  246. position: fixed;
  247. top: 0;
  248. left: 0;
  249. right: 0;
  250. bottom: 0;
  251. z-index: 999;
  252. }
  253. .picker-popup .popup-mask.data-v-a0c82533 {
  254. position: absolute;
  255. top: 0;
  256. left: 0;
  257. right: 0;
  258. bottom: 0;
  259. background: rgba(0, 0, 0, 0.6);
  260. }
  261. .picker-popup .popup-content.data-v-a0c82533 {
  262. position: absolute;
  263. left: 0;
  264. right: 0;
  265. bottom: 0;
  266. background: #fff;
  267. border-radius: 24rpx 24rpx 0 0;
  268. padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
  269. }
  270. .picker-popup .popup-content .popup-header.data-v-a0c82533 {
  271. display: flex;
  272. align-items: center;
  273. padding: 30rpx;
  274. position: relative;
  275. justify-content: center;
  276. border-bottom: 1rpx solid #f5f5f5;
  277. }
  278. .picker-popup .popup-content .popup-header .title.data-v-a0c82533 {
  279. font-size: 32rpx;
  280. color: #333;
  281. font-weight: normal;
  282. }
  283. .picker-popup .popup-content .popup-header .reset.data-v-a0c82533 {
  284. position: absolute;
  285. left: 30rpx;
  286. font-size: 28rpx;
  287. color: #666;
  288. }
  289. .picker-popup .popup-content .picker-view.data-v-a0c82533 {
  290. width: 100%;
  291. height: 440rpx;
  292. background: #fff;
  293. }
  294. .picker-popup .popup-content .picker-view .picker-item.data-v-a0c82533 {
  295. height: 88rpx;
  296. line-height: 88rpx;
  297. text-align: center;
  298. font-size: 28rpx;
  299. color: #999;
  300. font-weight: normal;
  301. }
  302. .picker-popup .popup-content .confirm-btn.data-v-a0c82533 {
  303. margin: 30rpx;
  304. height: 88rpx;
  305. line-height: 88rpx;
  306. background: linear-gradient(90deg, #91dba5, #7ed4a6);
  307. color: #fff;
  308. font-size: 32rpx;
  309. border-radius: 44rpx;
  310. border: none;
  311. }