- <template>
- <div class="RongYun" id="RongYun">
- <div class="rong-container" id="rongContainer">
- <div class="rong-action" id="rong-action">
- <div class="textDiv2">
- <div class="textTitle">
- <span class="dote"></span>
- <span>接收用户:</span>
- </div>
- <div class="userList" v-if="allData.userList.length > 0">
- <template v-for="(item, index) in allData.userList" :key="index">
- <div class="user" v-if="item.phone != userId">
- <div class="userInfoClass">
- <span class="username">{{ item.name }}:</span>
- <div class="ceninfoBox">
- <div class="userphone" v-if="item.phone">
- {{ geTel(item.phone) }}
- </div>
- <div class="userphone userdept">{{ item.deptName }}</div>
- </div>
- </div>
- <div>
- <span style="margin-left: 10px" :class="'classType' + item.ClassType">{{ item.typeFont }}</span>
- </div>
- </div>
- </template>
- </div>
- </div>
- <div class="textDiv">
- <span class="dote"></span>
- <div class="text">
- <span>发起人:</span><span class="Rightvalue" @click="getToken()">{{ userinfo.userName }}</span>
- </div>
- </div>
- <div class="textDiv">
- <span class="dote"></span>
- <div class="text">
- <span>当前登录用户 ID:</span><span id="userId" class="Rightvalue" @click="getToken()">{{ userId + '_web' }}</span>
- </div>
- </div>
-
- <div class="textDiv">
- <span class="dote"></span>
- <div class="text">
- <span>通话类型:</span>
-
- <el-radio-group
- v-model="mediaType"
- style="display: flex; justify-content: center; align-items: center"
- @change="changeMediaType"
- >
- <el-radio :label="2">视频</el-radio>
- <el-radio :label="1">语音</el-radio>
- </el-radio-group>
- </div>
- </div>
- <div id="inviteList" class="textDiv">
- <span class="dote"></span>
- <div class="text">
- <span>选择邀请人:</span>
-
- <el-select
- v-model="Getidinvite"
- placeholder="选择被邀请人"
- filterable
- multiple
- collapse-tags
- :popper-append-to-body="true"
- popper-class="eloption"
- >
- <el-option v-for="dict in inviteuserIdsList" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
- </el-select>
- </div>
- </div>
- <div class="rong-login-box">
- <div class="btn callBtn" id="call" @click="callHandler()">
- <img src="/src/assets/images/rongYunImg/callic.png" alt="" />
- 发起通话
- </div>
- <div class="btn hunupBtn hangBtn" id="hunup" @click="hungup()">
- <img src="/src/assets/images/rongYunImg/hangic.png" alt="" />
- 挂断
- </div>
- <div class="btn inviteBtn hunupBtn" id="invite" @click="inviteCall()">邀请</div>
- </div>
- </div>
- <div id="videoView" class="rong-video-box newbox"></div>
- </div>
- </div>
- </template>
- <script setup>
- import moment from 'moment';
- import useUserStore from '@/store/modules/user';
- import { ElMessageBox } from 'element-plus';
-
- import bus from '@/utils/util';
- import rongyunStore from '@/store/modules/rongyunStore';
- import {
- listrcloudUnitUser,
- getUserStatus,
- rongyunGroupSave,
- groupJoinUsers,
- batchAdd,
- answer,
- hangUp,
- } from '@/views/RongyunCommunication/rongyunjs/rongyunApi.js';
- import { findCurrentTreeObj } from '@/utils/ruoyi';
-
- import { RCCallErrorCode } from '@rongcloud/plugin-call';
-
- const appStore = useUserStore();
- const useRongyunStore = rongyunStore();
- const { proxy } = getCurrentInstance();
- const inviteuserIdsList = ref([]); //被邀请人的列表
- const Getidinvite = ref([]);
- const allData = reactive({
- typeList: [
- {
- label: '视频',
- value: 2,
- },
- {
- label: '语音',
- value: 1,
- },
- ],
- userId: appStore.userInfo.phonenumber,
- userName: '',
- mediaType: useRongyunStore.mediaType,
- userList: [],
- idList: [],
- userinfo: appStore.userInfo,
- unitArr: [],
- });
- const { typeList, userId, userName, mediaType, userList, idList, userinfo, unitArr } = toRefs(allData);
- const props = defineProps({
- ryUser: Object,
- callType: Number,
- });
-
- const paramSave = ref({
- groupId: undefined, //群聊Id
- promoterThridUserId: appStore.userInfo.phonenumber + '_web', //发起人id
- answerThridUserIds: '', //接收人id
- type: '', //通话类型 1是视频 2是语音
- createBy: localStorage.getItem('userNo'),
- });
-
- onMounted(() => {
- nextTick(() => {
- initGroupData();
- });
- bus.on('removeEle', e => {
- removeVideoEl();
- });
- });
-
- onBeforeUnmount(() => {
- close();
- });
- const geTel = tel => {
- var reg = /^(\d{3})\d{4}(\d{4})$/;
- return tel.replace(reg, '$1****$2');
- };
-
- // 处理群呼数据
- const initGroupData = () => {
- console.log('props.ryUser 处理群呼/单呼数据', props.ryUser);
- allData.userList = [];
- if (props.callType == 2) {
- let arr = [].concat(props.ryUser.userList);
- arr.forEach(v => {
- allData.userList.push({
- name: v.name,
- phone: v.registerThridUserId,
- typeFont: null,
- ClassType: null,
- });
- });
- } else {
- allData.userList.push({
- name: props.ryUser.name,
- phone: props.ryUser.phone,
- typeFont: null,
- ClassType: null,
- });
- }
- console.log('allData.userList', allData.userList);
- };
-
- const getDom = key => {
- return document.querySelector(key);
- };
- const changeMediaType = value => {
- console.log('value', value);
- useRongyunStore.SET_MediaType(value);
- };
- /**
- * CallSession 事件
- */
- const getCallSessionEvent = () => {
- return {
- onRinging: sender => {
- // 当远端用户已开始响铃, 该函数有 2 个参数: sender 是发送者,session 是通话实例。这时用户可以在业务层做响铃的 UI 展示。
- // ;
- proxy.$modal.msgWarning(` ${sender.userId} 振铃`);
- allData.userList.forEach(element => {
- if (element.phone == sender.userId) {
- element.typeFont = '对方已响铃';
- element.ClassType = 1;
- }
- });
- },
- onAccept: sender => {
- // 当远端用户已同意接听, 该函数有 2 个参数: sender 是发送者,session 是通话实例。这时用户可以把 UI 的‘响铃’变成‘通话中’。
- proxy.$modal.msgWarning(` ${sender.userId} 已接听`);
- console.log('接听监听,', allData.userList, sender);
- allData.userList.forEach(element => {
- if (element.phone == sender.userId) {
- element.typeFont = '已接听';
- element.ClassType = 2;
- element.answerType = 4;
- acceptApi(element);
- }
- });
- },
- onHungup: (sender, reason) => {
- // 当有远端用户挂断, 该函数有 3 个参数: sender 是发送者,reason 是挂断原因,session 是通话实例。这时用户可以在 UI 层提示‘xxx已挂断’。
- proxy.$modal.msgWarning(` ${sender.userId} 已挂断`);
- console.log('挂断监听,', allData.userList, sender);
- console.log('挂断监听挂断原因,', reason);
-
- allData.userList.forEach(element => {
- if (element.phone == sender.userId) {
- element.typeFont = '已挂断';
- element.answerType = reason;
- // 挂断原因转义成后端所需字段
- // 1.未响铃 2.响铃未接听 3.响铃后挂断 4.已接听
-
- // 响铃后挂断
- // if (reason == 12) {
- // element.answerType = 3;
- // }
-
- // // 响铃未接听
- // if (reason == 15) {
- // element.answerType = 2;
- // }
-
- // // 已接听
- // if (reason == 13) {
- // element.answerType = 4;
- // }
-
- hungupApi(element);
- }
- });
- // 群组中移除相应节点
- const videoViewDom = getDom('#videoView');
- const videoDom = getDom(`#video-${sender.userId}`);
- videoDom && videoViewDom.removeChild(videoDom);
- const itemdomList = document.getElementsByClassName('video-item');
- if (itemdomList.length <= 1) {
- restore();
- }
- },
- onTrackReady: track => {
- // 当本端资源或远端资源已获取, 该函数有 2 个参数:track 是本端资源或远端资源, session 是通话实例。这时用户可以用拿到的 track 播放音频、视频。
- setTimeout(() => {
- appendVideoEl(track);
- }, 1500);
- // 当本端资源或远端资源已获取, 该函数有 2 个参数:track 是本端资源或远端资源, session 是通话实例。这时用户可以用拿到的 track 播放音频、视频。
- if (!track.isLocalTrack()) {
- proxy.$modal.msgWarning('通话已建立');
- }
- },
- onMemberModify: (sender, invitedUsers, session) => {
- console.log('触发邀请监听', sender, invitedUsers, session);
- console.log('触发邀请监听', allData.userList);
-
- // 群组通话中有其他人被邀请加入, 该函数有 3 个参数: sender 是发送者,invitedUsers 是被邀请的用户列表, session 是通话实例。这时用户可以在 UI 层提示‘xxx加入通话’。
- },
- onMediaModify: sender => {
- // 通话类型改变时触发, 该函数有3个参数: sender 是发送者,mediaType 通话类型, session 是通话实例。这时用户可以在 UI 层提示‘已降级成音频通话’。
- },
- onAudioMuteChange: muteUser => {
- // 对方静音后触发, 该函数有2个参数: muteUser 是已静音的用户, session 是通话实例。这时用户可以在 UI 层提示‘xxx已静音’。
- proxy.$modal.msgWarning(` ${sender.userId} 已静音`);
- },
- onVideoMuteChange: muteUser => {
- // 对方禁用视频后触发, 该函数有2个参数: muteUser 是已禁用视频的用户, session 是通话实例。这时用户可以在 UI 层提示‘xxx已禁用视频’。
- proxy.$modal.msgWarning(` ${sender.userId} 已禁用视频`);
- },
- };
- };
- /**
- * callSession 事件注册
- */
- const registerCallSessionEvent = session => {
- const events = getCallSessionEvent();
- session.registerSessionListener(events);
- };
- const callHandler = () => {
- console.log('..??', props);
- props.callType == 1 ? rongYunCall() : groupCall();
- };
- // 单呼
- const call = () => {
- getDom('#call').style.display = 'none';
- getDom('#hunup').style.display = 'block';
- const events = getCallSessionEvent();
- console.log('props.ryUser', props.ryUser);
- console.log('props.ryUser.phone2', props.ryUser.phone);
- // 这里是传给融云拨打电话的传递userid
- const params = {
- targetId: props.ryUser.phone,
- mediaType: useRongyunStore.mediaType,
- listener: events,
- };
- useRongyunStore.callClient.call(params).then(({ code, session }) => {
- if (code === 10000) {
- registerCallSessionEvent(session);
- useRongyunStore.SET_CALLSESSION(session);
-
- saveOnAccept();
- } else {
- proxy.$modal.msgWarning(`呼叫失败,错误原因:${code}`);
- }
- });
- };
- //单呼前判登录用户在线状态
- const rongYunCall = async item => {
- console.log('allData.userId', allData.userId, appStore.userInfo);
- let params = {
- registerThridUserId: allData.userId + '_web',
- };
-
- let res1 = await getUserStatus(params);
- let flag1 = null;
- if (res1.code == 200) {
- flag1 = JSON.parse(res1.data);
- }
- if (flag1 != 1) {
- ElMessageBox.confirm(`${appStore.userInfo.userName || '当前'}用户视频会商不在线,是否重新连接?, "提示"`, {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- })
- .then(() => {
- setTimeout(() => {
- bus.emit('rystatus');
- getCallStatus();
- }, 1500);
- })
- .catch(() => {});
- } else {
- setTimeout(() => {
- getCallStatus();
- }, 1500);
- }
- };
- //单呼前判对方用户在线状态
- const getCallStatus = async () => {
- let params = {
- registerThridUserId: props.ryUser.phone,
- };
-
- let res = await getUserStatus(params);
- let flag = null;
- if (res.code == 200) {
- flag = JSON.parse(res.data);
- }
- if (flag != 1) {
- return proxy.$modal.msgWarning(`${props.ryUser.name}用户视频会商不在线!`);
- } else {
- call();
- }
- };
- //群呼
- const groupCall = () => {
- getDom('#call').style.display = 'none';
- getDom('#hunup').style.display = 'block';
- getDom('#invite').style.display = 'block';
- getDom('#inviteList').style.visibility = 'visible';
-
- console.log('allData.userList', allData.userList, props.ryUser);
- allData.userList.forEach(v => {
- v.typeFont = '已拨号';
- v.ClassType = 0;
- v.answerType = 1;
- });
-
- const events = getCallSessionEvent();
- const params = {
- targetId: props.ryUser.groupId,
- userIds: props.ryUser.userIds.split(','),
- mediaType: useRongyunStore.mediaType,
- listener: events,
- };
- console.log('param', params);
- useRongyunStore.callClient.callInGroup(params).then(({ code, session }) => {
- if (code === 10000) {
- registerCallSessionEvent(session);
- useRongyunStore.SET_CALLSESSION(session);
- saveOnAccept();
- GetallOnline();
- } else {
- const reason = code === RCCallErrorCode.NOT_IN_GROUP ? '当前用户未加入群组' : code;
- proxy.$modal.msgWarning(`呼叫失败,错误原因:${code}`);
- removeVideoEl();
- }
- });
- };
- let endids = ref([]);
-
- // 邀请用户加入当前通话(仅限群组)
- const inviteCall = () => {
- if (Getidinvite.value && Getidinvite.value.length) {
- console.log('点击了邀请', Getidinvite.value, inviteuserIdsList.value);
- let ids = [];
- let GetuserList = [];
- Getidinvite.value.map(item => {
- inviteuserIdsList.value.map(p => {
- if (item == p.id) {
- GetuserList.push(p);
- }
- });
- });
- console.log('点击了邀请', GetuserList);
-
- GetuserList.map(item => {
- item.userTokenList.length &&
- item.userTokenList.map(p => {
- if (p.isOnlion) {
- ids.push(p.registerThridUserId);
- }
- });
- });
-
- endids.value = ids;
-
- let params = {
- groupId: props.ryUser.groupId,
- ids: ids.join(','),
- };
- groupJoinUsers(params).then(res => {
- console.log(res);
-
- console.log('点击了邀请', ids);
- useRongyunStore.callSession.invite(ids).then(({ code }) => {
- console.log(code);
- if (code === 10000) {
- proxy.$modal.msgSuccess(`邀请成功`);
- } else {
- proxy.$modal.msgWarning(`邀请失败,错误原因:${code}`);
- }
- });
- });
- } else {
- proxy.$modal.msgWarning(`请选择邀请人`);
- }
- };
-
- // 批量新增融合通讯通话
- const saveOnAccept = () => {
- console.log('批量新增', props.ryUser);
- paramSave.value.type = useRongyunStore.mediaType;
- paramSave.value.groupId = props.callType == 1 ? -1 : props.ryUser.groupId;
- paramSave.value.answerThridUserIds = props.ryUser.phone || props.ryUser.userIds;
- //接听人单呼就是phone userIds 两个 数据不一样
-
- console.log('paramSave.value', paramSave.value, props.ryUser);
-
- batchAdd(paramSave.value).then(res => {
- if (res.code == 200) {
- console.log('批量新增融合通讯通话');
- }
- });
- };
-
- // 接听后端接口
- const acceptApi = item => {
- console.log('调取了接听接口', item);
-
- let params = {
- promoterThridUserId: appStore.userInfo.phonenumber + '_web', //发起人 当前登陆人
- answerThridUserId: item.phone, //接听人
- updateBy: localStorage.getItem('userNo'), //当前登录用户
- };
- answer(params).then(res => {
- console.log('调取了接听接口', res);
- });
- };
-
- // 挂断融合通讯通话
- const hungupApi = item => {
- console.log('调取了挂断接口', item);
- let params = {
- promoterThridUserId: appStore.userInfo.phonenumber + '_web', //发起人
- answerThridUserId: item.phone, //接听人
- updateBy: localStorage.getItem('userNo'),
- answerType: item.answerType || null,
- };
-
- hangUp(params).then(res => {
- console.log('调取了挂断接口', res);
- });
- };
-
- // 获取所有注册用户
- const GetallOnline = item => {
- inviteuserIdsList.value = [];
- console.log('被邀请人', props.ryUser);
- // let havaUser = [];
-
- // props.ryUser.userIds.map(item => {
- // havaUser.push(item.split('_')[0]);
- // });
-
- // console.log('被邀请人', havaUser);
-
- listrcloudUnitUser().then(res => {
- res.data.map(item => {
- if (item.isOnlion && !props.ryUser.userIds.includes(item.phone)) {
- inviteuserIdsList.value.push(item);
- }
- });
- console.log('被邀请人', inviteuserIdsList.value, props.ryUser.userIds);
- });
- };
-
- /**
- * video 视图渲染
- */
- const appendVideoEl = async track => {
- const uid = track.getUserId();
- let params = {
- phone: uid.split('_')[0],
- };
- let mediaType = useRongyunStore.mediaType;
- let data = await listrcloudUnitUser(params);
- console.log('datar', data);
- if (data.code == 200) {
- const container = getDom('#videoView');
- const node = document.createElement('div');
- node.setAttribute('id', `video-${uid}`);
- if (allData.idList.findIndex(i => i == `video-${uid}`) == -1) {
- allData.idList.push(`video-${uid}`);
- }
- let videoTpl = null;
- if (mediaType == 1) {
- videoTpl = `<span class="video-user-id">${data.data[0].name}: ${uid} </span><span class="video-media-type"></span><video id="${uid}"></video>`;
- } else {
- videoTpl = `<span class="video-user-id">${data.data[0].name}: ${uid} </span><video id="${uid}"></video>`;
- }
- node.innerHTML = videoTpl;
- node.classList.add('video-item');
-
- let length = allData.userList.length + endids.value.length;
- console.log('什么东西xxxxx', allData.userId, uid, props.callType, length);
-
- // 根据人数判断渲染不同的视图样式
- if (allData.userId + '_web' == uid && length <= 2) {
- // 判断是当前用户 人数小于等于2人时给予单独样式
- node.classList.add('first-child');
- }
- if (length > 2 && length <= 4) {
- node.classList.add('video-item-4');
- }
- if (length > 4 && length <= 8) {
- node.classList.add('video-item-8');
- }
- if (track.isAudioTrack()) {
- if (mediaType == 1) {
- container.appendChild(node);
- }
- track.play();
- } else {
- container.appendChild(node);
- const videoEl = document.getElementById(`${track.getUserId()}`);
- track.play(videoEl);
- }
- const targetElements = document.querySelectorAll('.video-item');
- console.log('targetElements', targetElements);
-
- targetElements.forEach(target => {
- target.classList.remove('video-item-4');
- target.classList.remove('video-item-8');
-
- if (length > 2 && length <= 4) {
- target.classList.add('video-item-4');
- }
- if (length > 4 && length <= 8) {
- target.classList.add('video-item-8');
- }
- });
- }
- };
-
- /**
- * 挂断当前 callSession
- */
- const hungup = () => {
- // console.log("1231------------------------", useRongyunStore.callSession);
- useRongyunStore.callSession.hungup().then(({ code }) => {
- if (code === 10000) {
- // proxy.$modal.msgWarning("挂断成功");
- getDom('#call').style.display = 'block';
- getDom('#hunup').style.display = 'none';
- getDom('#invite').style.display = 'none';
- getDom('#inviteList').style.visibility = 'hidden';
-
- removeVideoEl();
- restore();
- } else {
- proxy.$modal.msgWarning(`挂断失败,错误原因:${code}`);
- }
-
- allData.userList.forEach(element => {
- element.typeFont = '已挂断';
- element.ClassType = 3;
- element.answerType = code;
- hungupApi(element);
- });
- });
- };
- const removeVideoEl = () => {
- getDom('#videoView').innerHTML = '';
- getDom('#videoView').style = '';
- getDom('#call').style.display = 'block';
- getDom('#hunup').style.display = 'none';
- getDom('#invite').style.display = 'none';
- getDom('#inviteList').style.visibility = 'hidden';
- allData.idList = [];
- };
- const close = () => {
- if (useRongyunStore.callSession != null) {
- hungup();
- }
- restore();
- };
- // 输出组件的方法,让外部组件可以调用
- defineExpose({
- close,
- });
-
- // 还原
- const restore = () => {
- let style = { width: '934px' };
- getDom('#rong-action').style.display = 'block';
- const dom = getDom('#RongYun');
- const dom1 = getDom('#videoView');
- getDom('#videoView').style = '';
- allData.idList.forEach((item, index) => {
- let videodom = getDom(`#${item}`);
- if (videodom) {
- videodom.style = null;
- }
- const titledom = getDom(`#${item} .video-user-id`);
- if (titledom) {
- titledom.style = null;
- }
- });
- };
- </script>
- <style lang="scss">
- @import '@/views/RongyunCommunication/rongyuncss/index.scss';
- .rong-container {
- padding: 0 20px;
- display: flex;
- width: 100%;
- height: 100%;
-
- .rong-action {
- width: 35%;
- display: flex;
- flex-direction: column;
- margin-right: 20px;
-
- #inviteList {
- visibility: hidden;
- }
-
- .textDiv {
- min-height: 38px;
- line-height: 38px;
- display: flex;
- align-items: center;
- :deep(.el-radio) {
- color: #fff;
- }
- .dote {
- display: block;
- margin-right: 20px;
- width: 10px;
- height: 10px;
- background: #58fdff;
- border-radius: 10px;
- }
-
- .text {
- display: flex;
- flex: 1;
- justify-content: space-between;
- font-size: 16px;
- font-family: Alibaba PuHuiTi;
- font-weight: 500;
- color: #81b6d4;
- }
- .Rightvalue {
- max-width: 160px;
- overflow: hidden; //溢出隐藏
- text-overflow: ellipsis; //超出显示省略号
- white-space: nowrap; //强制文本在一行内显示
- color: #fff;
- }
- }
-
- .textDiv2 {
- // min-height: 45px;
- // line-height: 45px;
-
- .dote {
- display: block;
- margin-right: 20px;
- width: 10px;
- height: 10px;
- background: #58fdff;
- border-radius: 10px;
- }
-
- .textTitle {
- height: 40px;
- line-height: 40px;
- display: flex;
- align-items: center;
- font-size: 16px;
- font-weight: 500;
- color: #81b6d4;
- }
-
- .userList {
- max-height: 220px;
- overflow-y: auto;
- .user {
- // background-color: #14306a;
- // padding: 0 10px;
- // margin-left: 20px;
- // border-bottom: 1px solid #0a0a0a;
- display: flex;
- justify-content: space-between;
- background: #093a73;
- align-items: center;
- border-radius: 1px;
- padding: 2px 8px;
- }
- .username {
- min-width: 52px;
- font-weight: 500;
- color: #13bfff;
- }
- .userphone {
- font-weight: bold;
- color: #ffffff;
- }
- .userInfoClass {
- display: flex;
- align-items: center;
- }
- .ceninfoBox {
- padding-left: 5px;
- .userdept {
- max-width: 140px;
- font-size: 12px;
- text-align: center;
- }
- }
- }
- }
-
- .rong-login-box {
- // margin-left: 20px;
- display: flex;
- width: 300px;
- height: 40px;
- align-items: center;
- margin-top: 50px;
- .btn {
- margin-right: 20px;
- background: #14306a;
- border-radius: 4px;
- padding: 6px 10px;
- font-size: 16px;
- font-family: Alibaba PuHuiTi;
- font-weight: 400;
- display: flex;
- justify-content: space-around;
- align-items: center;
- color: #fff;
- margin: 0 auto;
- cursor: pointer;
- img {
- width: 18px;
- height: 18px;
- }
- }
- .callBtn {
- background: #67c23a;
- }
- .hangBtn {
- background: #ff3a5a;
- }
-
- .inviteBtn {
- background: #158bd2;
- }
-
- .hunupBtn {
- display: none;
- }
-
- .acceptBtn {
- display: none;
- }
- }
- }
-
- .rong-video-box {
- width: 70%;
- height: 600px;
- display: flex;
- flex-wrap: wrap;
- overflow: auto;
- position: relative;
-
- .video-item {
- box-sizing: border-box;
- width: 100%;
- height: calc(100% - 10px);
- position: relative;
-
- .video-user-id {
- position: absolute;
- top: 5px;
- padding: 0 5px;
- border-radius: 2px;
- z-index: 100;
- font-size: 14px;
- color: #58fdff;
- display: inline-block;
- width: 100%;
- text-align: center;
- }
-
- .video-media-type {
- position: absolute;
- top: 30px;
- left: 0;
- display: block;
- width: 100%;
- height: calc(100% - 30px);
- background: url('@/assets/images/rongYunImg/yuyin_bg.png') no-repeat;
- background-size: 100% 100%;
- }
-
- video {
- width: 100%;
- height: 100%;
- }
- }
-
- .video-item-4 {
- width: 50%;
- height: calc(50% - 10px);
- }
-
- .video-item-8 {
- width: 25%;
- height: calc(50% - 10px);
- }
-
- .first-child {
- position: absolute;
- right: 0px;
- top: 0;
- width: 40%;
- height: 30%;
- z-index: 999;
- }
- }
- }
-
- .eloption {
- z-index: 20000 !important;
- }
- </style>
-
- <style lang="scss" scoped>
- .RongYun {
- width: 100%;
- height: calc(100% - 40px);
- position: relative;
-
- .closeIcon {
- position: absolute;
- right: 0px;
- top: -30px;
-
- &:hover {
- color: chocolate;
- }
- }
- }
- </style>