choose-person.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. html,
  2. body {
  3. height: 100%;
  4. font-family: PingFangSC-Regular;
  5. color: #333333;
  6. }
  7. .content{
  8. box-sizing: border-box;
  9. padding-bottom: 90rpx;
  10. }
  11. .content-X{
  12. box-sizing: border-box;
  13. padding-bottom: 158rpx;
  14. }
  15. .header {
  16. width: 100%;
  17. height: 240rpx;
  18. background: #28aff0;
  19. color: #ffffff;
  20. box-sizing: border-box;
  21. padding-left: 32rpx;
  22. overflow: hidden;
  23. position: relative;
  24. }
  25. .header > view:first-child {
  26. font-size: 36rpx;
  27. margin: 48rpx 0 8rpx;
  28. }
  29. .header > view:nth-child(2) {
  30. font-size: 24rpx;
  31. }
  32. .header > image {
  33. width: 212rpx;
  34. height: 148rpx;
  35. position: absolute;
  36. top: 32rpx;
  37. right: 44rpx;
  38. }
  39. .personBox {
  40. width: 100%;
  41. box-sizing: border-box;
  42. padding: 0 24rpx;
  43. position: relative;
  44. top: -60rpx;
  45. }
  46. .personBox > .item {
  47. width: 100%;
  48. height: 200rpx;
  49. background: #ffffff;
  50. box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.03);
  51. border-radius: 8rpx;
  52. box-sizing: border-box;
  53. padding: 52rpx 40rpx;
  54. /* display: flex;
  55. align-items: center; */
  56. margin-bottom: 24rpx;
  57. }
  58. .personBox > .pItem > view{
  59. float: left;
  60. }
  61. .personBox > .pItem > view:first-child {
  62. width: 96rpx;
  63. background: #28aff0;
  64. border-radius: 50%;
  65. color: #ffffff;
  66. text-align: center;
  67. line-height: 96rpx;
  68. font-family: PingFangSC-Semibold;
  69. font-size: 30rpx;
  70. margin-right: 30rpx;
  71. }
  72. .personBox > .pItem > view:nth-child(2) {
  73. display: flex;
  74. flex-direction: column;
  75. }
  76. .personBox > .pItem > view:nth-child(2) > text:first-child {
  77. font-family: PingFangSC-Medium;
  78. font-size: 34rpx;
  79. color: #333333;
  80. }
  81. .personBox > .pItem > view:nth-child(2) > text:last-child {
  82. font-size: 28rpx;
  83. color: #808080;
  84. }
  85. .personBox > .pItem > .selectBox{
  86. margin-top: 24rpx;
  87. float: right;
  88. }
  89. .personBox > .pItem > .selectBox > image {
  90. width: 48rpx;
  91. height: 48rpx;
  92. }
  93. .personBox > .pItem .selectBox image:first-child{
  94. display: block;
  95. }
  96. .personBox > .pItem .selectBox image:last-child{
  97. display: none;
  98. }
  99. .personBox > .selected .selectBox image:first-child{
  100. display: none;
  101. }
  102. .personBox > .selected .selectBox image:last-child{
  103. display: block;
  104. }
  105. /* .personBox > .pItem>.editBox{
  106. margin-left: 144rpx;
  107. }
  108. .personBox > .pItem>.editBox>image{
  109. width: 32rpx;
  110. height: 32rpx;
  111. }
  112. .personBox > .pItem>.editBox>image:first-child{
  113. margin-right: 56rpx;
  114. } */
  115. .personBox > .addItem{
  116. display: flex;
  117. justify-content: space-between;
  118. align-items: center;
  119. }
  120. .personBox > .addItem image {
  121. width: 20rpx;
  122. height: 20rpx;
  123. margin-right: 16rpx;
  124. }
  125. .personBox > .addItem > view {
  126. margin: 0 auto;
  127. font-size: 30rpx;
  128. color: #3296fb;
  129. }
  130. .btnBox,.btnBox-X {
  131. width: 100%;
  132. background: #ffffff;
  133. box-sizing: border-box;
  134. padding: 0 32rpx;
  135. position: fixed;
  136. bottom: 0;
  137. z-index: 100;
  138. }
  139. .btnBox-X {
  140. padding-bottom: 68rpx;
  141. }
  142. .btn {
  143. height: 90rpx;
  144. background: #3296fb;
  145. border-radius: 45rpx;
  146. color: #ffffff;
  147. font-family: PingFangSC-Medium;
  148. font-size: 32rpx;
  149. text-align: center;
  150. line-height: 90rpx;
  151. }