微信小程序
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

454 行
8.3 KiB

  1. .singleLinHidenEllipsis{
  2. color: black;
  3. text-align: center;
  4. width: auto;
  5. }
  6. .information_header{
  7. /* padding: 30rpx 32rpx 54rpx; */
  8. padding: 10rpx 32rpx 54rpx;
  9. display: flex;
  10. position: relative;
  11. }
  12. .information_header .setup{
  13. width: 38rpx;
  14. height: 38rpx;
  15. position: absolute;
  16. right: 34rpx;
  17. top: 15rpx;
  18. display: block;
  19. }
  20. .information_header .portrait_head{
  21. width: 110rpx;
  22. height: 110rpx;
  23. border-radius: 50%;
  24. overflow: hidden;
  25. }
  26. .information_header .information_main{
  27. flex: 1;
  28. padding-left: 16rpx;
  29. }
  30. .information_header .name_wrap{
  31. display: flex;
  32. height: 54rpx;
  33. align-items: center;
  34. margin-bottom: 10rpx;
  35. }
  36. .information_header .name_wrap .name{
  37. font-size: 46rpx;
  38. }
  39. .information_header .name_wrap .jobs{
  40. margin-left: 18rpx;
  41. /* width: 155rpx; */
  42. height: 50rpx;
  43. background: linear-gradient( 97deg, #73DE7E 0%, #0EAF63 100%);
  44. color: #fff;
  45. border-radius: 10rpx;
  46. display: flex;
  47. font-size: 28rpx;
  48. justify-content: center;
  49. align-items: center;
  50. padding: 0 20rpx;
  51. }
  52. .information_header .name_wrap .jobs .icon{
  53. width: 26rpx;
  54. height: 27rpx;
  55. margin-right: 5rpx;
  56. }
  57. .information_header .task_wrap{
  58. display: flex;
  59. height: 44rpx;
  60. margin-bottom: 18rpx;
  61. }
  62. .information_header .unfinished{
  63. margin-left: 12rpx;
  64. }
  65. .information_header .task_wrap .flex_block{
  66. height: 48rpx;
  67. display: flex;
  68. background: #fff;
  69. line-height: 44rpx;
  70. border-radius: 44rpx;
  71. border:2rpx solid #2c8e68;
  72. text-align: center;
  73. font-size: 24rpx;
  74. }
  75. .information_header .task_wrap .flex_block .icon{
  76. width: 30rpx;
  77. height: 30rpx;
  78. vertical-align: sub;
  79. display:inline-block;
  80. }
  81. .information_header .task_wrap .flex_block .desc{
  82. width: 115rpx;
  83. background: #2c8e68;
  84. position:relative;
  85. overflow: hidden;
  86. color: #fff;
  87. line-height: 44rpx;
  88. border-top-left-radius: 44rpx;
  89. border-bottom-left-radius: 44rpx;
  90. margin-top: -1rpx;
  91. margin-left: -1rpx;
  92. }
  93. .information_header .task_wrap .flex_block .desc::before{
  94. position:absolute;
  95. top:-40rpx;
  96. right:-40rpx;
  97. content:"";
  98. z-index:1;
  99. width:110rpx; /*如果需要圆角的话 不用比box的宽度长,如果不需要圆角需要增长*/
  100. height:40rpx;
  101. background-color:#fff;
  102. transform:rotate(-75deg);
  103. transform-origin:right bottom;
  104. border-radius:0px;
  105. }
  106. .information_header .task_wrap .flex_block .event{
  107. color: #2c8e68;
  108. margin-left: -2%;
  109. padding:0 20rpx 0 20rpx;
  110. }
  111. .information_header .address_wrap{
  112. font-size: 26rpx;
  113. color: #2b8e68;
  114. height: 46rpx;
  115. line-height: 46rpx;
  116. }
  117. .navList_main{
  118. width: 685rpx;
  119. height: 228rpx;
  120. background-color: #fff;
  121. border-radius: 24rpx;
  122. margin:0 auto;
  123. display: flex;
  124. box-shadow: 0rpx 0rpx 12rpx rgba(0,0,0,.2);
  125. }
  126. .navList_main .tab_item{
  127. flex: 1;
  128. display: flex;
  129. justify-content: center;
  130. align-items: center;
  131. flex-direction: column;
  132. }
  133. .navList_main .tab_item .icon{
  134. width: 100rpx;
  135. height: 100rpx;
  136. margin-bottom: 12rpx;
  137. }
  138. .navList_main .tab_item .icon_img{
  139. width: 100rpx;
  140. height: 100rpx;
  141. }
  142. .navList_main .tab_item .desc{
  143. font-size: 26rpx;
  144. }
  145. .title{
  146. display: flex;
  147. justify-content: space-between;
  148. margin: 35rpx 20rpx 0;
  149. }
  150. .title text{
  151. flex: 1;
  152. background-color: #ffffff;
  153. display: flex;
  154. align-items: flex-end;
  155. border-radius: 24rpx 0 0 0;
  156. font-size: 2vh;
  157. font-weight: bold;
  158. padding-left: 5%;
  159. }
  160. .title image{
  161. width: 45%;
  162. }
  163. .child_function{
  164. margin: 0 20rpx 0;
  165. display: flex;
  166. flex-wrap: wrap;
  167. align-content:space-between;
  168. padding: 20px 0;
  169. }
  170. .child_function .flex_block{
  171. display: flex;
  172. justify-content: center;
  173. align-items: center;
  174. flex-direction: column;
  175. width: 20%;
  176. }
  177. .child_function .flex_block:nth-child(n+6){
  178. margin-top: 25rpx;
  179. }
  180. .child_function .flex_block .image{
  181. width: 76rpx;
  182. height: 70rpx;
  183. margin-bottom: 20rpx;
  184. }
  185. .child_function .flex_block .attribute{
  186. width: 76rpx;
  187. height: 70rpx;
  188. }
  189. .child_function .flex_block .desc{
  190. font-size: 26rpx;
  191. }
  192. .work_plan{
  193. padding: 0rpx 32.5rpx 30rpx;
  194. display: flex;
  195. justify-content: space-between;
  196. }
  197. .work_plan .menu_item{
  198. height: 60rpx;
  199. width: 140rpx;
  200. background-color: #fff;
  201. box-shadow: 0rpx 0rpx 9rpx rgba(0,0,0,.2);
  202. border-radius: 60rpx;
  203. line-height: 60rpx;
  204. text-align: center;
  205. font-size: 32rpx;
  206. position: relative;
  207. }
  208. .work_plan .menu_item.active{
  209. background-color: #5bae78;
  210. color: #fff;
  211. }
  212. .work_plan .menu_item .remind{
  213. height: 30rpx;
  214. background: #e90101;
  215. color: #fff;
  216. font-size: 26rpx;
  217. position: absolute;
  218. line-height: 30rpx;
  219. padding:0 10rpx;
  220. border-radius: 50px;
  221. top: -10rpx;
  222. right: -10rpx;
  223. }
  224. .work_plan .more{
  225. flex: 1;
  226. text-align: center;
  227. line-height: 60rpx;
  228. font-size: 36rpx;
  229. color: #31936c;
  230. }
  231. .workflow,.van-swipe-cell {
  232. /* padding: 10rpx 32.5rpx; */
  233. background-color: #fff;
  234. border-radius: 24rpx;
  235. box-shadow: 0rpx 5rpx 5rpx rgba(0,0,0,.1);
  236. margin-bottom: 20rpx;
  237. }
  238. .workflow .workflow_list{
  239. height: 150rpx;
  240. padding:15rpx 25rpx 10rpx 35rpx;
  241. }
  242. .workflow .workflow_list .process_intro{
  243. display: flex;
  244. height: 62rpx;
  245. align-items: center;
  246. }
  247. .workflow .process_intro .name{
  248. width: 390rpx;
  249. font-size: 34rpx;
  250. margin-right: 30rpx;
  251. display: flex;
  252. align-items: center;
  253. justify-content: space-between;
  254. }
  255. .workflow .process_intro .name .name_tit{
  256. width: 290rpx;
  257. flex: 1;
  258. overflow: hidden;
  259. display: -webkit-box;
  260. -webkit-box-orient: vertical;
  261. -webkit-line-clamp: 1;
  262. word-break: break-all;
  263. overflow: hidden;
  264. }
  265. .workflow .process_intro .state{
  266. width: 93rpx;
  267. height: 42rpx;
  268. background-color: #fbe3e3;
  269. color: #f31e1f;
  270. border-radius: 12rpx;
  271. text-align: center;
  272. line-height: 42rpx;
  273. }
  274. .workflow .process_intro .time{
  275. flex: 1;
  276. text-align: right;
  277. font-size: 32rpx;
  278. color: #9ea1aa;
  279. }
  280. .workflow .workflow_list .process_pay{
  281. display: flex;
  282. height: 52rpx;
  283. align-items: center;
  284. }
  285. .workflow .workflow_list .process_pay .describe{
  286. font-size: 30rpx;
  287. width: 320rpx;
  288. color: #3c9370;
  289. display: flex;
  290. align-items: center;
  291. }
  292. .workflow .workflow_list .process_pay .describe .amount_icon{
  293. width: 32rpx;
  294. height: 32rpx;
  295. margin-right: 12rpx;
  296. }
  297. .workflow .workflow_list .process_pay .amount{
  298. font-size: 38rpx;
  299. flex: 1;
  300. text-align: right;
  301. color: #f31e1f;
  302. }
  303. .workflow .workflow_list .process_pay .amount .unit{
  304. font-size: 26rpx;
  305. }
  306. .textLimit{
  307. overflow: hidden;
  308. text-overflow: ellipsis;
  309. white-space: nowrap;
  310. }
  311. .btn{
  312. width: 100%;
  313. height:90rpx;
  314. padding:0 24rpx;
  315. box-sizing:border-box;
  316. line-height: 90rpx;
  317. text-align: center;
  318. display: flex;
  319. background:rgba(255,255,255,.8);
  320. justify-content: space-between;
  321. }
  322. .address-item {
  323. min-height: 98rpx;
  324. display: flex;
  325. justify-content: flex-start;
  326. align-items: center;
  327. border-bottom: 1px solid #f1f1f1;
  328. padding: 0 32rpx
  329. }
  330. .item-title {
  331. width: 140rpx;
  332. color: #4d4c4c;
  333. font-size: 28rpx;
  334. height: 98rpx;
  335. line-height: 98rpx;
  336. }
  337. .item-content {
  338. width: 520rpx;
  339. white-space: nowrap;
  340. overflow: hidden;
  341. text-overflow: ellipsis;
  342. font-size: 28rpx;
  343. height: 98rpx;
  344. line-height: 98rpx;
  345. color: #4d4c4c;
  346. }
  347. /* 地区级联选择器 */
  348. .picker-view {
  349. width: 100%;
  350. display: flex;
  351. background-color: #fff;
  352. flex-direction: column;
  353. justify-content: center;
  354. align-items: center;
  355. bottom: 0rpx;
  356. left: 0rpx;
  357. }
  358. .picker-item {
  359. line-height: 70rpx;
  360. margin-left: 5rpx;
  361. margin-right: 5rpx;
  362. text-align: center;
  363. }
  364. .picker-view__pane {
  365. height: 100rpx;
  366. width: 100%;
  367. padding: 20rpx 32rpx;
  368. display: flex;
  369. justify-content: space-between;
  370. align-items: center;
  371. box-sizing: border-box;
  372. }
  373. .picker-view__pane text{
  374. color: #00cc88;
  375. font-size: 30rpx;
  376. }
  377. .pick-view__group {
  378. width: 96%;
  379. height: 450rpx;
  380. }
  381. .agree{
  382. background-color: rgba(92, 174, 119, 0.1);
  383. color:#5CAE77 ;
  384. text-align: center;
  385. float: right;
  386. padding: 2px 5px;
  387. border-radius: 5px;
  388. font-size: 12px;
  389. }
  390. .in{
  391. background-color: rgba(245, 163, 39, 0.1);
  392. color:#F5A327 ;
  393. text-align: center;
  394. float: right;
  395. padding: 2px 5px;
  396. border-radius: 5px;
  397. font-size: 12px;
  398. }
  399. .disagree{
  400. background-color: rgba(233, 0, 0, 0.1);
  401. color:#E90000 ;
  402. text-align: center;
  403. float: right;
  404. padding: 2px 5px;
  405. border-radius: 5px;
  406. font-size: 12px;
  407. }
  408. .caogao{
  409. background-color: rgba(133, 133, 133, 1);
  410. color:#ffffff ;
  411. text-align: center;
  412. float: right;
  413. padding: 2px 5px;
  414. border-radius: 5px;
  415. font-size: 12px;
  416. }
  417. .deleteBox{
  418. width: 65px;
  419. text-align: center;
  420. height: 100%;
  421. background: #F6F6F6;
  422. align-items: center;
  423. display: flex;
  424. }