zyronon
4 years ago
3 changed files with 288 additions and 246 deletions
@ -0,0 +1,283 @@ |
|||||||
|
<template> |
||||||
|
<div class="call-float" |
||||||
|
v-if="call.isSmall" |
||||||
|
:style="callFloatStyle" |
||||||
|
@touchmove="touchmove" |
||||||
|
@touchend="touchend" |
||||||
|
@click="call.isSmall = false"> |
||||||
|
<img src="@/assets/img/icon/message/chat/call-float.png" alt=""> |
||||||
|
<span>呼叫中</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<transition name="scale"> |
||||||
|
<div class="audio-call" |
||||||
|
:style="call.isSmall ? callFloatStyle : {zIndex:10}" |
||||||
|
:class="call.isSmall?'small':''" |
||||||
|
v-if="call.isShowAudioCall"> |
||||||
|
<div class="float"> |
||||||
|
<div class="header"> |
||||||
|
<div class="left"> |
||||||
|
<img @click="call.isSmall = true" src="@/assets/img/icon/message/chat/narrow.png" alt=""> |
||||||
|
</div> |
||||||
|
<span class="center">等待对方接听...</span> |
||||||
|
<div class="right"> |
||||||
|
<div class="option"> |
||||||
|
<img src="@/assets/img/icon/message/chat/disabled-camera.png" alt=""> |
||||||
|
<span>摄像头</span> |
||||||
|
</div> |
||||||
|
<div class="option"> |
||||||
|
<img src="@/assets/img/icon/message/chat/able-volume.png" alt=""> |
||||||
|
<span>免提</span> |
||||||
|
</div> |
||||||
|
<div class="option"> |
||||||
|
<back mode="light" img="back" class="shrink"/> |
||||||
|
<!-- <img src="@/assets/img/icon/message/chat/narrow.png" alt="">--> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img src="@/assets/img/icon/avatar/2.png" alt="" class="big-avatar"> |
||||||
|
<div class="footer"> |
||||||
|
<img @click="call.isShowAudioCall = false" src="@/assets/img/icon/message/chat/call-end.png"> |
||||||
|
<span>挂断</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</transition> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import {inject} from "vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "Call", |
||||||
|
components: {}, |
||||||
|
props: { |
||||||
|
modelValue: false |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
mitt: inject('mitt'), |
||||||
|
call: { |
||||||
|
callFloatTransitionTime: 300, |
||||||
|
callFloatLeft: 15, |
||||||
|
callFloatTop: 100, |
||||||
|
isSmall: false, |
||||||
|
isShowAudioCall: false, |
||||||
|
}, |
||||||
|
height: 0, |
||||||
|
width: 0, |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
callFloatStyle() { |
||||||
|
return { |
||||||
|
'transition-duration': this.call.callFloatTransitionTime + 'ms', |
||||||
|
left: this.call.callFloatLeft + 'px', |
||||||
|
top: this.call.callFloatTop + 'px', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
touchmove(e) { |
||||||
|
this.call.callFloatTransitionTime = 0 |
||||||
|
this.call.callFloatLeft = e.touches[0].pageX - 35 |
||||||
|
this.call.callFloatTop = e.touches[0].pageY - 40 |
||||||
|
}, |
||||||
|
touchend(e) { |
||||||
|
this.call.callFloatTransitionTime = 300 |
||||||
|
if (this.call.callFloatLeft < this.width / 2) { |
||||||
|
this.call.callFloatLeft = 15 |
||||||
|
} else { |
||||||
|
this.call.callFloatLeft = this.width - 15 - 70 |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.mitt.on('showAudioCall', () => { |
||||||
|
if (this.call.isShowAudioCall) { |
||||||
|
this.call.isSmall = false |
||||||
|
} else { |
||||||
|
this.call.isShowAudioCall = true |
||||||
|
} |
||||||
|
}) |
||||||
|
this.height = document.body.clientHeight |
||||||
|
this.width = document.body.clientWidth |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.scale-enter-active, |
||||||
|
.scale-leave-active { |
||||||
|
transition: transform .2s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.scale-enter-from, |
||||||
|
.scale-leave-to { |
||||||
|
transform: scale(0); |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "@/assets/less/index"; |
||||||
|
|
||||||
|
.call-float { |
||||||
|
transition-property: all; |
||||||
|
z-index: 9; |
||||||
|
width: 7rem; |
||||||
|
height: 9rem; |
||||||
|
position: fixed; |
||||||
|
top: 20vh; |
||||||
|
left: @padding-page; |
||||||
|
background: white; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
border-radius: .6rem; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: column; |
||||||
|
color: #14BF5F; |
||||||
|
font-size: 1.2rem; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 3rem; |
||||||
|
margin-bottom: .2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.audio-call { |
||||||
|
color: white; |
||||||
|
position: fixed; |
||||||
|
z-index: 8; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
background: linear-gradient(to bottom, #262626, black); |
||||||
|
transition: all .3s; |
||||||
|
font-size: 1.2rem; |
||||||
|
|
||||||
|
.float { |
||||||
|
transition: all .3s; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
span { |
||||||
|
transition: all .3s; |
||||||
|
} |
||||||
|
|
||||||
|
> .header { |
||||||
|
transition: all .3s; |
||||||
|
width: 100%; |
||||||
|
padding: @padding-page; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.left { |
||||||
|
width: 12%; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 50%; |
||||||
|
max-width: 2.4rem; |
||||||
|
max-height: 2.4rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.center { |
||||||
|
width: 50%; |
||||||
|
overflow: hidden; |
||||||
|
text-align: center; |
||||||
|
word-break: keep-all; |
||||||
|
font-size: 1.4rem; |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
width: 12%; |
||||||
|
max-width: 4rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 50%; |
||||||
|
max-width: 2.4rem; |
||||||
|
max-height: 2.4rem; |
||||||
|
} |
||||||
|
|
||||||
|
.option { |
||||||
|
margin-bottom: 55%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
span { |
||||||
|
word-break: keep-all; |
||||||
|
margin-top: 20%; |
||||||
|
font-size: 1.2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.shrink { |
||||||
|
transform: rotate(90deg) scale(.6) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.big-avatar { |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50%; |
||||||
|
transform: translate3d(-50%, -50%, 0); |
||||||
|
width: 25%; |
||||||
|
max-width: 10rem; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
font-size: 1.2rem; |
||||||
|
margin-bottom: 10%; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 15%; |
||||||
|
max-width: 5rem; |
||||||
|
margin-bottom: 1%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.small { |
||||||
|
width: 7rem; |
||||||
|
height: 9rem; |
||||||
|
position: fixed; |
||||||
|
top: 20vh; |
||||||
|
left: @padding-page; |
||||||
|
border-radius: .6rem; |
||||||
|
|
||||||
|
.float { |
||||||
|
> .header { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
span { |
||||||
|
transform: scale(.2); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue