| | |
| | | const WS_BASE = 'ws://218.202.104.82:38201/ws/chat' |
| | | const newUserInfo = ref(null) |
| | | const uid = ref('') |
| | | const peerUid = ref('2021474568497131521') |
| | | const peerUid = ref('') |
| | | // 联系人名称 |
| | | const contactName = ref('') |
| | | |
| | |
| | | font-family: Arial, sans-serif; |
| | | background-color: #f5f5f5; |
| | | transition: all 0.3s ease; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | /* 来电时的全屏样式 */ |
| | |
| | | .content-wrapper { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | gap: 30px; |
| | | max-width: 600px; |
| | | margin: 0 auto; |
| | | height: 100%; |
| | | justify-content: center; |
| | | width: 100%; |
| | | align-items: center; |
| | | padding: 20px; |
| | | } |
| | | |
| | | .input-group { |
| | |
| | | gap: 50px; |
| | | flex-wrap: wrap; |
| | | justify-content: center; |
| | | margin-top: 80px; |
| | | margin-top: 40px; |
| | | } |
| | | |
| | | .btn { |
| | |
| | | font-size: 18px; |
| | | color: #333; |
| | | text-align: center; |
| | | margin-bottom: 20px; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | /* 联系人名称样式 */ |
| | | .contactName { |
| | | font-size: 18px; |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | text-align: center; |
| | | margin-top: 10px; |
| | | margin-bottom: 40px; |
| | | |
| | | margin: 15px 0; |
| | | } |
| | | |
| | | /* 来电状态样式 */ |
| | |
| | | |
| | | /* 头像样式 */ |
| | | .contactAvatar { |
| | | margin-top: 150px; |
| | | width: 180px; |
| | | height: 180px; |
| | | display: flex; |
| | |
| | | } |
| | | } |
| | | |
| | | /* 来电时的头像放大效果 */ |
| | | /* 来电时的头像样式 */ |
| | | .call-container.incoming-call .contactAvatar { |
| | | width: 220px; |
| | | height: 220px; |
| | | margin-bottom: 60px; |
| | | width: 180px; |
| | | height: 180px; |
| | | } |
| | | </style> |