link-page.component.scss 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. .content {
  2. // --padding-bottom: 50px;
  3. --background: #fff;
  4. .nav-data {
  5. position: fixed;
  6. top: 20px;
  7. display: flex;
  8. justify-content: space-between;
  9. align-items: center;
  10. width: 100%;
  11. padding: 10px;
  12. color: white;
  13. z-index: 1;
  14. .room-data {
  15. background-color: rgb(0 0 0 / 40%);
  16. display: flex;
  17. width: 160px;
  18. justify-content: space-between;
  19. align-items: center;
  20. border-radius: 40px;
  21. padding: 4px;
  22. border: 1px solid rgb(255 255 255 / 30%);
  23. .avatar {
  24. width: 36px;
  25. height: 36px;
  26. }
  27. .profile-title {
  28. display: flex;
  29. flex-direction: column;
  30. align-items: start;
  31. justify-content: space-around;
  32. margin-left: 4px;
  33. flex: 1;
  34. .profile-name {
  35. font-size: 14px;
  36. }
  37. .level {
  38. background-color: #cc59de;
  39. text-align: center;
  40. font-size: 12px;
  41. border-radius: 20px;
  42. padding: 0px 6px;
  43. }
  44. }
  45. ion-icon {
  46. margin-left: 10px;
  47. font-size: 30px;
  48. }
  49. }
  50. .report,
  51. .exit {
  52. background-color: rgb(0 0 0 / 40%);
  53. color: white;
  54. border-radius: 50%;
  55. width: 36px;
  56. height: 36px;
  57. display: flex;
  58. align-items: center;
  59. justify-content: center;
  60. border: 1px solid rgb(255 255 255 / 30%);
  61. ion-icon {
  62. font-size: 26px;
  63. }
  64. }
  65. }
  66. .tools {
  67. position: fixed;
  68. bottom: 0;
  69. left: 0;
  70. width: 100%;
  71. padding: 10px;
  72. .swiper-wrapper {
  73. // height: 280px;
  74. // justify-content: end;
  75. }
  76. .row {
  77. display: flex;
  78. justify-content: space-between;
  79. .row-li {
  80. display: flex;
  81. justify-content: center;
  82. align-items: center;
  83. justify-content: center;
  84. flex-direction: column;
  85. color: #fff;
  86. width: 100px;
  87. margin-bottom: 6px;
  88. .label {
  89. margin-top: 6px;
  90. font-size: 14px;
  91. }
  92. .icon-box {
  93. background-color: rgba(0, 0, 0, 0.4);
  94. // border: 1px solid rgba(255, 255, 255, 0.3);
  95. border-radius: 50%;
  96. padding: 4px;
  97. display: flex;
  98. align-items: center;
  99. justify-content: center;
  100. ion-icon {
  101. color: white;
  102. font-size: 30px;
  103. }
  104. .icon-tool {
  105. width: 30px;
  106. height: 30px;
  107. }
  108. img {
  109. width: 50px;
  110. height: 50px;
  111. background: white;
  112. border-radius: 50%;
  113. overflow: hidden;
  114. }
  115. }
  116. .action-icon {
  117. background-color: #ffffff;
  118. ion-icon {
  119. color: black !important;
  120. }
  121. }
  122. }
  123. .tips {
  124. background-color: rgba(0, 0, 0, 0.4);
  125. border-radius: 20px;
  126. color: white;
  127. padding: 6px;
  128. margin-bottom: 10px;
  129. font-size: 12px;
  130. span {
  131. color: #ffc409;
  132. }
  133. }
  134. }
  135. }
  136. .chat-template {
  137. // height: 370px;
  138. display: flex;
  139. flex-direction: column;
  140. justify-content: end;
  141. background: linear-gradient(to top, #000, #fff0);
  142. border-radius: 0 0 4px 4px;
  143. .chat-list{
  144. height: 160px;
  145. color: #fff;
  146. overflow-y: scroll;
  147. .tips{
  148. color:#b7000e;
  149. text-align: center;
  150. }
  151. .message{
  152. font-size: 12px;
  153. margin-bottom: 4px;
  154. }
  155. .slef_m{
  156. color: #ffc409;
  157. }
  158. }
  159. .footer-tool {
  160. display: flex;
  161. // background: white;
  162. padding: 0 4px;
  163. backdrop-filter: saturate(180%) blur(20px);
  164. background: rgb(255 255 255 / 0.8);
  165. border-radius: 4px;
  166. .input-bar {
  167. // width: 160px;
  168. display: flex;
  169. align-items: center;
  170. justify-content: space-between;
  171. flex-shrink: 0;
  172. ion-icon {
  173. font-size: 30px;
  174. }
  175. .splice {
  176. margin: 0 2px;
  177. }
  178. }
  179. .tools-maxwid {
  180. width: 160px;
  181. }
  182. }
  183. .emoji-content {
  184. background: #fbfbfb;
  185. height: 160px;
  186. overflow-y: scroll;
  187. .emoji-box {
  188. display: flex;
  189. flex-wrap: wrap;
  190. width: 100%;
  191. .emoji-item {
  192. width: 30px;
  193. height: 30px;
  194. display: flex;
  195. justify-content: center;
  196. align-items: center;
  197. .emoji-img {
  198. width: 20px;
  199. height: 20px;
  200. }
  201. }
  202. .emoji-item__del {
  203. width: 30px;
  204. height: 30px;
  205. display: flex;
  206. justify-content: center;
  207. align-items: center;
  208. .emoji-img {
  209. width: 20px;
  210. height: 20px;
  211. }
  212. }
  213. }
  214. }
  215. }
  216. }
  217. .langh{
  218. height:200px !important;
  219. }