<template>
  <div class="bread-crumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>{{ curmbFirst }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="curmbSecond" :to="{ path: jumPathThird }">{{
        curmbSecond
      }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="curmbThird" :to="{ path: jumPathFouth }">{{
        curmbThird
      }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="curmbFouth">{{
        curmbFouth
      }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  props: {
    curmbFirst: {
      type: String,
    },
    curmbSecond: {
      type: String,
    },
    curmbThird: {
      type: String,
    },
    curmbFouth: {
      type: String,
    },
    jumPathThird: {
      type: String,
    },
    jumPathFouth: {
      type: String,
    },
  },
}
</script>

<style lang="scss">
.bread-crumb {
  position: fixed;
  left: 255px;
  top: 64px;
  width: 100%;
  background: #fff;
  height: 61px;
  padding: 20px 20px 30px;
  z-index: 99;
  border-top: 3px solid #f0f2f5;
  .el-breadcrumb__inner {
    font-size: 14px;
  }
}
</style>
