room.wxss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /* miniprogram/pages/room/room.wxss */
  2. .page-room{
  3. width: 100vw;
  4. height: 100vh;
  5. overflow: hidden;
  6. /* background-image: url(https://mc.qcloudimg.com/static/img/7da57e0050d308e2e1b1e31afbc42929/bg.png); */
  7. background-color: #fff;
  8. background-repeat:no-repeat;
  9. background-size: cover;
  10. }
  11. .title{
  12. color: #FFFFFF;
  13. padding-top: 65rpx;
  14. line-height: 60rpx;
  15. text-align: center;
  16. }
  17. .page-room .avatar {
  18. height: 100rpx;
  19. width: 100rpx;
  20. border-radius: 50%;
  21. background: #999;
  22. overflow: hidden;
  23. }
  24. .user-container {
  25. box-sizing: border-box;
  26. padding: 80rpx 60rpx 0 60rpx;
  27. height: 900rpx;
  28. overflow: hidden;
  29. color: white;
  30. }
  31. .own {
  32. height: 180rpx;
  33. display: flex;
  34. flex-direction: column;
  35. align-items: center;
  36. justify-content: center;
  37. }
  38. .avatar-image {
  39. width: 100%;
  40. height: 100%;
  41. }
  42. .users {
  43. display: flex;
  44. flex-direction: row;
  45. flex-wrap: wrap;
  46. padding-top: 40rpx;
  47. }
  48. .user {
  49. height: 200rpx;
  50. width: 33.3%;
  51. display: flex;
  52. flex-direction: column;
  53. align-items: center;
  54. justify-content: center;
  55. font-size: 24rpx;
  56. }
  57. .userID {
  58. padding-top: 20rpx;
  59. }
  60. .avatar-fake {
  61. height: 100rpx;
  62. width: 100rpx;
  63. border-radius: 50%;
  64. background: #999;
  65. }
  66. .bg {
  67. width: 100vw;
  68. height: 100vh;
  69. }
  70. .close {
  71. position:absolute;
  72. padding-left:5vw;
  73. padding-right:5vw;
  74. width:50rpx;
  75. height:60rpx;
  76. }
  77. .back {
  78. font-size: 32rpx;
  79. line-height: 32rpx;
  80. padding-left: 5vw;
  81. padding-right: 5vw;
  82. width: 50rpx;
  83. }
  84. .title {
  85. color: white;
  86. font-size: 32rpx;
  87. font-weight: 500;
  88. }
  89. .role-choose {
  90. position: absolute;
  91. width: 90vw;
  92. background: white;
  93. border: 1px solid #bfbfbf;
  94. border-radius: 12rpx;
  95. top: 40vh;
  96. left: 5vw;
  97. padding: 40rpx;
  98. box-sizing: border-box;
  99. }
  100. .role-panel-text {
  101. font-size: 32rpx;
  102. font-weight: 500;
  103. }
  104. .handle-btn {
  105. display: flex;
  106. flex-direction: row-reverse;
  107. margin-top: 20rpx;
  108. }
  109. .role-btn {
  110. margin-left: 20rpx;
  111. padding: 10rpx 20rpx;
  112. border-radius: 12rpx;
  113. }
  114. .confirm {
  115. background: #006eff;
  116. color: white;
  117. }
  118. .setting {
  119. height: 100%;
  120. padding: 100rpx 60rpx;
  121. display: flex;
  122. flex-direction: row;
  123. justify-content: space-around;
  124. }
  125. .btn-normal {
  126. width: 80rpx;
  127. height: 80rpx;
  128. border-radius: 50%;
  129. background: white;
  130. display: flex;
  131. justify-content: center;
  132. align-items: center;
  133. }
  134. .btn-normal image {
  135. width: 50rpx;
  136. height: 50rpx;
  137. }
  138. .close {
  139. position:absolute;
  140. padding-left:5vw;
  141. padding-right:5vw;
  142. width:50rpx;
  143. height:60rpx;
  144. }