cxc/meeting-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

文本标签坐标缩小误差

Browse Source
This commit is contained in:
cxc
2022-06-09 17:11:42 +08:00
parent fcc2842b33
commit cc8ea05acb
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/mediaCheck.vue
View File

@ -5,7 +5,6 @@
destroy-on-close destroy-on-close
v-model="showCheckMediaVideo" v-model="showCheckMediaVideo"
:close-on-click-modal="false" :close-on-click-modal="false"
title="摄像头和麦克风"
:fullscreen="screenWidth < 900" :fullscreen="screenWidth < 900"
width="60%" width="60%"
> >

20
src/views/meeting.vue
View File

@ -12,6 +12,7 @@
notInSharing: !inSharing, notInSharing: !inSharing,
}" }"
> >
<div class="text-label-container" ref="textLabelContainerRef"></div>
<div <div
id="video-element" id="video-element"
:class="`layout-template-${templateId}`" :class="`layout-template-${templateId}`"
@ -152,6 +153,7 @@ joinName.value =
store.getters.nickname || store.getters.phone || store.getters.icCard; store.getters.nickname || store.getters.phone || store.getters.icCard;
const meetingContainerRef = ref(null); // 会议组件容器，包含背景和会议组件 const meetingContainerRef = ref(null); // 会议组件容器，包含背景和会议组件
const textLabelContainerRef = ref(null); //文本标签容器
const videoElementRef = ref(null); // zoom会议组件 const videoElementRef = ref(null); // zoom会议组件
const meetingWidth = ref(0); // 视频和共享屏幕宽度 const meetingWidth = ref(0); // 视频和共享屏幕宽度
const meetingHeight = ref(0); // 视频和共享屏幕高度 const meetingHeight = ref(0); // 视频和共享屏幕高度
@ -273,12 +275,13 @@ const setTextLabel = () => {
textEl.id = `${uniqueId("tag-")}`; textEl.id = `${uniqueId("tag-")}`;
textEl.innerHTML = labelObj.content; textEl.innerHTML = labelObj.content;
textEl.className = "text-tag"; textEl.className = "text-tag";
// textEl.style.zIndex = "999";
textEl.style.backgroundColor = labelObj.backgroundColor; textEl.style.backgroundColor = labelObj.backgroundColor;
textEl.style.visibility = textEl.style.visibility =
labelObj.visibility === "1" ? "visible" : "hidden"; labelObj.visibility === "1" ? "visible" : "hidden";
textEl.style.left = `${labelObj.x}`; textEl.style.left = `${labelObj.x}`;
textEl.style.top = `${labelObj.y}`; textEl.style.top = `${labelObj.y}`;
meetingContainerRef.value.appendChild(textEl); textLabelContainerRef.value.appendChild(textEl);
}); });
}; };
@ -547,9 +550,10 @@ const initWebSocket = () => {
// 会议信息更新时 // 会议信息更新时
if (data.type === "isRefreshMeeting") { if (data.type === "isRefreshMeeting") {
await store.dispatch("getMeetingInfo", store.getters.meetingId); await store.dispatch("getMeetingInfo", store.getters.meetingId);
meetingContainerRef.value.style.background = `url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`; meetingContainerRef.value.style.background = `url(${
store.getters.templateBackgroundPic || store.getters.defaultBackground
}) 0% 0% / cover no-repeat`;
templateId.value = store.getters.templateId; templateId.value = store.getters.templateId;
// setLayout(templateId.value);
setTextLabel(); setTextLabel();
} }
// 收到聊天消息时 // 收到聊天消息时
@ -753,13 +757,21 @@ $meetingBackgroundHeight: 80vw * 9 / 16;
justify-content: center; justify-content: center;
width: $meetingBackgroundWidth; width: $meetingBackgroundWidth;
position: relative; position: relative;
.text-label-container {
position: absolute;
// z-index: -1;
top: 0;
left: 0;
width: $meetingBackgroundWidth;
height: $meetingComponentHeight + 6.4vw;
}
#video-element { #video-element {
width: $meetingComponentWitdh; width: $meetingComponentWitdh;
:deep(div[id*="suspension-view-tabpanel"] :deep(div[id*="suspension-view-tabpanel"]
> .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root > .zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root
> div[class*="inSharing"] > div[class*="inSharing"]
> div) { > div) {
padding-top: 6px; padding-top: 3px;
} }
} }
.el-button { .el-button {