Skip to content

W
weixin-vue
Commit 005e1410 authored by Paul0523's avatar Paul0523
Browse files
Options

完成基本的界面布局功能

parent 7039465a
Show whitespace changes
Inline Side-by-side
Showing with 29 additions and 16 deletions
index.html
View file @ 005e1410
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<script src="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.js"></script> <script src="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.js"></script>
<link href="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.css" rel="stylesheet">
</head> </head>
<body style="height: 100%; margin: 0px; background: #F9FAFC;"> <body style="height: 100%; margin: 0px; background: #F9FAFC; overflow: hidden; background: #f5f5f5 url(/static/bg.jpg) no-repeat center; background-size: cover;">
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
......
src/components/Ele.vue
View file @ 005e1410
<template> <template>
<el-row class="tac" style="height: 100%; width: 1000px; margin: 0 auto;"> <el-row class="tac" style="height: 600px; width: 800px; margin: 50px auto;">
<el-col :span="5" style=" background: #2E3238; height: 100%; position:relative; color: white;"> <el-col :span="6" style=" background: #2E3238; height: 100%; position:relative; color: white;">
<div style="height: 100px;">我的信息</div> <div style="height: 70px; line-height: 70px; text-align: left; padding-left: 20px;"><img :src="'/back/getContactIcon?userName=' + myAcount.userName" style="width: 40px; height: 40px; border-radius: 4px; vertical-align: middle;"/> <p style="margin: 0 0 0 10px; display: inline-block;">{{myAcount.nickName}}</p></div>
<div style="height: 50px;">搜索：<input type="text" v-model="filterContacts"/></div> <div style="height: 40px; line-height: 40px;"><input type="text" style="border-radius: 4px; outline: none; padding: 0 10px; border: solid 1px #3a3a3a; font-size: 12px; color: #fff; height: 30px; line-height: 30px; background-color: #26292E;" placeholder="搜索" v-model="filterContacts"/></div>
<div class="wrapper" style="position: absolute; top: 150px; bottom: 0px; width: 100%;"> <div class="wrapper" style="position: absolute; top: 120px; bottom: 0px; width: 100%;">
<el-menu id="contacts" style="width: 100%; height: 100%; background: #2E3238;" :default-active="defaultActiveIndex" class="el-menu-vertical-demo scrollbar-macosx"> <el-menu id="contacts" style="width: 100%; height: 100%; background: #2E3238;" :default-active="defaultActiveIndex" class="el-menu-vertical-demo scrollbar-macosx">
<el-menu-item v-bind:index="index.toString()" v-for="(item, index) in items" v-bind:key="index" @click="clickItem(item.userName)"> <el-menu-item v-bind:index="index.toString()" v-for="(item, index) in items" v-bind:key="index" @click="clickItem(item.userName)">
<el-badge v-bind:value="item.msgCount" class="item" :max="99"> <el-badge v-bind:value="item.msgCount" class="item" style="overflow: hidden;" :max="99">
<i class="el-icon-menu"/>{{item.remarkName? item.remarkName:item.nickName}} <img :src="'/back/getContactIcon?userName=' + item.userName" style="height: 30px; width: 30px; border-radius: 3px; vertical-align: middle;"/><p style="display: inline-block; margin: 0 0 0 10px;">{{item.remarkName? item.remarkName:item.nickName}}</p>
</el-badge> </el-badge>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</div> </div>
</el-col> </el-col>
<el-col :span="19" style="height: 100%; position: relative; background: #eeeeee;"> <el-col :span="18" style="height: 100%; position: relative; background: #eeeeee;">
<div style="height: 30px; background: #EEEEEE; margin: 0 19px; padding: 10px 0; border-bottom: 1px solid #d6d6d6;">{{title}}</div> <div style="height: 30px; background: #EEEEEE; margin: 0 19px; padding: 10px 0; border-bottom: 1px solid #d6d6d6;">{{title}}</div>
<div class="wrapper" style="position: absolute; bottom: 200px; top: 50px; width: 100%;"> <div class="wrapper" style="position: absolute; bottom: 200px; top: 50px; width: 100%;">
<div id="chatWin" style="width: 100%; height: 100%; background: #324057;" class="scrollbar-macosx"> <div id="chatWin" style="width: 100%; height: 100%;" class="scrollbar-macosx">
<chat-item-r v-bind:message="item" v-for="(item, index) in chatMsgs" v-bind:key="index"></chat-item-r> <chat-item-r v-bind:message="item" v-for="(item, index) in chatMsgs" v-bind:key="index"></chat-item-r>
</div> </div>
</div> </div>
<div style="bottom: 0px; height: 200px; background: #99A9BF; position: absolute; width: 100%;"> <div style="bottom: 0px; height: 200px; background: #EEEEEE; position: absolute; width: 100%;">
<div style="width: 100%; height: 150px;"> <div style="width: 100%; height: 150px; background: white;">
<textarea style="width: 100%; height: 100%; outline: none; border: none; resize: none;" v-model="txAreaMsg" @keyup.enter.ctrl="send"> <textarea style="box-sizing: border-box; width: 100%; height: 100%; outline: none; border: none; resize: none; padding: 10px;" v-model="txAreaMsg" @keyup.enter.ctrl="send">
</textarea> </textarea>
</div> </div>
<div style="position: absolute; height: 50px; bottom: 0px; background: #13CE66; width: 100%; line-height: 50px; text-align: right;"> <div style="position: absolute; height: 50px; bottom: 0px; width: 100%; line-height: 50px; text-align: right;">
<el-button type="info" style="margin-right: 30px;" @click="send">发送</el-button> <span style="display: inline-block; margin-right: 10px; color: #a4a4a4;">按下ctrl+enter发送</span><el-button type="info" style="margin-right: 30px;" @click="send">发送</el-button>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -47,6 +47,11 @@ ...@@ -47,6 +47,11 @@
border-top: #000 1px solid; border-top: #000 1px solid;
} }
.el-badge {
text-align: left;
width: 100%;
}
.wrapper>div { .wrapper>div {
height: 100%; height: 100%;
} }
...@@ -76,6 +81,7 @@ ...@@ -76,6 +81,7 @@
}, },
data : function () { data : function () {
return { return {
myAcount : {},
contactsMap : {}, //载入的联系人 contactsMap : {}, //载入的联系人
chatMsgs : [], //聊天窗口信息 chatMsgs : [], //聊天窗口信息
items : [], //联系人列表 items : [], //联系人列表
...@@ -104,10 +110,11 @@ ...@@ -104,10 +110,11 @@
} }
//初始化滚动条 //初始化滚动条
jQuery('.scrollbar-macosx').scrollbar(); jQuery('.scrollbar-macosx').scrollbar();
this.loadMyAcount()
//加载联系人信息 //加载联系人信息
this.loadContacts() this.loadContacts()
//获取消息 //获取消息
this.loadMessage(); this.loadMessage()
}, },
methods: { methods: {
clearActiveContact() { clearActiveContact() {
...@@ -262,6 +269,12 @@ ...@@ -262,6 +269,12 @@
}) })
setTimeout(this.loadMessage(), 0); setTimeout(this.loadMessage(), 0);
}) })
},
loadMyAcount() {
axios.get('/back/getMyAcount')
.then(response => {
this.myAcount = response.data
})
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment