<!--
 * @Description: 顶部广告图和面包屑
 * @Author: 空白格
 * @Date: 2022-08-11 13:44:08
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-11 13:49:12
 * @FilePath: \veterans_client_web\src\components\BannerBreadcrumb\index.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="banner-breadcrumb">
    <!-- 广告图 -->
    <div class="banner-breadcrumb-header">
      <div class="banner-breadcrumb-header-title">{{ title }}</div>
    </div>
    <!-- 面包屑 -->
    <div class="banner-breadcrumb-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BannerBreadcrumb',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.banner-breadcrumb {
  &-header {
    width: 100%;
    height: 104px;
    line-height: 104px;
    background-image: url("./../../assets/images/policy-advice-bg.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &-title {
      width: 70%;
      min-width: 600px;
      margin: 0 auto;
      text-align: right;
      color: #416050;
      font-size: 30px;
    }
  }
  &-breadcrumb {
    background-color: #fff;
    :deep(.el-breadcrumb) {
      width: 70%;
      height: 64px;
      line-height: 64px;
      min-width: 600px;
      margin: 0 auto;
      font-size: 20px;
    }
    :deep(.el-breadcrumb__inner.is-link) {
      color: #7e7e7e;
      font-weight: normal;
    }
    :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
      color: #ff0000;
    }
  }
}
</style>
