Vue,面包屑导航，动态样式CSS

image.png

[图片上传中...(image.png-217df4-1599639882626-0)]

image.png

<template>
  <div class="tabDiv">
    <ul class="tabUl">
      <li
        v-for="(item,index) in list"
        :key="index"
        @click="pushRouter(index)"
        :class="{ active : index == current,}"
        class="louis-cursor"
      >
        <div class="louis-flex">
          <div class="step louis-font-center">
            <p>STEP</p>
            <h2>
              <!-- 01 -->
              {{item.step}}
            </h2>
          </div>
          <div class="content">
            <h1 class="louis-font-b louis-color-333">
              <!-- 创建发仓 -->
              {{item.content}}
            </h1>
            <h5 class="louis-color-666">
              <!-- Create a warehouse -->
              {{item.english}}
            </h5>
          </div>
        </div>
        <div id="crumbs"></div>
        <div id="crumbs2"></div>
        <div id="crumbs3">
          <div class="crumbsj"></div>
        </div>
        <div id="crumbs4">
          <div class="crumbsj"></div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    // list: {
    //   type: Array,
    //   default: true,
    // },
    // current: {
    //   type: Number,
    //   default: true,
    // },
  },
  data() {
    return {
      current: 0,
      list: [
        {
          step: "01",
          content: "采购建议",
          english: "Procurement proposal",
        },
        {
          step: "02",
          content: "采购计划",
          english: "Under review",
        },
        {
          step: "03",
          content: "配货区",
          english: "Distribution Area",
        },
        {
          step: "04",
          content: "完成",
          english: "Complete",
        },
        {
          step: "05",
          content: "异常发仓单",
          english: "Abnormal order",
        },
      ],
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    pushRouter(index) {
      // this.$emit("pushRouter", index);
      this.current = index;
    },
  },
  components: {},
};
</script>
<style scoped lang='less'>
.tabDiv {
  background: #dfdfdf;
  width: 100%;
  height: 54px;
  position: relative;
  #bgcalss {
    position: absolute;
    width: 100%;
    height: 54px;
    z-index: 10;
    display: block;
  }
  ul.tabUl {
    width: 100%;
    height: 100%;
    z-index: 99;
    position: relative;
    display: flex;
    li {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      // color: #FFFFFF;
      color: #333333;
      position: relative;
      .step {
        p {
          font-size: 9px;
          font-family: Roboto-Bold;
          line-height: 11px;

          margin-top: 7px;
        }
        h2 {
          font-size: 27px;
          font-family: Roboto-Bold;
          line-height: 32px;
        }
      }
      .content {
        font-weight: bold;
        margin-left: 25px;
        h1 {
          height: 26px;
          font-size: 20px;
          font-family: Microsoft YaHei;
          // font-weight: 400;
          line-height: 20px;
          margin-top: 7px;
        }
        h5 {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 300;
          line-height: 20px;
        }
      }
    }
  }
}
.active {
  color: #fff !important;
  background-image: linear-gradient(to right, #72e6e4, #00abde);
  .louis-color-666 {
    color: #ffffff;
  }
  .louis-color-333 {
    color: #ffff;
  }
  #crumbs2 {
    content: "";
    border-top: 27px solid transparent;
    border-bottom: 27px solid transparent;
    border-left: 30px solid #00abde;
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 100;
    // width: 1px;
  }

  #crumbs4 {
    display: inline-block;
    width: 40px;
    //   border: 1px solid red;
    height: 54px;
    overflow: hidden;
    position: absolute;
    left: 0px;
    //   z-index: 5;
    .crumbsj {
      width: 58px;
      height: 58px;
      // border: 1px solid #cccccc;
      position: absolute;
      right: 12px;
      top: -2px;
      //  z-index: 2000;
      // background-color: #cccccc;
      background-image: linear-gradient(to right, #72e6e4, #00abde);
      transform: rotate(45deg);
    }
  }
}
#crumbs {
  content: "";
  border-top: 27px solid transparent;
  border-bottom: 27px solid transparent;
  border-left: 27px solid #dfdfdf;
  position: absolute;
  right: 0px;
  top: 0;
  left: 0px;
  z-index: 1;
}
ul.tabUl li:nth-child(1) {
  #crumbs {
    border-top: 27px solid transparent;
    border-bottom: 27px solid transparent;
    border-left: 27px solid transparent;
  }
  #crumbs4 {
    display: none;
  }
}
ul.tabUl li:last-child {
  #crumbs2 {
    content: "";
    border-top: 27px solid transparent;
    border-bottom: 27px solid transparent;
    border-left: 27px solid transparent;
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 100;
    // width: 1px;
  }
  #crumbs3 {
    display: none;
  }
}
#crumbs3 {
  display: inline-block;
  width: 40px;
  //   border: 1px solid red;
  height: 54px;
  overflow: hidden;
  position: absolute;
  right: -42px;
  //   z-index: 5;
  .crumbsj {
    width: 58px;
    height: 58px;
    // border: 1px solid #cccccc;
    position: absolute;
    right: 12px;
    top: -2px;
    //  z-index: 2000;
    background-color: #cccccc;
    transform: rotate(45deg);
  }
}
</style>