diff --git a/src/views/service/index.vue b/src/views/service/index.vue
index 99677c8..96cab0b 100644
--- a/src/views/service/index.vue
+++ b/src/views/service/index.vue
@@ -1,6 +1,42 @@
 <template>
-  <div>
-    <button @click="send">发消息</button>
+  <div class="app-container" style="background-color:#e6e6e6;">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <div class="box_l">
+          <div class="user_item" v-for="item in 15" :key="item">
+            <div class="user_item_l">
+              <el-avatar
+                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+              ></el-avatar>
+              <div class="info">
+                <div class="phone">15679846126</div>
+                <div class="company">科大讯飞股份有限公司</div>
+              </div>
+            </div>
+            <div class="user_item_r">
+              14:19
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="18">
+        <div class="box_r">
+          <div class="content">
+            123
+          </div>
+          <div class="dialogue">
+            <el-input
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 4 }"
+              placeholder="请输入内容"
+              v-model="textarea"
+            >
+            </el-input>
+            <button @click="send">确定</button>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -8,6 +44,7 @@
 export default {
   data() {
     return {
+      textarea: '',
       path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
       socket: ''
     };
@@ -55,4 +92,67 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.app-container {
+  height: calc(100vh - 84px);
+  overflow: auto;
+  .el-row {
+    height: 100%;
+    .el-col {
+      height: 100%;
+      overflow: auto;
+      .box_l {
+        background-color: #fff;
+        padding: 10px;
+        min-height: 100%;
+        .user_item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 10px 0;
+          border-bottom: 1px solid #ccc;
+          .user_item_l {
+            display: flex;
+            align-items: center;
+            .info {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              height: 40px;
+              margin-left: 10px;
+              .phone {
+              }
+              .company {
+                font-size: 12px;
+              }
+            }
+          }
+          .user_item_r {
+            font-size: 12px;
+          }
+        }
+      }
+      .box_r {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        background-color: #fff;
+        padding: 10px 20px;
+        min-height: 100%;
+        .content {
+          flex: 1;
+        }
+        .dialogue {
+          height: 150px;
+          .el-input {
+            height: 100%;
+            /deep/.el-input--medium .el-input__inner {
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>