微信小程序
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.

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