<template>
  <div class="resource-head">
    <div class="head-title">{{ title }}</div>
    <div class="breadcrumb">
      <span class="breadcrumb-label">当前位置：</span>
      <div class="breadcrumb-nav">
        <span class="breadcrumb-item">{{ title }}</span>
        <span class="separator">/</span>
        <span class="breadcrumb-item">{{ categoryName }}</span>
        <span class="separator" v-if="showArticleMode">/</span>
        <span class="breadcrumb-item active" v-if="showArticleMode">正文</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title?: string;
  categoryName?: string;
  showArticleMode?: boolean;
}

withDefaults(defineProps<Props>(), {
  title: '',
  categoryName: '',
  showArticleMode: false
});
</script>

<style lang="scss" scoped>
.resource-head {
  width: 100%;
  height: 250px;
  background: url('@/assets/imgs/resource-head-bg.jpg') center/cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.head-title {
  font-family: 'MiSans VF', 'PingFang SC';
  font-weight: 630;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  text-align: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  height: 24px;
}

.breadcrumb-label {
  font-family: 'PingFang SC';
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #F1F1F1;
  margin-right: 4px;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-item {
  font-family: 'PingFang SC';
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #FFFFFF;
  
  &.active {
    color: #FFFFFF;
  }
}

.separator {
  font-family: 'PingFang SC';
  font-size: 14px;
  color: #C9CDD4;
}
</style>

