smart-admin/rc-busness/components/tabs.vue

<template>
 <div class="crumbs" v-if="showTab">
	<el-breadcrumb separator-class="el-icon-arrow-right">
		<el-breadcrumb-item to="/" >{{ this.homepageName }}</el-breadcrumb-item>
		
		<el-breadcrumb-item :to=item.path   v-for="(item, index) in crumbs"
		:key="index">{{ item.title }}</el-breadcrumb-item>
	</el-breadcrumb>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
	props:["crumbs"],
	name:"crumbs",
    data() {
		return {
			homepageName:'首页'
		};
	},
	created(){
		if(this.showTab != false)
			this.showTab=true;
	},
	watch: {
	},
	mounted() {
	},

	methods: {
		...mapMutations(["changemessage",'selectMenu'])
	}
};
</script>

<style lang="less" scoped>
.crumbs{
  width: 93%;
  margin: 0 auto;
  display: flex;
  height: 40px;
  align-items: center;
  margin-top: 70px;
}
.tags-scroll-content {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 43px;
  z-index: 0;
  overflow: hidden;
  // padding: 0 66px 0 21px;
}
.tabs {
   user-select: none;
  z-index: 20;
  width: 100%;

  height: 43px;
  top: 60px;
  height: 42px;
  background: white;
  .tag {
    display: inline-block;
    height: 43px;
    // position: absolute;
    padding-right: 40px;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .tags-scroll-content > i {
    height: 40px;
    line-height: 40px;
    background: white;
    cursor: pointer;
    z-index: 1;
    font-size: 16px;
  }
  .el-icon-arrow-left {
    position: absolute;
    left: 0;
    width: 21px;
    box-shadow: 0px 1px 8px 0px rgba(70, 70, 70, 0.32);
  }
  .el-icon-arrow-right {
    position: absolute;
    right: 40px;
    width: 21px;
  }
  .close {
    position: absolute;
    right: 0;
    top: 0;
    color: black;
    background: white;
    height: 40px;
    padding-left: 15px;
    line-height: 40px;
    width: 40px;
    border-left: 1px solid #f1f1f1 !important;
    font-size: 16px;
    cursor: pointer;
  }
 .el-tag--dark {
    background: white;
    em {
      display: inline-block;
      vertical-align: middle;
      height: 5px;
      margin-right: 7px;
      width: 5px;
      border-radius: 50%;
      background-color: #85ef47 !important;
      box-shadow: 0 0 7px #b7eb8f;
    }
  }
 .el-tag--dark {
    color: #323233 !important;
    .el-icon-close {
      color: black !important;
    }
  }
 .el-tag {
      .el-icon-close {
        font-size: 16px;
        &:hover {
          color: red !important;
          background: white !important;
        }
        display: inline-block;
      
    }
    // width: 140px;
    em {
      display: inline-block;
      vertical-align: middle;
      height: 5px;
      margin-right: 7px;
      width: 5px;
      border-radius: 50%;
      background-color: white;
    }
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    padding: 0;
    color: #969799;
    font-size: 13px;
    float: left;
    border-radius: 0;
    border: 0;
    > span {
      display: inline-block;
      vertical-align: middle;
    }
    i {
      display: inline-block;
      vertical-align: middle;
      top: 0px;
      
    }
    .el-tag__close {
      right: 0px;
      color: #777777;
      &:hover {
        color: white;
      }
    }
    .el-xie{
      list-style: none;
      font-style: normal;
      margin: 0 8px;
    }
  }
}
</style>