<style>
  .Jiedai_Top {
    color:#3370FF;
    font-size:14px;
    width:100%;
    margin:20px 0;
  }
  .Jiedai_Line{
    position: absolute;
    width:115px;
    height:2px;
    background-color: #3370FF;
    left:286px;
    top:35px;
  }
  .Jiedai_List{
    display:flex;
    justify-content: space-between;
  }
  .Jiedai_List>div{
    font-size:14px;
    color:#1F2329;
    background-color: #EDEDEE;
    font-size: 13px;
    padding:3px 10px;
    border-radius: 13px;
    cursor: pointer;
  }
  .ckedClass{
    background-color: #3370FF!important;
    color:#fff!important;
  }
  .jie_ImgDiv{
    margin:25px auto 80px;
    width:637px;
  }
  .jie_ImgDiv img{
    width:100%;
  }
  .schedu_Title{
    margin:auto;
    width:140px;
    position: relative;
  }
  .schedu_Title:after{
    position: absolute;
    content: "";
    width: 90%;
    height: 2px;
    background: #3370FF;
    left: 7%;
    top: 35px;  
  }
</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeJiedaiForm">
    <q-card style="margin-top:61px;width:700px" class="no-border-radius classinfo_Dialog">
      <div class="Jiedai_Top">
        <div class="schedu_Title">
            培训学校前台接待流程
        </div>
      </div>
      <div style="margin:40px 20px 0;">
        <div class="Jiedai_List">
            <div :class="{'ckedClass':checkIndex==1}" @click="checkIndex=1">接待流程图</div>
            <div :class="{'ckedClass':checkIndex==2}" @click="checkIndex=2">日常工作流程</div>
            <div :class="{'ckedClass':checkIndex==3}" @click="checkIndex=3">收费财务流程图</div>
            <div :class="{'ckedClass':checkIndex==4}" @click="checkIndex=4">学员档案管理流程图</div>
            <div :class="{'ckedClass':checkIndex==5}" @click="checkIndex=5">学员档案及文件管理</div>
        </div>
        <div class="jie_ImgDiv">
            <img v-if="checkIndex==1" src="../../assets/images/myimg/jie1.png" />
            <img v-if="checkIndex==2" src="../../assets/images/myimg/jie2.png" />
            <img v-if="checkIndex==3" src="../../assets/images/myimg/jie3.png" />
            <img v-if="checkIndex==4" src="../../assets/images/myimg/jie4.png" />
            <img v-if="checkIndex==5" src="../../assets/images/myimg/jie5.png" />
        </div>
      </div>
    </q-card>
    <div class="dialog-out-close" @click="closeJiedaiForm"
      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>

<script>
  export default {
    data() {
      return {
        persistent: true,
        checkIndex:1
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      closeJiedaiForm() {
        this.persistent = false;
        this.$emit('close');
      },
    }
  }

</script>
