<template>
  <div class="breadcrumb">
    <el-icon class="icon">
      <Location />
    </el-icon>
    <span class="address">当前所在位置：</span>
    <el-breadcrumb separator="/" :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadcrumb" :key="item.path">{{
      item.meta.title }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script setup lang="ts" name="breadcrumb">
import { useRouter } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
let router = useRouter();
let breadcrumb = router.currentRoute.value.matched;
</script>
<style scoped lang="less">
.breadcrumb {
  width: 100%;
  overflow: hidden;
  padding: 30px 20px 10px 20px;

  .icon {
    float: left;
    color: #4CC8F5;
    font-size: 18px;
    margin-right: 10px;
  }

  .address {
    float: left;
    font-size: 14px;
    color: #333333;
    line-height: 14px;
    margin-right: 10px;
  }

  ::v-deep(.el-breadcrumb) {
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        font-size: 14px;
        color: #333333;
        line-height: 14px;
        margin-right: 10px;
        font-weight: normal;
        margin-right: 0;
      }
    }

    .el-breadcrumb__item:last-child {
      color: #F22727;

      .el-breadcrumb__inner {
        color: #F22727;
      }
    }
  }
}
</style>