diff --git a/src/components/LeftCallBar.vue b/src/components/LeftCallBar.vue
deleted file mode 100644
index 96d5857..0000000
--- a/src/components/LeftCallBar.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
- * @Description:侧边语音呼叫栏
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-
-</template>
-
-<script>
-  export default {
-    name: 'LeftCallBar'
-  }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-
-</style>

diff --git a/src/components/LeftCallBar.vue b/src/components/LeftCallBar.vue
deleted file mode 100644
index 96d5857..0000000
--- a/src/components/LeftCallBar.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
- * @Description:侧边语音呼叫栏
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-
-</template>
-
-<script>
-  export default {
-    name: 'LeftCallBar'
-  }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-
-</style>
diff --git a/src/components/cti/LeftCallBar.vue b/src/components/cti/LeftCallBar.vue
new file mode 100644
index 0000000..b4df770
--- /dev/null
+++ b/src/components/cti/LeftCallBar.vue
@@ -0,0 +1,85 @@
+<!--
+ * @Description:侧边语音呼叫栏
+ * @Author: 王晓颖
+ * @Date:2020-05-02 13:29:43
+ -->
+<template>
+  <div style="display:inline-block;margin-right:10px;">
+    <cti-btn :disabled="!isInCall" icon="guaji" @click="hangup">挂机</cti-btn>
+    <cti-btn v-show="holdStatus==false" :disabled="!isInCall" icon="baochi" @click="hold">保持</cti-btn>
+    <cti-btn v-show="holdStatus==true" :disabled="!isInCall" icon="baochi" @click="unhold">继续</cti-btn>
+    <cti-btn :disabled="!isInCall" icon="hujiao" @click="transfer">转接</cti-btn>
+    <cti-btn :disabled="!isInCall" icon="huiyi" @click="meeting">会议</cti-btn>
+    <cti-btn :disabled="!isInCall" icon="saorao" type="danger" @click="addToBlackList">骚扰</cti-btn>
+  </div>
+
+</template>
+
+<script>
+import CtiBtn from './ctiBtn'
+import { addBlack } from '@/api/blackCus'
+
+export default {
+  name: 'LeftCallBar',
+  components: { CtiBtn },
+  props: {
+    tel: {
+      type: String,
+      required: true
+    },
+    holdStatus: {
+      type: Boolean,
+      required: true
+    },
+    callStatus: {
+      type: Boolean,
+      required: true
+    }
+  },
+  methods: {
+    // 挂机
+    hangup() {
+      this.$emit('click', 'hangup')
+    },
+    // 保持
+    hold() {
+      this.$emit('click', 'hold')
+    },
+    // 解除保持
+    unhold() {
+      this.$emit('click', 'unhold')
+    },
+    transfer() {
+      this.$emit('click', 'transfer')
+    },
+    meeting() {
+      this.$emit('click', 'meeting')
+    },
+    addToBlackList() {
+      this.$confirm(
+        '确定此电话为骚扰电话，移入黑名单吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const params = {
+          name: '骚扰电话', // 拉黑原因
+          tel: this.tel // 联系方式
+        }
+        addBlack(params).then(response => {
+          if (response.code === 200) {
+            this.$message.success('加入黑名单成功')
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/components/LeftCallBar.vue b/src/components/LeftCallBar.vue
deleted file mode 100644
index 96d5857..0000000
--- a/src/components/LeftCallBar.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
- * @Description:侧边语音呼叫栏
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-
-</template>
-
-<script>
-  export default {
-    name: 'LeftCallBar'
-  }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-
-</style>
diff --git a/src/components/cti/LeftCallBar.vue b/src/components/cti/LeftCallBar.vue
new file mode 100644
index 0000000..b4df770
--- /dev/null
+++ b/src/components/cti/LeftCallBar.vue
@@ -0,0 +1,85 @@
+<!--
+ * @Description:侧边语音呼叫栏
+ * @Author: 王晓颖
+ * @Date:2020-05-02 13:29:43
+ -->
+<template>
+  <div style="display:inline-block;margin-right:10px;">
+    <cti-btn :disabled="!isInCall" icon="guaji" @click="hangup">挂机</cti-btn>
+    <cti-btn v-show="holdStatus==false" :disabled="!isInCall" icon="baochi" @click="hold">保持</cti-btn>
+    <cti-btn v-show="holdStatus==true" :disabled="!isInCall" icon="baochi" @click="unhold">继续</cti-btn>
+    <cti-btn :disabled="!isInCall" icon="hujiao" @click="transfer">转接</cti-btn>
+    <cti-btn :disabled="!isInCall" icon="huiyi" @click="meeting">会议</cti-btn>
+    <cti-btn :disabled="!isInCall" icon="saorao" type="danger" @click="addToBlackList">骚扰</cti-btn>
+  </div>
+
+</template>
+
+<script>
+import CtiBtn from './ctiBtn'
+import { addBlack } from '@/api/blackCus'
+
+export default {
+  name: 'LeftCallBar',
+  components: { CtiBtn },
+  props: {
+    tel: {
+      type: String,
+      required: true
+    },
+    holdStatus: {
+      type: Boolean,
+      required: true
+    },
+    callStatus: {
+      type: Boolean,
+      required: true
+    }
+  },
+  methods: {
+    // 挂机
+    hangup() {
+      this.$emit('click', 'hangup')
+    },
+    // 保持
+    hold() {
+      this.$emit('click', 'hold')
+    },
+    // 解除保持
+    unhold() {
+      this.$emit('click', 'unhold')
+    },
+    transfer() {
+      this.$emit('click', 'transfer')
+    },
+    meeting() {
+      this.$emit('click', 'meeting')
+    },
+    addToBlackList() {
+      this.$confirm(
+        '确定此电话为骚扰电话，移入黑名单吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const params = {
+          name: '骚扰电话', // 拉黑原因
+          tel: this.tel // 联系方式
+        }
+        addBlack(params).then(response => {
+          if (response.code === 200) {
+            this.$message.success('加入黑名单成功')
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/cti/ctiBtn.vue b/src/components/cti/ctiBtn.vue
new file mode 100644
index 0000000..de75de7
--- /dev/null
+++ b/src/components/cti/ctiBtn.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div v-show="show" :class="{'ivr-btn':true}" @click="click">
+    <el-button :type="type" :disabled="disabled">
+      <svg-icon :icon-class="icon" class="ivr-icon"/>
+      <slot/>
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CtiBtn',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  methods: {
+    click() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .ivr-btn{
+    width:50px;
+    display: block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background-color:transparent;
+    border-style:none;
+    color: #ffffff;
+    -webkit-appearance: none;
+    text-align: center;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    -webkit-transition: .1s;
+    transition: .1s;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    padding: 3px 3px;
+    font-size: 12px;
+  }
+  .ivr-btn-active:hover{
+    color: #5dc8d7
+  }
+  .ivr-btn-disabled{
+    color:#e1e1e1
+  }
+  .ivr-icon{
+    width: 100%;
+    text-align: center;
+    display: block;
+    font-size: 25px;
+    margin: auto;
+    margin-bottom: 3px;
+  }
+</style>

diff --git a/src/components/LeftCallBar.vue b/src/components/LeftCallBar.vue
deleted file mode 100644
index 96d5857..0000000
--- a/src/components/LeftCallBar.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
- * @Description:侧边语音呼叫栏
- * @Author: 王晓颖
- * @Date:
- -->
-<template>
-
-</template>
-
-<script>
-  export default {
-    name: 'LeftCallBar'
-  }
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-
-</style>
diff --git a/src/components/cti/LeftCallBar.vue b/src/components/cti/LeftCallBar.vue
new file mode 100644
index 0000000..b4df770
--- /dev/null
+++ b/src/components/cti/LeftCallBar.vue
@@ -0,0 +1,85 @@
+<!--
+ * @Description:侧边语音呼叫栏
+ * @Author: 王晓颖
+ * @Date:2020-05-02 13:29:43
+ -->
+<template>
+  <div style="display:inline-block;margin-right:10px;">
+    <cti-btn :disabled="!isInCall" icon="guaji" @click="hangup">挂机</cti-btn>
+    <cti-btn v-show="holdStatus==false" :disabled="!isInCall" icon="baochi" @click="hold">保持</cti-btn>
+    <cti-btn v-show="holdStatus==true" :disabled="!isInCall" icon="baochi" @click="unhold">继续</cti-btn>
+    <cti-btn :disabled="!isInCall" icon="hujiao" @click="transfer">转接</cti-btn>
+    <cti-btn :disabled="!isInCall" icon="huiyi" @click="meeting">会议</cti-btn>
+    <cti-btn :disabled="!isInCall" icon="saorao" type="danger" @click="addToBlackList">骚扰</cti-btn>
+  </div>
+
+</template>
+
+<script>
+import CtiBtn from './ctiBtn'
+import { addBlack } from '@/api/blackCus'
+
+export default {
+  name: 'LeftCallBar',
+  components: { CtiBtn },
+  props: {
+    tel: {
+      type: String,
+      required: true
+    },
+    holdStatus: {
+      type: Boolean,
+      required: true
+    },
+    callStatus: {
+      type: Boolean,
+      required: true
+    }
+  },
+  methods: {
+    // 挂机
+    hangup() {
+      this.$emit('click', 'hangup')
+    },
+    // 保持
+    hold() {
+      this.$emit('click', 'hold')
+    },
+    // 解除保持
+    unhold() {
+      this.$emit('click', 'unhold')
+    },
+    transfer() {
+      this.$emit('click', 'transfer')
+    },
+    meeting() {
+      this.$emit('click', 'meeting')
+    },
+    addToBlackList() {
+      this.$confirm(
+        '确定此电话为骚扰电话，移入黑名单吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        const params = {
+          name: '骚扰电话', // 拉黑原因
+          tel: this.tel // 联系方式
+        }
+        addBlack(params).then(response => {
+          if (response.code === 200) {
+            this.$message.success('加入黑名单成功')
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/cti/ctiBtn.vue b/src/components/cti/ctiBtn.vue
new file mode 100644
index 0000000..de75de7
--- /dev/null
+++ b/src/components/cti/ctiBtn.vue
@@ -0,0 +1,83 @@
+<!--
+ * @Description:
+ * @Author: 王晓颖
+ * @Date:
+ -->
+<template>
+  <div v-show="show" :class="{'ivr-btn':true}" @click="click">
+    <el-button :type="type" :disabled="disabled">
+      <svg-icon :icon-class="icon" class="ivr-icon"/>
+      <slot/>
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CtiBtn',
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  methods: {
+    click() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .ivr-btn{
+    width:50px;
+    display: block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background-color:transparent;
+    border-style:none;
+    color: #ffffff;
+    -webkit-appearance: none;
+    text-align: center;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    outline: none;
+    margin: 0;
+    -webkit-transition: .1s;
+    transition: .1s;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    padding: 3px 3px;
+    font-size: 12px;
+  }
+  .ivr-btn-active:hover{
+    color: #5dc8d7
+  }
+  .ivr-btn-disabled{
+    color:#e1e1e1
+  }
+  .ivr-icon{
+    width: 100%;
+    text-align: center;
+    display: block;
+    font-size: 25px;
+    margin: auto;
+    margin-bottom: 3px;
+  }
+</style>
diff --git a/src/icons/svg/saorao.svg b/src/icons/svg/saorao.svg
new file mode 100644
index 0000000..b2ed692
--- /dev/null
+++ b/src/icons/svg/saorao.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1588393913203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="39392" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M755.2 989.866667c-384 0-691.2-315.733333-691.2-704l0-4.266667c0-4.266667 0-4.266667 0-4.266667 0-102.4 72.533333-187.733333 170.666667-200.533333 21.333333-4.266667 42.666667 8.533333 59.733333 25.6l149.333333 200.533333c0 0 0 0 0 0l0 0c4.266667 4.266667 4.266667 8.533333 4.266667 12.8 8.533333 25.6 0 55.466667-21.333333 76.8l-34.133333 38.4c-12.8 12.8-12.8 34.133333-4.266667 51.2 38.4 81.066667 106.666667 149.333333 187.733333 192 4.266667 4.266667 8.533333 0 17.066667-4.266667l64-51.2c21.333333-25.6 59.733333-29.866667 85.333333-12.8l192 115.2c25.6 17.066667 38.4 46.933333 34.133333 76.8-4.266667 102.4-81.066667 183.466667-179.2 192L755.2 989.866667C755.2 989.866667 755.2 989.866667 755.2 989.866667zM243.2 132.266667C243.2 132.266667 243.2 132.266667 243.2 132.266667 170.666667 140.8 119.466667 204.8 119.466667 277.333333l0 8.533333 0 4.266667c0 354.133333 285.866667 644.266667 631.466667 644.266667l25.6 0c72.533333-8.533333 123.733333-64 128-140.8l0-8.533333c0-4.266667 0-12.8-4.266667-12.8l-192-115.2c-4.266667-4.266667-12.8 0-12.8 4.266667l-4.266667 4.266667-64 55.466667c-21.333333 17.066667-55.466667 21.333333-81.066667 8.533333-89.6-46.933333-166.4-128-209.066667-217.6C315.733333 469.333333 320 426.666667 345.6 396.8l34.133333-42.666667C392.533333 341.333333 392.533333 337.066667 388.266667 332.8L243.2 132.266667C243.2 132.266667 243.2 132.266667 243.2 132.266667z" p-id="39393" fill="#ffffff"></path><path d="M883.2 174.933333c-72.533333-72.533333-192-72.533333-264.533333 0-72.533333 72.533333-72.533333 192 0 264.533333 72.533333 72.533333 192 72.533333 264.533333 0C955.733333 366.933333 955.733333 247.466667 883.2 174.933333zM849.066667 209.066667C896 256 900.266667 328.533333 866.133333 384l-192-196.266667C725.333333 153.6 802.133333 157.866667 849.066667 209.066667zM652.8 405.333333c-46.933333-46.933333-55.466667-123.733333-17.066667-179.2l192 196.266667C772.266667 460.8 699.733333 456.533333 652.8 405.333333z" p-id="39394" fill="#ffffff"></path></svg>
\ No newline at end of file