me.wxss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. /* parents/pages/me/me.wxss */
  2. @import '../../../templates/footer/footer.wxss';
  3. @import '../../../templates/loading/loading.wxss';
  4. .header {
  5. padding: 40rpx 30rpx;
  6. background: #fff;
  7. display: flex;
  8. justify-content: space-between;
  9. align-items: center;
  10. }
  11. .header-row {
  12. display: flex;
  13. justify-content: flex-start;
  14. align-items: center;
  15. margin-top: 18rpx;
  16. }
  17. .header-row:nth-of-type(1) {
  18. margin-top: 0;
  19. }
  20. .header-col {
  21. display: flex;
  22. flex-direction: column;
  23. justify-content: flex-start;
  24. align-items: flex-start;
  25. }
  26. .header-flex {
  27. flex: 1;
  28. display: flex;
  29. justify-content: flex-start;
  30. align-items: center;
  31. }
  32. .header-images {
  33. width: 148rpx;
  34. height: 148rpx;
  35. border-radius: 200rpx;
  36. border: 10rpx solid #00B7FF;
  37. }
  38. .head-month-img{
  39. width: 25rpx;
  40. height: 15rpx;
  41. margin: 5rpx 0rpx 0rpx 15rpx;
  42. }
  43. .members-information{
  44. margin: 20rpx;
  45. background:rgba(255,255,255,1);
  46. border-radius: 18rpx;
  47. height: 200rpx;
  48. }
  49. .information-flex{
  50. display:inline-block;
  51. padding: 50rpx;
  52. }
  53. .section-text-members{
  54. font-size: 30rpx;
  55. color: #333;
  56. }
  57. .section-text-card{
  58. font-size: 30rpx;
  59. color: #00B7FF;
  60. }
  61. .section-text-data{
  62. font-size: 30rpx;
  63. color: #6C6C80;
  64. position:relative;
  65. top:19rpx;
  66. right:-125rpx;
  67. }
  68. .section-text-title{
  69. display:inline-block;
  70. width:124rpx;
  71. height:40rpx;
  72. background:rgba(226,243,251,1);
  73. border-radius:20rpx;
  74. font-size:24rpx;
  75. font-family:PingFang SC;
  76. font-weight:400;
  77. text-align:center;
  78. color:rgba(32,163,224,1);
  79. line-height:40rpx;
  80. margin:0 10rpx;
  81. }
  82. .header-image {
  83. width: 148rpx;
  84. height: 148rpx;
  85. border-radius: 200rpx;
  86. border: 10rpx solid #00B7FF;
  87. }
  88. .header-icon {
  89. position: absolute;
  90. right: 0;
  91. bottom: 0;
  92. width: 40rpx;
  93. height: 40rpx;
  94. }
  95. .header-nologin-icon{
  96. width: 148rpx;
  97. height: 148rpx;
  98. border-radius: 50%;
  99. }
  100. .header-text-black {
  101. font-size: 38rpx;
  102. display:inline-block;
  103. color: #333;
  104. }
  105. .section-text-login{
  106. width:154rpx;
  107. height:46rpx;
  108. border:2rpx solid rgba(0,183,255,1);
  109. border-radius:23rpx;
  110. font-size: 28rpx;
  111. text-align:center;
  112. line-height:46rpx;
  113. color: #00B7FF;
  114. margin-bottom: 30rpx
  115. }
  116. .modal-text-addchild{
  117. padding:5rpx;
  118. width:30%;
  119. margin:20rpx auto;
  120. height: 40rpx;
  121. font-size: 30rpx;
  122. text-align:center;
  123. line-height:40rpx;
  124. border-radius: 20rpx;
  125. color: #00B7FF;
  126. border: 3rpx solid #00B7FF;
  127. }
  128. .header-images-btn{
  129. border: none;
  130. color: #333;
  131. font-size: 38rpx;
  132. text-align: center;
  133. background: transparent;
  134. }
  135. .header-button {
  136. border-radius: 100rpx;
  137. border: 1rpx solid rgba(0,183,255,1);
  138. font-size: 30rpx;
  139. color: #00B7FF;
  140. padding: 8rpx 20rpx;
  141. margin-left: 20rpx;
  142. }
  143. .header-icon-two {
  144. width: 30rpx;
  145. height: 34rpx;
  146. margin-right: 14rpx;
  147. }
  148. .header-text {
  149. font-size: 28rpx;
  150. color: #999;
  151. }
  152. .header-arrow {
  153. width: 14rpx;
  154. height: 24rpx;
  155. }
  156. .section-list {
  157. margin: 20rpx;
  158. background:rgba(255,255,255,1);
  159. border-radius: 18rpx;
  160. }
  161. .section-li {
  162. display: flex;
  163. justify-content: space-between;
  164. align-items: center;
  165. padding: 30rpx;
  166. border-bottom: solid 1rpx #e6e6e6;
  167. cursor: pointer;
  168. }
  169. .section-li:nth-last-of-type(1) {
  170. border-bottom: solid 1rpx transparent;
  171. }
  172. .section-arrow {
  173. width: 14rpx;
  174. height: 24rpx;
  175. display:inline-block;
  176. float:right;
  177. }
  178. .section-icon {
  179. width: 30rpx;
  180. height: 30rpx;
  181. margin-right: 10rpx;
  182. }
  183. .section-text {
  184. font-size: 30rpx;
  185. color: #666;
  186. }
  187. .section-text-black{
  188. font-size: 44rpx;
  189. color: rgb(2, 2, 2);
  190. display:inline-block;
  191. }
  192. .modal-container {
  193. position: fixed;
  194. top: 0;
  195. left: 0;
  196. width: 100%;
  197. height: 100%;
  198. background: rgba(0, 0, 0, 0.5);
  199. z-index: 999;
  200. }
  201. .section-queem_icon{
  202. width: 120rpx;
  203. height: 100rpx;
  204. position:relative;
  205. right:-229rpx;
  206. bottom:-11rpx;
  207. }
  208. .modal-wrapper {
  209. position: absolute;
  210. top: 240rpx;
  211. left: 50%;
  212. width: 710rpx;
  213. transform: translateX(-50%);
  214. background: rgba(255,255,255,1);
  215. border-radius: 18rpx;
  216. }
  217. .modal-wrapper::after {
  218. content: "";
  219. position: absolute;
  220. left: 60rpx;
  221. top: -20rpx;
  222. border-left: solid 20rpx transparent;
  223. border-right: solid 20rpx transparent;
  224. border-bottom: solid 25rpx #fff;
  225. }
  226. .modal-li {
  227. border-bottom: solid 1rpx #E6E6E6;
  228. display: flex;
  229. justify-content: space-between;
  230. align-items: center;
  231. padding: 40rpx;
  232. }
  233. .modal-li:nth-last-of-type(1) {
  234. border-bottom: none;
  235. }
  236. .modal-row {
  237. display: flex;
  238. justify-content: flex-start;
  239. align-items: center;
  240. }
  241. .modal-image {
  242. width: 98rpx;
  243. height: 98rpx;
  244. border-radius: 200rpx;
  245. margin-right: 30rpx;
  246. }
  247. .modal-text {
  248. font-size: 32rpx;
  249. color: #999;
  250. }
  251. .modal-icon {
  252. width: 30rpx;
  253. height: 24rpx;
  254. margin-left: 30rpx;
  255. }
  256. picker{
  257. width:100%;
  258. }
  259. .li-picker{
  260. display:inline-block;
  261. width:60%;
  262. text-align:center;
  263. font-size: 28rpx;
  264. color: #999;
  265. }