95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div class="callingNotification_content">
|
||
|
|
<div class="left">
|
||
|
|
<div class="icon">
|
||
|
|
<img :src="currentIcon" width="32" height="32" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<div class="name">
|
||
|
|
{{ getName }}
|
||
|
|
</div>
|
||
|
|
<div class="fixed">
|
||
|
|
<div class="icon">
|
||
|
|
<img
|
||
|
|
v-if="call_mode === 0"
|
||
|
|
src="@/assets/images/webPuc/svgs/phone_off_small.svg"
|
||
|
|
width="12"
|
||
|
|
height="12"
|
||
|
|
/>
|
||
|
|
<img
|
||
|
|
v-if="call_mode > 0"
|
||
|
|
src="@/assets/images/webPuc/svgs/video_off_small.svg"
|
||
|
|
width="12"
|
||
|
|
height="9"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="text">
|
||
|
|
{{ calling }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed, toRef } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
callInfo: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
calling: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
getName: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const callInfo = toRef(props, 'callInfo');
|
||
|
|
const calling = toRef(props, 'calling');
|
||
|
|
const getName = toRef(props, 'getName');
|
||
|
|
|
||
|
|
const {
|
||
|
|
attribute: { call_mode },
|
||
|
|
} = callInfo.value;
|
||
|
|
|
||
|
|
const currentIcon = computed(() => {
|
||
|
|
return require('@/assets/images/webPuc/svgs/avatar_call_online_small.svg');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.callingNotification_content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
.left {
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
.right {
|
||
|
|
.name {
|
||
|
|
margin-bottom: 5px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.fixed {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.icon {
|
||
|
|
margin-right: 5px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.text {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--color-text-2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|