TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

scss

Browse Source
This commit is contained in:
Jason.Chen
2022-02-08 09:42:48 +08:00
parent ab958d0777
commit 85f9a091c9
8 changed files with 260 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
pages/im/private/call.nvue
View File

@@ -1,5 +1,5 @@
<template>
<view class="call-page">
<view class="call">
<view class="video">
<RongCloud-Call-RCUniCallView ref="bigVideoView" :style="{width:windowWidth+'px',height:windowHeight+'px'}"
class="bigVideoView">
@@ -9,9 +9,11 @@
</view>
<view class="status" v-if="!connected || mediaType == 0">
<view class="call-user">
<u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96" bgColor="#fff" />
<u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square" :text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor />
<view class="remote">
<u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96"
bgColor="#fff" />
<u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square"
:text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor />
<view><text class="nickname">{{userInfo.name}}</text></view>
<view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
<view v-if="connected"><text class="mediaType">已接通</text></view>
@@ -163,85 +165,88 @@
}
</script>
<style scoped>
.call-page {
<style scoped lang="scss">
.call {
display: flex;
flex: 1;
flex-direction: column;
position: relative;
}
.bigVideoView {
background: #000;
}
.video {
.bigVideoView {
background: #000;
}
.smallVideoView {
background: blue;
position: absolute;
right: 100rpx;
top: 100rpx;
width: 180rpx;
height: 320rpx;
}
.smallVideoView {
background: blue;
position: absolute;
right: 100rpx;
top: 100rpx;
width: 180rpx;
height: 320rpx;
}
}
.buttons {
position: fixed;
bottom: 100rpx;
width: 750rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.status {
flex: 1;
background: #666;
width: 750rpx;
position: fixed;
bottom: 0;
top: 0;
.btn {
align-items: center;
}
.remote {
flex: 1;
width: 750rpx;
display: flex;
align-items: center;
top: 300rpx;
.icon {
background: #34CE98;
width: 132rpx;
height: 132rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.mediaType {
font-size: 32rpx;
color: #aaa;
}
.btn .text {
margin-top: 16rpx;
color: #FFFFFF;
font-size: 32rpx;
}
.nickname {
margin: 30rpx;
font-size: 44rpx;
color: #ffffff;
}
}
}
.icon.hangup {
background: #dd524d;
}
.buttons {
position: fixed;
bottom: 100rpx;
width: 750rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.status {
flex: 1;
background: #666;
width: 750rpx;
position: fixed;
bottom: 0;
top: 0;
}
.call-user {
flex: 1;
width: 750rpx;
display: flex;
align-items: center;
top: 300rpx;
}
.btn {
align-items: center;
.mediaType {
font-size: 32rpx;
color: #aaa;
}
&.hangup {
background: $text-price;
}
.nickname {
margin: 30rpx;
font-size: 44rpx;
color: #ffffff;
.icon {
background: $main-color;
width: 132rpx;
height: 132rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.text {
margin-top: 16rpx;
color: #FFFFFF;
font-size: 32rpx;
}
}
}
</style>