You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
matrix-chat/src/components/topBanner.vue

73 lines
1.3 KiB
Vue

4 years ago
<template>
<div class="topBanner">
<div>
<icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
<icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
4 years ago
<div id="container">
<div id="chatName">{{roomInfo.name}}</div>
<div id="users">{{roomInfo.user.length}} members</div>
4 years ago
</div>
<icon class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
4 years ago
</div>
</div>
</template>
<script>
import icon from '@/components/icon.vue';
export default {
name: "topBanner",
components:{
icon
},
data(){
return {
roomInfo: {
name: "open chat",
user: []
}
}
}
}
4 years ago
</script>
<style scoped>
.topBanner{
4 years ago
position: absolute;
width: 100%;
height: 3rem;
background-color: #1d1d1d;
box-shadow: 0 3px 10px #111;
}
.smallIcon{
top: 0.25rem;
background-color: #2d2d2d;
height: 2.5rem;
width: 2.5rem;
4 years ago
}
#icon-arrow{
position: absolute;
left: 1rem;
4 years ago
}
#picTop{
position: absolute;
left: 4rem;
background-color: #42a7b9;
4 years ago
}
#icon-menu{
position: absolute;
right: 1rem;
background-color: #2d2d2d;
4 years ago
}
#container{
position: absolute;
top: 0.55rem;
left: 7.5rem;
4 years ago
}
#chatName{
font-size: 1rem;
color: #ededed;
4 years ago
}
#users{
font-size: 0.75rem;
color: #9c9c9c;
}
4 years ago
</style>