Home V0.1
This commit is contained in:
techcrafter
parent
cfa47f5ddc
commit
1a28879299
@ -25,6 +25,69 @@
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">Alban</div>
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">Alban</div>
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">Alban</div>
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">Alban</div>
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">Alban</div>
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div><div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">Alban</div>
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div><div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">Alban</div>
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div><div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">Alban</div>
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div><div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="userName">Alban</div>
|
||||
<div class="status">Online</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
94
src/components/room.vue
Normal file
94
src/components/room.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div id="chatInformation">
|
||||
<div class="box">
|
||||
<div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="roomName">{{roomName}}</div>
|
||||
<div class="status">{{onlineUsers}} Online</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentBox">
|
||||
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
|
||||
<div class="information">
|
||||
<div class="roomName">Open Chatroom 2</div>
|
||||
<div class="status">3 Online</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "room",
|
||||
props: {
|
||||
roomName: String,
|
||||
onlineUsers: String
|
||||
},
|
||||
methods:{
|
||||
showChatInfo(){
|
||||
document.getElementById("chatInformation").style.display = 'block';
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
roomInfo: {
|
||||
name: "open chat",
|
||||
user: []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#chatInformation{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
top: 3rem;
|
||||
width: 100%;
|
||||
height: calc(100% - 3rem);
|
||||
background-color: #1d1d1d;
|
||||
box-shadow: 6px 6px 20px #111;
|
||||
text-align: center;
|
||||
}
|
||||
.box{
|
||||
position: relative;
|
||||
background-color: #2d2d2d;
|
||||
overflow: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
.contentBox{
|
||||
margin-top: 0.2rem;
|
||||
height: 3.2rem;
|
||||
border-bottom: 2px solid #9c9c9c ;
|
||||
padding: 0.2rem;
|
||||
max-height: 48px;
|
||||
}
|
||||
.picBox{
|
||||
text-align: center;
|
||||
background-color: #00BCD4;
|
||||
width: 3rem;
|
||||
height:3rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.picPlaceholder{
|
||||
padding-top: 0.001rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.information{
|
||||
position: relative;
|
||||
text-align: left;
|
||||
margin-top: -2.4rem;
|
||||
margin-left: 3.7rem;
|
||||
}
|
||||
.roomName{
|
||||
color: white;
|
||||
}
|
||||
.status{
|
||||
font-size: 0.8rem;
|
||||
color: #9c9c9c;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="topBanner">
|
||||
<div>
|
||||
<icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
|
||||
<router-link to="/login"><icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /></router-link>
|
||||
<icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
|
||||
<div id="container">
|
||||
<div id="chatName">{{roomInfo.name}}</div>
|
||||
|
||||
71
src/components/topBannerHome.vue
Normal file
71
src/components/topBannerHome.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="topBannerHome">
|
||||
<div>
|
||||
<router-link to="/login"><icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /></router-link>
|
||||
<div id="container">
|
||||
<div id="chatName">{{roomInfo.name}}</div>
|
||||
</div>
|
||||
<icon v-on:click.native="showChatInfo()" class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import icon from '@/components/icon.vue';
|
||||
|
||||
export default {
|
||||
name: "topBannerHome",
|
||||
components:{
|
||||
icon
|
||||
},
|
||||
methods:{
|
||||
showChatInfo(){
|
||||
document.getElementById("chatInformation").style.display = 'block';
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
roomInfo: {
|
||||
name: "open chat",
|
||||
user: []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.topBannerHome{
|
||||
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;
|
||||
}
|
||||
#icon-arrow{
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
}
|
||||
#icon-menu{
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
#container{
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 4.2rem;
|
||||
background-color: #2d2d2d;
|
||||
border-radius: 2rem;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
}
|
||||
#chatName{
|
||||
font-size: 1.8rem;
|
||||
color: #ededed;
|
||||
}
|
||||
</style>
|
||||
@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
|
||||
import App from './App.vue'
|
||||
import login from './views/login.vue'
|
||||
import chat from './views/chat.vue'
|
||||
import home from './views/home.vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(VueRouter)
|
||||
@ -23,6 +24,11 @@ const router = new VueRouter({
|
||||
path: '/chat',
|
||||
name: 'chat',
|
||||
component: chat
|
||||
},
|
||||
{
|
||||
path: '/room',
|
||||
name: 'room',
|
||||
component: home
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@ -35,8 +35,8 @@
|
||||
import message from '@/components/message.vue';
|
||||
import messageReceive from '@/components/messageReceive.vue';
|
||||
import newMessage from '@/components/newMessage.vue';
|
||||
import topBanner from "@/components/topBanner";
|
||||
import chatInformation from "@/components/chatInformation";
|
||||
import topBanner from "@/components/topBanner.vue";
|
||||
import chatInformation from "@/components/chatInformation.vue";
|
||||
|
||||
export default {
|
||||
name: 'chat',
|
||||
|
||||
27
src/views/home.vue
Normal file
27
src/views/home.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<topBannerHome />
|
||||
<room roomName="Test" onlineUsers="5" />
|
||||
<room roomName="Test2" onlineUsers="5" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import topBannerHome from '@/components/topBannerHome'
|
||||
import room from '@/components/room'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
topBannerHome,
|
||||
room
|
||||
},
|
||||
props:{
|
||||
roomName: String,
|
||||
onlineUsers: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user