diff --git a/src/static-data/core.ts b/src/static-data/core.ts
index e4d9a76..2af4174 100644
--- a/src/static-data/core.ts
+++ b/src/static-data/core.ts
@@ -1,110 +1,128 @@
-import {getData, postData} from '@/axios/index'
+import { getData, postData } from '@/axios/index'
 
 export const getHospitalsData = () => {
-    const hospitals = [] as any
-    hospitals.push({ label: '北京朝阳医院', value: '北京朝阳医院' })
-    hospitals.push({ label: '北京朝阳医院1', value: '北京朝阳医院1' })
-    hospitals.push({ label: '北京朝阳医院2', value: '北京朝阳医院2' })
-    return new Promise((resolve, reject) => {
-        getData('/url', {}).then((res: any) => {
-            resolve(hospitals)
-        }).catch((err: any) => {
-            resolve(hospitals)
-        })
+  const hospitals = [] as any
+  hospitals.push({ label: '北京朝阳医院', value: '北京朝阳医院' })
+  hospitals.push({ label: '北京朝阳医院1', value: '北京朝阳医院1' })
+  hospitals.push({ label: '北京朝阳医院2', value: '北京朝阳医院2' })
+  return new Promise((resolve, reject) => {
+    getData('/url', {}).then((res: any) => {
+      resolve(hospitals)
+    }).catch((err: any) => {
+      resolve(hospitals)
     })
+  })
 }
 
 export const getPhoneAreasData = () => {
-    return ['中国 +86']
+  return ['中国 +86']
 }
 
 export const getDeptData = () => {
-    const depts = []
-    depts.push({ label: '神经外科', value: '神经外科' })
-    depts.push({ label: '心脏内科', value: '心脏内科' })
-    return depts
+  const depts = []
+  depts.push({ label: '神经外科', value: '神经外科' })
+  depts.push({ label: '心脏内科', value: '心脏内科' })
+  return depts
 }
 
 export const getMessageType = () => {
-    const type = []
-    type.push({ label: '通知', value: '通知' })
-    type.push({ label: '公告', value: '公告' })
-    return type
+  const type = []
+  type.push({ label: '通知', value: '通知' })
+  type.push({ label: '公告', value: '公告' })
+  return type
 }
 
 export const getLogType = () => {
-    const type = []
-    type.push({ label: '正常', value: '正常' })
-    type.push({ label: '异常', value: '异常' })
-    type.push({ label: '添加', value: '添加' })
-    type.push({ label: '删除', value: '删除' })
-    type.push({ label: '编辑', value: '编辑' })
-    return type
+  const type = []
+  type.push({ label: '正常', value: '正常' })
+  type.push({ label: '异常', value: '异常' })
+  type.push({ label: '添加', value: '添加' })
+  type.push({ label: '删除', value: '删除' })
+  type.push({ label: '编辑', value: '编辑' })
+  return type
 }
 
 export const getusers = () => {
-    const user = []
-    while (user.length < 50) {
-        user.push({ name: '管理员' + user.length, code: 'admin' + user.length })
-    }
-    return  user
+  const user = []
+  while (user.length < 50) {
+    user.push({ name: '管理员' + user.length, code: 'admin' + user.length })
+  }
+  return user
 }
 
 // 病人名称数据
 export const getPatients = () => {
-    const patients = []
-    while (patients.length < 10000) {
-        patients.push({ name: '张' + patients.length, code: 'BH' + patients.length })
-    }
-    return patients
+  const patients = []
+  while (patients.length < 10000) {
+    patients.push({ name: '张' + patients.length, code: 'BH' + patients.length })
+  }
+  return patients
 }
 
 export const getNarcotismWay = () => {
-    const narcotismWay = []
-    while (narcotismWay.length < 10) {
-        const str: string = '麻醉方式' + (narcotismWay.length + 1)
-        narcotismWay.push({label: str, value: str})
-    }
-    return narcotismWay
+  const narcotismWay = []
+  while (narcotismWay.length < 10) {
+    const str: string = '麻醉方式' + (narcotismWay.length + 1)
+    narcotismWay.push({ label: str, value: str })
+  }
+  return narcotismWay
 }
 
 export const getFormTypes = () => {
-    const types = [
-        {name: '生命体征表单'},
-        {name: 'AI给药记录'},
-        {name: '医生给药记录'},
-        {name: '给药命令反馈'},
-        {name: '输药泵定时间反馈'},
-        {name: '术后信息表单'},
-        {name: '1生命体征表单'},
-        {name: '1AI给药记录'},
-        {name: '1医生给药记录'},
-        {name: '1给药命令反馈'},
-        {name: '1输药泵定时间反馈'},
-        {name: '1术后信息表单'},
-        {name: '2生命体征表单'},
-        {name: '2AI给药记录'},
-        {name: '2医生给药记录'},
-        {name: '2给药命令反馈'},
-        {name: '2输药泵定时间反馈'},
-        {name: '2术后信息表单'},
-    ]
-    return types
+  const types = [
+    { name: '生命体征表单' },
+    { name: 'AI给药记录' },
+    { name: '医生给药记录' },
+    { name: '给药命令反馈' },
+    { name: '输药泵定时间反馈' },
+    { name: '术后信息表单' },
+    { name: '1生命体征表单' },
+    { name: '1AI给药记录' },
+    { name: '1医生给药记录' },
+    { name: '1给药命令反馈' },
+    { name: '1输药泵定时间反馈' },
+    { name: '1术后信息表单' },
+    { name: '2生命体征表单' },
+    { name: '2AI给药记录' },
+    { name: '2医生给药记录' },
+    { name: '2给药命令反馈' },
+    { name: '2输药泵定时间反馈' },
+    { name: '2术后信息表单' },
+  ]
+  return types
 }
-export const getDataAlarmState = (value: number, key: string) => {
-    const alarms: any = {
-        BIS: { min: 40, max: 60 },
-        HR: { min: 50, max: 80 },
-        SBP: { min: 90, max: 120 },
-        DBP: { min: 60, max: 90 },
-        ST: { min: -0.2, max: 0.2 },
-        EtCO2: { min: 30, max: 45 }
-    }
-    const obj = alarms[key]
-    let res: 'min' | 'max' | '' = ''
-    if(obj) {
-        if(value < obj.min) res = 'min'
-        else if(value > obj.max) res = 'max'
-    }
-    return res
+export const getDataAlarmState = (value: number | undefined, key: string) => {
+  if (value === undefined) return
+  const alarms: any = {
+    BIS: { min: 40, max: 60 },
+    HR: { min: 50, max: 80 },
+    SBP: { min: 90, max: 120 },
+    DBP: { min: 60, max: 90 },
+    ST: { min: -0.2, max: 0.2 },
+    EtCO2: { min: 30, max: 45 }
+  }
+  const obj = alarms[key]
+  let res: 'min' | 'max' | '' = ''
+  if (obj) {
+    if (value < obj.min) res = 'min'
+    else if (value > obj.max) res = 'max'
+  }
+  return res
+}
+
+export const setRemoteLog = (obj: any, callback: (title: string, size: string) => void) => {
+  const alarms = {
+    BIS: getDataAlarmState(obj.BIS, 'BIS'),
+    SBP: getDataAlarmState(obj.SBP, 'SBP'),
+    SPO2: getDataAlarmState(obj.SPO2, 'SPO2'),
+    DBP: getDataAlarmState(obj.DBP, 'DBP'),
+    HR: getDataAlarmState(obj.HR, 'HR'),
+    TEMP: getDataAlarmState(obj.TEMP, 'TEMP')
+  }
+  if (alarms.BIS) callback('脑电双频指数', alarms.BIS)
+  if (alarms.SBP) callback('收缩率', alarms.SBP)
+  if (alarms.SPO2) callback('氧饱和度', alarms.SPO2)
+  if (alarms.DBP) callback('舒张压', alarms.DBP)
+  if (alarms.HR) callback('心率', alarms.HR)
+  if (alarms.TEMP) callback('体温', alarms.TEMP)
 }
\ No newline at end of file
diff --git a/src/stores/remote-info-store.ts b/src/stores/remote-info-store.ts
index 2218d3e..a263a5e 100644
--- a/src/stores/remote-info-store.ts
+++ b/src/stores/remote-info-store.ts
@@ -25,6 +25,11 @@ export const useRemoteStore = defineStore('remote', {
         this.remoteTasks[index].log.push(obj)
       }
     },
+    setRemoteDataAlarm(bol: boolean, index: number) {
+      if(this.remoteTasks[index]) {
+        this.remoteTasks[index].dataAlarm = bol
+      }
+    },
     getCurrentRemote() {
       return this.currentRemote
     },
diff --git a/src/views/remote-manage/part/message-item-part.vue b/src/views/remote-manage/part/message-item-part.vue
index 50f6bb6..1061694 100644
--- a/src/views/remote-manage/part/message-item-part.vue
+++ b/src/views/remote-manage/part/message-item-part.vue
@@ -40,10 +40,12 @@ remoteTasks.value = useRemoteStore().remoteTasks
 // })
 
 function scrollToBottom() {
-  listRef.value.scrollTo({
-		top: listRef.value.scrollHeight,
-		behavior: 'smooth'
-	});
+  setTimeout(() => {
+    listRef.value.scrollTo({
+      top: listRef.value.scrollHeight,
+      behavior: 'smooth'
+    })
+  }, 0)
 }
 </script>
 
diff --git a/src/views/remote-manage/part/message-part.vue b/src/views/remote-manage/part/message-part.vue
index 7415b6c..9b18d71 100644
--- a/src/views/remote-manage/part/message-part.vue
+++ b/src/views/remote-manage/part/message-part.vue
@@ -3,9 +3,9 @@
     <div class="title">
       <span>消息通知</span>
     </div>
-    <div class="content">
+    <div ref="listRef" class="content">
       <el-timeline>
-        <el-timeline-item v-for="(item, index) in currentRemote.log || []" :key="index"
+        <el-timeline-item v-for="(item, index) in remoteStore.currentRemote.log || []" :key="index"
           :timestamp="dateFormater('yyyy-MM-dd HH:mm:ss', item.time)"
           :class="{ 'alarm': item.state === '连接失败' || item.state === '异常' }">
           {{ item.title + ' ' + item.state }}
@@ -24,17 +24,25 @@ import { dateFormater } from '@/utils/date-util'
 
 defineExpose({
   setData,
+  scrollToBottom
 })
 
 const remoteStore = useRemoteStore()
-const currentRemote = ref({} as RemoteItem)
-currentRemote.value = useRemoteStore().currentRemote
+const listRef = ref()
 
 function setData(e: RemoteLogItem, index: number) {
   remoteStore.setRemoteLog(e, index)
-  remoteStore.setCurrentRemoteLog(e)
   remoteStore.$patch({currentRemote: remoteStore.remoteTasks[index]})
 }
+
+function scrollToBottom() {
+  setTimeout(() => {
+    listRef.value.scrollTo({
+      top: listRef.value.scrollHeight,
+      behavior: 'smooth'
+    })
+  }, 0)
+}
 </script>
 
 <style lang='scss' scoped>
diff --git a/src/views/remote-manage/part/remote-part.vue b/src/views/remote-manage/part/remote-part.vue
index d8c9a14..90fdec8 100644
--- a/src/views/remote-manage/part/remote-part.vue
+++ b/src/views/remote-manage/part/remote-part.vue
@@ -117,15 +117,17 @@ import { onMounted, onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
 import { dateFormater } from '@/utils/date-util'
 import { useRemoteStore } from '@/stores/remote-info-store';
 import type { RemoteItem, PatientInfoItem } from '@/utils/public-interface'
+import { setRemoteLog } from '@/static-data/core'
 
-const emit = defineEmits(['breakRemote'])
+const emit = defineEmits(['addLogAfter', 'breakRemote'])
 
+const remoteStore = useRemoteStore()
 let timer = 0
 const mediaMini800 = ref(false)
 const remoteItem = ref<RemoteItem>({} as RemoteItem)
 const patientInfo = ref({} as PatientInfoItem)
 
-initData(useRemoteStore().getCurrentRemote())
+initData(remoteStore.currentRemote)
 
 defineExpose({
     initData
@@ -133,7 +135,6 @@ defineExpose({
 
 onBeforeUnmount(() => {
   // 页面卸载后清楚定时器
-  console.log('~~~~~~~~~~~~~~~')
   clearInterval(timer)
 })
 
@@ -141,26 +142,43 @@ window.addEventListener('resize', () => {
     mediaMini800.value = Boolean(window.innerWidth < 801)
 });
 
-function initData(e?: any) {
-    if(e) remoteItem.value = e
-    const obj = e || {}
+function initData(e?: RemoteItem) {
+    const obj = e || {} as RemoteItem
+    remoteItem.value = obj
     patientInfo.value.state = obj.dataAlarm
     patientInfo.value.name = obj.patientName || ''
     patientInfo.value.code = 'XXXXXX'
     clearInterval(timer)
+    if(!patientInfo.value.name) return
     timer = setInterval(() => {
       getData()
     }, 2000)
 }
 
 function getData() {
+  remoteItem.value.dataAlarm = false
+  const obj = {
+    BIS: Math.ceil(Math.random() * 100), 
+    SBP: Math.ceil(Math.random() * 100), 
+    SPO2: Math.ceil(Math.random() * 100), 
+    DBP: Math.ceil(Math.random() * 100), 
+    HR: Math.ceil(Math.random() * 100), 
+    TEMP: Math.ceil(Math.random() * 100),
+  } as PatientInfoItem
   patientInfo.value.time = new Date()
-  patientInfo.value.BIS = Math.ceil(Math.random() * 100)
-  patientInfo.value.SBP = Math.ceil(Math.random() * 100)
-  patientInfo.value.SPO2 = Math.ceil(Math.random() * 100)
-  patientInfo.value.DBP = Math.ceil(Math.random() * 100)
-  patientInfo.value.HR = Math.ceil(Math.random() * 100)
-  patientInfo.value.TEMP = Math.ceil(Math.random() * 100)
+  setRemoteLog(obj, (title: string, size: string) => {
+    obj.state = true
+    remoteItem.value.dataAlarm = true
+    remoteStore.setRemoteLog({
+      time: new Date(),
+      title,
+      state: '异常'
+    }, remoteItem.value.index)
+  })
+  remoteStore.setRemoteDataAlarm(remoteItem.value.dataAlarm, remoteItem.value.index)
+  remoteStore.$patch({currentRemote: remoteStore.remoteTasks[remoteItem.value.index]})
+  Object.assign(patientInfo.value, obj)
+  emit('addLogAfter')
 }
 
 const breakRemote = () => {
diff --git a/src/views/remote-manage/remote-manage.vue b/src/views/remote-manage/remote-manage.vue
index abaa66a..23dfa42 100644
--- a/src/views/remote-manage/remote-manage.vue
+++ b/src/views/remote-manage/remote-manage.vue
@@ -1,26 +1,28 @@
 <template>
-    <div class="remote-manage-page">
-        <div class="header-box">
-            <div class="thumbnail" @click="viewThumbnail">
-              <el-icon><Menu /></el-icon>
-              <span>缩略图</span>
-            </div>
-            <div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
-                :class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
-                @click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
-                <span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
-            </div>
-        </div>
-        <div class="content-box">
-            <div class="remote-box">
-                <RemotePart ref="remotePartRef" @breakRemote="breakRemote" />
-            </div>
-            <div class="message-box">
-                <MessagePart ref="messagePartRef" />
-            </div>
-        </div>
+  <div class="remote-manage-page">
+    <div class="header-box">
+      <div class="thumbnail" @click="viewThumbnail">
+        <el-icon>
+          <Menu />
+        </el-icon>
+        <span>缩略图</span>
+      </div>
+      <div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
+        :class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
+        @click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
+        <span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
+      </div>
     </div>
-    <RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote" />
+    <div class="content-box">
+      <div class="remote-box">
+        <RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote" />
+      </div>
+      <div class="message-box">
+        <MessagePart ref="messagePartRef" />
+      </div>
+    </div>
+  </div>
+  <RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote" />
 </template>
 
 <script lang='ts' setup>
@@ -42,46 +44,45 @@ const remoteTask = ref([] as Array<RemoteItem>)
 initRemoteTask()
 
 function resetRemoteTaskItem(e: RemoteItem) {
-    remoteTask.value[e.index] = {
-        isRemote: false,
-        dataAlarm: false,
-        title: '',
-        serverUser: '',
-        patientName: '',
-        patientCode: '',
-        index: e.index,
-        log: []
-    }
+  Object.assign(remoteTask.value[e.index], {
+    isRemote: false,
+    dataAlarm: false,
+    title: '',
+    serverUser: '',
+    patientName: '',
+    patientCode: '',
+    index: e.index,
+  })
 }
 function initRemoteTask() {
-    remoteTask.value = useRemoteStore().remoteTasks
-    if(remoteTask.value.length < 1) {
-      while (remoteTask.value.length < 10) {
-          const obj = {
-              isRemote: false, // 连接状态
-              dataAlarm: false, // 异常状态
-              title: '',
-              serverUser: '', // 服务器用户名
-              patientName: '', // 病人名称
-              patientCode: '', // 病人身份证
-              index: remoteTask.value.length,
-              log: []
-          }
-          if (remoteTask.value.length < 3) {
-              obj.isRemote = true
-              obj.title = '远程控制' + (remoteTask.value.length + 1)
-              obj.serverUser = 'root'
-              obj.patientName = '测试' + (remoteTask.value.length + 1)
-          }
-          if (remoteTask.value.length == 1) obj.dataAlarm = true
-          remoteTask.value.push(obj)
+  remoteTask.value = useRemoteStore().remoteTasks
+  if (remoteTask.value.length < 1) {
+    while (remoteTask.value.length < 10) {
+      const obj = {
+        isRemote: false, // 连接状态
+        dataAlarm: false, // 异常状态
+        title: '',
+        serverUser: '', // 服务器用户名
+        patientName: '', // 病人名称
+        patientCode: '', // 病人身份证
+        index: remoteTask.value.length,
+        log: []
       }
-      useRemoteStore().setRemoteTasks(remoteTask.value)
-      const remoteStore = useRemoteStore().currentRemote
-      if (!remoteStore.index) {
-        useRemoteStore().$patch({currentRemote: remoteTask.value[0]})
+      if (remoteTask.value.length < 3) {
+        obj.isRemote = true
+        obj.title = '远程控制' + (remoteTask.value.length + 1)
+        obj.serverUser = 'root'
+        obj.patientName = '测试' + (remoteTask.value.length + 1)
       }
+      if (remoteTask.value.length == 1) obj.dataAlarm = true
+      remoteTask.value.push(obj)
     }
+    useRemoteStore().setRemoteTasks(remoteTask.value)
+    const remoteStore = useRemoteStore().currentRemote
+    if (!remoteStore.index) {
+      useRemoteStore().$patch({ currentRemote: remoteTask.value[0] })
+    }
+  }
 }
 
 const viewThumbnail = () => {
@@ -91,165 +92,174 @@ const viewThumbnail = () => {
 }
 // 打开任务连接弹窗
 const editTask = (item: RemoteItem, index: number) => {
-    item.index = index
-    // 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
-    if (item.isRemote) {
-        confirmRemote(item)
-    } else {
-        remoteDialogRef.value.open(item)
-    }
+  item.index = index
+  // 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
+  if (item.isRemote) {
+    confirmRemote(item)
+  } else {
+    remoteDialogRef.value.open(item)
+  }
 }
 // 跳转到远程控制
 const toRemoteControl = (item: RemoteItem, index: number) => {
-    // 如果当前任务是已连接状态则跳转，否则打开弹窗
-    if (item.isRemote) {
-        router.push('/remote-manage/remote-control')
-    } else {
-        editTask(item, index)
-    }
+  // 如果当前任务是已连接状态则跳转，否则打开弹窗
+  if (item.isRemote) {
+    router.push('/remote-manage/remote-control')
+  } else {
+    editTask(item, index)
+  }
 }
 // 连接成功
 const confirmRemote = (e: RemoteItem) => {
-    messagePartRef.value.setData({
-        time: new Date(),
-        title: e.title,
-        state: '连接成功'
-    }, e.index)
-    remoteTask.value[e.index] = e // 状态设置为可连接
-    remotePartRef.value.initData(e)
+  messagePartRef.value.setData({
+    time: new Date(),
+    title: e.title,
+    state: '连接成功'
+  }, e.index)
+  remoteTask.value[e.index] = e // 状态设置为可连接
+  remotePartRef.value.initData(e)
 }
 // 连接失败
 const errorRemote = (e: RemoteItem) => {
-    messagePartRef.value.setData({
-        time: new Date(),
-        title: e.title,
-        state: '连接失败'
-    }, e.index)
+  messagePartRef.value.setData({
+    time: new Date(),
+    title: e.title,
+    state: '连接失败'
+  }, e.index)
 }
 // 断开连接
 const breakRemote = (e: RemoteItem) => {
-    resetRemoteTaskItem(e)
-    remotePartRef.value.initData()
-    messagePartRef.value.setData({
-        time: new Date(),
-        title: e.title,
-        state: '断开连接'
-    }, e.index)
+  resetRemoteTaskItem(e)
+  remotePartRef.value.initData()
+  messagePartRef.value.setData({
+    time: new Date(),
+    title: e.title,
+    state: '断开连接'
+  }, e.index)
+}
+const addLogAfter = () => {
+  messagePartRef.value.scrollToBottom()
 }
 </script>
 
 <style lang='scss' scoped>
 .remote-manage-page {
+  width: 100%;
+  height: 100%;
+  padding-top: 15px;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .header-box {
+    position: relative;
     width: 100%;
-    height: 100%;
-    padding-top: 15px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    .header-box {
-      position: relative;
-        width: 100%;
-        min-height: 180px;
-        background: white;
-        padding: 0 30px;
-        display: flex;
-        flex-wrap: wrap;
-        .thumbnail {
-          cursor: pointer;
-          position: absolute;
-          width: 70px;
-          height: 70px;
-          top: 0;
-          right: 0;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background: #f8b300;
-          border-top-left-radius: 35px;
-          border-bottom-left-radius: 35px;
-          box-shadow: -3px 3px 5px 0 rgba(black, .2);
-          font-size: 20px;
-          color: white;
-          transition: all .1s;
-          .el-icon {
-            font-size: 1.4em;
-          }
-          &>span {
-            display: none;
-            margin-left: 5px;
-            line-height: 1;
-            white-space: nowrap;
-          }
-          &:hover {
-            width: 160px;
-            transition: all .3s;
-            &>span {
-              display: block;
-            }
-          }
-        }
-        .task-btn-item {
-            cursor: pointer;
-            flex-grow: 1;
-            width: 17%;
-            min-width: 200px;
-            height: 70px;
-            margin: 10px 20px;
-            border: 2px solid $main-color;
-            color: $main-color;
-            border-radius: 5px;
-            font-size: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            transition: all .6s;
-
-            &:hover {
-                background: rgba($main-color, .1);
-                transition: all .6s;
-            }
-
-            &.connecting {
-                background: $main-color;
-                color: white;
-
-                &:hover {
-                    background: rgba($main-color, .8);
-                }
-            }
-
-            &.alarm {
-                background: #f80000;
-                border-color: #f80000;
-                color: white;
-
-                &:hover {
-                    background: rgba(#f80000, .8);
-                }
-            }
+    min-height: 180px;
+    background: white;
+    padding: 0 30px;
+    display: flex;
+    flex-wrap: wrap;
+
+    .thumbnail {
+      cursor: pointer;
+      position: absolute;
+      width: 70px;
+      height: 70px;
+      top: 0;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #f8b300;
+      border-top-left-radius: 35px;
+      border-bottom-left-radius: 35px;
+      box-shadow: -3px 3px 5px 0 rgba(black, .2);
+      font-size: 20px;
+      color: white;
+      transition: all .1s;
+
+      .el-icon {
+        font-size: 1.4em;
+      }
+
+      &>span {
+        display: none;
+        margin-left: 5px;
+        line-height: 1;
+        white-space: nowrap;
+      }
+
+      &:hover {
+        width: 160px;
+        transition: all .3s;
+
+        &>span {
+          display: block;
         }
+      }
     }
 
-    .content-box {
-        width: 100%;
-        height: calc(100% - 195px);
-        min-height: 600px;
-        margin-top: 15px;
-        background: white;
-        padding: 20px 50px;
-        display: flex;
-        justify-content: space-between;
+    .task-btn-item {
+      cursor: pointer;
+      flex-grow: 1;
+      width: 17%;
+      min-width: 200px;
+      height: 70px;
+      margin: 10px 20px;
+      border: 2px solid $main-color;
+      color: $main-color;
+      border-radius: 5px;
+      font-size: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: all .6s;
 
-        .remote-box {
-            width: calc(100% - 370px);
-            flex-grow: 1;
-            height: 100%;
-        }
+      &:hover {
+        background: rgba($main-color, .1);
+        transition: all .6s;
+      }
 
-        .message-box {
-            width: 350px;
-            height: 100%;
-            margin-left: 20px;
+      &.connecting {
+        background: $main-color;
+        color: white;
+
+        &:hover {
+          background: rgba($main-color, .8);
         }
+      }
+
+      &.alarm {
+        background: #f80000;
+        border-color: #f80000;
+        color: white;
+
+        &:hover {
+          background: rgba(#f80000, .8);
+        }
+      }
     }
-}
-</style>
+  }
+
+  .content-box {
+    width: 100%;
+    height: calc(100% - 195px);
+    min-height: 600px;
+    margin-top: 15px;
+    background: white;
+    padding: 20px 50px;
+    display: flex;
+    justify-content: space-between;
+
+    .remote-box {
+      width: calc(100% - 370px);
+      flex-grow: 1;
+      height: 100%;
+    }
+
+    .message-box {
+      width: 350px;
+      height: 100%;
+      margin-left: 20px;
+    }
+  }
+}</style>