<template>
  <div id="road-monitor">
<!--    <div class="explain_border">-->
<!--      <span class="explain_content">请选择播放状态</span>-->
<!--    </div>-->
    <div class="main_content">
      <div class="single_content">
        <button @click="onShow('origin')" class="single_button">复位</button>
      </div>
      <div class="single_content">
        <button @click="onShow('start')" class="single_button">开始</button>
      </div>
      <div class="single_content">
        <button @click="onShow('end')" class="single_button">停止</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RoadMonitor",
  methods:{
    onShow(type){
      this.$emit('setRoadType',type);
    }
  }
}
</script>

<style scoped lang="scss">
#road-monitor{
  position: absolute;
  z-index: 1;
  width: 200px;
  top: 89px;
  right: 155px;
  color:#FFF;
  background-color:rgba(0, 31, 112, 0.9);
  padding: 10px;
  .explain_border{
    margin: 10px;
    padding: 5px 10px;
    .explain_content{
      font-size: 16px;
    }
  }
  .main_content{
    display:flex;
    flex-direction: column;
    .single_content{
      height:40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .single_button{
        color:#fff;
        width: 80%;
        padding: 5px;
        cursor: pointer;
        text-align: center;
        background-color: #0079c1;
        border: 1px solid #0079c1;
      }
    }
  }
}
</style>