.container.data-v-07f20a9a { display: flex; flex-direction: column; height: 100vh; /* // 根据你的实际需求调整高度 */ } .container .background_image.data-v-07f20a9a { content: ''; display: block; position: absolute; top: 0; left: 0; z-index: -9; width: 100%; height: 100vh; filter: blur(4px); background-size: cover; } .profile-image-container.data-v-07f20a9a { flex: 1; /* // 占据上方大部分空间 */ display: flex; justify-content: center; align-items: center; flex-direction: column; } .profile-image.data-v-07f20a9a { width: 120px; /* // 根据你的实际需求调整尺寸 */ height: 120px; border-radius: 25px; /* // 圆形头像 */ } .name.data-v-07f20a9a { font-size: 18px; font-weight: bold; margin-bottom: 5px; } .status.data-v-07f20a9a { font-size: 14px; } .controls.data-v-07f20a9a { flex: 0 0 70px; display: flex; justify-content: space-between; align-items: center; } .controls-label.data-v-07f20a9a { flex: 0 0 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 70px; } .control-item.data-v-07f20a9a { flex: 1; display: flex; justify-content: center; align-items: center; } .control-icon.data-v-07f20a9a { width: 70px; /* // 根据你的实际需求调整尺寸 */ height: 70px; border-radius: 35px; text-align: center; line-height: 70px; transition: transform 0.3s; /* 平滑变换效果 */ } .icon-label.data-v-07f20a9a { font-size: 12px; } .control-icon.active.data-v-07f20a9a { transform: scale(1.1); /* 放大效果 */ opacity: 0.7; /* 透明度变化效果 */ } .white.data-v-07f20a9a { background-color: white; font-size: 25px; /* // 挂电话按钮的背景色,根据你的设计调整颜色 */ } .voicepopu.data-v-07f20a9a { position: fixed; right: 0; top: 70%; transform: translateY(-50%); width: 130rpx; height: 90rpx; background-color: white; border-radius: 75rpx 0 0 75rpx; overflow: hidden; z-index: 999; text-align: center; } .voicegif.data-v-07f20a9a { width: 80rpx; height: 80rpx; }