91 lines
1.7 KiB
Vue
91 lines
1.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="resource-head">
|
|||
|
|
<div class="head-title">资源中心</div>
|
|||
|
|
<div class="breadcrumb">
|
|||
|
|
<span class="breadcrumb-label">当前位置：</span>
|
|||
|
|
<div class="breadcrumb-nav">
|
|||
|
|
<span class="breadcrumb-item">资源中心</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 {
|
|||
|
|
categoryName?: string;
|
|||
|
|
showArticleMode?: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
withDefaults(defineProps<Props>(), {
|
|||
|
|
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>
|
|||
|
|
|