聊天界面框架

pull/30/head
陶士涵 5 years ago
parent a4a451a8b3
commit c2fd9ebad1

@ -12,25 +12,42 @@
<style> <style>
html, body {height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;} html, body {height: 100%;padding: 0;margin: 0;background-color: #f5f5f5;}
.el-row{width:100%} .el-row{width:100%}
.sw-bg{background: #fff;border: solid 1px #e6e6e6;boder-top:none;padding:5px 10px;}
.chatContext{background: #fff}
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<template> <template>
<el-container v-loading.fullscreen.lock="fullscreenLoading">
<el-row :gutter="5"> <el-row :gutter="5">
<el-col :span="6"> <el-col :span="6">
<el-menu> <el-menu>
<el-menu-item> <el-menu-item>
<i class="el-icon-edit"></i> <i class="el-icon-user"></i>
<span slot="title">访客1112</span> <span slot="title">访客1112</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :span="12">聊天主界面</el-col> <el-col :span="12">
<el-col :span="6">常用功能</el-col> <div class="sw-bg">
<el-row :gutter="2">
<el-col :span="4"><el-avatar :size="60" :src="circleUrl"></el-avatar></el-col>
<el-col :span="20">内容</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="20">内容</el-col>
<el-col :span="4"><el-avatar :size="60" :src="circleUrl"></el-avatar></el-col>
</el-row>
<el-input type="textarea"></el-input>
<el-button type="primary">发送</el-button>
</div>
</el-col>
<el-col :span="6">
<div class="sw-bg">
sss
</div>
</el-col>
</el-row> </el-row>
</el-container>
</template> </template>
</div> </div>
</body> </body>

Loading…
Cancel
Save