web.scss 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. .call {
  2. display: inline-block;
  3. position: relative;
  4. cursor: pointer;
  5. &-icon {
  6. display: flex;
  7. flex-direction: row;
  8. justify-content: center;
  9. align-items: center;
  10. .icon-down-arrow {
  11. margin: 12Px 1Px 0;
  12. }
  13. }
  14. &-main {
  15. position: absolute;
  16. z-index: 5;
  17. background: #ffffff;
  18. top: 37Px;
  19. left: calc(-50% + 20Px);
  20. border-radius: 2Px;
  21. display: flex;
  22. flex-direction: column;
  23. width: 80Px;
  24. border: 0.5Px solid #e0e0e0;
  25. box-shadow: 0 4Px 12Px 0 rgba(0, 0, 0, 0.06);
  26. &-voice,
  27. &-video {
  28. height: 34Px;
  29. text-align: center;
  30. font-size: 13Px;
  31. line-height: 34Px;
  32. align-items: center;
  33. }
  34. &-voice:hover,
  35. &-video:hover {
  36. background: #dceafd;
  37. }
  38. }
  39. &-main:before {
  40. content: '';
  41. position: absolute;
  42. bottom: 100%;
  43. left: calc(50% - 9Px);
  44. border-left: 7Px solid transparent;
  45. border-right: 7Px solid transparent;
  46. border-bottom: 7Px solid #e0e0e0;
  47. }
  48. &-main:after {
  49. content: '';
  50. position: absolute;
  51. bottom: 100%;
  52. left: calc(50% - 8Px);
  53. border-left: 6Px solid transparent;
  54. border-right: 6Px solid transparent;
  55. border-bottom: 6Px solid #ffffff;
  56. }
  57. .uncall-dialog {
  58. width: 500Px;
  59. height: 300Px;
  60. background: linear-gradient(180deg, #e9f3ff 0%, #f4f8ff 100%);
  61. border-radius: 20Px;
  62. &-body {
  63. a {
  64. font-family: PingFangSC-Regular;
  65. font-weight: 400;
  66. color: #006eff;
  67. letter-spacing: 0;
  68. }
  69. }
  70. }
  71. }
  72. .call-kit-container {
  73. position: fixed;
  74. left: calc(50% - 25rem);
  75. top: calc(50% - 18rem);
  76. width: 50rem;
  77. height: 36rem;
  78. border-radius: 16Px;
  79. box-shadow: rgba(0, 0, 0, 0.16) 0Px 3Px 6Px, rgba(0, 0, 0, 0.23) 0Px 3Px 6Px;
  80. &-left {
  81. left: calc(50% - 25rem + 150Px);
  82. }
  83. }